Kendo grid insert new row with custom class

Question

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
    });

Answer 1

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> 

Answer 2

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');
})

Answer 3

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..