jQuery UI Widgets Forums Lists ListBox How to update the checkbox of jqxlistbox using the value of jqxgrid

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

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

  • parshtest
    Participant

    Hello,

    I have a jqxlistbox with checkbox and a jqxgrid.
    I am getting the values to be shown in jqxgrid from the database. Suppose i have 10 columns in jqxgrid, i may be showing only 5 and rest five are hidden.
    So whatever is shown column is shown in the jqxgrid should be checked in jqxlistbox.
    So how can i check the checkbox of jqxlistbox looking at the hidden:false property of jqxgrid

    Regards


    Peter Stoev
    Keymaster

    Hi parshtest,

    checkIndex or checkItem methods can be used for checking ListBox items.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    parshtest
    Participant

    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


    Peter Stoev
    Keymaster

    Hi parshtest,

    jqxMenu and jqxListBox are different widgets. You cannot add jqxListBox as Menu Item in jqxGrid. jqxMenu also has no checked/unchecked settings or methods for checking/unchecking items. In general, you try to do something which is not possible.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    parshtest
    Participant

    Hello Peter Stoev,

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


    Peter Stoev
    Keymaster

    Hi parshtest,

    By using the jQuery’s “show” method, you can change the visibility of HTML Element from display: none to display: block. You can call this method anywhere in your code.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    parshtest
    Participant

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

    Peter Stoev
    Keymaster

    Hi parshtest,

    I wrote you how to Check Items in ListBox – checkIndex or checkItem methods should be used.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    parshtest
    Participant

    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


    Peter Stoev
    Keymaster

    Hi Parshtest,

    Methods should be called with expected Arguments. if you want to put IF condition, put it for building variables and then pass the variable to a method as an argument. To check an item, call the checkIndex or checkItem method. The first method expects ListBox index, the second expects ListBox Item which you can get through the getItem method which expects Index argument. If you want to get a property of a grid column, then use the “getcolumnproperty” method.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    parshtest
    Participant

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

    Peter Stoev
    Keymaster

    hI parshtest,

    Send me please, jsfiddle.net sample with your issue.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    parshtest
    Participant

    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

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

You must be logged in to reply to this topic.