Develop Reference

Is it possible to add an image to a cell Table in Ant Design Tables?

I am trying to create a column that in his entries will include a small picture and a name.
How can I do so using Ant Design's table?
https://ant.design/components/table/
I can't seem to find anything related in the docs or the examples.

There is a mistake in the accepted answer , here how you do it
{
title: "Image",
dataIndex: "ImageURL", // this is the value that is parsed from the DB / server side
render: theImageURL => <img alt={theImageURL} src={theImageURL} /> // 'theImageURL' is the variable you must declare in order the render the URL
}
You need to declare theImageURL and then use it with the alt and src.

If you were using the table in a similar way as to the examples shown in their docs.(Using a datasource array)
You could do something like this
const columns = [
{
title: '',
dataIndex: 'image_URL_here',
render: () => <img src={`image_URL_here`} />
}
]

{
title: 'Image',
dataIndex: 'avatar',
width: 50,
maxWidth: 50,
render: (t, r) => <img src={`${r.avatar}`} />
},
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

How to apply button().trigger() outside DOM on angular datatables (l-lin) in AngularJS

I have created a table like below with dtInstance:
<table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumns" dt-instance="dtInstance" class="row-border hover">
</table>
In controller I defined dtOptions and dtColumns:
$scope.dtInstance = {};
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withDOM('frtip')
.withButtons([
{
extend: "excelHtml5",
className: 'btn btn-success buttons-excel',
filename: "List",
title: "List",
text: "Export",
exportOptions: {
columns: ':visible'
},
//CharSet: "utf8",
exportData: { decodeEntities: true }
}
My question is I want to create a button outside the dt table and trigger the .withButtons export button when ng-click
I would also like to hide the .withButtons generated inside the table.
Got this error
TypeError: Cannot read property 'button' of undefined
when I use below code
<button ng-click="dtInstance.DataTable.button('.buttons-excel').trigger()">Download EXCEL</button>
Thanks

Try with initializing dtInstance variable with null instead of {}:
$scope.dtInstance = null;
Keep everything else same.
Update:
Check if you've imported all the plugins required. Follow below example I've created to make sure:
Plunker example

Get selected value of Kendo grid on another View

So yesterday I started learning javascript and web development for a project at work. We are using a MVC pattern and I am having issues figuring out exactly how the javascript classes work with the views. Any help on this will be appreciated. Like I said, my knowledge is very limited. I do, however, know C# and WPF (MVVM) so maybe some of that knowledge will help me here.
We use Kendo controls. Some of the javascript for our kendo grid is below.
grid.js:
function onChange(e) {
//get currently selected dataItem
var grid = e.sender;
var selectedRow = grid.select();
var dataItem = grid.dataItem(selectedRow);
var y = $.ajax({
url: "/api/ServiceOrderData/" + dataItem.id,
type: 'GET',
dataType: 'json'
});
}
$("#serviceOrderList").kendoGrid({
groupable: true,
scrollable: true,
change: onChange,
sortable: true,
selectable: "row",
resizable: true,
pageable: true,
height: 420,
columns: [
{ field: 'PriorityCodeName', title: ' ', width: 50 },
{ field: 'ServiceOrderNumber', title: 'SO#' },
{ field: 'ServiceOrderTypeName', title: 'Type' },
{ field: 'ScheduledDate', title: 'Scheduled Date' },
{ field: 'StreetNumber', title: 'ST#', width: '11%' },
{ field: 'StreetName', title: 'Street Name' },
{ field: 'City', title: 'City' },
{ field: 'State', title: 'ST.' },
{ field: 'IsClaimed', title: 'Claimed'}
],
dataSource: serviceOrderListDataSource
});
I am wanting to be able to use the value from the onChange function:
var dataItem = grid.dataItem(selectedRow);
in the following view.
ESRIMapView.cshtml:
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'sidebar', gutters:false"
style="width:100%; height:100%;">
<div id="leftPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'left'">
<br>
<textarea type="text" id="address" />*THIS IS WHERE I WILL USE dataItem! dataItem.StreetNumber (syntax?) to be exact</textArea>
<br>
<button id="locate" data-dojo-type="dijit/form/Button">Locate</button>
</div>
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
</div>
</div>
</body>
Right now my ESRIMapView is loaded when the user clicks on a button on the index.cshtml screen which contains the grid that I am trying to get the value from.
<li>#Html.ActionLink("Map", "ESRIMapView", "Home", null, new { #class = "k-button" })</li>
This is my "Home" controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Services.Description;
using Alliance.MFS.Data.Client.Models;
using Alliance.MFS.Data.Local.Repositories;
namespace AllianceMobileWeb.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your app description page.";
return View();
}
public ActionResult ServiceOrderMaintenance()
{
ViewBag.Message = "Your contact page.";
return View();
}
public ActionResult ESRIMapView()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
}
I realize this is probably a very elementary question, but any help would be appreciate. And please be as detailed as possible with your responses :)

