Develop Reference

Kendo grid insert new row with custom class

This is how I insert new data to kendo grid, however i want my added row have a custom class, so I can style my new added row with different background color. How can I achieve this ? I searching all the doc can't find any related
var dataSource = $('#grid').data('kendoGrid').dataSource;
dataSource.insert(0, {
"name":"ABC",
"age": 99
});

In order to add a new class to each newly row you can use .addClass(). But, every time you move to the next/prev page or add other rows you need to add again the class....
In order to achieve that you can save in a global array a list of all newly added row uuid and on dataBound event reapply the class.
Fiddle here
var newUUID = [];
$("#grid").kendoGrid({
navigatable: true,
filterable: true,
pageable: {
pageSize: 5,
alwaysVisible: false,
pageSizes: [5, 10, 20, 100]
},
dataBound: function(e) {
$.each(newUUID, function(idx, ele) {
if ($(ele).length != 0) {
$(ele).addClass('newRow');
}
})
}
});
$('#btn').on('click', function(e) {
var dataSource = $('#grid').data('kendoGrid').dataSource;
var x = dataSource.insert(0, {
"name":"ABC",
"age": 99
});
newUUID.push("[data-uid='" + x.uid + "']");
$("[data-uid='" + x.uid + "']").addClass('newRow');
})

