Unplanned
Last Updated: 04 May 2022 14:54 by ADMIN
Lee
Created on: 18 Apr 2022 22:32
Category: Grid
Type: Bug Report
0
setOptions in a grid does not work

I am trying to change the menu option for a column from false to true and others from true to false when a user selects an item from a dropdown. This isn't working. I'm using getOptions(), changing the menu setting in each column, and then setOptions(options) to set it.

Here is a dojo showing an example. In the example, firstName and lastName are initially hidden. I simulate a user choosing last name from some sort of selector (like a dropdown box). The code should then hide both name columns and unhide the lastName column. Instead it hides both name columns.

It seems to have something to do with setting any of the name columns to hidden on initialization. If I remove this from the column settings on initialization though it only works once and when I choose a different option from the dropdown (dropdown is simulated in the dojo so you can't try this but trust me) it breaks.

<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.511/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.511/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.511/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.511/js/kendo.all.min.js"></script></head>
<body>
  <div id="myGrid"></div>
  
  <script>
    let tableRows = [
      {
        ID: 1,
        FirstName: "John",
        LastName: "Smith",
        Age: 21
      },
      {
        ID: 2,
        FirstName: "Jenny",
        LastName: "Jones",
        Age: 18
      },
      {
        ID: 3,
        FirstName: "Greg",
        LastName: "Adams",
        Age: 23
      }
    ];
    
   let tableColumns = [
              {
                title: "Employee ID",
                field: "ID",
                width: 100,
                locked: true,
                menu: false
              },
            {
                title: "First Name",
                field: "FirstName",
                width: 150,
              hidden: true,
              attributes: { "class": "name" },
                
            },
            {
                title: "Last Name",
                field: "LastName",
              hidden: true,
                width: 150,
                attributes: { "class": "name", "data-position": "last name" },
                
            },
            {
                title: "Age",
                field: "Age",
                width: 100
            }
        ];

            var grid = $(`#myGrid`).kendoGrid({
            dataSource: {
                data: tableRows,
                schema: {
                    model: {
                        id: "ID",
                        fields: { ID: {type: "number"}}
                    }
                }
            },
            dataBound: function (e) {
                if (e.sender.dataSource.view().length == 0) {
                    var colspan = e.sender.thead.find("th").length;
                    //insert empty row with colspan equal to the table header th count
                    var emptyRow = "<tr><td colspan='" + colspan + "'></td></tr>";
                    e.sender.tbody.html(emptyRow);
                    e.sender.table.width(800);
                }
     
            },
            columns: tableColumns,
              columnMenu: true,
            sortable: true,
            pageable: false
        }).data("kendoGrid");
    
    let options = grid.getOptions();
    let columns = grid.columns;
    let nameColumns = $(".name");
    let lastNameColumn = $("[data-position='last name']");
    let lockedColumnCount = 0;
    for (var i = 0; i < columns.length; i++) {
        if (columns[i].locked) {
            lockedColumnCount++;
        }
    }
    $.each(nameColumns, function (index, element) {
        let elementIndex = $(element).index() + lockedColumnCount;
        //kendoGrids[tableId].showColumn(elementIndex);
        options.columns[elementIndex].menu = false;
        options.columns[elementIndex].hidden = true;
    });
    
    // Let's pretend Last Name was chosen from a select box part of name to show.
    $.each(lastNameColumn, function (index, element) {
        let elementIndex = $(element).index() + lockedColumnCount;
                        options.columns[elementIndex].menu = true;
                        options.columns[elementIndex].hidden = false;
                        //kendoGrids[tableId].showColumn(elementIndex);
                    });
                    
    console.log(options);
                    
                    grid.options = options;
                    grid.setOptions(options);
    
  </script>
  
</body>
</html>

4 comments
Lee
Posted on: 27 Apr 2022 12:22
Thank you. I look forward to the fix 
ADMIN
Angel Petrov
Posted on: 27 Apr 2022 11:05

Hi,

It seems that this behavior is a bug. I have already logged it into our system and you can monitor our progress on the matter from here. As a token of gratittude for reporting this to us I have updated your account points.

For now as a workaround you can follow the approach that my colleague Georgi has provided.

Regards,
Angel Petrov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Lee
Posted on: 25 Apr 2022 21:44
Thank you. This sent me in the right direction. I used option 2. My grid was a bit more complicated than the example I provided. It had triple deep nested column headings which was not fun to work with but what the client wanted (Person > Name > First Name | Last Name) 
ADMIN
Georgi Denchev
Posted on: 21 Apr 2022 12:48

Hello, Lee,

Thank you for the provided information and Dojo sample.

The problem

The attributes of the columns are set once when the Grid is initialized for the first time. One of these attributes is style which has a display:none; value. Since this attribute is persisted(even when the hidden option is set to false) the column remains hidden.

The solution

Currently, there are two workarounds that you can choose from:

  1. Utilize the showColumn and hideColumn methods to update the visibility of the columns(this will also update the attributes) and then update the attributes of the saved options. You may use this approach in case you have other custom styles in the style attribute:
            let elementIndex = $(element).index() + lockedColumnCount;
            options.columns[elementIndex].menu = true;
            options.columns[elementIndex].hidden = false;
            
            // Show the column(this will update the attributes automatically)
            grid.showColumn(elementIndex);
            // Override the attributes in the options with the newly updated ones.
            options.columns[elementIndex].attributes = grid.columns[elementIndex].attributes;
            options.columns[elementIndex].headerAttributes = grid.columns[elementIndex].headerAttributes;
            options.columns[elementIndex].footerAttributes = grid.columns[elementIndex].footerAttributes;
  2. Remove the style attributes from the columns that you wish to show:
            delete options.columns[elementIndex].attributes['style'];
            delete options.columns[elementIndex].footerAttributes['style'];
            delete options.columns[elementIndex].headerAttributes['style'];

Additional information

The Devs are currently out of office and will be back next week at the earliest. Unfortunately, I cannot confirm whether this is a bug or a limitation, without consulting with the Dev team first. I'll mark this thread for an additional answer so we can provide you with more information later on.

Runnable Dojo

Example with the first solution:

https://dojo.telerik.com/@gdenchev/ALoRIqeN 

Example with the second solution:

https://dojo.telerik.com/@gdenchev/ORaQIVeH 

Best Regards,
Georgi Denchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.