Grid column menu - default columns

[Asmita]

http://demos.telerik.com/kendo-ui/grid/column-menu

Hello,

I have 10 columns(Also to be in column menu) that i need to get from the database, but by default show only 5 of them. 

How can I choose what columns i was to display by default in the grid and others I can hide for the moment unless user selects from column menu?

 

Thanks for the help!

[Patrick | Technical Support Engineer, Senior]

Hello Asmita,

To hide a column by default, set columns.hidden to true.  When you click on the column menu, you will see the column name unchecked.  

Here is a Kendo UI Dojo by Progress which illustrates this approach.

Hope this helps!

Regards,
Patrick
Telerik by Progress

 

 

[Asmita]

Thanks!!!

[Patrick | Technical Support Engineer, Senior]

Hello Asmita,

Glad to help, and that everything is working!

Regards,
Patrick
Telerik by Progress

 

 

[Bruno]

Hello,

The button to select the columns to be displayed is repeated in each header of the table. Is it possible to move it outside the table to have it only once and not 10 times for example .. ??

Thank you

[Patrick | Technical Support Engineer, Senior]

Hello Bruno,

Using the Kendo UI Grid's API,  you can take advantage of the hideColumn and showColumn methods.  These can be used in an external component outside of the Grid.  For example, I've created a Progress Kendo UI Dojo with a custom Kendo UI Menu that contains the columns from the Kendo UI Grid. 

<ul id="columnMenu" style="width: 100px; margin-bottom: 5px"></ul>

<script>     
    $("#columnMenu").kendoMenu({
       closeOnClick: false,
       dataTextField: "field",
       orientation: "vertical",
       select: onSelect
    });
    //...
   var grid = $("#grid").data("kendoGrid");

   var menu = $("#columnMenu").data("kendoMenu");
   menu.append({
       field: "Columns",
       items: grid.columns  //Grid columns
   });
   //...
</script>

When a user selects a column from the menu, the Kendo UI Menu's select event is fired. 

1. Make a  reference to the Grid.
2. Determine how many hidden columns are in the Grid to always keep one.
3. Based on the column's field, use the showColumn or hideColumn method.

        function onSelect(e){

          //reference the Grid
          var grid = $("#grid").data("kendoGrid");  

          //hold the number of columns
          var numOfColumns = grid.columns.length;  

          //loop through to find how many columns are hidden
          for (var i = 0; i < grid.columns.length; i++) {  
            if (grid.columns[i].hidden == true){
              numOfColumns--;
            }
          }

          //if the field matches the selected item, check if it is hidden or not.
          for (var i = 0; i < grid.columns.length; i++) {
            if(grid.columns[i].field == e.item.innerText){

              //Show the hidden column
              if (grid.columns[i].hidden == true){
                grid.showColumn(grid.columns[i].field);

                //it will hide as long as there is more than one column in the Grid
              } else if(numOfColumns != 1){
                grid.hideColumn(grid.columns[i].field);
              }
            }
          }
        }

Finally, you may want to remove the columns section from the Grid's columnMenu.  One way to do that is using the Kendo UI Grid's columnMenuInit event, and removing it using jQuery:

        function onColumnMenuInit(e){
          var item = e.container.find(".k-columns-item");
          item.prev(".k-separator").remove();
          item.remove();
        }

Hopefully, this can give you an idea of how you may want to implement your app.  

Regards,
Patrick
Progress Telerik

[Bruno]

Hello Patrick,

 

Thank you very much, that's exactly what I wanted.

 

Small additional question, is it possible to place a box which is checked if the column is displayed and on the contrary unchecked in the same example? An input like this, I need this if it's possible :

[Patrick | Technical Support Engineer, Senior]

Hello Bruno,

Currently, the Kendo UI Menu does not have built-in checkbox functionality.  However, I have created a feature request on your behalf asking for this functionality in future releases.

Checkbox Functionality

I'm glad the custom example helped in your scenario!

Regards,
Patrick
Progress Telerik

[Bruno]

Hello, thank you for your response.

 

Basically, when in each header we select the columns to display (what I wanted to remove) there was a checkbox system to display / not display. Isn't it possible to have the same thing?

[Tsvetomir]

Hi Bruno,

My name is Tsvetomir and I am temporarily covering for my colleague Patrick. 

At present, the Kendo UI Menu does not expose the functionality of showing checkboxes next to its items. I can see that Patrick has already logged an issue on your behalf. I suspect that the show/hide behavior that you refer to is actually the ColumnMenu. The two are actually two distinct widgets and the Menu is different from the ColumnMenu. Therefore, their functionalities are not completely interchangeable. 

