How to make Grid properties permanent

[Buster]

I have AllowReording, AllowResizing, ShowColumnChooser and a few other properties set.  I read a database and fill the grid.  I can reorder columns, drop a column, resize a column and all looks good.  I do another search to fill the grid and the grid is back to the original state prior to me reodering columns, etc.

How can I keep the grid properties permanent for a given user.  I would like each user to be able to customize their grid. For all subsequent searches as well as the next time the login.

Thanks.

[Pavithra Subramaniyam]

Hi Buster, 

We have checked your query but we could not reproduce the issue at our end. We have prepared a simple sample that can be downloaded from the below link. 

Could you please provide the below details that will be helpful for us to provide a better solution as early as possible. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/reorder1689494465  

1. Are you use any custom actions for Reordering, Resizing etc.
2. Share your code example.
3. Please reproduce the issue in the given sample.
4. Please share your Essential JavaScript 2 package version.

Regards, 

Pavithra S. 

[Buster]

When the search button is clicked for the 2^nd time (after column reordering, etc has been done) the page will ‘post back’ while it fetches new data from the database.

It is at this time that the grid no longer shows the altered column ordering. It goes back to the way the grid was when the page first initialized.

 

So, how do we get the grid attributes to stick between post backs?  Thanks.

[Pavithra Subramaniyam]

Hi Buster, 

We have checked your query and we could not reproduce the issue with your shared scenario at our end. By default, Essential JavaScript 2 Grid will maintain the Grid state (Reordering, Resizing etc.) after search action. We have prepared a simple sample in which we have performed the search operation, with Reordering, Resizing column chooser enabled Grid. Please refer to the below sample link. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Grid-search1952092830  

Could you please provide the below details that will be helpful for us to provide a better solution as early as possible. 

1.           Share your Grid code example 

2.           Are you re-rendering the Grid component after search action? 

3.           Please reproduce the issue in the above sample, if possible. 

Regards, 

Pavithra S. 

[Buster]

Hopefully, this will better articulate the problem

 

We are using your sync fusion grid

 

1. The web page allows user to enter search data into a text box, user clicks a button and the grid gets populated from the database query – returns 100 rows.
2. The user then filters the grid data by using the ‘excel’ like column header filters and reduces the grid lines shown down to 20
3. We now want to get the data that is currently displayed in the grid (20 rows) into a popup window and run calculations on it or populate your Scatter Chart with the 20 rows of data

 

How can this be done since the data in the grid is being filtered by javascript/client side ?

[Pavithra Subramaniyam]

Hi Buster, 

We have checked your query and you can achieve your requirement by using grid.currentViewData in the actionComplete event of Grid component with requstType ‘filtering’. We have prepared a simple sample based on your requirement in which you can get the currently displayed records in the actionComplete event after filter action has completed. Please refer to the below code example , Documentation link and sample link. 

[index.chtml] 

<div> 

   @Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor"); }).Columns(col => 

{ 

.  .  . 

 

}).AllowPaging().AllowReordering().ActionComplete("complete").AllowFiltering(true).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel)).AllowResizing(true).ShowColumnChooser(true).Toolbar(new List<string>() { "Search", "ColumnChooser" }).PageSettings(page => page.PageSize(10)).Render() 

 

</div> 

<script> 

   function complete(e) { 

        if (e.requestType == 'filtering') { 

            var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0] 

            console.log(grid.currentViewData);   // you can make your calculations on this current view data 

        }  

    } 

    </script> 

Documentation: https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html#actioncomplete  

Sample               : 

Regards, 

Pavithra S. 

[Pavithra Subramaniyam]

Hi Buster, 

Sorry for the inconvenience. 

Please refer to the below sample link for your requirement. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/excel_filtering1243412371  

Regards, 

Pavithra S. 

[Buster]

You are telling us to enable property:  ActionComplete("complete").

That property doesn’t exist in our release - Syncfusion.EJ 16.1450.0.24

 

 

[Pavithra Subramaniyam]

Hi Buster, 

We have checked your query and before providing solution could you please confirm whether you are using Essential JavaScript 1 Grid or Essential JavaScript 2 Grid component Since Syncfusion.EJ dll belongs to Essential JavaScript 1. This information will be helpful for us to provide an appropriate solution as early as possible. 

Regards, 

Pavithra S. 

[Buster]

Where can I find the version?  Below is some information I found

ssembly Syncfusion.EJ.MVC, Version=16.1500.0.24, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89

namespace Syncfusion.MVC.EJ

 

Don’t see any references to EJ2

 

Grid wrapper is:

