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

Grid column menu - default columns

13 Answers 1208 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Asmita
Top achievements
Rank 1
Asmita asked on 19 Sep 2016, 07:21 PM

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!

13 Answers, 1 is accepted

Sort by
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 20 Sep 2016, 08:18 PM
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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Asmita
Top achievements
Rank 1
answered on 28 Sep 2016, 07:40 PM
Thanks!!!
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 29 Sep 2016, 01:50 PM
Hello Asmita,

Glad to help, and that everything is working!

Regards,
Patrick
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Bruno
Top achievements
Rank 1
answered on 28 Jan 2020, 10:13 AM

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

0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 29 Jan 2020, 05:32 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Bruno
Top achievements
Rank 1
answered on 30 Jan 2020, 11:16 AM

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 :

0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 31 Jan 2020, 07:49 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Bruno
Top achievements
Rank 1
answered on 03 Feb 2020, 09:00 AM

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?

0
Tsvetomir
Telerik team
answered on 04 Feb 2020, 02:52 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Bruno
Top achievements
Rank 1
answered on 04 Feb 2020, 02:57 PM

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

0
Tsvetomir
Telerik team
answered on 06 Feb 2020, 11:05 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Bruno
Top achievements
Rank 1
answered on 17 Feb 2020, 10:11 AM

Hi Tsvetomir,

 

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

 

Thanks you !

0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 17 Feb 2020, 08:11 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Asmita
Top achievements
Rank 1
Answers by
Patrick | Technical Support Engineer, Senior
Telerik team
Asmita
Top achievements
Rank 1
Bruno
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or