We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Column chooser in Toolbar

Thread ID:

Created:

Updated:

Platform:

Replies:

127146 Oct 28,2016 11:09 AM Nov 3,2016 12:11 AM ASP.NET MVC 6
loading
Tags: Grid
indrani Gajjarapu
Asked On October 28, 2016 11:09 AM

Hi,

I want to implement the column chooser in a dialog inside toolbar.

Could you please guide me through the code for this requirement.

Also, i want to customize the data shown in the column chooser as i dont want header text data to be shown in it.

Thanks in advance.

Mohammed Farook J [Syncfusion]
Replied On October 31, 2016 06:12 AM

Hi indrani, 

Thanks for contacting Syncfusion Supports. 


We have validated your requirement and we can created “customize column chooser” . please find the code example. 



    @*custom column chooser element*@ 
<input id="cutomChooser"  /> 
    @(Html.EJ().Grid<object>("FlatGrid") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
            //.ShowColumnChooser() 
 
         .AllowPaging()    /*Paging Enabled*/ 
 
              .ClientSideEvents(eve => eve.DataBound("DataBound")) 
        .Columns(col => 
        { 
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
            col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add(); 
            col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add(); 
 
 
        })) 
 



We can render custom column chooser through “DataBound” event of Grid. Please find the code example. 



    <script> 
        $(function(){ 
            customData = [{value:"OrderID", text:"Audi4"}, {value:"CustomerID",text:"Audi5"},{value:"EmployeeID",text:"Audi6"}] 
         
        }) 
        function DataBound(args) { 
            $('.e-gridtoolbar').append($('#cutomChooser')) 
            $('#cutomChooser').ejDropDownList({ 
                width: "20%", 
                showCheckbox: true, 
                dataSource: customData, 
                change: "drpValueChange", 
                checkAll: true, 
                multiSelectMode: ej.MultiSelectMode.Delimiter 
            }) 
            $("#cutomChooser_wrapper").addClass('gird-cutomChooser') 
        } 




We have bind the dropdown dataSource as text and value pair combination .  

 “text”    =  it  is used for displayed purpose. 
   “value” =  to manipulate dropdown functions based on select/change value. 

So we have displayed the customize text for custom column chooser.  Please UG for dataBound event of Grid. 



Please use the following  css style for append the custom chooser in inside Grid toolbar. 

<style> 
    .gird-cutomChooser{ 
        float:right; 
        margin-top:3px; 
    } 
</style> 



We have achieved the custom column chooser functionality throw “change” event of dropDown. Please find the code example. 


        function drpValueChange(args) { 
 
            // column chooser operation 
            var gridObj = $("#FlatGrid").ejGrid("instance"); 
            if (args.isChecked) 
                gridObj.showColumns(args.value) 
            else { 
                if (gridObj._visibleColumns.length == 1) { 
                    args.cancel = true; 
                    $('#cutomChooser').ejDropDownList("model.selectedItems", [args.itemId]) 
                    alert("atlease one column need to show grid"); 
                    
                } 
                else 
                gridObj.hideColumns(args.value) 
            } 
        } 



Please find the UG about dropDown events: 





We have Shown and hidden  the grid  columns  based on its selection through grid “showColumns” and “hideColumns” method. 

Please find the UG for more reference. 




Note : Grid must be shown any one column so we have add condition through “_visibleColumn” of Grid. 

for your convenience we have added a sample and it can be downloaded from the flowing link: 



Regards, 
J.Mohammed Farook 


indrani Gajjarapu
Replied On October 31, 2016 10:57 AM

Hi Mohammed,

That worked like a champ..Thanks.

However, i want to display as a button as we have now in column chooser or more ideally an icon in which on click the dropdown appears. 

indrani Gajjarapu
Replied On November 1, 2016 06:15 AM

Hi,

Also, I want to implement grouping in column chooser. As i have more than 10 columns under each stacked header. Is it possible to hide or show whole stacked headers instead of columns.

As i will have around 40 columns, it is not ideal to hide hide every column.



Mohammed Farook J [Syncfusion]
Replied On November 1, 2016 04:04 PM

Hi indrani,  
 
Please find the response. 
 
Query : However, i want to display as a button as we have now in column chooser or more ideally an icon in which on click the dropdown appears.  
 
Based on your request , we have created a sample with render customize  column chooser with “ejSpiltButton”. Please find the code example : 
 
 
Split Button element  
 
<button id="spltbutton">Column Chooser</button> 
<ul id="Ul41"> 
    <li style="display:inline-flex;"> <input id ="ch0" type="checkbox" value="OrderID" /><span>Audi4</span></li> 
    <li style="display:inline-flex;"><input  id ="ch1"type="checkbox" value="CustomerID" /><span>Audi5</span></li> 
    <li style="display:inline-flex;"><input  id ="ch2"type="checkbox" value="EmployeeID" /><span>Audi6</span></li> 
</ul> 
 
 
Render Split button through “DataBound” event of Grid. 
 
