GUARDAR EL ESTADO DE UN GRID (COLUMNAS, FILTROS, ORDEN) POR USUARIO

[César Ventura]

Hola!!!!!

Estoy tratando de guardar el estado de un grid (columnas, filtros, orden) por usuario, es decir que el usuario pueda guardar una vista con toda la configuración del grid y poder visualizarla cuando se requiera, lo estoy implementando de la siguiente manera:

VIEW:

 <input type="text" id="list" />

       <div id="StateList">

           <ul></ul>

       </div>

       <input onclick="saveState(this);" type="button" id="save" value="Save State" />

       <input onclick="applyState(this);" type="button" id="apply" value="Apply State" />

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

                 ......

             )

JAVASCRIPT:

<script>

//ESTA FUNCIÓN RETORNA UN STRING CON TODOS LOS DATOS DEL GRID 

 function saveState(args) {

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

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

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

                //gridObj.model.columns[j].width = gridObj._columnsWidthCollection[j];  this part return error

            }

            var state = {

                filterCol: gridObj.model.filterSettings.filteredColumns.slice(),

                groupedCol: gridObj.model.groupSettings.groupedColumns.slice(),

                sortedCol: gridObj.model.sortSettings.sortedColumns.slice(),

                searchKey: gridObj.model.searchSettings,

                cols: gridObj.model.columns.slice()

            }

            var drop = { dataSource: dropDownObj.model.dataSource };

            var object = JSON.stringify(state);

            alert(object);

            $.ajax({

                type: "POST",

                url: "/Catalog/Query",

                datatype: 'json',

                contentType: 'application/json',

                data: JSON.stringify({ "gridObj": object })

,

                success: function (data) {

                    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 })

                },

            });

        }

//String resultante:

"{\"filterCol\":[],\"groupedCol\":[],\"sortedCol\":[],\"searchKey\":{\"fields\":[],\"key\":\"\",\"operator\":\"contains\",\"ignoreCase\":true},\"cols\":[{\"field\":\"\",\"headerText\":\"\",\"allowFiltering\":false,\"template\":\"<a rel='nofollow' href='#' onclick='Edit({{:b_pos_id}})'><img title='Editar' src='/Content/images/edit.png'></a>\",\"textAlign\":\"center\",\"width\":30,\"visible\":true,\"showInColumnChooser\":true,\"allowResizing\":true,\"type\":null,\"allowSorting\":false,\"allowGrouping\":false},{\"field\":\"b_pos_id\",\"headerText\":\"Id\",\"isPrimaryKey\":true,\"width\":50,\"visible\":true,\"showInColumnChooser\":true,\"allowResizing\":true,\"type\":\"number\",\"textAl{\"field\":\"b_pos_name\",\"headerText\":\"Nombre\",\"width\":90,\"visible\":true,\"showInColumnChooser\":true,\"allowResizing\":true,\"type\":\"string\",\"textAlign\":\"left\"},{\"field\":\"b_pos_desc\",\"headerText\":\"Descripción\",\"width\":90,\"visible\":true,\"showInColumnChooser\":true,\"allowResizing\":true,\"type\":null,\"textAlign\":\"left\"},{\"field\":\"b_chain_name\",\"headerText\":\"Cadena\",\"width\":90,\"visible\":true,\"showInColumnChooser\":true,\"allowResizing\":true,\"type\":\"string\",\"textAlign\":\"left\"{\"field\":\"b_region_name\",\"headerText\":\"Región\",\"visible\":false,\"showInColumnChooser\":true,\"allowResizing\":true,\"type\":\"string\",\"textAlign\":\"left\",\"width\":7{\"field\":\"active\",\"headerText\":\"Activo\",\"visible\":false,\"showInColumnChooser\":true,\"allowResizing\":true,\"type\":\"string\",\"textAlign\":\"left\",\"width\":75.47},{\"field\":\"b_pos_latitude\",\"headerText\":\"Latitud\",\"visible\":false,\"showInColumnChooser\":true,\"allowResizing\":true,\"type\":null,\"textAlign\":\"left\",\"width\":75.47},{\"field\":\"b_pos_longuitude\",\"headerText\":\"Longitud\",\"visible\":false,\"showInColumnChooser\":true,\"allowResizing\":true,\"type\":null,\"textAlign\":\"left\",\"width\":75.47},{\"field\":\"b_nielesen_area_name\",\"headerText\":\"Áreas Nielsen\",\"visible\":false,\"showInColumnChooser\":true,\"allowResizing\":true,\"type\":\"string\",\"textAlign\":\"left\",\"width\":75.47}]}"

//Este string se guarda en la base de datos

//al querer recuperar el estado del grid utilizo la siguiente función

 function applyState(args) {

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

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

            var value = obj.model.value;

            $.ajax({

                type: "POST",

                url: "/Catalog/Restate",

                //data: { "dropObject": value },

                data: { "dropObject": value },

                success: function (data) {

                    var obj = JSON.parse(data);  // Al obtener el string de la base de datos y aplicarle un JSON.parse, retorna un 

                                                                           error diciendo que el navegador de ha quedado sin memoria.

                    gridObj.model.filterSettings.filteredColumns = obj.filterCol; 

                    gridObj.model.sortSettings.sortedColumns = obj.sortedCol;

                    gridObj.model.columns = obj.cols;

                    gridObj.model.searchSettings = obj.searchKey;

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

                    gridObj.columns(gridObj.model.columns);

                },

            });

        }

</script>

¿COMO PUEDO GUARDAR LA CONFIGURACIÓN DEL GRID POR USUARIO?

¿DE QUE MANERA PUEDO HACER QUE FUNCIONE?

Muchas gracias!!!!

[Venkatesh Ayothi Raman]

Hi Cesar, 

Thanks for contacting Syncfusion support. 

We have already discussed this “Store and retrieve the grid model value from data base” and created a knowledge base documentation for this. Please refer to the following KB link, 

KB: https://www.syncfusion.com/kb/6312 

Regards, 

Venkatesh Ayothiraman. 

[César Ventura]

Muchas gracias por tu respuesta enkatesh Ayothi Raman!!!

me ha funcionado correctamente.

solo una cosa más, dentro del grid tengo una columna template:

col.HeaderText("").Template("<a rel='nofollow' href='#' onclick='Edit({{:b_pos_id}})'><img title='Editar' src='/Content/images/edit.png'></a>").AllowFiltering(false).Width(30).TextAlign(TextAlign.Center).Add();

y al recuperar el estado del grid, este template se duplica

*adjunto imagen con el ejemplo

¿Cómo puedo solucionar esto?

muchas gracias.

Attachment: syncfusion_grid_37afb34d.rar

[Pavithra Subramaniyam]

Hi Cesar, 

We  validated your reported issue and we were unable to reproduced the issue and  there is no possibility to double the template column when retrieving  the state of the grid. Please  share the following details to provide a solution as early as possible. 

                  ·       Please share your view code. 

 ·       Did you use the column template in anywhere else in your sample? 

 ·       Please share your sample if possible. 

Regards, 

Pavithra S.