Customize Column Chooser

[Prasanth]

Hi there,

Simple question regarding column chooser behaviour (ShowColumnChooser()).  Is there a way to have some of the columns un-selected by default when the page opens up.  

Also is this possible through back end coding i.e. is it possible for individual users to save their preference (preferred columns to show) so every time they visit the page grid only shows the columns they have chosen (last time visited)

Second questions may be asking way too much, I will be happy with an answer for question one.

Regards

Prasanth

[Jayaprakash Kamaraj]

Hi Prasanthan,
Query1: Is there a way to have some of the columns un-selected by default when the page opens up.
Yes, We are able to unselect  the columns by default when the page opens up. We achieved this requirement by using grid Load event . This event trigged initial rendering of the grid.Please refer to the below code Example
Code Example:

<div style="margin-top:20px;">

    <button id="save">save</button>

    @(Html.EJ().Grid<object>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

        .AllowScrolling()

         .AllowPaging()    /*Paging Enabled*/

          .ShowColumnChooser()

                   .Columns(col =>

                {

                    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Visible(false).Width(75).Add();

                    col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();

                })

        .ClientSideEvents(eve => eve.Load("load")))

</div>

<script>

        function load(args) {

            var obj = $("#FlatGrid").ejGrid("instance");

            var col = @(Html.Raw(Json.Encode(ViewBag.dataSource1)));

            $.each(col,function(index,value){

                var obj1 = $("#FlatGrid").ejGrid("instance");

                if(!value.visible){

                    for(i=0;i<obj1.model.columns.length;i++){

                        if( obj1.model.columns[i].field == value.field){

                            obj1.model.columns[i].visible = false;

                        }

                    }

                }

                })

        }

    $("#save").click(function(){

        var obj2 = $("#FlatGrid").ejGrid("instance");

        var colList=[];

        for(var i=0;i<obj2.model.columns.length;i++)

            colList.push({field:obj2.model.columns[i].field,visible:obj2.model.columns[i].visible});

        $.ajax({

            url: '/Grid/Save',

            type: 'POST',

            data:JSON.stringify({ "value":colList}),

            dataType: "json",

           contentType: "application/json; charset=utf-8",

            success: function (data) {

            }

        })

    });

</script>

Query2: is this possible through back end coding i.e. is it possible for individual users to save their preference (preferred columns to show) so every time they visit the page grid only shows the columns they have chosen (last time visited)
We have achieved your requirement using Button click. In this button click we have used ajax post to send data. Please refer to the below Code Example.
Code Example:

<script>

    $("#save").click(function(){

        var obj2 = $("#FlatGrid").ejGrid("instance");

        var colList=[];

        for(var i=0;i<obj2.model.columns.length;i++)

            colList.push({field:obj2.model.columns[i].field,visible:obj2.model.columns[i].visible});

        $.ajax({

            url: '/Grid/Save',

            type: 'POST',

            data:JSON.stringify({ "value":colList}),

            dataType: "json",

           contentType: "application/json; charset=utf-8",

            success: function (data) {

            }

        })

    });
</script>
……………………………………………………
Controller

public ActionResult Save(List<ColumnDetails> value)

        {

            //here you can perform save operations
        }

 
Screenshot:




Regards,
Jayaprakash K.

[Prasanth]

Hi Jayaprakash,

Thanks for the prompt reply.  Looks like exactly what I want.  I will give it a go and will implement as per your suggestion.  Meanwhile is it possible for you to attach your sample solution or you may email it to me.

I am using Syncfusion 13.3.0.7, VS 2015 community edition and MVC5.

Regards

Prasanth

[Jayaprakash Kamaraj]

Hi Prasanthan,
Based on your requirement we have created sample using Syncfusion 13.3.0.7, VS 2015 and MVC5.Please refer to the below sample.
Sample: http://www.syncfusion.com/downloads/support/forum/121425/ze/SyncfusionMvcApplication271425845702
Regards,
Jayaprakash K.