Column Menu with Large Number of Columns

[James]

I have a grid that has a large number of columns (50).  Although the user will likely only select a few columns to view, he/she needs the ability to select from any of the 50 columns. Unfortunately, on most displays, the kendo grid column menu will be greater than the display. Is there a way to make the column menu scrollable or set sub-menus (that contain groups of columns) within the column menu?

[James]

Does anyone have thoughts on how to handle a large number of columns in the columns menu? Thanks in advance for your help.

[James]

Does anyone have any thoughts/experience on how to best handle a large number of columns in the column menu? I would really appreciate any help.

[James]

I found that the initial creation of the kendo Grid component  is slow to build with ~50 columns with column menus. This is even true when initially hiding all the columns. So, I think I may need to build an external control (i.e. a group of check boxes above the grid) to control hiding and showing columns.

I would still prefer to be able to use the kendo Grid's Column Menu feature, but it sounds like (from the lack of response) no one knows how to handle the view such that all columns in the column menu can be viewed and checked by the user (i.e. the column menu does not scroll).

If you do know how to handle (the view and performance issues), I would really appreciate your feedback. In the interim, I thought I would give my approach above (and the issues I ran across) in case anyone else has a similar need to allow a user to select show/hide from a large number of columns.

[Ifdev02]

I am stuck on the same problem, is 50+ columns slow down so much?
What if you don't bind data to columns that were hiddened? Only bind when visible?

I am trying to change column template on runtime but without luck. - either it not show at all or show as empty header.

You have example code show/hide column programatically? This way i can disable the column menu and do it from my own ui.
But if it slow down too much, I may have to leave kendo grid.

[James]

Ifdev02, thanks for your response.

My grid is actually created without data. It is only populated with data after a search form has been submitted by the user. The performance issue is noticed when creating the grid (not when populating with data).

Specifically, I create the grid as follows:

var grid = $("#grid").kendoGrid({

    dataSource: {

        type: "json",

        schema: {

            model: myModel

    }},

    height: 600,

    sortable: true,

    resizable: true,

    filterable: true,

    //columnMenu: true,

     

    columns: [

        {

            field: "field1",

            title: "Field 1",

        },

        // another 32 columns (not shown for brevity)

    ]

});

and this code takes ~1.12 seconds (note that no grid data is being loaded). Not great, but I can live with that. When I uncomment the line "columnMenu: true," it takes ~7.20 seconds (!) and that will rightfully be unacceptable to the users.

I'm hoping someone knows how to overcome the performance and view problems, but if not my plan is to use

grid.hideColumn("someColumn");
 
with a group of checkboxes (one per column) external to the grid.

[Ifdev02]

James,
I am able to change column template on the fly by .empty() dom object first then recreate column template - this way i can show only 5-7 grid without having to add all 50+ columns.

I dont have to touch my data, it can still contain 50 fields.

So far it shows that if you bind a column, and your data do not contain such data field your grid will failed to build.

Thanks for your show/hide code.

[James]

I think that I understand what you are doing. I also do not show all my columns when initially displaying my grid. I only show 6 columns initially. All the other columns have hidden set to true. I should have noted that in my code snippet. Here's a bit more of the code:

var grid = $("#grid").kendoGrid({

    dataSource: {

        type: "json",

        schema: {

            model: myModel

    }},

    height: 600,

    sortable: true,

    resizable: true,

    filterable: true,

    //columnMenu: true,

      

    columns: [

        {

            field: "field1",

            title: "Field 1"

        },

        {

            field: "field1",

            title: "Field 1",

            hidden: true

        },

        // another 31 columns with all but 5 have hidden: true (code not shown for brevity)

    ]

});

All my fields will be present in the data. That being said, I'm curious how you are able to build columns on the fly. That is, can you add/remove columns (not just hide/show) on an existing grid? If so, could you please share the code? Thanks.

[Ifdev02]

when you want to show new set of columns then
$("#grid").empty();
then initialized again your grid 
            $("#grid").kendoGrid({
//your new columns here...
});

Hope i answered your question.

[James]

Thanks... I was actually thinking you knew of a way to add/remove columns to existing kendo grid rather than completely emptying the grid container and then rebuilding the grid.

From another post, I can now overcome the display issues of a large number of columns in the column menu. However, I still don't know how I can get around the performance issues. You can see the performance issues via http://jsbin.com/ebenay/1/edit. Notice how long it takes to initially render the grid and the lag in selecting columns to show/hide in the column menu. Anyone have thoughts on how to overcome the performance issues?