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.

Save grid configuration

Thread ID:

Created:

Updated:

Platform:

Replies:

121200 Nov 18,2015 07:52 AM Nov 30,2015 10:58 PM JavaScript 7
loading
Tags: ejTreeGrid
Rafael Delanhese
Asked On November 18, 2015 07:52 AM


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 [Syncfusion]
Replied On November 19, 2015 01:22 AM

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
Replied On November 19, 2015 07:10 AM


Thanks so much!

This is exactly what I was looking for.

Ragavee U S [Syncfusion]
Replied On November 19, 2015 11:22 PM

Hi Rafael,

Thanks for your update.

We are happy that your requirement is achieved.

Regards,
Ragavee U S.

Rafael Delanhese
Replied On November 26, 2015 12:28 PM



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 [Syncfusion]
Replied On November 27, 2015 05:07 AM

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
Replied On November 27, 2015 06:38 AM


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 [Syncfusion]
Replied On November 30, 2015 10:58 PM

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


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.

;