You can look-up the newly added row by its UID and add the class to the row.
I explored the solution on this blog: "Simple Row Coloring in a KendoUI Grid"
const sampleData = getSampleData();
$(document).ready(() => {
$("#example-grid-wrapper").kendoGrid({
dataSource: {
data: sampleData.data,
schema: {
model: {
fields: sampleData.fields
}
}
},
columns: sampleData.columns
});
setTimeout(insertNewRecordAfterOneSecond, 1000);
});
function insertNewRecordAfterOneSecond() {
// Insert data
let dataGrid = $('#example-grid-wrapper').data('kendoGrid');
dataGrid.dataSource.insert(0, { id: 1, name: "Sam", location: "B", color: "blue", status: 0 });
// Re-scan table and lookup newly added row.
dataGrid = $('#example-grid-wrapper').data('kendoGrid');
let dataView = dataGrid.dataSource.view();
for (let i = 0; i < dataView.length; i++) {
if (dataView[i].id === 1) {
dataGrid.table.find("tr[data-uid='" + dataView[i].uid + "']").addClass("highlighted-row");
}
}
}
function getSampleData() {
return {
data : [
{ id: 2, name: "Grant", location: "A", color: "green", status: 1 },
{ id: 3, name: "Vaughan", location: "B", color: "red", status: 0 },
{ id: 4, name: "David", location: "A", color: "orange", status: 1 }
],
fields : {
id: { type: "number" },
name: { type: "string" },
location: { type: "string" },
color: { type: "string" }
},
columns : [
{ field: "id", title: "ID", width: "10%" },
{ field: "name", title: "Name", width: "30%" },
{ field: "location", title: "Location", width: "30%" },
{ field: "color", title: "Color", width: "20%" },
{ field: "status", title: "Status", width: "10%" }
]
};
}
.highlighted-row {
background: #FF0; /* Higlight row yellow */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.2.619/styles/kendo.blueopal.min.css" />
<div id="example-grid-wrapper">
<div id="example-grid"></div>
</div>
Alternative
As suggested by gaetanoM.
const sampleData = getSampleData();
var insertedUidList = [];
$(document).ready(() => {
$("#example-grid").kendoGrid({
dataSource: {
data: sampleData.data,
schema: {
model: {
fields: sampleData.fields
}
}
},
columns: sampleData.columns,
// Suggested by gaetanoM
dataBound: function(e) {
$.each(insertedUidList, function(idx, uid) {
// Re-apply class to existing rows.
$(`tr[data-uid="${uid}"]`).addClass('highlighted-row');
});
}
});
// Insert two rows, one second apart.
insertRowsWithDelay([
{ id: 0, name: "Joseph", location: "A", color: "yellow", status: 1 },
{ id: 1, name: "Sam", location: "B", color: "blue", status: 0 },
], 1000)
});
function insertRowsWithDelay(data, delayBetween) {
if (data == null || data.length === 0) return;
setTimeout(() => {
insertNewRecord(data.pop());
insertRowsWithDelay(data, delayBetween);
}, 1000);
}
function insertNewRecord(record) {
record = $('#example-grid').data('kendoGrid').dataSource.insert(0, record);
insertedUidList.push(record.uid);
$(`[data-uid="${record.uid}"]`).addClass('highlighted-row');
}
function getSampleData() {
return {
data : [
{ id: 2, name: "Grant", location: "A", color: "green", status: 1 },
{ id: 3, name: "Vaughan", location: "B", color: "red", status: 0 },
{ id: 4, name: "David", location: "A", color: "orange", status: 1 }
],
fields : {
id: { type: "number" },
name: { type: "string" },
location: { type: "string" },
color: { type: "string" }
},
columns : [
{ field: "id", title: "ID", width: "10%" },
{ field: "name", title: "Name", width: "30%" },
{ field: "location", title: "Location", width: "30%" },
{ field: "color", title: "Color", width: "20%" },
{ field: "status", title: "Status", width: "10%" }
]
};
}
.highlighted-row {
background: #FF0; /* Higlight row yellow */
}
.highlighted-row.k-alt {
background: #DD0; /* Higlight row yellow */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.2.619/styles/kendo.blueopal.min.css" />
<div id="example-grid"></div>

You can try to create a databound function for the grid and then try this inside the function
function onDataBound(e) {
var dataSource = $("#GridName").data("kendoGrid").dataSource;
var data = dataSource.data();
$.each(data, function (index, rowItem) {
if (data.length > 0) {
var rows = e.sender.tbody.children();
var row = $(rows[index]);
if (data[index].name == "ABC" ) {
row.addClass("NameColor");
}
}
});
}
<style>
.NameColor {
background-color: black;
}
</style>
Like this you can try..

How to print raw HTML code in a column in jsGrid?

I have a HTML data for a column and I want to print it without interpreting the HTML. He is my code
$(function() {
$("#grid").jsGrid({
width: "100%",
height: "400px",
filtering: true,
editing: true,
sorting: true,
paging: true,
data: friends,
fields: [{
name: "Name",
type: "text",
width: 100
},
{
name: "Age",
type: "number",
width: 50
},
{
name: "test",
type: "string",
autoencode: true,
width: 50
},
countries,
{
name: "Cool",
type: "checkbox",
width: 40,
title: "Is Cool",
sorting: false
},
{
type: "control"
}
]
})
})
var friends = [{
Name: "Alan Turing",
Age: 41,
Country: 3,
Cool: true,
test: "<h1>test</h1>",
}, ];
var countries = {
name: "Country",
type: "select",
items: [{
Name: "",
Id: 0
},
{
Name: "United States",
Id: 1
},
],
valueField: "Id",
textField: "Name"
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="grid"></div>
Here the test column displays the html. I want to print test without interpreting. Help would be appreciated.

I've added the cellRenderer and returned an html escaped string. You can change the itemTemplate method too if you please, I've left it as is. You can also use $(document.createElement("div")).text(item).html() instead of the String.replace logic.
I couldn't find anything in the documentation.
$(function() {
$("#grid").jsGrid({
width: "100%",
height: "400px",
filtering: true,
editing: true,
sorting: true,
paging: true,
data: friends,
fields: [{
name: "Name",
type: "text",
width: 100
},
{
name: "Age",
type: "number",
width: 50
},
{
name: "test",
type: "string",
width: 50,
itemTemplate: function(value, item) {
return "<td>" + value + "</td>";
},
cellRenderer: function(item, value) {
//return "<td>" + $(document.createElement("div")).text(item).html() + "</td>";
return "<td>" + String(item).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"') + "</td>";
}
},
countries,
{
name: "Cool",
type: "checkbox",
width: 40,
title: "Is Cool",
sorting: false
},
{
type: "control"
}
]
})
})
var friends = [{
Name: "Alan Turing",
Age: 41,
Country: 3,
Cool: true,
test: "<h1>test</h1>",
}, ];
var countries = {
name: "Country",
type: "select",
items: [{
Name: "",
Id: 0
},
{
Name: "United States",
Id: 1
},
],
valueField: "Id",
textField: "Name"
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="grid"></div>

How to add a row to kendo ui grid (to its schema) dynamically?

Is it possible to add a column to the kendo ui grid by clicking on a buutton? I have tried to add it but this column doesn't initialased in the grid and I have no any data from it. How to add a col to schema dynamically? Mabye I should somehow reinitialize it?
I want to add empty column only with the header and its name and column.field name, than to edit it in other rows. I never know beforehand what columns it will be and how much. They should be dynamic. And after adding the col new row should be with it.
The most problem is to add field to grid.dataSource.schema.model.fields.
let gridProducts = $('#gridProducts').kendoGrid({
dataSource: new kendo.data.DataSource({
data: e.event.products,
autoSync: true,
schema: {
model: {
id: "productID",
fields: {
productName: {
defaultValue: productDefault.products[0].productName,
validation: {
required: true
},
type: "string"
},
productCategory: {
defaultValue: productDefault.products[0].productCategory
},
productDiscount: {
defaultValue: productDefault.products[0].productDiscount,
type: "array"
}
}
}
}
}),
dataType: "object",
pageable: false,
toolbar: ["create"],
columns: [{
field: "productID",
title: "id"
},
{
field: "productName",
title: "Name"
},
{
field: "productCategory",
title: "Category",
template: "1",
editor: productCategoryDropDownEditor,
},
{
field: "productDiscount",
title: "Discount"
},
{
command: "destroy",
title: "x",
width: 29
},
],
editable: true,
sortable: true,
resizable: true
});
$("#addPrice").click(function() {
addPriceDialog.data("kendoDialog").open();
});
addPriceDialog.kendoDialog({
width: "450px",
title: "Add price",
closable: true,
modal: true,
actions: [{
text: 'Cancel',
action: function() {
return false;
},
},
{
text: 'Ок',
primary: true,
action: function() {
let name = $("#priceName ").val();
let type = $("#priceType").val();
let val = $("#priceValue").val();
let price = $("#price").val();
let grid = $("#gridProduct").data("kendoGrid");
let columns = grid.columns;
let newCol = {
title: "Price -" + name,
field: "price" + type + [columns.length],
format: "",
};
$("#gridTicket").data("kendoGrid").columns[(columns.length)] = newCol;
return true;
},
}
]
});

You can use setOptions to redefine the columns of the grid.
See the snippet for a demo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<button onclick="addColumn()">Add Column</button>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
function addColumn() {
grid.setOptions({
columns: grid.columns.concat([
{ field: "test" }
])
});
}
</script>
</body>
</html>

Select an option by default in Kendogrid dropdownlist

There is a dropdownlist DiscountType in this kendo grid. There are two options in that dropdownlist which are Amount and Percentage. I want one of these options as selected by default while create new entry.
view
#{
Layout = Request.IsAjaxRequest() ? null :
"~/Views/Shared/_AdminLayout.cshtml";
}
<!--Kendo Scripts and Style Start------------------------------------------- -------------------------------------->
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.metro.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/angular.min.js">
</script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/jszip.min.js">
</script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js">
</script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.aspnetmvc.min.js">
</script>
<!--Kendo Scripts and Style End-->
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
height: 400,
columns: [
{ field: "Coup_Code", title: "Coupon Code"},
{ field: "Coup_Discription", title: "Coupon Discription" },
{ field: "DiscountType", title: "Discount Type", editor: PlaceDropDownEditor1 },
{ field: "DiscountAmount", title: "Discount Amount" },
{field: "ExpiredOn",format: "{0: yyyy-MM-dd}"},
{command: [ "edit" , "destroy"], width: 180 }
],
toolbar: ["create"],
dataSource: {
type: "aspnetmvc-ajax",
transport: {
read: {
url: "/Coupon/Coupon_Read"
},
create: {
url: "/Coupon/Coupon_Create"
},
update: {
url: "/Coupon/Coupon_Update"
},
destroy: {
url: "/Coupon/Coupon_Destroy"
}
},
schema: {
data: "Data",
model: {
id: "CoupID",
fields: {
CoupID: { type: "number", editable: false, nullable: false },
Coup_Description: { type: "string" },
ExpiredOn: { type: "date", validation: { required: true, required: { message: "required" } } },
DiscountType: { type: "string", validation: { required: true, required: { message: "required" } } },
DiscountAmount: { type: "number", validation: { required: true, required: { message: "required" }, min: 0 } },
} }
},
serverPaging: true,
serverSorting: true,
},
editable: "inline",
scrollable: true
})
function PlaceDropDownEditor1(container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataTextField: "Text",
dataValueField: "Value",
dataSource: {
type: "json",
transport: {
read: "/Coupon/GetDicountType"
}
}
});
}
</script>
ActionResult GetDicountType
public ActionResult GetDicountType()
{
List<SelectListItem> listItems = new List<SelectListItem>();
listItems.Add(new SelectListItem
{
Text = "Percentage",
Value = "Percentage"
});
listItems.Add(new SelectListItem
{
Text = "Amount",
Value = "Amount",
Selected = true
});
return Json(listItems, JsonRequestBehavior.AllowGet);
}

