selectItem method using json data

[AliMajedParticipant]

Hello
In API Reference guide, it shows us how to select an item using “li” tag, but how can I select an item using the item’s Id stored in my data base? I am using Json data as resource for my Tree.
thanks in advance

[ChristopherParticipant]

Hi AliMajed,

If you’ve applied the JSON correctly, the jqxTree automatically adds an id attrbiute to every “li” tag that corresponds to the ID from the JSON. So you can select a “li” element by the id you want, using the selectitem.
This demo shows how to bind to JSON:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/treebindingtojson.htm?light
This shows how to select the item:
http://jsfiddle.net/jqwidgets/yWBZJ/

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[AliMajedParticipant]

Hello Christopher
and Thanks for your comment

I have already bind my Tree to JSON data correctly, but in a form, when I am going to update my record info, I need the Tree to select the stored item as old data, so if user wants to change it or not for updating record. I am just using JSON data as resource in my Tree.
I have used :
$(‘#jqxTree’).jqxTree(‘selectItem’, element);
or
$(‘#jqxTree’).jqxTree(‘selectItem’, $(“#jqxTree”).find(‘li:first’)[0]);
that are in documents, but it does not work.

and
Thanks in Advance

[ChristopherParticipant]

Hi AliMajed,

Please provide a code sample so I can review it and come up with a solution.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[AliMajedParticipant]

Hello Christopher

my JS is : I have a Grid named “LawGrid” that shows all my Law stored in DB, in Grid I have a cell named “Update” that is cellRendered with “updateRenderer “. on clickon the cell, it show show the Law Information including it’s Category but it shows only other informations
like “Name” or etc exept the Category.

function SuccessGetLawList(response) {
 var source = {
   datatype: 'json',
   localdata: response };
 
 var dataAdapter = new $.jqxdataAdapter(source);
 updateRenderer = function(row,datafields,value) {
  var _LawID = $('#LawGrid').jqxGrid('getcellvalue' , row , 'LawID'); // LawID is( the name of Field in DB
  var _Category = $('#LawGrid').jqxGrid('getcellvalue' , row , 'CategoriID'); // CategoryID is the field in DB that Store Law Category

  return '<div onClick=" UpdateLaw(' + _LawID.toString() + ',\'' _Category.toString() + '\') >'
};

function UpdateLaw ( _LawID, Category) {

 var _CategoryINT = parseInt(Category);
 $('#LawGTree').jqxTree('selectItem' , CategoryINT ); // That is the segment that it should show the selected Law Category in Tree
                                                         to make user able to change it or not. but it does not.

};

Thanks in Advance for your support

[ChristopherParticipant]

Hi AliMajed,

I see you want to use a value from the jqxGrid as a selection criteria for your jqxTree. In order to do that you have to take the following steps:

– In your “UpdateLaw()” method you need to get all of the elements of the jqxTree. You can do that using the getItems method from the jqxTree API.
– Iterate through them and check if the value is present.
– If it is, get the a reference to the element and using selectItem select that element. Every item that is returned from the getItems method, contains properties like “label” and “element”. “label” represents the actual text of the <li> of the current item(this will be compared to “CategoryINT” value that you get from the jqxGrid). “element” represents a reference to the </li><li> tag.

Here is a demo:
http://jsfiddle.net/W4NZw/144/

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[AliMajedParticipant]

Hello Christopher

Thanks for your Great help, my problem has been solved with your solution

With Best Regards

[Author]

Posts