Kend Grid Custom column chooser

[Sampath]

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
})

[Dimiter Madjarov]

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

[Sampath]

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

[Dimiter Madjarov]

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