Do you have any demos or tips how to work with Local Storage?
I am trying to implement it and it doesn't work. I see the JSON array with properly set properties but the grid doesn't show the saved data.
Here what I do:
To Save in Local Storage:
var dataLcHdr = $("#grid_lc_hdr_gV5").pqGrid("option", "dataModel.data");
if (dataLcHdr) {
window.localStorage.setItem('dataLcHdr', JSON.stringify(dataLcHdr));
}
To get from Local Storage:
if (window.localStorage.getItem('dataLcHdr')) {
var dataLcHdr = JSON.parse(window.localStorage.getItem('dataLcHdr'));
if (dataLcHdr) {
print_r(dataLcHdr);
$("#grid_lc_hdr_gV5").pqGrid("option", "dataModel.data", dataLcHdr );
$("#grid_lc_hdr_gV5").pqGrid("refresh");
}
}
and the grid itself is very simple:
$(function () {
var lchdr_data_array = [
{recordID:'1', hdr:"Work Order", pq_rowcls:'grp_row_hdr'},
{recordID:'2', hdr:"Comments", pq_rowcls:'grp_row_hdr'}
];
var obj = {
width: 1180,
height: 400,
wrap: true,
showBottom: false,
showHeader: false,
showTop: false,
rowBorders: true,
numberCell: { show: false },
collapsible: false,
track: false,
flexHeight: true,
flexWidth: true,
selectionModel: { type: 'cell' },
scrollModel: { horizontal: false },
hoverMode: 'cell',
editModel: { keyUpDown: true, saveKey: $.ui.keyCode.ENTER },
title: "<b>TIMESHEET<b>",
colModel: [
{title: "Row Header", minWidth: 218, dataIndx: "hdr", resizable: false, align: "right", editable:false, sortable:false},
{title: "Wo1", minWidth: 130, dataIndx: "wo1", resizable: false, align: "center", dataType:"string", cls: "whiteBck Start-DayBorder",
editor: { type:function (ui) {grpHdrEditor(ui,grp_wo_data)}}},
{title: "Wo2", minWidth: 130, dataIndx: "wo2", resizable: false, align: "center", dataType:"string",cls: "whiteBck Start-DayBorder",
editor: { type:function (ui) {grpHdrEditor(ui,grp_wo_data , '100px')}}},
{title: "Wo3", minWidth: 130, dataIndx: "wo3", resizable: false, align: "center", dataType:"string",cls: "whiteBck Start-DayBorder",
editor: { type:function (ui) {grpHdrEditor(ui,grp_wo_data , '100px')}}},
{title: "Wo4", minWidth: 130, dataIndx: "wo4", resizable: false, align: "center", dataType:"string",cls: "whiteBck Start-DayBorder",
editor: { type:function (ui) {grpHdrEditor(ui,grp_wo_data , '100px')}}},
{title: "Wo5", minWidth: 130, dataIndx: "wo5", resizable: false, align: "center", dataType:"string",cls: "whiteBck Start-DayBorder",
editor: { type:function (ui) {grpHdrEditor(ui,grp_wo_data , '100px')}}},
{title: "Wo6", minWidth: 130, dataIndx: "wo6", resizable: false, align: "center", dataType:"string",cls: "whiteBck Start-DayBorder",
editor: { type:function (ui) {grpHdrEditor(ui,grp_wo_data , '100px')}}},
{title: "Wo7", minWidth: 130, dataIndx: "wo7", resizable: false, align: "center", dataType:"string",cls: "whiteBck Start-DayBorder",
editor: { type:function (ui) {grpHdrEditor(ui,grp_wo_data , '100px')}}},
{title: "btn", minWidth: 85, dataIndx: "btn", resizable: false, align: "center", dataType:"string",editable:false, cls: "whiteBck",
editor: { type:function (ui) {grpHdrEditor(ui,grp_wo_data , '100px')}}}
],
dataModel: {
location: "local",
recIndx: "recordID",
rPP: 50,
data: lchdr_data_array
},
quitEditMode:function (evt,ui) {
if (evt.keyCode != $.ui.keyCode.ESCAPE) {
$grid.pqGrid("saveEditCell");
}
}
}
var $grid = $("#grid_lc_hdr_gV5").pqGrid(obj);
});
