Save grid configuration

[Rafael Delanhese]

I would like to provide to my user the possibility to save several sets of grid configurations (column visibility, column size, groupings, etc)

So, basically the user can arrange the grid in a way he likes and then save this configuration.

For example

Configuration set A : Three grid columns visible

Configuration set B: Two grid columns visible

Configuration set C: All grid columns visible

Configuration set D: All grid columns visible with different column size

I think that the way to accomplish this is through the grid persistence but I have made some tests and had no success!

Could you help me with this requirement?

Thanks.

[Ragavee U S]

Hi Rafael,

We have created a sample to save the state of the grid and apply the state to grid upon external button click, which can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/121200/ze/SampleEJGrid1310176765

In the above sample, We have two buttons; one is to store the state and another one is to retrieve the stored state. When we click the “Save State” button, Ajax post will send the currently filtered, grouped and sorted states into server side and that will be stored into SQL data base. When we click on “Apply State” button, server side gets the state from SQL data base and send it to client side using Ajax, then it will perform the stored states.

On clicking the “SaveState” button, current state of the grid into StateStore table with the respective time is saved as in the below code example.

public string Query(string gridObj)

        {

            con.Open();

            var time = DateTime.Now.TimeOfDay.ToString();

            SqlCommand insert = new SqlCommand("INSERT INTO StateStore (States,CurrentTime ) VALUES('" + gridObj + "','" + time + "')", con);

            insert.ExecuteNonQuery();

            con.Close();

            return time;
        }

In AJAX successs event, dropDown data is updated with the corresponding time as in the below code example

$.ajax({

                type: "POST",

                url: "Home/Query",

                data: { "gridObj": object},

                success: function (data, status, xhr) {

                    $('#btnSaveCustom').prop('disabled', false);

                    var TempData = [];

                   

                    var obj = $('#list').ejDropDownList("instance");

                    if (!ej.isNullOrUndefined(obj.model.dataSource))

                        TempData = obj.model.dataSource;

                    TempData.push({ DataTime: data, text: data });

                    $('#list').ejDropDownList("destroy");

                    $('#list').ejDropDownList({ dataSource: TempData })

                },

                error: function (xhr, status, error) {

                    $('#btnSaveCustom').prop('disabled', false);
                }

On clicking the “ApplyState” button, it will fetch the state details corresponding to selected value in the dropDown and thus we can assign the state to the grid model.

public string Restate(string dropObject)

        {

            if (con.State != System.Data.ConnectionState.Open)

                con.Open();

            SqlCommand take = new SqlCommand("SELECT States FROM StateStore WHERE CurrentTime ='" + dropObject +"'", con);

            SqlDataAdapter da = new SqlDataAdapter(take);

            DataTable dt = new DataTable();

            da.Fill(dt);

            con.Close();

            return dt.Rows[0]["States"].ToString();
        }

$.ajax({

                type: "POST",

                url: "Home/Restate",

                data: {"dropObject": value},

                success: function (data) {

                    var obj = JSON.parse(data);

                   

                    gridObj.model.filterSettings.filteredColumns = obj.filterCol; //Applying all filter collection to Grid

                   

                    gridObj.model.sortSettings.sortedColumns = obj.sortedCol; //Applying all sort collection to Grid

                    gridObj.model.columns = obj.cols; //Assigning the state column object to grid model

                    gridObj.model.searchSettings = obj.searchKey;

                    gridObj.model.groupSettings.groupedColumns = obj.groupedCol;                   

                    gridObj.columns(gridObj.model.columns);

                },

                error: function (xhr, status, error) {

                }

Regards,
Ragavee U S.

[Rafael Delanhese]

Thanks so much!

This is exactly what I was looking for.

[Ragavee U S]

Hi Rafael,

Thanks for your update.

We are happy that your requirement is achieved.

Regards,
Ragavee U S.

[Rafael Delanhese]

Hello,

I find a little problem with this approach, seems like that the grid doesn't keep the column width.

Try to resize the Ship City column to a smaller width ,100 px e.g,  then save the layout and try to restore it. The column size will return to 524px again.

Could you help me with this?

[Ragavee U S]

Hi Rafael,

We analyzed your requirement to maintain the column width upon loading the saved configuration. We have achieved it using the below workaround.

function saveState(args) { //When the save state button is clicked

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

            for (var j = 0; j < gridObj.model.columns.length; j++) {

                gridObj.model.columns[j].width = gridObj._columnsWidthCollection[j]; //assigning the column width with the modified column width

            }

            . . . . .
       }

We have modified our previously uploaded sample with the above workaround, which can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/121200/ze/SampleEJGrid_modified1479197525

Note: We have changed the private variable _columnsWidthCollection to public variable and it will be reflected from our 2015 Volume 3 Service Pack 2 release which is expected to be roll out at the end of November 2015.
Regards,
Ragavee U S.

[Rafael Delanhese]

Now it works.

Thanks very much.

Just one more thing... I have adapted this sample to be used with a ej TreeGrid.  Can you tell me wich property of ejTreeGrid I have to change to achieve the same result?

Thanks.

[Jayakumar Duraisamy]

Hi Rafael,,

We regret for the inconvenience caused.
We are facing some issues while resizing columns from client side so we have logged a issue report on this. Also we have created a support incident under your account to track the status of this issue.
Please log on to our support website to check for further updates.
https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents
 Please let us know if you require further assistance on this.

Regards,
Jayakumar Duraisamy