Edit this page

Make Grid Cells Temporarily Blink Depending on DataItem Property


Product Grid for ProgressĀ® Kendo UIĀ®
Operating System All
Browser All
Browser Version All


How can I make some of the Grid cells blink by changing their background color if one of its properties matches certain criteria?


  1. Use the Kendo UI templates to check if a Boolean property is set to true and assign HTML classes to the relevant elements.
  2. Subscribe to the dataBound event to manipulate the colors at the desired time intervals.
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>

<div id="example">
  <div id="grid"></div>

    $(document).ready(function() {
        dataSource: {
          data: products,
          schema: {
            model: {
              fields: {
                ProductName: {
                  type: "string"
                UnitPrice: {
                  type: "number"
                UnitsInStock: {
                  type: "number"
                Discontinued: {
                  type: "boolean"
          pageSize: 20
        height: 550,
        scrollable: true,
        sortable: true,
        filterable: true,
        pageable: {
          input: true,
          numeric: false
        columns: [{
            field: "ProductName",
            template: "# if (!Discontinued) { # #=ProductName# # } else {# <span class='highlight'> #=ProductName# </span> #}#"
            field: "UnitPrice",
            title: "Unit Price",
            format: "{0:c}",
            width: "130px"
            field: "UnitsInStock",
            title: "Units In Stock",
            width: "130px"
            field: "Discontinued",
            width: "130px",
            hidden: true
        dataBound: function() {
          $(".highlight").parents('td').css("background-color", "yellow");

          setTimeout(function() {
            $(".highlight").parents('td').css("background-color", "");
          }, 3000);

          //re-reading the datasource to check how the flashing would look like
          setTimeout(function() {
          }, 5000);

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article