Here is the live demo for the column menu:

https://demos.telerik.com/kendo-ui/grid/column-menu

Could you confirm that the behavior you are willing to achieve is the one depicted in the demo above?

 

Regards,
Tsvetomir
Progress Telerik

[Bruno]

Hi Tsvetomir,

 

Yes it's that : (screenshot)

 

I'm trying to add an if and else with hidden == true to do that but it doesn't work

[Tsvetomir]

Hi Bruno,

The Kendo UI Menu builds the items based on the HTML "li" elements and integrating checkbox elements directly inside those elements is not supported yet. As my colleague, Patrick has already opened an issue for the same. 

The only option is to add the checkboxes after the initialization and seed of the data inside the Kendo UI Menu. You could do so by adding the elements with the help of jQuery. 

$(".k-menu-group span.k-link").before("<input type='checkbox'>")

Have in mind that you would have to programmatically change the state of the checkbox elements. And depending on your scenario, you might have to attach the change event as well.

 

Regards,
Tsvetomir
Progress Telerik

[Bruno]

Hi Tsvetomir,

 

Is it possible to link these check boxes to the fact that if the column is displayed or not?

 

Thanks you !

[Patrick | Technical Support Engineer, Senior]

Hi Bruno,

Binding items to a Kendo UI Menu from Kendo UI Grid columns is not supported out of the box.  If you'd like to see this functionality using the built-in API, please include your interest in the comments within this feature request.  This will be seen by our developers, and it may be added in future releases with enough votes from the community.

However, here is one custom approach you can take to give the external Kendo UI Menu checkbox functionality based on the Kendo UI Grid column's hidden field:

1. Reference the Grid Columns.
   

           //reference grid
           var grid = $("#grid").data("kendoGrid");
           
           //reference columns
           var columnValues = grid.columns;
           

2. Create an array and loop through the grid columns hidden field. If it's not hidden, push the "checked" string.
   

           //Create array
           var checkedValues = [];
           
           //for each column, add checked if hidden is undefined
           $(columnValues).each(function(index){
   
           	if (this.hidden == true) {
             	checkedValues.push(" ");
             } else {
             	checkedValues.push("checked");
             }
           });    

3. Reference the Kendo UI Menu, append the first item, and reference it.
   

           //reference the Kendo UI Menu
           var menu = $("#columnMenu").data("kendoMenu");
           
           //create initial first item
           menu.append({text: "Columns"});
           
           //reference it through jQuery
           var firstItem = $("#columnMenu").children("li").eq(0);

4. For each of the Grid columns, append a new Kendo UI Menu Item with a checkbox element.  Include the array which will hold if the column will be checked initially or not.
   

           //for each column, append checkboxes with checked values based on hidden field
           $(columnValues).each(function(index){
             menu.append({ text: "<input type='checkbox' " + checkedValues[index] + " />"+ grid.columns[index].field, encoded: false }, firstItem);         
           });
   

5. Modify the Select event where if the item is shown, check the box.  Otherwise, uncheck it.  If it's the last item, keep the box checked:
   

           function onSelect(e){
   
             //reference checkbox
             var checkbox = $(e.item).find("input");
                      
             //reference the Grid
             var grid = $("#grid").data("kendoGrid");  
   
             //hold the number of columns
             var numOfColumns = grid.columns.length;  
   
             //loop through to find how many columns are hidden
             for (var i = 0; i < grid.columns.length; i++) {  
               if (grid.columns[i].hidden == true){
                 numOfColumns--;
               }
             }
   
             //if the field matches the selected item, check if it is hidden or not.
             for (var i = 0; i < grid.columns.length; i++) {
               if(grid.columns[i].field == e.item.innerText){
   
                 //Show the hidden column
                 if (grid.columns[i].hidden == true){
                   grid.showColumn(grid.columns[i].field);
                   
                   //check box
                   $(checkbox).prop("checked", true);
   
                   //it will hide as long as there is more than one column in the Grid
                 } else if(numOfColumns != 1){
                   grid.hideColumn(grid.columns[i].field);
                   
                   //uncheck box
                   $(checkbox).prop("checked", false);
                 } else {
                   
                   //check box if it's the last item
             	    $(checkbox).prop("checked", true);
                 }
               }
             }
           }

Please take a look at this Progress Kendo UI Dojo which demonstrates the custom approach above.    

Regards,
Patrick
Progress Telerik