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

Grid get a list of columns externally

3 Answers 2421 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Vik Mann
Top achievements
Rank 1
Vik Mann asked on 05 Feb 2013, 11:45 PM
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


3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 07 Feb 2013, 10:05 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Vik Mann
Top achievements
Rank 1
answered on 08 Feb 2013, 04:01 PM
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
                                                ]
                                            });
                                        }
                                    });

0
Alexander Valchev
Telerik team
answered on 12 Feb 2013, 09:10 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Vik Mann
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Vik Mann
Top achievements
Rank 1
Share this question
or