Since you create your link before returning the (initial) view to the user, you need a bit of trickery to change it. I recommend the following: set an id on your a element and change its href attribute; on your controller, set a parameter corresponding to the street number and pre-fill the view:
Controller:
public ActionResult ESRIMapView(string streetNumber)
{
ViewBag.Message = "Your contact page.";
ViewBag.StreetNumber = streetNumber;
return View();
}
View containing the li (note the Id on the a element):
<li>#Html.ActionLink("Map", "ESRIMapView", "Home", null, new { #class = "k-button", id="myMapaction" })</li>
View containing the textarea (ESRIMapView ):
<textarea type="text" id="address" />#ViewBag.StreetNumber</textArea>
grid.js:
function onChange(e) {
//get currently selected dataItem
var grid = e.sender;
var selectedRow = grid.select();
var dataItem = grid.dataItem(selectedRow);
//change the link
var actionElem = $("#myMapaction");
var url = actionElem.attr("href");
if (url.indexOf("=") === -1) { //first time selecting a row
url += "?streetNumber=" + dataItem.StreetNumber;
} else {
url = url.substring(0, url.lastIndexOf("=") +1) + dataItem.StreetNumber;
}
actionElem.attr("href", url);
//change the link
var y = $.ajax({
url: "/api/ServiceOrderData/" + dataItem.id,
type: 'GET',
dataType: 'json'
});
}
This script simply adds the street number parameter in the query string. When the user selects a row for the first time, the streetNumber parameter is not present in the query string. After the first time, the parameter is there and we must change only the value.
Please note that this solution has its limitations: it does not work if you have other parameters in the query string (the logic for adding/editing the parameter must be changed).

populate Listview with array of strings

I have created a jsbin at http://jsbin.com/ifimadOw/11/edit to illustrate.
I have this listview object:
<ul id="marketplace-categories-listview" data-bind="source: results"></ul>
And I have this dataset:
dsCats = new kendo.data.DataSource({
transport: {
read: {
url: myUrl,
data: {
key: myKey
}
}
}
});
$("#marketplace-categories-listview").kendoMobileListView({
dataSource: dsCats,
template: $("#marketplace-product-template").text()
});
The data returned from the API looks something like this:
{"count": 3, "results": ["Acupuncture Therapy","Automobiles","Lawn Care"]}
And here is my template:
<script type="text/x-kendo-tmpl" id="marketplace-categories-template">
<li data-bind="text: this"></li>
</script>
Because my data doesn't have named elements, I can't use something like "#:category#" in the template. I have also tried data-bind (as above), but so far nothing works. Surely there is a way to do this.

Simply use data (which is the name of the context variable passed to the template function) in your template:
$("#category-listview").kendoMobileListView({
dataSource: dsCats,
template: "#= data #"
});
(updated JSBin)

Knockout: Select in simpleGrid example

I am using the knockout simple grid found here:
http://knockoutjs.com/examples/grid.html
I want to be able to add a select into the grid, which has a data-bind attribute assigned to an object array in my vm.
So I have added another column from the example:
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Item Name", rowText: "name" },
{ headerText: "Sales Count", rowText: "sales" },
{ headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } },
*{ headerText: "Select", rowText: function (item) { return "<select data-bind=\"options:items, optionsText: 'name', optionsValue: 'name'\"></select>" } }*
],
pageSize: 4
});
And changed the text attribute to html within the control:
<td data-bind=\"*html*: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] \"></td>\
The Selects appear, but not populated with data from my object array.
JSFiddle found here:
http://jsfiddle.net/vwj2p/1/
(I have pasted in the code from the simple grid above as I made a change to the simplegrid code).

{ headerText: "Select", rowText: function (item) { return "<select data-bind=\"options:$root.items, optionsText: 'name', optionsValue: 'name'\"></select>" } }
I'm assuming each item object doesn't have an items property and you're trying to reference the viewModel's items array? If so, change your code to the above.
This still won't work, however. If you look at the html binding documentation, you'll see that it's only going to spit out static html. During the binding process when this is all getting rendered, KO doesn't applyBindings to the generated HTML.
I tried playing around with the code a bit to try and do ko.applyBindingsToDescendants(viewModel, {td element}), where {td element} is a reference to the parent element with the html binding on it, when the items observableArray updated but that didn't seem to do anything.
Bottom line, I don't think you're going to get this to work without doing a lot of plumbing work to the simpleGrid. It is just a simple grid, after all.