@(Html.EJ().Grid<TechForJusticeLib.Domain.SentencingCase>("Grid")

[Manivannan Padmanaban]

  

Hi Buster, 

Based on your update we are able to understand that, you are using Essential Javascript 1 grid.(i.e. EJ1 GRID) 

 

Query: Where can I find the version? 

You can find the essential studio version in the console by typing ej.version. Refer the below screenshot. 

 

In Essential Javascript 1 grid we have the getfilteredRecords method. By using this method we are able to get the current view filtered data. Please refer the below code example, 

@Html.EJ().Button("button").Text("Filtered Records").ClientSideEvents(e => e.Click("btnClick")) 

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

                            .Datasource(ds => ds.URL("DataSource").UpdateURL("UrlUpdate").InsertURL("UrlInsert").RemoveURL("UrlDelete") 

                                    .Adaptor(AdaptorType.UrlAdaptor)) 

                                    .AllowPaging() 

                                    .AllowFiltering() 

                                    .AllowReordering() 

                                    .AllowResizing() 

                                    .AllowSearching() 

                                    .FilterSettings(filter => { filter.FilterType(FilterType.Excel); }) 

            .Columns(col => 

            { 

            ………………. 

            })) 

</div> 

<script> 

    function btnClick(args) { 

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

        console.log(gridObj.getFilteredRecords()); 

    } 

</script> 

Also refer the below link for help documentation, 

https://help.syncfusion.com/api/js/ejgrid#methods:getfilteredrecords  

If you are using remote data then please refer the below code example for get the filtered records, 

@Html.EJ().Button("button").Text("Filtered Records").ClientSideEvents(e => e.Click("btnClick")) 

<div id="ControlRegion"> 

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

          .Datasource(ds => ds.URL("DataSource").UpdateURL("UrlUpdate").InsertURL("UrlInsert").RemoveURL("UrlDelete") 

                                                            .Adaptor(AdaptorType.UrlAdaptor)) 

                                                            .AllowPaging() 

                                                            .AllowFiltering() 

                                                            .AllowReordering() 

                                                            .AllowResizing() 

                                                            .AllowSearching() 

                                                                                                                      .FilterSettings(filter => { filter.FilterType(FilterType.Excel); }) 

                                                             .ClientSideEvents(eve => { eve.ActionComplete("actionComplete"); }) 

                                    .Columns(col => 

                                    { 

                                           ……….. 

                                    })) 

</div> 

<script type="text/javascript"> 

    function btnClick(args) { 

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

        var data = obj.getFilteredRecords(); 

        $.ajax({ 

            type: "POST", 

            url: "/Grid/Data", 

            datatype: "json", 

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

            data: JSON.stringify({ gridFilteredData: JSON.stringify(data) }), 

            success: function (result) { 

                alert('success'); 

            }, 

            error: function (args) { 

                alert('error occurred'); 

            } 

        }); 

    } 

</script> 

controllerPage: 

 

  public ActionResult Data(string gridFilteredData) 

        {  

                 

            // You can do your stuff here 

            return Json (gridFilteredData); 

        } 

Please get back to us, if you need further assistance. 

Regards, 

Manivannan Padmanaban. 

 

[Buster]

Suncfusion.EJ2 version:  16.1500.0.37

Use case:

User logs in to our application

User drags and drops column 3 to column 1 position ('re-order columns)

Now the usr logs out

Same user logs back in

We want the grid to be in the same state (column positions) as he left them in previous login session

[Manivannan Padmanaban]

Hi Buster, 

Query: Same user logs back in We want the grid to be in the same state (column positions) as he left them in previous login session 

 

We have already discussed the same, in our knowledge base help documentation please refer the below link, 

https://www.syncfusion.com/kb/6312/how-to-store-retrieve-grid-model-values-into-from-database  

In the above KB link, we have saved the grid model properties (i.e. grid states)  by the button click named Save State, stored it in data table and based the on the dropdown selection we applied the state in to the grid by using  Apply State button. 

In your case, save the grid models (like as we discussed in KB) and stored it in data table. After check whether the same user is login if yes, the  apply the state (i.e. previous stored grid model properties) in to the grid using load event instead of button click rest of actions will same as in KB. Please refer the below code example, 

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

                   .ClientSideEvents(eve => 

                     { 

                         eve.Load("Onload");       

                         

                     }) 

 

              })) 

 

            

   <script> 

        

       function Onload(args){ 

 

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

          

           //To retrieve the Grid objects 

           $.ajax({ 

               type: "POST", 

               url: "/Home/Restate", 

           

               success: function (data) { 

                   var obj = JSON.parse(data); 

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

                   if (obj.cols) 

                       gridObj.columns(obj.cols); 

                   else 

                       gridObj.refreshContent();//Refresh the Grid to apply the saved settings 

                   //if you are using anyother Grid methods to refresh other functionlities  

                   //like columns() 

                   //there is no need of refreshContent() 

               }, 

           }); 

 

       } 

 

   </script> 

Please get back to us, if you need further assistance. 

Regards, 

Manivannan Padmanaban. 

[Buster]

