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

Reorderable Grid with Row Template ColumnMenu issue

Environment

Product Progress® Kendo UI® Grid for jQuery
Product Version Created with 2018.1.221 version

Description

The column reordering does not work well with column menu when using custom row template. Can you please advise needs to be done to make column reordering work when using custom row template and column menu?

Solution

  1. To continue using a row template, you could bind a style within the template to make it show and hide as well as the columns' visibility changes
    <script id="template" type="text/x-kendo-template">
        # var columns = $("\\#grid").data("kendoGrid").columns #    
        <tr data-uid="#= uid #">
            <td style="display:#= columns[0].hidden ? 'none': '' #"> #= data[columns[0].field] #</td>
            <td style="display:#= columns[1].hidden ? 'none': '' #"> #= data[columns[1].field] # </td>
            <td style="display:#= columns[2].hidden ? 'none': '' #"> #= data[columns[2].field] # </td>
        </tr>
    </script>
    <div id="grid" style="width: 70%; margin: 0 auto;"></div>
    <script src="https://demos.telerik.com/kendo-ui/content/shared/js/people.js"></script>
    <script id="template" type="text/x-kendo-template">
    # var columns = $("\\#grid").data("kendoGrid").columns #     
    <tr data-uid="#= uid #">
        <td style="display:#= columns[0].hidden ? 'none': '' #"> #= data[columns[0].field] #</td>
        <td style="display:#= columns[1].hidden ? 'none': '' #"> #= data[columns[1].field] # </td>
        <td style="display:#= columns[2].hidden ? 'none': '' #"> #= data[columns[2].field] # </td>
      </tr>
    </script>
    <script>
      var ds = new kendo.data.DataSource({
        data: createRandomData(50),
        schema: {
          model: {
            fields: {
              FirstName: { type: "string" },
              LastName: { type: "string" },
              City: { type: "string" },
              Title: { type: "string" },
              Age: { type: "number" }
            }
          }
        },
        pageSize: 10
      });

      $(document).ready(function() {
        $("#grid").kendoGrid({
          dataSource: ds,
          columnMenu:true,
          height: 450,
          sortable: true,
          reorderable: true,
          resizable: true,
          pageable: true,
          rowTemplate: kendo.template($("#template").html()),
          columns: ["FirstName", "Title", "Age"]
        });
      });
    </script>
In this article