You are missing the 'default' value directive in your model definition. Add something like:
defaultValue: { Value: "Percentage", Text: "Percentage"}
To the line:
DiscountType: { type: "string", validation: { required: true, required: { message: "required" } } },

Kendo grid refresh issue in mobile

I refresh the kendo grid for every 10 seconds, I used following code and I used the kendo.all.min.js
$(document).ready(function () {
loadData();
intervalManager(true, TableStatus, 10000);
});
var TableStatus = function () {
loadData();
}
var refreshorderplacedgrid;
function intervalManager(flag, animate, time) {
if (flag)
refreshorderplacedgrid = setInterval(animate, time);
else
clearInterval(refreshorderplacedgrid);
}
function loadData() {
var grid = $("#grid").kendoGrid({
dataSource: {
data: [
{ ID: '1001', FirstName: 'Alphy', LastName: 'LastName', category: 'A', Markable: true },
{ ID: '1002', FirstName: 'Betty', LastName: 'LastName', category: 'B', Markable: true}],
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" }
}
}
},
sort: {
field: "FirstName",
dir: "asc"
},
pageSize: 10
},
scrollable: true,
sortable: true,
selectable: true,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{ template: kendo.template($("#isCancel-template").html()) }
]
}).data("kendoGrid");
}
This code gives me the output like following screenshot in system chrome,
But in mobile [All devices]
It appends with the old grid, instead of rebinding like following screenshot
I dont know what is problem here, I have googled and used $("#grid").data("kendoGrid").refresh(); this code too. Nothing happend, Any help will be highly appreciable.
Thanks,
Guna

