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.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

128249 Jan 10,2017 03:19 PM Jan 12,2017 05:07 AM ASP.NET MVC 3
loading
Tags: Grid
César Ventura
Asked On January 10, 2017 03:19 PM


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 [Syncfusion]
Replied On January 11, 2017 06:41 AM

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, 

Regards, 
Venkatesh Ayothiraman. 


César Ventura
Replied On January 11, 2017 02:51 PM



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 [Syncfusion]
Replied On January 12, 2017 05:07 AM

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. 


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.

;