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

Kend Grid Custom column chooser

3 Answers 163 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sampath
Top achievements
Rank 1
Sampath asked on 20 Feb 2014, 02:54 PM
Hi Team,

 We need to implment Custom column chooser.

Example: Column chooser would be a popup where user will select the columns which are required

not able to understand how to start.

Technology : MVC 3
                      Kendo Grid
this is the way we are using right now:

Html.Kendo().Grid(Model) // Bind the grid to the Model property of the view
        .Name("Grid")
        .Columns(columns =>
{
columns.Bound(p => p.ProductID); //Create a column bound to the "ProductID" property
columns.Bound(p => p.ProductName); //Create a column bound to the "ProductName" property
columns.Bound(p => p.UnitPrice); //Create a column bound to the "UnitPrice" property
columns.Bound(p => p.UnitsInStock);//Create a column bound to the "UnitsInStock" property
})

3 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 21 Feb 2014, 09:49 AM
Hi Sampath,


I am not sure that I exactly understand the current scenario. Nevertheless if you would like to dynamically determine which columns should be shown, you could use the hideColumn and showColumn methods of the Grid's API, which accept the index of the column or the field that it is bound to as a parameter, in order to display the desired ones.

I hope this information was helpful for you.

Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sampath
Top achievements
Rank 1
answered on 21 Feb 2014, 10:08 AM
Thanks for your reply.

I attached one UI design document.
- Step 1: Click on the button(column chooser)
-Step 2: column chooser popup will open
Step 3: select some column and cl ick submit
Step 4: selected column should be displayed inthe Grid
0
Dimiter Madjarov
Telerik team
answered on 21 Feb 2014, 01:31 PM
Hello Sampath,


If the columns are initially available in the Grid ( you could use the Hidden() method to hide some of them through the configuration) you could use the approach that I mentioned in my previous post to update the currently visible. Here is a sample approach, which assumes that you have retrieved a collection with the columns that should be visible.
E.g.
var grid = $("#Grid").data("kendoGrid");
var columns = grid.columns;
var visibleColumns = ["UnitPrice", "ProductName"];
 
for (var i = 0; i < columns.length; i++) {
    var current = columns[i].field;
    if (visibleColumns.indexOf(current) >= 0) {
        grid.showColumn(current);
    } else {
        grid.hideColumn(current);
    }
}

Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Sampath
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Sampath
Top achievements
Rank 1
Share this question
or