How to add a new row to a Kendo grid with a unique custom styling

Question

How to add a new row to a Kendo grid with a unique custom styling

I am looking for a way to insert new data into a Kendo grid, but I want the added row to have a custom class so that I can style it with a different background color. How can I achieve this? I have searched through all the documentation but couldn't find any relevant information.

    var dataSource = $('#grid').data('kendoGrid').dataSource;
    dataSource.insert(0, {
        "name":"ABC",
        "age": 99
    });

javascript jquery css kendo-ui kendo-grid

Answer 1

Answer №1

If you want to apply a new class to each row added dynamically, you can utilize the .addClass() method. However, this means that every time you paginate or add more rows, you will need to reapply the class.

To streamline this process, you can maintain a global array containing the UUIDs of all newly added rows and then reapply the class during the dataBound event.

For a demonstration, check out the 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 2

If you want to apply a new class to each row added dynamically, you can utilize the .addClass() method. However, this means that every time you paginate or add more rows, you will need to reapply the class.

To streamline this process, you can maintain a global array containing the UUIDs of all newly added rows and then reapply the class during the dataBound event.

For a demonstration, check out the 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

Answer №2

To find the newly added row, you can search for it using its UID and then apply a class to highlight the row.

If you are interested in learning about an alternative solution, check out this blog post: "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>

Another Approach

For an alternate method 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; /* Highlight row yellow */
}
.highlighted-row.k-alt {
  background: #DD0; /* Apply different styling to highlighted row */
}

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

To find the newly added row, you can search for it using its UID and then apply a class to highlight the row.

If you are interested in learning about an alternative solution, check out this blog post: "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>

Another Approach

For an alternate method 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; /* Highlight row yellow */
}
.highlighted-row.k-alt {
  background: #DD0; /* Apply different styling to highlighted row */
}

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

Answer №3

If you want to implement a databound function for the grid, you can use the following code:

    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>

You can test this implementation by using it like this.

Answer 6

If you want to implement a databound function for the grid, you can use the following code:

    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>

You can test this implementation by using it like this.

How to add a new row to a Kendo grid with a unique custom styling

Answer №1

Answer №2

Another Approach

Answer №3

Similar questions

Is there a more efficient method for replacing all attributes on cloned elements?

Google Extension PHP Plugin

Waiting for a function to finish within a nested function in JavaScript

Using jQuery to retrieve the TD value

Can you provide guidance on how to successfully transfer an array of JSON objects from the script section of an HTML file to the JavaScript

What is the best way to dynamically insert an object into a field name in react-final-form?

handling null data in a jquery ajax callback

receiving a pair of components instead of just one

AngularJS - development of a service entity

Utilize the JavaScript .send function to pass an array

What are the best techniques for using jQuery to manipulate an HTML form that contains nested elements?

Personalized validation messages with jQuery

Setting the AJAX URL in CakePHP 1.2 for multiple routes

Removing the root component in ReactJS can be done on specific pages by implementing

Exploring how to locate an item in an array using its id with Underscore

My goal is to display the products on the dashboard that have a quantity lower than 10. This information is linked to Firestore. What steps can I take to enhance this functionality?

There seems to be an error with cheeriojs regarding the initialization of exports.load

Unlock real-time alerts with the power of JavaScript and PHP!

Looking for a logo placed in the center with a top fixed navigation using Bootstrap

Having trouble with changing the class using Jquery click function