jQuery UI Widgets Forums Grid Help regarding ‘loadstate’ property

This topic contains 4 replies, has 2 voices, and was last updated by  dominicthoppil 10 years, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Help regarding ‘loadstate’ property #29570

    dominicthoppil
    Participant

    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
    Dominic

    Help regarding ‘loadstate’ property #29597

    Dimitar
    Participant

    Hello 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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Help regarding ‘loadstate’ property #29619

    dominicthoppil
    Participant

    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
    Dominic

    Help regarding ‘loadstate’ property #29672

    Dimitar
    Participant

    Hi 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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Help regarding ‘loadstate’ property #29683

    dominicthoppil
    Participant

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.