Grid get a list of columns externally

[Vik Mann]

Hi,

I'm evaluating the Kendo UI Web and my customer would like to emulate the functionality as shown in the demo here http://demos.kendoui.com/web/grid/index.html

We like to have a settings button which displays a list of available columns in the grid and show/hide them from there instead of the column menu on each column. I understand the functionality in the demo is a image mockup, however, my client would like this functionality after seeing this.

1. How can I reference the grid externally or through a header 'settings' option and manipulate its columns visibility?
2. Also, is there a way to save these settings per user and pre-load the grid with their choices of columns?

Thank you!
-Vik M

[Alexander Valchev]

Hi Vik,

Thank you for your interest in KendoUI. Regarding your questions:

1. How can I reference the grid externally or through a header 'settings' option and manipulate its columns visibility?
   
   You can use showColumn and hideColumn methods. In order to reference the grid you have to get its client side object:
   

   var grid = $("#grid").data("kendoGrid");
   grid.columns; //list of columns

   
   
   
2. Also, is there a way to save these settings per user and pre-load the grid with their choices of columns?
   
   Kendo Grid does not provide such functionality out of the box, however it is possible to be achieved with custom code. I recommend you to check this code library as it demonstrates the basic approach of preserving Grid settings.

I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team

[Vik Mann]

Hi Alex,

Thanks for the code snippet. When I attempt to run it, I see the grid is undefined error message in the console.

What am I missing here? I'm initiating the grid on client side as follows.

 $("#grid").kendoGrid({
                                                dataSource: {
                                                    data: adddata,
                                                    pageSize: 1000
                                                },
                                                toolbar: kendo.template($("#template").html()),
                                                group: {
                                                    field: "Status",
                                                    dir: "asc"
                                                },
                                                change: onChange,
                                                reorderable: true,
                                                selectable: "single row",
                                                columnMenu: true,
                                                editable: "popup",
                                                groupable: false,
                                                resizable: true,
                                                sortable: true,
                                                filterable: {
                                                    extra: false,
                                                    operators: {
                                                        string: {
                                                            startswith: "Starts with",
                                                            eq: "Is equal to",
                                                            neq: "Is not equal to"
                                                        }
                                                    }
                                                },                                               
                                                columns: [
                                                                      //col definitions here
                                                ]
                                            });
                                        }
                                    });

[Alexander Valchev]

Hello Vik,

I am not sure where exactly the problem comes from. Here is a working example based on the provided snippet: http://jsbin.com/oputiy/2/edit

Can you reproduce the issue in my sample and send me back link so I can check what is going wrong?
Thank you in advance.

Regards,
Alexander Valchev
the Telerik team