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.

Customize Column Chooser

Thread ID:

Created:

Updated:

Platform:

Replies:

121425 Dec 14,2015 02:20 AM Dec 16,2015 07:51 AM ASP.NET MVC 3
loading
Tags: Grid
Prasanth
Asked On December 14, 2015 02:20 AM

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 [Syncfusion]
Replied On December 15, 2015 07:31 AM

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
Replied On December 15, 2015 05:25 PM

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 [Syncfusion]
Replied On December 16, 2015 07:51 AM

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.

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.

;