jQuery UI Widgets Forums Navigation Menu, Context Menu How to update jqxmenu checked and unchecked based on saved preference value for

This topic contains 12 replies, has 2 voices, and was last updated by  Nadezhda 9 years, 2 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author

  • parshtest
    Participant

    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.


    parshtest
    Participant

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

    Nadezhda
    Participant

    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/


    parshtest
    Participant

    Hello Nadezhda,

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


    Nadezhda
    Participant

    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/


    parshtest
    Participant

    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>


    Nadezhda
    Participant

    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/


    parshtest
    Participant

    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>

    • This reply was modified 9 years, 2 months ago by  parshtest.

    Nadezhda
    Participant

    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/


    parshtest
    Participant

    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>
    • This reply was modified 9 years, 2 months ago by  parshtest.
    • This reply was modified 9 years, 2 months ago by  parshtest.

    parshtest
    Participant

    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


    parshtest
    Participant

    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


    Nadezhda
    Participant

    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/

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

You must be logged in to reply to this topic.