How to update jqxmenu checked and unchecked based on saved preference value for

[parshtestParticipant]

Hello,
I have integrated jqxgrid with jgxmenu. I have a option to check/uncheck the jgxmenu which updates the jqxgrid columns where the jqxgrid will show only the columns which are checked in the jqxmenu. So the unchecked will be hidden. Then i have a option to save the preference for each user where it stores the entire jgxgrid data into a table. So next time when i refresh i want the jgxmenu get updated with whatever column it is checked to show checked and unchecked as unchecked based on the saved preference value from the database for particular user.

[parshtestParticipant]

The code is as below

$("#jqxgrid").jqxGrid(
            {  
                 width: "99%",
                source: dataAdapter,
                theme: 'metro',
                showfilterrow: true,
                showfiltermenuitems :true,
                filterable: true,
                sortable: true,
                pageable: true,
                autoheight: true,
                autorowheight: false,//performance improvement
                enabletooltips:false,
                pagesizeoptions : ['100','200','300','400','500','600','700','800','900','1000'],
                pagesize : 200,
                rowsheight: 40,
                altrows:true,
                ready: function () {
                    // callback function which is called by jqxGrid when the widget is initialized and the binding is completed.
                   // addfilter();
                   $("#loadState").trigger("click",function(){
                        
                     });
                 },
                //autoshowfiltericon: true,
                columnsresize: true,
                columnsreorder: true,
                columnsheight:50,
                columns: [
                 
                  
                   { text: '<b><center>SL<center><b>', datafield: 'slno',cellsrenderer:cellsrenderersl,columntype:'number', width: 50,filterable:false,resizable:false,columnsreorder:false,pinned:true}, 
                   
                   { text: '<b><center>First Name<center><b>',cellsrenderer:cellsrenderer, datafield: 'FirstName', width: 233 ,columntype: 'textbox', autoresizecolumns:true,hidden:false},
                   { text: '<b><center>Second Name<center><b>',cellsrenderer:cellsrenderer, datafield: 'SecondName', width: 233 ,columntype: 'textbox', autoresizecolumns:true,hidden:false},
                   { text: '<b><center>Mobile<center><b>', cellsrenderer:cellsrenderer, datafield: 'Mobile', width: 233 ,columntype: 'textbox', autoresizecolumns:true,hidden:true},                     
                   { text: '<b><center>Email<center><b>', cellsrenderer:cellsrenderer, datafield: 'Email', width: 233 ,columntype: 'textbox', autoresizecolumns:true,hidden:true},
                

                 
              ]
            });

