[parshtestParticipant]

Hi Peter Stoev,

Now I am able to do what i was looking for. I had a syntax error in my if condition above. Now it is working well. Thanks for the support.

if(fnamevalue ==false)
									{
									    $("#jqxlistbox").jqxListBox('checkIndex', 0);
									}
									else
									{
									   $("#jqxlistbox").jqxListBox('uncheckIndex', 0);
									}

Regards
Parshtest

[parshtestParticipant]

Hi Peter Stoev,

I used getcolumnproperty to get the hidden property of jqxgrid and accordingly checked the value in jqxlistbox using checkIndex. But it is taking very long time to execute this and finally I am getting unresponsive script dialogue from window and then crashing. Suppose if I have more than 10 columns in the jqxgrid then I think it will crash my browser.

Can you provide me some example which is more efficient to do this.

	var fnamevalue = $('#jqxgrid').jqxGrid('getcolumnproperty', 'FirstName', 'hidden');
									if(fnamevalue =="false")
									{
									    $("#jqxlistbox").jqxListBox('checkIndex', 0);
									}
									else
									{
									   $("#jqxlistbox").jqxListBox('uncheckIndex', 0);
									}

var sname= $('#jqxgrid').jqxGrid('getcolumnproperty', 'SecondName', 'hidden');
									if(sname=="false")
									{
									    $("#jqxlistbox").jqxListBox('checkIndex', 1);
									}
									else
									{
									   $("#jqxlistbox").jqxListBox('uncheckIndex', 1);
									}

var Mobile= $('#jqxgrid').jqxGrid('getcolumnproperty', 'Mobile', 'hidden');
									if(Mobile=="false")
									{
									    $("#jqxlistbox").jqxListBox('checkIndex', 2);
									}
									else
									{
									   $("#jqxlistbox").jqxListBox('uncheckIndex', 2);
									}

var Email= $('#jqxgrid').jqxGrid('getcolumnproperty', 'Email', 'hidden');
									if(Email=="false")
									{
									    $("#jqxlistbox").jqxListBox('checkIndex', 3);
									}
									else
									{
									   $("#jqxlistbox").jqxListBox('uncheckIndex', 3);
									}

[parshtestParticipant]

Hi Peter Stoev,

I tried to use checkIndex but it is not allowing me to use the if condition.
Forget about whatever code I have posted. I will tell clearly the scenario from jqxgrid demo.
I have used the same code as how it is in the demo.

Hope you can help me with some example.
I have a jqxgrid as how it is in jqxgrid->Columns->This example illustrates how to show and hide Grid columns.
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/hideshowcolumns.htm?arctic

Also I am saving the grid content using jqxgrid->State Maintenance->This example shows how to Save/Load the Grid’s state.
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/saveloadstate.htm?arctic

In simple words I wanted to integrate above two functionalities
I have done it already and when I Load the Grid’s state it is showing and hiding Grid columns as per Saved Grid’s state.
But i am not able to update the check/uncheck the jqxlistbox items as per the columns loaded in the Grid. It remains the same as how it was before Saving the Grid’s state..

Hope now you’re very clear about what i am trying to do and i really expect a solution from you this time. It it is possible to do using checkIndex or checkItem methods then please provide/assist me with simple example

Regards
Parshtest

[parshtestParticipant]

Hello Peter Stoev

I feel like you have not understood my question. Please read the link fully because initially the what the question meant is completely different from the way i explained it further. I am very sure that there is a solution for what i am asking. Already i have done so much and only that last part is remaining.
Refer the code which is in the end part of this post http://www.jqwidgets.com/community/topic/how-to-update-jqxmenu-checked-and-unchecked-based-on-saved-preference-value-for/

I tell it again in simple words:
1]I have a jqxgrid with 4 columns and jqxlistbox with 4 value
2]I am showing only 2 columns in the jqxgrid which are checked in the jqxlistbox
3]Here I kept the jqxlistbox items checked as how it is shown in the code
4]Unchecked items in the jqxlistbox are hidden from jqxgrid and I can check/uncheck which will update the jqxgrid columns hidden:true/false accordingly
5]Now I am saving the values of jqxgrid into the database table using var statesav = $(“#jqxgrid”).jqxGrid(‘getstate’);
6]So next time when I open I will check whether the jqxgrid has any saved value in the database if so i will update
7]Now my jqxlistbox also should get updated as per the jqxgrid values which is saved
8]Currently it shows the checked/unchecked as how it was in the beginning but my jqxgrid is showing other value than the checked one in jqxlistbox
9]To do this i should read from the jqxgrid value stored with the property hidden:false and update the jqxlistbox checked value
10]I want to use if condtion here inside listsource to say checked is true or not based on jqxgrid hidden:false

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 });

[parshtestParticipant]

Hello Peter Stoev,

Forget about jqxMenu . It is possible to show jqxgrid using jqxlistbox right

[parshtestParticipant]

Hi Peter Stoev

Please refer this code and can you implement checkIndex or checkItem methods to update the checkboxes of jqxlist using the jqxgrid hidden:false property.

I have already used checkChange function to change the checked/unchecked accordingly but trying to update it when the jqxgrid values are updated using saved preference value.

Please refer this link for full code and details
http://www.jqwidgets.com/community/topic/how-to-update-jqxmenu-checked-and-unchecked-based-on-saved-preference-value-for/

Regards
Parshtest

[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

[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]

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]

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>

[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>

[parshtestParticipant]

Hello Nadezhda,

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

[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 );
                }
               
            });

[Author]

Posts