New to Kendo UI for jQuery? Download free 30-day trial

Displaying Dynamic Image Count in Buttons within Kendo UI for jQuery Grid Rows

Environment

Product Kendo UI for jQuery Grid
Version 2024.4.1112

Description

I need to update the button label in each row of a Kendo UI for jQuery Grid to include the image count. The image count, displayed within a circle, should be dynamic for each row, varying according to the data item associated with the row.

This knowledge base article also answers the following questions:

  • How can I display a badge with a dynamic number on a button inside a Kendo UI for jQuery Grid?
  • What is the way to include dynamic content in button labels in a Kendo UI for jQuery Grid?
  • Can I use a badge to show dynamic data on buttons within a Kendo UI for jQuery Grid?

Solution

To achieve the dynamic display of an image count in a badge shape on buttons within the Kendo UI for jQuery Grid rows, you can utilize the Kendo UI for jQuery Button with a badge configuration. This approach involves customizing the dataBound event of the Grid to iterate through each row and update the button's badge text based on the data item's specific property.

The following example demonstrates how to dynamically update the button's label with an image count in a circle for each row:

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

      <script>
        $(document).ready(function () {
          var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
              dataSource = new kendo.data.DataSource({
                transport: {
                  read:  {
                    url: crudServiceBaseUrl + "/Products",
                    dataType: "jsonp"
                  },
                },
                pageSize: 20,
              });

          $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 550,
            columns: [
              "ProductName",
              { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
              { field: "Discontinued", width: 120 },
              { command: { 
                template: "<button class='button' type='button'>Units In Stock</button>"
              }, title: " ", width: "150px" }
            ],
            dataBound: function() {
              var grid = this;
              grid.table.find("tr").each(function () {
                var dataItem = grid.dataItem(this);

                $(this).find(".button").kendoButton({
                  badge: {
                    text: dataItem.UnitsInStock,
                    shape: "circle",
                  }
                });
              });
            }
          });
        });
      </script>

      <style type="text/css">
        .k-grid tbody tr {
          line-height: 28px;
        }
      </style>
    </div>

Ensure to replace UnitsInStock with the field name from your data source that contains the image count for each row.

See Also

In this article