Conditionally Hidden Column Causes Display Issues

[Remington]

I have a column that I want hidden conditionally based on user input. As I have my grid set up now, the column starts off hidden and everything displays properly, however if the user switches to make the hidden column visible, kendo grid just messes up its display:

01.function displayKendo(response){
02.    var paymentMethod = $("#NS-pymntSchedule-payment-selector").val();
03.    var hiddenInd = false;
04.    if(paymentMethod === "getAll"){
05.        hiddenInd = true;
06.    }
07.    var grid = $("#NSpaymentKendo").kendoGrid({
08.        columns:[
09.            {headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},width:45,
10.                },
11.                hidden:hiddenInd,
12.            },
13.            {title:"Data 1",field:"field1",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},
14.            {title:"Data 2",field:"field2",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},
15.            {title:"Data 3",field:"field3",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},
16.            {title:"Data 4",field:"field4",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},
17.            {title:"Data 5",field:"field5",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},
18.            {title:"Data 6",field:"field6",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},
19.            {title:"Data 7",field:"field7",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},
20.            {title:"Data 8",field:"field8",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},
21.            {title:"Data 9",field:"field9",headerAttributes:{"class": "",style: "text-align:left;font-weight:700;font-style:italic;",},},
22.        ],
23.        dataSource:{
24.            data:response,
25.            pageSize:10,
26.            schema: {
27.                   model: {
28.                       fields:{},
29.                    }
30.            },
31.        },
32.        pageable: {
33.            pageSizes: true,
34.            buttonCount: 5
35.        },
36.        columnMenu: true,
37.        allowCopy: true,
38.        sortable: {
39.            mode: "multiple",
40.            allowUnsort: true,
41.            showIndexes: true
42.        },
43.        reorderable: true,
44.        resizable: true,
45.        noRecords: {
46.            template: "<br> No data available. <br>"
47.        },
48.        filterable: true,
49.        groupable: true,
50.        pageable: {
51.            refresh: false,
52.            pageSizes: false,
53.            buttonCount: 5
54.        },
55.        editable:false,
56.    })
57.
58.    grid.data("kendoGrid").refresh();
59.}

 

Attached are screenshots showing before and after

 

Thanks, in advance.

 

[Viktor Tachev]

Hi Remington,

I examined the code and it seems that the curly braces in the columns definition do not match. There is one extra for the first column. Try defining the first column like below and see how the behavior changes:

{
    headerAttributes: {
        "class": "",
        style: "text-align:left;font-weight:700;font-style:italic;",
    },
    width: 45,
    hidden: hiddenInd,
},

Regards,
Viktor Tachev
Progress Telerik

[Remington]

Viktor,

I see the syntax error you are talking about, and I thought I had edited my post better, but that is not present in the actual code and my error with display persists.

[Viktor Tachev]

Hello Remington,

Would you send us a dojo sample where the behavior is replicated? This will enable us to examine the behavior locally and look for its cause.


Regards,
Viktor Tachev
Progress Telerik

[Remington]

Here is the link to the DOJO:https://dojo.telerik.com/UFAfIKEB

What it appears to be doing is adding the header to the back of the header list, while adding the actual column to the front.
I was having difficulty altering the dojo and the columns aren't showing as well as I'd like but hopefully you can see the problem in action

[Remington]

[quote]Remington said:Here is the link to the DOJO:https://dojo.telerik.com/UFAfIKEB

What it appears to be doing is adding the header to the back of the header list, while adding the actual column to the front.
I was having difficulty altering the dojo and the columns aren't showing as well as I'd like but hopefully you can see the problem in action[/quote]

Updated Link:https://dojo.telerik.com/UFAfIKEB/5

This one has a width on the first column to show more clearly how its not working as intended

[Viktor Tachev]

Hi Remington,

Thank you for the runnable sample. 

In the sample the Grid is initialized over already existing instance of a Kendo Grid. With this approach there can be unexpected side effects observed. If you would like to create the Grid dynamically when a value in a dropdown is changed I would recommend destroying the existing Grid first and then creating a new one. The article below describes destroying widgets in more detail:

• https://docs.telerik.com/kendo-ui/intro/widget-basics/destroy

I also updated the sample to illustrate the approach:

• https://dojo.telerik.com/UFAfIKEB/11

On a side note, I would suggest a slightly different approach that does not include recreating the entire widget. Call the hideColumn and showColumn methods for the Grid when the value in the dropdown is changed. This approach would have better performance as the entire widget is not recreated each time the users select a different option. Like in the example below:

• https://dojo.telerik.com/IkeLaCET

Give the different approaches a try and let me know which one works better for you.


Regards,
Viktor Tachev
Progress Telerik

[Remington]

Viktor,

 

Thank you for you're help, resetting the grid worked the way I needed it to.