This is a migrated thread and some comments may be shown as answers.

Conditionally Hidden Column Causes Display Issues

7 Answers 371 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Remington
Top achievements
Rank 1
Remington asked on 14 Feb 2019, 08:08 PM

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.

 

7 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 18 Feb 2019, 12:15 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Remington
Top achievements
Rank 1
answered on 18 Feb 2019, 02:30 PM

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.

0
Viktor Tachev
Telerik team
answered on 20 Feb 2019, 10:24 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Remington
Top achievements
Rank 1
answered on 20 Feb 2019, 10:14 PM
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
0
Remington
Top achievements
Rank 1
answered on 20 Feb 2019, 10:18 PM

[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

0
Accepted
Viktor Tachev
Telerik team
answered on 22 Feb 2019, 12:09 PM
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:


I also updated the sample to illustrate the approach:


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:


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


Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Remington
Top achievements
Rank 1
answered on 26 Feb 2019, 03:23 PM

Viktor,

 

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

Tags
Grid
Asked by
Remington
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Remington
Top achievements
Rank 1
Share this question
or