@(Html.EJ().Grid<object>("FlatGrid") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
            //.ShowColumnChooser() 
 
          
              .ClientSideEvents(eve => eve.DataBound("DataBound")) 
. . . 
 
 
        })) 
 
 
  function DataBound(args) { 
            $('.e-gridtoolbar').append($('#spltbutton')) 
            $('.e-gridtoolbar').append($('#Ul41')) 
            $("#spltbutton").ejSplitButton({ 
                size: "large", 
                buttonMode: ej.ButtonMode.Dropdown, 
                targetID: "Ul41", 
            }); 
            var count = $("input[type='checkbox']").length; 
 
            for (var i = 0; i < count; i++) { 
                $("#ch"+i).ejCheckBox({ 
                    checked: true, 
                    change: "ValueChange" 
                }); 
            } 
            $(".e-split").addClass('gird-cutomChooser') 
        } 
 
 
 
Please find the online demo and UG documentation of “ejSplitButton”. 
 
 
 
 
 
We have perform column chooser action through “change” event of ejCheckBox. Please find the code example. 
 
function ValueChange(args) { 
            var gridObj = $("#FlatGrid").ejGrid("instance"); 
            if (args.isChecked) 
                gridObj.showColumns(args.model.value) 
            else { 
                if (gridObj._visibleColumns.length == 1) { 
                    args.cancel = true; 
                    $("#" + this._id).ejCheckBox("model.checked", true) 
                    alert("atlease one column need to show grid"); 
                    
                } 
                else 
                    gridObj.hideColumns(args.model.value) 
            } 
        } 
 
 
 
Please find help docuementation for “change” event of ejCheckBox. 
 
 
Please find the sample for your reference.  
 
 
 
Query 2 : Also, I want to implement grouping in column chooser 
 
Yes we can perform grouping operation through “groupColum” method. Please find the code example . 
 
 
 
 
    @(Html.EJ().Grid<object>("FlatGrid") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
            //.ShowColumnChooser() 
        .AllowGrouping() 
         . . . 
 
    })) 
 
[Group columns] 
 
var gridObj = $("#FlatGrid").ejGrid("instance"); 
gridObj.groupColumn("OrderID") 
 
 
 
 
Please find the help document for “groupColumn” method. 
 
 
 
 
Query 3 : . As i have more than 10 columns under each stacked header. Is it possible to hide or show whole stacked headers instead of columns. 
 
As i will have around 40 columns, it is not ideal to hide hide every column. 
 
We cant hide the stacked header column is directly because it is only displayed category of grid columns. So we have achieved your requirement by workaround . please find the code example. 
 
 
 
 
  <button id='hidebtn'>hideStackedHeaderColumns</button> 
    <button id='showbtn'>showStackedHeaderColumns</button> 
@(Html.EJ().Grid<object>("FlatGrid") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
            //.ShowColumnChooser() 
                    .ShowStackedHeader() 
                .StackedHeaderRows(row => 
                { 
                    row.StackedHeaderColumns(column => 
                    { 
                        column.HeaderText("OrderDetails").Column(col => 
                        { 
                            col.Add("OrderID"); 
                            col.Add("CustomerID"); 
                        }).Add(); 
                        column.HeaderText("Ship Details").Column(col => 
                        { 
                            col.Add("EmployeeID"); 
                        }).Add(); 
                    }).Add(); 
                }) 
    })) 
 
 
 
 
 
we have called the show/hide stacked header columns through “click” event of ejButton. Please find the code example. 
 
 
<script> 
        $(function(){ 
            customData = [{ value: "OrderID", text: "Audi4" }, { value: "CustomerID", text: "Audi5" }, { value: "EmployeeID", text: "Audi6" }] 
            $("#hidebtn").ejButton({ 
                click: function(args){ 
                    var obj = $("#FlatGrid").ejGrid("instance"); 
                    var applyToHideColumns = obj.model.stackedHeaderRows[0].stackedHeaderColumns[0].column; 
                    hideStackedHeaderColumns(applyToHideColumns) 
                } 
            }) 
            $("#showbtn").ejButton({ 
                click: function(args){ 
                    var obj = $("#FlatGrid").ejGrid("instance"); 
                    var applyToShowColumns = obj.model.stackedHeaderRows[0].stackedHeaderColumns[0].column; 
                    showStackedHeaderColumns(applyToShowColumns) 
                } 
 
            }) 
        }) 
 
 
 We have construct two additional  function for hide and show stackedHeaderColumn. Please find the code example.  
Perform hide stacked header column operation : 
 
 
function hideStackedHeaderColumns(hideColumn) { 
            var obj = $("#FlatGrid").ejGrid("instance"); 
            for (var i = 0 ; i < hideColumn.length; i++) { 
                 
                obj.hideColumns(hideColumn[i]) 
            } 
        } 
 
 
 
Perform show stacked header column operation : 
 
 
        function showStackedHeaderColumns(showColumn) { 
            var obj = $("#FlatGrid").ejGrid("instance"); 
            for (var i = 0 ; i < showColumn.length; i++) { 
                obj.showColumns(showColumn[i]) 
            } 
        } 
 
                 
 
Please find the example for your reference. 
 
 
 
Regards, 
J.Mohammed Farook 


indrani Gajjarapu
Replied On November 2, 2016 09:15 AM

Hi Mohammed,

Thanks for your reply.

It works!!

Karthick Kuppusamy [Syncfusion]
Replied On November 3, 2016 12:11 AM

Hi indrani, 
 
Thanks for the update. 
 
We are happy to hear that your requirement is achieved. 
 
Regards, 
K.Karthick. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;