#gitsitgo 's comment, I changed the code as following way, for avoid the re initialization of the grid, and now its working fine.
var myDataSource = new kendo.data.DataSource({
data: [
{ ID: '1001', FirstName: 'Alphy', LastName: 'LastName', category: 'A', Markable: true },
{ ID: '1002', FirstName: 'Betty', LastName: 'LastName', category: 'B', Markable: true },
{ ID: '1003', FirstName: 'Betty', LastName: 'LastName', category: 'B', Markable: true}],
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" }
}
}
},
sort: {
field: "FirstName",
dir: "asc"
},
pageSize: 10
});
$(document).ready(function () {
initGrid();
loadData();
intervalManager(true, TableStatus, 10000);
});
var TableStatus = function () {
loadData();
}
var refreshorderplacedgrid;
function intervalManager(flag, animate, time) {
if (flag)
refreshorderplacedgrid = setInterval(animate, time);
else
clearInterval(refreshorderplacedgrid);
}
function loadData() {
$("#grid").data("kendoGrid").setDataSource(myDataSource);
$("#grid").data("kendoGrid").refresh();
}
function initGrid() {
var grid = $("#grid").kendoGrid({
dataSource: myDataSource,
scrollable: true,
sortable: true,
selectable: true,
columns: [
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
},
{ template: kendo.template($("#isCancel-template").html()) }
]
}).data("kendoGrid");
}
Thanks,
Guna