I have the following code:
$("#grid").kendoGrid({
dataSource: {
type: "odata",
data: scannedResult.targetList,
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "proccess",
title: "Contact Name",
width: 200
}, {
field: "status",
title: "status"
}, {
field: "comment",
title: "comment"
}]
});
creating a kendo simple grid. for detail here is my plunker.
now the field status can be 1 of 3 values: passed, failed, skipped. I would like that the statuscolumn will show an icon instead of the value. While the code for that is rather simple, i do not know how to make the column a custom column.
Is there a way to make a column a custom column?
You should use a template definition. Something like:
Define the template.
<script id="status-template" type="text/kendo-templ">
# if (data.status === 1) { #
<span>Status1</span>
# } else if (data.status === 2) { #
<span>Status 2</span>
# } else { #
<span>Status 3</span>
# } #
</script>
Reference the template from the column definition
columns: [{
field: "proccess",
title: "Contact Name",
width: 200
}, {
field: "status",
title: "status",
template: $("#status-template").html()
}, {
field: "comment",
title: "comment"
}]
See it running here: http://jsfiddle.net/OnaBai/5x8wt0f7/
Obviously, the template can emit any HTML code, it might be links, images...
This has already been answered, but I want to show how I'd write this if people are confused when linking to jQuery selector.
// Custom Template that takes in entire Row object
function statusTemplate(dataRow) {
return `<span class="label label-${dataRow.status.toLowerCase()}">${dataRow.status}</span>`;
}
// Column definitions for grid
columns: [{
field: "proccess",
title: "Contact Name",
width: 200
}, {
field: "status",
title: "status",
template: statusTemplate
}, {
field: "comment",
title: "comment"
}]
http://jsfiddle.net/dentedio/hdokxme9/1/
Related
I have few tabs in which each of tab is having data table.
I'm trying to use tabulator and based on active tab I'm trying to set columns.
I used setColumns method but I'm getting an error:
Cannot read property 'forEach' of undefined
Please find jsfiddle link with my code in it:
var table = new Tabulator("#example-table", {
layout: "fitColumns",
//data : tabledata,
autoColumns: true,
});
if (this.activeTabName == "Role Card") {
let columns: [{
title: "Name",
field: "name",
sorter: "string",
width: 200
},
{
title: "Progress",
field: "progress",
sorter: "number",
formatter: "progress"
},
{
title: "Gender",
field: "gender",
sorter: "string"
},
{
title: "Rating",
field: "rating",
formatter: "star",
align: "center",
width: 100
},
{
title: "Favourite Color",
field: "col",
sorter: "string"
},
]
table.setColumns(columns)
}
https://jsfiddle.net/qc9r8t4p/
Please help me out in achieving this.
There is an error in your code that is resulting in the columns variable being undefined when you pass it into the setColumns function
where you assign the value to the variable
let columns: [{
you have a colon instead of an equals sign, it should be:
let columns = [{
I have a Kendo UI Grid created in javascript. I have a defalut grouping, then the user can select other groupings. Ineed help with a couple things:
1.I would like to make a custom group header so it includes a count of the children rows.
On mouseover of the Group Header I need to change the related marker on a Google Maps instance. (The group contains the lat and long of the client.
function loadGrid(dataItem) {
$("#grid").kendoGrid({
dataSource: {
dataType: "json",
transport: {
read: {
url: serviceUrl",
dataType: "json",
},
},
schema: {
data: "result.results",
},
group: {
field: "siteName", field: "siteName",
},
},
dataBound: onDataBound,
pageSize: 20,
height: 550,
filterable: true,
groupable: true,
sortable: true,
pageable: true,
collapse: true,
columns: [
{
field: "dirId",
title: "Dir Id",
hidden: true
},
{
field: "dirName",
Title: "Dir Name",
hidden: true
},
{
field: "siteId",
title: "Site Id",
hidden: true
},
{
field: "siteName",
title: "Site Name",
//hidden: true
},
{
field: "appTypeRefId",
title: "App Type Ref Id",
hidden: true
},
{
field: "appInstName",
title: "App Instance Name",
},
{
field: "appTypeName",
title: "App Type",
},
{
field: "unitId",
title: "Unit Id",
hidden: true
},
{
field: "unitName",
title: "Unit Name"
},
{
field: "controlSystemId",
title: "Control System Id",
hidden: true
},
{
field: "controlSystemName",
title: "Control System Name"
},
{
field: "longitude",
title: "Longitude",
hidden: true
},
{
field: "latitude",
title: "Latitude",
hidden: true
},
],
})
}
Thanks a ton!
Ron
I need to have a button in the header bar of a kendo grid. This button needs to be able to call a function (GetFoo) in the grid object.
UPDATE: Sorry for any confusion, but I only want one button on the table header row with the text "First Name", "Last Name" etc... So we'd have
[th]|First Name | Last Name | Title | button (calls getFoo())
[td]|Joe |Schmo |None |
[td]|Joe | Bob |None |
[End update]
Here is some modified code from kendo ui
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
getFoo:function(){
alert('bar');
},
pageable: true,
height: 550,
columns: [
{ field: "FirstName", title: "First Name", width: "140px" },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" },
{ field: '',title: "<button onClick='getFoo()' value='foo'>sdf</button>" }]
}).data("kendoGrid");
});
Any help is appreciated!
You could use the dataBound event and insert the button like this:
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
getFoo:function(){
alert('bar');
},
pageable: true,
height: 550,
dataBound: grid_dataBound,
columns: [
{ field: "FirstName", title: "First Name", width: "140px" },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" },
{ field: '',title: "<button onClick='getFoo()' value='foo'>sdf</button>" }]
}).data("kendoGrid");
});
function grid_dataBound(e) {
var grid = this;
var lastHeaderCell = grid.thead.find("th").last();
var button = $("<button value='foo'>sdf</button>");
lastHeaderCell.html(button);
$(button).click(function(){
grid.options.getFoo();
});
}
There are several ways to add custom buttons in a Kendo grid. One would be to add it as a toolbar item. You can read more about the implementation here Kendo custom command button in toolbars
.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='customCommand()' href='#'></span>Cutom Command</a>"))
Next would be to have one inline per row. You can read how to implement that one here Kendo grid custom commands
But the code you want to pay attention to:
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [
{ field: "FirstName", title: "First Name", width: "140px" },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" },
{ command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }]
}).data("kendoGrid");
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
});
More so this line:
{ command: { text: "View Details", click: showDetails }
You can also use templates to customize Kendo grids. Check out this link to read more: Toolbar using templates
Hope this helps, and happy coding!
I usually use a Kendo template to achieve this.
in your JavaScript change that line to:
{ field: " " title: " ", template: kendo.template($("#button-template").html()) }
And in your HTML markup add:
<script id="button-template" type="text/x-kendo-template">
<button type="button" onClick='getFoo()' value='foo'>
Button Action
</button>
</script>
Or, here is how you can add a single button to the header of your grid:
Create your kendo template:
<script type="text/x-kendo-template" id="GridToolbar">
<div class="toolbar">
<button type="button" onClick='getFoo()' value='foo'>Button Action</button>
</div>
</script>
Set this property on your kendo grid in JS:
toolbar: kendo.template($("#GridToolbar").html()),
i think you can use headerTemplate for this
check this working example
dojo example
$("#grid").kendoGrid({
columns: [{
field: "name",
}, {
field: "FirstName",
title: "First Name",
width: "140px"
}, {
field: "LastName",
title: "Last Name",
width: "140px"
}, {
field: "Title",
headerTemplate: 'Title <button id="foo" onclick="foo()">foo</button>'
}],
dataSource: [{
name: "Jane Doe"
}, {
name: "John Doe"
}]});
I am trying to add a kendo checkbox column. I have done this successfully in another grid. However, when I tried to do the same thing in another grid, I am getting a "IsSimple is undefined" error, where IsSimple is a simple boolean model field.
Model for my kendo data source:
schema: {
data: function (data) { //specify the array that contains the data
console.log("DATA RETURN TEST");
console.log(data);
return data || [];
},
model: {
id: "Id",
fields: {
Id: { editable: false,
nullable: false,
type: "number"
},
DesignatorName: { type: "string" },
TXFreq: { type: "string" },
RXFreq: { type: "string" },
IsSpecial: { type: "bool" },
IsCommand: { type: "bool" },
}
}
Here is my column definition for my kendoGrid.
$("#DesignatorFreqGrid").kendoGrid({
dataSource: DesignatorDS,
columns: [
{ field: "DesignatorName", title: "Frequency", format: "{0:c}", width: "120px" },
{ field: "TXFreq", editor: TXFreqEditor, title: "TX Frequency", format: "{0:c}", width: "120px" },
{ field: "RXFreq", editor: TXFreqEditor, title: "RX Frequency", format: "{0:c}", width: "120px" },
{ field: "IsSpecial", template: '<input type="checkbox" #= IsSpecial ? checked="checked" : "" # disabled="disabled" ></input>', title: "Is Special", format: "{0:c}", width: "120px" },
{ field: "IsCommand", template: '<input type="checkbox" #= IsCommand ? checked="checked" : "" # disabled="disabled" ></input>', title: "Is Command", format: "{0:c}", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
toolbar: ["create"],
editable: "inline",
pageable: true
});
Here is my JSON object:
"other fields........DesignatorName: "11"
EQUIPMENT: ObjectId: 2
IsCommand: true
IsSpecial: true
RXFreq: "55"
TXFreq: "22"
As you can see, IsSpecial is defined. The binding works when I load data into the grid. The checkboxes are indeed checked. But if I try to add a new record with the "Add New Record" button in the grid, I will get the error "Uncaught ReferenceError: IsSpecial is not defined".
If I change the binding to this.IsSpecial, I don't get the error anymore, and can add a new row to my database, but then the binding won't work and the boxes aren't checked when loading the grid,
It seems like it should work, and I do not know where else to look. Any ideas? Thanks.
You need to use boolean, instead of bool.
IsSpecial: { type: "boolean" },
IsCommand: { type: "boolean" }
Let's say we have a grid like in this Telerik example:
http://dojo.telerik.com/UkiH/2
Default info message for grid filter is: 'Show items with value that:'
Is there a way to change that message for only one specific column in grid, and others to remain with default messages?
Something like:
columns: [{
field: "OrderID",
title: "Order ID",
width: 120
}, {
field: "ShipCountry",
title: "Ship Country"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipAddress",
filterable: true,
messages: {
info: 'Show items custom message:'
}
}]
You should define messages inside filterable. Something as follows:
{
field: "ShipAddress",
filterable: {
messages: {
info: 'Show items custom message:'
}
}
}