Can you please show how this id done with EJS version?

Also, of the user changes column order from 1,2,3,4   or 4,2,31 and we save it to the database for that user, how do we programatically set the columns in that 4,2,31 order when user logs back in

[Manivannan Padmanaban]

Hi Buster,  

 

Thanks for your update.  

We have analyzed your requirement and created a sample for your reference. In the below sample we have stored the columns(after reorder) details in server side and assign new value for the grid columns property in load event. We saved the column details in the static variable for the demo purpose. You can save the stringified column data in the database.  

 

Kindly refer to the below code example and sample for more information.  

 

<div>  

    @Html.EJS().Button("printbtn").Content("Save").IsPrimary(true).Render()  

  

    @Html.EJS().Grid("Grid").Load("load").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor"); }).Columns(col =>  

{  

     col.Field("OrderID").HeaderText("OrderID").Width("150").Add();  

     col.Field("Freight").HeaderText("Freight").Width("170").Add();  

}).AllowPaging().AllowReordering().Render()  

</div>  

<script>  

    document.getElementById('printbtn').onclick = function () {         

        // save the column values in server   

        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]  

        var ajaxObj = new ej.base.Ajax();  

        ajaxObj.type = 'POST';  

        ajaxObj.contentType = 'application/json';  

        ajaxObj.url = '/Home/CheckState';  

        // stringify the column values  

        ajaxObj.send(JSON.stringify({ 'data': JSON.stringify(grid.columns)  })).then(function (value) {  

            console.log(JSON.parse(value));  

        });  

    }  

  

    function load() {  

        var persistColumns = @Html.Raw(Json.Encode(ViewBag.columns));  

        if (JSON.parse(persistColumns)) {  

            this.columns = JSON.parse(persistColumns);  

        }  

    }  

</script>  

 

[HomeController.cs]                

public ActionResult Index()  

        {  

            ViewBag.columns = columns;  

            return View();  

        }  

  

        public static string columns;  

        public ActionResult UrlDatasource(Data dm)  

        {  

            var order = OrdersDetails.GetAllRecords();  

            var Data = order.ToList();  

            int count = order.Count();  

            return dm.requiresCounts ?  Data.Count!= 0 ? Json(new { result = Data.Skip(dm.skip).Take(dm.take), count = count }): Json(Data) : Json(Data);  

        }  

  

        public ActionResult CheckState(string data)  

        {  

            columns = data;  

            return Content(data);  

        }  

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/Grid-MVC-Persistcolumns-745388893   

 

Help documentation : https://ej2.syncfusion.com/documentation/grid/api-grid.html?lang=es5#load   

 

Regards, 

Manivannan Padmanaban. 

 

[Buster]

Hi Manivannan

Your implementation suggestion  was very helpfull.

We have been able to re-order the columns and saves those column names (field) and position (idex) to the database.

Unfortunately the suggestion you made for loading is not going to work for us.

Is there an alternative approach for simple changing the column's index position on the fly with javascript?

We have the column names and positions at load time. We just need to figure out how to assign them at load time.

something like:

function loadGrid1() {

        var persistColumns = @Html.Raw(Json.Encode(ViewBag.columns));

        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]

        columnorder = grid.columns.map(x => x);

        grid.columns = columnorder; 

        grid.columns[this.getColumnIndexByField('PatientFirstName')].index = 2;  <-- something like this  

    }

[Dhivya Rajendran]

Hi Buster, 

Thanks for your update. 

We have analyzed your requirement and you can create a new columns[array] based on the index(already saved in database) value. In the below sample we have created a columns by using index[5, 2, 3, 1, 4] value and assign the new columns to Grid columns property. You can also achieve your requirement by using the below way. 

Kindly refer to the below code example for more information. 

<div> 

    @Html.EJS().Button("printbtn").Content("Save").IsPrimary(true).Render() 

 

    @Html.EJS().Grid("Grid").Load("load").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor"); }).Columns(col => 

{ 

     col.Field("OrderID").HeaderText("OrderID").Width("150").Add(); 

     col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); 

     col.Field("Freight").HeaderText("Freight").Width("170").Add(); 

     col.Field("ShipName").HeaderText("Ship Name").Width("170").Add(); 

     col.Field("ShipAddress").HeaderText("Ship Address").Width("170").Add(); 

 

}).AllowPaging().AllowReordering().Render() 

 

</div> 

<script> 

 

    function load() { 

        var persistColumns = @Html.Raw(Json.Encode(ViewBag.columns)); 

        if (JSON.parse(persistColumns)) { 

        var position = [5, 2, 3, 1, 4]; // saved index value 

        var dummy = []; 

        position.forEach((value, index, array) => { 

            dummy[value - 1] = this.columns[index]; 

        }); 

        this.columns = dummy; 

    } 

</script> 

 

Regards,
R.Dhivya