jQuery UI Widgets › Forums › Grid › Help regarding ‘loadstate’ property
This topic contains 4 replies, has 2 voices, and was last updated by dominicthoppil 11 years, 3 months ago.
Viewing 5 posts - 1 through 5 (of 5 total)
-
Author
-
Hi
In my grid there are 10 columns, in which i am hiding 2 columns. Then i am saving the state of the grid to the database (using ‘getstate’ property). Next time after binding the 10 columns to the grid, i tried to restore to the previous state (the state i already saved to the database, which is having 2 columns as hidden). Now all 10 columns are visible instead of displaying 8 columns. How do i solve this ?
Please find my viewstate (not complete).
{"width":1024,"height":775,"pagenum":0,"pagesize":20,"pagesizeoptions":["5","10","20"],"selectedrowindexes":[],"selectedrowindex":-1,"filters":{"filterscount":0},"groups":[],"columns":{"DocNumber":{"width":234,"hidden":true,"pinned":false,"groupable":true,"resizable":true,"draggable":true,"text":"Document Number","align":"left","cellsalign":"left","index":0},"DocDescription":{"width":620,"hidden":true,"pinned":false,"groupable":true,"resizable":true,"draggable":true,"text":"Document Description","align":"left","cellsalign":"left","index":1},"DocGenealogy":{"width":513,"hidden":false,"pinned":false,"groupable":true,"resizable":true,"draggable":true,"text":"Document Genealogy","align":"left","cellsalign":"left","index":2}}}My requirement is as follows.
In my form there is a grid and a dropdown list. User will modify some grid layout (I.E changing the order,grouping with some columns, hiding some columns etc) and save the view with a name (corresponding ‘getstate’ will be saved in database). This view names will be displayed in the dropdown list. Next time when the user opened the form, by default a grid with default layout will be rendered.Then if the user select a view name from the dropdown list, the layout of the grid should be the layout in which user saved with that name.
Is there any problem in changing the state of the already displayed grid ( changing order,hiding\unhiding columns etc). Now i just used $(“#jqxgrid”).jqxGrid(‘loadstate’, _viewContent) in drop down list on change event. Do i need to do anything more ?
Regards
DominicHello Dominic,
We tested for the reported issue but everything works fine at our side. Here is an example (based on the demo Save/Load Grid State):
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.storage.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ""; var url = "../sampledata/orders.xml"; // prepare the data var source = { datatype: "xml", datafields: [ { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' }, { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' }, { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' } ], root: "entry", record: "content", id: 'm\\:properties>d\\:OrderID', url: url, pager: function (pagenum, pagesize, oldpagenum) { // callback called when a page or page size is changed. } }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { width: 670, source: source, theme: theme, selectionmode: 'multiplerowsextended', sortable: true, pageable: true, autoheight: true, autoloadstate: false, autosavestate: false, columnsresize: true, columnsreorder: true, showfilterrow: true, filterable: true, columns: [ { text: 'Ship Name', filtercondition: 'starts_with', datafield: 'ShipName', width: 250 }, { text: 'Ship City', datafield: 'ShipCity', width: 200 }, { text: 'Ship Country', datafield: 'ShipCountry', hidden: true } ] }); $("#saveState").jqxButton({ theme: theme }); $("#loadState").jqxButton({ theme: theme }); $("#hide").jqxButton({ theme: theme }); var state = null; $("#saveState").click(function () { // save the current state of jqxGrid. state = $("#jqxgrid").jqxGrid('savestate'); }); $("#loadState").click(function () { // load the Grid's state. if (state) { $("#jqxgrid").jqxGrid('loadstate', state); } else { $("#jqxgrid").jqxGrid('loadstate'); } }); $("#hide").click(function () { $("#jqxgrid").jqxGrid('hidecolumn', 'ShipCity'); }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> <div style="margin-top: 30px;"> <input type="button" id="saveState" value="Save State" /> <input type="button" id="loadState" value="Load State" /> <input type="button" id="hide" value="Hide Ship City" /> </div> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Dear Dimitar
Thank you for your reply. I tried your example and it is working fine. After analyzing the difference between your code and my code , i understand that in my case the ‘virtualmode is true’ . So when the grid is restoring the layout, the controller method will get invoked . And my state will become the original state. So the issue still exists.
I can give you a sample for reproducing my issue.
View Part
<!DOCTYPE html><html lang="en">@{ ViewBag.Title = "SaveState";}<head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.storage.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsreorder.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> var viewcontent = ''; var loaddata = ''; $(document).ready(function () { var theme = ""; // prepare the data LoadGrid(); $("#saveState").jqxButton({ theme: theme }); $("#loadState").jqxButton({ theme: theme }); $("#hide").jqxButton({ theme: theme }); var state = null; $("#saveState").click(function () { // save the current state of jqxGrid. state = $("#jqxgrid").jqxGrid('getstate'); viewcontent = JSON.stringify(state); var d = { viewcontent: viewcontent } $.ajax({ datatype: 'json', type: 'POST', data: d, url: '@Url.Action("SaveLayout", "SaveState")', success: function (result) { alert(result); }, error: function (result, n, r) { alert(result.statusText); } }); }); $("#loadState").click(function () { // load the Grid's state. alert(loaddata.viewcontent); var obj = JSON.parse(loaddata.viewcontent); $("#jqxgrid").jqxGrid('loadstate', obj); }); $("#hide").click(function () { $("#jqxgrid").jqxGrid('hidecolumn', 'ShipCity'); }); }); function LoadGrid() { var source = { datatype: "json", datafields: [ { name: 'ShipName', map: 'ShipName' }, { name: 'ShipCity', map: 'ShipCity' }, { name: 'ShipCountry', map: 'ShipCountry' } ], url: '@Url.Action("GetData", "SaveState")', root: 'entry', type: 'GET', pager: function (pagenum, pagesize, oldpagenum) { // callback called when a page or page size is changed. }, filter: function () { // update the grid and send a request to the server. $("#jqxgrid").jqxGrid('updatebounddata', 'filter'); }, beforeprocessing: function (data) { source.totalrecords = data.TotalCount; loaddata = data; } }; BindSource(source); } function BindSource(source) { var theme = getDemoTheme(); var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, selectionmode: 'multiplerowsextended', sortable: true, pageable: true, virtualmode: true, autoheight: true, autoloadstate: false, autosavestate: false, columnsresize: true, columnsreorder: true, showfilterrow: true, filterable: true, rendergridrows: function () { return dataAdapter.records; }, ready: function () { $('#jqxgrid').jqxGrid('autoresizecolumns'); }, columns: [ { text: 'Ship Name', filtercondition: 'starts_with', datafield: 'ShipName', width: 250 }, { text: 'Ship City', datafield: 'ShipCity', width: 200 }, { text: 'Ship Country', datafield: 'ShipCountry', width: 200 } ] }); } </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"> </div> <div style="margin-top: 30px;"> <input type="button" id="saveState" value="Save State" /> <input type="button" id="loadState" value="Load State" /> <input type="button" id="hide" value="Hide Ship City" /> </div> </div></body></html>
Controller Part
using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web;using System.Web.Mvc;namespace TestGridLayout.Controllers{ public class SaveStateController : Controller { // // GET: /SaveState/ public ActionResult Index() { return View(); } public ActionResult SaveState() { return View(); } public ActionResult GetData(int pagesize, int pagenum) { List<Dictionary<string, dynamic>> lstDict = new List<Dictionary<string, dynamic>>(); Dictionary<string, dynamic> dictData = new Dictionary<string, dynamic>(); string filePath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Layout.txt"); string content = string.Empty; for (int i = 0; i < 100; i++) { dictData = new Dictionary<string, dynamic>(); dictData.Add("OrderID", i); dictData.Add("ShipName", "N" + i); dictData.Add("ShipCity", "CT" + i); dictData.Add("ShipCountry", "CY" + i); lstDict.Add(dictData); } if (System.IO.File.Exists(filePath)) { using (StreamReader sr = new StreamReader(filePath)) { content = sr.ReadToEnd(); } } var result = new { TotalCount = lstDict.Count, entry = lstDict, viewcontent = content, }; return Json(result, JsonRequestBehavior.AllowGet); } public string SaveLayout(string viewcontent) { string filePath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Layout.txt"); try { if (System.IO.File.Exists(filePath)) System.IO.File.Delete(filePath); System.IO.StreamWriter file = new System.IO.StreamWriter(filePath); file.WriteLine(viewcontent); file.Close(); } catch (Exception eX) { Response.StatusCode = 500; Response.StatusDescription = eX.Message; } return ("Layout saved to the location : " + filePath); } }}Regards
DominicHi Dominic,
Please make sure you are using the latest version of jQWidgets (3.0.2).
Here is an example of a properly working savestate with virtualmode: true:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.storage.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = ""; // prepare the data var data = new Array(); var firstNames = [ "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene" ]; var lastNames = [ "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier" ]; var productNames = [ "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist" ]; var priceValues = [ "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0" ]; // generate sample data. var generatedata = function (startindex, endindex) { var data = {}; for (var i = startindex; i < endindex; i++) { var row = {}; var productindex = Math.floor(Math.random() * productNames.length); var price = parseFloat(priceValues[productindex]); var quantity = 1 + Math.round(Math.random() * 10); row["id"] = i; row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)]; row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)]; row["productname"] = productNames[productindex]; row["price"] = price; row["quantity"] = quantity; row["total"] = price * quantity; data[i] = row; } return data; } var source = { datatype: "array", localdata: {}, totalrecords: 1000000 }; // load virtual data. var rendergridrows = function (params) { var data = generatedata(params.startindex, params.endindex); return data; } var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { width: 670, source: dataAdapter, theme: theme, virtualmode: true, rendergridrows: rendergridrows, columnsresize: true, columns: [ { text: 'Id', datafield: 'id', width: 100 }, { text: 'First Name', datafield: 'firstname', width: 100 }, { text: 'Last Name', datafield: 'lastname', width: 100 }, { text: 'Product', datafield: 'productname', width: 180 }, { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' } ] }); $("#saveState").jqxButton({ theme: theme }); $("#loadState").jqxButton({ theme: theme }); $("#hide").jqxButton({ theme: theme }); var state = null; $("#saveState").click(function () { // save the current state of jqxGrid. state = $("#jqxgrid").jqxGrid('savestate'); }); $("#loadState").click(function () { // load the Grid's state. if (state) { $("#jqxgrid").jqxGrid('loadstate', state); } else { $("#jqxgrid").jqxGrid('loadstate'); } }); $("#hide").click(function () { $("#jqxgrid").jqxGrid('hidecolumn', 'firstname'); }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana;"> <div id="jqxgrid"> </div> </div> <div style="margin-top: 30px;"> <input type="button" id="saveState" value="Save State" /> <input type="button" id="loadState" value="Load State" /> <input type="button" id="hide" value="Hide Ship City" /> </div></body></html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Dear Dimitar
Thank you for your reply. I am using the latest version. You are not able to simulate the issue with my sample ? In my case i am using the controller method to bind the data.
Regards
Dominic -
AuthorPosts
Viewing 5 posts - 1 through 5 (of 5 total)
You must be logged in to reply to this topic.