$("#jqxMenu").jqxMenu({ width: '50', mode: 'vertical', theme: 'metro' });
                $("#jqxMenu").css('visibility', 'visible');                                                                                                                                                                                                                                                                                                                                                             
            var listSource = [{ label: ''First Name', ', value: 'FirstName', ', checked: true },{ label: 'Second Name', value: 'SecondName', checked: false },{ label: 'Mobile', value: 'Mobile', checked: true },{ label: 'Email', value: 'Email', checked: true });
            $("#jqxlistbox").on('checkChange', function (event) {
                
                var args = event.args;
                if (args) {
                    var index = args.index;
                    var item = args.item;
                    var originalEvent = args.originalEvent;
                    // get item's label and value.
                    var label = item.label;
                    var value = item.value;
                }
 
               var checkedItems = $("#jqxlistbox").jqxListBox('getCheckedItems');
                var count=0;
                $.each(checkedItems,function(key,val){
                    count=count+1;                    
                });
                
                if(count<3)
                {
                     $("#jqxgrid").jqxGrid('beginupdate');

                if (event.args.checked) {  
                    $("#jqxgrid").jqxGrid('showcolumn', event.args.value);                   
                }
                else {
                    $("#jqxgrid").jqxGrid('hidecolumn', event.args.value);
                }
                $("#jqxgrid").jqxGrid('endupdate');
                }
                else
                {
                    alert("Select Maximum 2 fields");
                    $("#jqxlistbox").jqxListBox('uncheckItem', value );
                }
               
            });

[NadezhdaParticipant]

Hello parshtest,

Please, provide us with more information about jqxMenu. If you want to check/uncheck menu items with checkbox you can not achieve it because jqxMenu does not support checkbox selection.

Best Regards,
Nadezhda

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

[parshtestParticipant]

Hello Nadezhda,

I have posted above the code i have used to create the check boxes which is using jqxlist along with jqxmenu

[NadezhdaParticipant]

Hi parshtest,

In the above example you are using jqxListBox without initialization which is not correct. The ‘cellsrenderer’ function definition is also missing.
Could you, please, provide us with full sample code or, preferably, a JSFiddle example so that we may get a better understanding of your scenario and be able to help.

Best Regards,
Nadezhda

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

[parshtestParticipant]

Hi Nadezhda

This is how i have initialized jqxListBox and also i have included the code which is saving the preference value. This is my full code which is also referring to some external files where the database queries are written. I want my jqxListBox values to be updated according to the value stored in saved preference….
<script type=”text/javascript”>
$(document).ready(function () {
var theme = getDemoTheme();
var theme = getDemoTheme();
var url = “../include/helper.php?flag=list”;
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘slno’},
{ name: ‘FirstName’},
{ name: ‘LastName’},
{ name: ‘Mobile’},
{ name: ‘Email’},
],
id: ‘ID’,
url: url,
};

var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.beginUpdate(); //performance optimisation start
var cellsrenderer=function(row,column,value,columnproperties)
{
return ‘<div style=”margin-left:10px;margin-top:10px;”>’+value+'</div>’;
}
var cellsrenderersl=function(row,column,value)
{
return ‘<div style=”text-align:center;margin-top:10px;”>’+(value+1)+'</div>’;
}
var cellsrenderernumber=function(row,column,value)
{
return ‘<div style=”text-align:center;margin-top:10px;”>’+value+'</div>’;
}
$(“#jqxgrid”).jqxGrid(
{
width: “99%”,
source: dataAdapter,
theme: ‘metro’,
showfilterrow: true,
showfiltermenuitems :true,
filterable: true,
sortable: true,
pageable: true,
autoheight: true,
autorowheight: false,//performance improvement
enabletooltips:false,
pagesizeoptions : [‘100′,’200′,’300′,’400′,’500′,’600′,’700′,’800′,’900′,’1000’],
pagesize : 200,
rowsheight: 40,
altrows:true,
ready: function () {
// callback function which is called by jqxGrid when the widget is initialized and the binding is completed.
// addfilter();
$(“#loadState”).trigger(“click”,function(){

});
},
//autoshowfiltericon: true,
columnsresize: true,
columnsreorder: true,
columnsheight:50,
columns: [

{ text: ‘<b><center>SL<center><b>’, datafield: ‘slno’,cellsrenderer:cellsrenderersl,columntype:’number’, width: 50,filterable:false,resizable:false,columnsreorder:false,pinned:true},

{ text: ‘<b><center>First Name<center><b>’,cellsrenderer:cellsrenderer, datafield: ‘FirstName’, width: 233 ,columntype: ‘textbox’, autoresizecolumns:true,hidden:false},
{ text: ‘<b><center>Second Name<center><b>’,cellsrenderer:cellsrenderer, datafield: ‘SecondName’, width: 233 ,columntype: ‘textbox’, autoresizecolumns:true,hidden:false},
{ text: ‘<b><center>Mobile<center><b>’, cellsrenderer:cellsrenderer, datafield: ‘Mobile’, width: 233 ,columntype: ‘textbox’, autoresizecolumns:true,hidden:true},
{ text: ‘<b><center>Email<center><b>’, cellsrenderer:cellsrenderer, datafield: ‘Email’, width: 233 ,columntype: ‘textbox’, autoresizecolumns:true,hidden:true},

]
});

var state = null;
var jqxidname = “jqxgridMember”;
$(“#saveState”).click(function () {
// save the current state of jqxGrid.
state = $(“#jqxgrid”).jqxGrid(‘savestate’);
//alert(JSON.stringify(state))

var statesav = null;
$(“#savingstate”).click(function(){
var x = confirm(“Are you sure you want to save this preference ?”);
if (x)
{
statesav = $(“#jqxgrid”).jqxGrid(‘getstate’);
var stat = JSON.stringify(statesav);
//alert(stat);
if(statesav){
$.ajax({
type: “POST”,
url: “../include/helper.php”,
data: {prfvalue:stat,userid:<?php echo $USERID;?>,urid:1,idname:jqxidname},
success: function(data){
alert(“Preference Saved Successfully”);
}
});
}
return true;
}
else
return false;

});

$(“#loadState”).click(function () {

$.ajax({
type: “POST”,
url: “../include/helper.php”,
data: {userlid:<?php echo $USERID;?>,ulrid:1,idlname:jqxidname},
success: function(datap){
if(datap != 0)
{ var p = $.parseJSON(datap);
datap = JSON.parse(p);
$(“#jqxgrid”).jqxGrid(‘loadstate’,datap);
}
else
{
//alert(“No Preference Found”);
}
}

});

});
// Create a jqxMenu

$(“#jqxMenu”).jqxMenu({ width: ’50’, mode: ‘vertical’, theme: ‘metro’ });
$(“#jqxMenu”).css(‘visibility’, ‘visible’);
var listSource = [{ label: ”First Name’, ‘, value: ‘FirstName’, ‘, checked: true },{ label: ‘Second Name’, value: ‘SecondName’, checked: false },{ label: ‘Mobile’, value: ‘Mobile’, checked: true },{ label: ‘Email’, value: ‘Email’, checked: true });
$(“#jqxlistbox”).on(‘checkChange’, function (event) {

var args = event.args;
if (args) {
var index = args.index;
var item = args.item;
var originalEvent = args.originalEvent;
// get item’s label and value.
var label = item.label;
var value = item.value;
}

var checkedItems = $(“#jqxlistbox”).jqxListBox(‘getCheckedItems’);
var count=0;
$.each(checkedItems,function(key,val){
count=count+1;
});

if(count<3)
{
$(“#jqxgrid”).jqxGrid(‘beginupdate’);

if (event.args.checked) {
$(“#jqxgrid”).jqxGrid(‘showcolumn’, event.args.value);
}
else {
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, event.args.value);
}
$(“#jqxgrid”).jqxGrid(‘endupdate’);
}
else
{
alert(“Select Maximum 2 fields”);
$(“#jqxlistbox”).jqxListBox(‘uncheckItem’, value );
}

});

</script>
<div style=”float: left;margin-right: 10px;margin-top: 10px;”><input class=”btn btn-info” type=”button” value=”Save Preference” id=”savingstate”/>
<input class=”btn btn-info” type=”button” value=”Load Preference” id=”loadState” style=”display: none;” /></div>

[NadezhdaParticipant]

Hi parshtest,

Please, re-post the above example and remember to format it by selecting it and clicking the code button in the toolbar.
Note that you are using the following line var theme = getDemoTheme(); two times in the beginning of the above code. If you don’t need the double line take it out.

Best Regards,
Nadezhda

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

[parshtestParticipant]

Hi Nadezhda

This is how i have initialized jqxListBox and also i have included the code which is saving the preference value. This is my full code which is also referring to some external files where the database queries are written. I want my jqxListBox values to be updated according to the value stored in saved preference….
<script type=”text/javascript”>
$(document).ready(function () {
$(“#userImage”).hide();
var theme = getDemoTheme();
var url = “../include/helper.php?flag=list”;
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘slno’},
{ name: ‘FirstName’},
{ name: ‘LastName’},
{ name: ‘Mobile’},
{ name: ‘Email’},
],
id: ‘ID’,
url: url,
};

var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.beginUpdate(); //performance optimisation start
var cellsrenderer=function(row,column,value,columnproperties)
{
return ‘<div style=”margin-left:10px;margin-top:10px;”>’+value+’</div>’;
}
var cellsrenderersl=function(row,column,value)
{
return ‘<div style=”text-align:center;margin-top:10px;”>’+(value+1)+’</div>’;
}
var cellsrenderernumber=function(row,column,value)
{
return ‘<div style=”text-align:center;margin-top:10px;”>’+value+’</div>’;
}
$(“#jqxgrid”).jqxGrid(
{
width: “99%”,
source: dataAdapter,
theme: ‘metro’,
showfilterrow: true,
showfiltermenuitems :true,
filterable: true,
sortable: true,
pageable: true,
autoheight: true,
autorowheight: false,//performance improvement
enabletooltips:false,
pagesizeoptions : [‘100′,’200′,’300′,’400′,’500′,’600′,’700′,’800′,’900′,’1000’],
pagesize : 200,
rowsheight: 40,
altrows:true,
ready: function () {
// callback function which is called by jqxGrid when the widget is initialized and the binding is completed.
// addfilter();
$(“#loadState”).trigger(“click”,function(){

});
},
//autoshowfiltericon: true,
columnsresize: true,
columnsreorder: true,
columnsheight:50,
columns: [

{ text: ‘<b><center>SL<center><b>’, datafield: ‘slno’,cellsrenderer:cellsrenderersl,columntype:’number’, width: 50,filterable:false,resizable:false,columnsreorder:false,pinned:true},

{ text: ‘<b><center>First Name<center><b>’,cellsrenderer:cellsrenderer, datafield: ‘FirstName’, width: 233 ,columntype: ‘textbox’, autoresizecolumns:true,hidden:false},
{ text: ‘<b><center>Second Name<center><b>’,cellsrenderer:cellsrenderer, datafield: ‘SecondName’, width: 233 ,columntype: ‘textbox’, autoresizecolumns:true,hidden:false},
{ text: ‘<b><center>Mobile<center><b>’, cellsrenderer:cellsrenderer, datafield: ‘Mobile’, width: 233 ,columntype: ‘textbox’, autoresizecolumns:true,hidden:true},
{ text: ‘<b><center>Email<center><b>’, cellsrenderer:cellsrenderer, datafield: ‘Email’, width: 233 ,columntype: ‘textbox’, autoresizecolumns:true,hidden:true},

]
});

var state = null;
var jqxidname = “jqxgridMember”;
$(“#saveState”).click(function () {
// save the current state of jqxGrid.
state = $(“#jqxgrid”).jqxGrid(‘savestate’);
//alert(JSON.stringify(state))

var statesav = null;
$(“#savingstate”).click(function(){
var x = confirm(“Are you sure you want to save this preference ?”);
if (x)
{
statesav = $(“#jqxgrid”).jqxGrid(‘getstate’);
var stat = JSON.stringify(statesav);
//alert(stat);
if(statesav){
$.ajax({
type: “POST”,
url: “../include/helper.php”,
data: {prfvalue:stat,userid:<?php echo $USERID;?>,urid:1,idname:jqxidname},
success: function(data){
alert(“Preference Saved Successfully”);
}
});
}
return true;
}
else
return false;

});

$(“#loadState”).click(function () {

$.ajax({
type: “POST”,
url: “../include/helper.php”,
data: {userlid:<?php echo $USERID;?>,ulrid:1,idlname:jqxidname},
success: function(datap){
if(datap != 0)
{ var p = $.parseJSON(datap);
datap = JSON.parse(p);
$(“#jqxgrid”).jqxGrid(‘loadstate’,datap);
}
else
{
//alert(“No Preference Found”);
}
}

});

});
// Create a jqxMenu

$(“#jqxMenu”).jqxMenu({ width: ’50′, mode: ‘vertical’, theme: ‘metro’ });
$(“#jqxMenu”).css(‘visibility’, ‘visible’);
var listSource = [{ label: ”First Name’, ‘, value: ‘FirstName’, ‘, checked: true },{ label: ‘Second Name’, value: ‘SecondName’, checked: false },{ label: ‘Mobile’, value: ‘Mobile’, checked: true },{ label: ‘Email’, value: ‘Email’, checked: true });
$(“#jqxlistbox”).on(‘checkChange’, function (event) {

var args = event.args;
if (args) {
var index = args.index;
var item = args.item;
var originalEvent = args.originalEvent;
// get item’s label and value.
var label = item.label;
var value = item.value;
}

var checkedItems = $(“#jqxlistbox”).jqxListBox(‘getCheckedItems’);
var count=0;
$.each(checkedItems,function(key,val){
count=count+1;
});

if(count<3)
{
$(“#jqxgrid”).jqxGrid(‘beginupdate’);

if (event.args.checked) {
$(“#jqxgrid”).jqxGrid(‘showcolumn’, event.args.value);
}
else {
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, event.args.value);
}
$(“#jqxgrid”).jqxGrid(‘endupdate’);
}
else
{
alert(“Select Maximum 2 fields”);
$(“#jqxlistbox”).jqxListBox(‘uncheckItem’, value );
}

});

</script>
<div style=”float: left;margin-right: 10px;margin-top: 10px;”><input class=”btn btn-info” type=”button” value=”Save Preference” id=”savingstate”/>
<input class=”btn btn-info” type=”button” value=”Load Preference” id=”loadState” style=”display: none;” /></div>

[NadezhdaParticipant]

Hi parshtest,

In the above example I did not find where you create div elements with class/id selectors for jqxMenu,jqxGrid and jqxListBox. In the following part of code you didn’t initialize the jqxListBox:

$(“#jqxMenu”).jqxMenu({ width: ’50′, mode: ‘vertical’, theme: ‘metro’ });
$(“#jqxMenu”).css(‘visibility’, ‘visible’);
var listSource = [{ label: ”First Name’, ‘, value: ‘FirstName’, ‘, checked: true },{ label: ‘Second Name’, value: ‘SecondName’, checked: false },{ label: ‘Mobile’, value: ‘Mobile’, checked: true },{ label: ‘Email’, value: ‘Email’, checked: true });
$(“#jqxlistbox”).on(‘checkChange’, function (event) {
var args = event.args;
if (args) {
var index = args.index;
var item = args.item;
var originalEvent = args.originalEvent;
// get item’s label and value.
var label = item.label;
var value = item.value;
}

To initialize it you should insert the following script to the html document:

// Create a jqxListBox
$("#jqxlistbox").jqxListBox({ source: listSource, width: '200px', height: '250px',});

I hope it is helpful to you.

Best Regards,
Nadezhda

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

[parshtestParticipant]

Ok i just excluded some part of the code thinking it is not needed. I have included the div for jqxlistbox,jqxmenu and jqxgrid. This is almost the full code excluding some external css and js files….

<script type=”text/javascript”>
$(document).ready(function () {
$(“#userImage”).hide();
var theme = getDemoTheme();
var url = “../include/helper.php?flag=list”;
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: 'slno'},
{ name: 'FirstName'},
{ name: 'LastName'},
{ name: 'Mobile'},
{ name: 'Email'},
],
id: ‘ID’,
url: url,
};

var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.beginUpdate(); //performance optimisation start
var cellsrenderer=function(row,column,value,columnproperties)
{
return ‘<div style=”margin-left:10px;margin-top:10px;”>’+value+’</div>’;
}
var cellsrenderersl=function(row,column,value)
{
return ‘<div style=”text-align:center;margin-top:10px;”>’+(value+1)+’</div>’;
}
var cellsrenderernumber=function(row,column,value)
{
return ‘<div style=”text-align:center;margin-top:10px;”>’+value+’</div>’;
}
$(“#jqxgrid”).jqxGrid(
{
width: “99%”,
source: dataAdapter,
theme: ‘metro’,
showfilterrow: true,
showfiltermenuitems :true,
filterable: true,
sortable: true,
pageable: true,
autoheight: true,
autorowheight: false,//performance improvement
enabletooltips:false,
pagesizeoptions : ['100','200','300','400','500','600','700','800','900','1000'],
pagesize : 200,
rowsheight: 40,
altrows:true,
ready: function () {
// callback function which is called by jqxGrid when the widget is initialized and the binding is completed.
// addfilter();
$(“#loadState”).trigger(“click”,function(){

});
},
//autoshowfiltericon: true,
columnsresize: true,
columnsreorder: true,
columnsheight:50,
columns: [

{ text: '<b><center>SL<center><b>', datafield: 'slno',cellsrenderer:cellsrenderersl,columntype:'number', width: 50,filterable:false,resizable:false,columnsreorder:false,pinned:true},

{ text: '<b><center>First Name<center><b>',cellsrenderer:cellsrenderer, datafield: 'FirstName', width: 233 ,columntype: 'textbox', autoresizecolumns:true,hidden:false},
{ text: '<b><center>Second Name<center><b>',cellsrenderer:cellsrenderer, datafield: 'SecondName', width: 233 ,columntype: 'textbox', autoresizecolumns:true,hidden:false},
{ text: '<b><center>Mobile<center><b>', cellsrenderer:cellsrenderer, datafield: 'Mobile', width: 233 ,columntype: 'textbox', autoresizecolumns:true,hidden:true},
{ text: '<b><center>Email<center><b>', cellsrenderer:cellsrenderer, datafield: 'Email', width: 233 ,columntype: 'textbox', autoresizecolumns:true,hidden:true},

]
});

var state = null;
var jqxidname = “jqxgridMember”;
$(“#saveState”).click(function () {
// save the current state of jqxGrid.
state = $(“#jqxgrid”).jqxGrid(‘savestate’);
//alert(JSON.stringify(state))

var statesav = null;
$(“#savingstate”).click(function(){
var x = confirm(“Are you sure you want to save this preference ?”);
if (x)
{
statesav = $(“#jqxgrid”).jqxGrid(‘getstate’);
var stat = JSON.stringify(statesav);
//alert(stat);
if(statesav){
$.ajax({
type: “POST”,
url: “../include/helper.php”,
data: {prfvalue:stat,userid:<?php echo $USERID;?>,urid:1,idname:jqxidname},
success: function(data){
alert(“Preference Saved Successfully”);
}
});
}
return true;
}
else
return false;

});

$(“#loadState”).click(function () {

$.ajax({
type: “POST”,
url: “../include/helper.php”,
data: {userlid:<?php echo $USERID;?>,ulrid:1,idlname:jqxidname},
success: function(datap){
if(datap != 0)
{ var p = $.parseJSON(datap);
datap = JSON.parse(p);
$(“#jqxgrid”).jqxGrid(‘loadstate’,datap);
}
else
{
//alert(“No Preference Found”);
}
}

});

});
// Create a jqxMenu

$(“#jqxMenu”).jqxMenu({ width: ’50′, mode: ‘vertical’, theme: ‘metro’ });
$(“#jqxMenu”).css(‘visibility’, ‘visible’);
var listSource = [{ label: ”First Name’, ‘, value: ‘FirstName’, ‘, checked: true },{ label: ‘Second Name’, value: ‘SecondName’, checked: false },{ label: ‘Mobile’, value: ‘Mobile’, checked: true },{ label: ‘Email’, value: ‘Email’, checked: true });
$("#jqxlistbox").jqxListBox({ source: listSource, width: 150, height: 450, theme: 'darkblue', checkboxes: true });

$(“#jqxlistbox”).on(‘checkChange’, function (event) {

var args = event.args;
if (args) {
var index = args.index;
var item = args.item;
var originalEvent = args.originalEvent;
// get item’s label and value.
var label = item.label;
var value = item.value;
}

var checkedItems = $(“#jqxlistbox”).jqxListBox(‘getCheckedItems’);
var count=0;
$.each(checkedItems,function(key,val){
count=count+1;
});

if(count<3)
{
$(“#jqxgrid”).jqxGrid(‘beginupdate’);

if (event.args.checked) {
$(“#jqxgrid”).jqxGrid(‘showcolumn’, event.args.value);
}
else {
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, event.args.value);
}
$(“#jqxgrid”).jqxGrid(‘endupdate’);
}
else
{
alert(“Select Maximum 2 fields”);
$(“#jqxlistbox”).jqxListBox(‘uncheckItem’, value );
}

});

</script>
 <div id='jqxWidget' style="margin-left: 20px;" >
    <div id='jqxMenu' style="visibility: hidden;">
                <ul>
                    <li><img style='float: left; margin-right: 5px;margin-bottom:5px;' src='../images/addtogrid.png' width="30"/><span></span>
                        <ul>
                            <div id="jqxlistbox"></div>
                        </ul>
                    </li>                  
                </ul>
            </div>        
        
        <div style="float: left;" id="jqxgrid" ></div> 
<div style=”float: left;margin-right: 10px;margin-top: 10px;”><input class=”btn btn-info” type=”button” value=”Save Preference” id=”savingstate”/>
<input class=”btn btn-info” type=”button” value=”Load Preference” id=”loadState” style=”display: none;” /></div>
</div>

[parshtestParticipant]

I have initialize jqxlistbox. I missed that line and above i have posted the full code including it and the div’s containing those widgets. So now let me know how to update my jqxlistbox from the value stored at saved preference

[parshtestParticipant]

Hi Nadezhda

Hope you have understood what i want to do. If not tell me i will try to say again.
In brief i want to update the jqxlistbox checked values according to the value stored in database. My jqxgrid is already showing that value from database but dont know how to set it for jqxlist. beccause i am storing the values of jqxgrid in the table. But i can find out hidden:false property of jqxgrid and accordingly update the jqxlistbox

Is there any solution for my query…?

Regards
Parshtest

[NadezhdaParticipant]

Hi Parshtest,

If you want to update the checkbox state, please take a look at the following forum post: http://www.jqwidgets.com/community/topic/how-to-update-the-checkbox-of-jqxlistbox-using-the-value-of-jqxgrid/.

Best Regards,
Nadezhda

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

[Author]

Posts