Populate Tree label?

[realtekParticipant]

Hi,

When you have a tree which is bound to a datasource how do you set which value is the label of the item in the tree?

I am using a dataAdapter:

  var url = "api/form/Output";
                // prepare the data
                var source =
                        {
                            data: {
                                Seq_Table: "18"
                            },
                            datatype: "json",
                            datafields: [
                            { name: 'DisplayName' },
                            { name: 'Seq' },
                            { name: 'Seq_BaseTable' }

                            ],
                            id: 'Seq',
                            url: url,
                            type: "POST",
                            async: true
                        };
                var dataAdapter = new $.jqx.dataAdapter(source);

                $("#tree").jqxTree({ width: 200, height: 220, checkboxes: true, source: dataAdapter });

I am just seeing:

Item
Item
Item
Item

[VladimirParticipant]

Hello realtek,

The TreeGrid source functionality is explained in the demos in the API Reference section under source.
You can find the full list of fields and how they need to be referenced there.
You can use the dataAdapter map: functionality to map your own fields to the relevant value.

Example:

                            { name: 'label' map: 'DisplayName'},

Best Regards,
Vladimir

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

[realtekParticipant]

Hi Vladimir,

I did notice this and tried that several times but it made no difference.

I have since realised this morning that the request is not happening to the server and no data is actually happening.

Do you know why the above would not even try to call the web api?

Everything else is working!

Thanks

[realtekParticipant]

I have just sorted it now, I forgot the databind

[realtekParticipant]

The request is now working but using them method above still fails to map my data.

The json response looks fine. I am getting too many tree items and they all just say ‘Item’

[VladimirParticipant]

Hello realtek,

Please try the method used in the binding to json demo.
The mapping there is done in a records variable.

                var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);

Best Regards,
Vladimir

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

[realtekParticipant]

I think the issue is that the dataAdapter is empty. I have checked the server response and I can see the json response coming back and it looks fine.

Here is the json:

[
{
“DisplayName”: “Sequence”,
“Seq_Field”: “83”,
“Seq_BaseTable”: “12”
},
{
“DisplayName”: “Test ID”,
“Seq_Field”: “84”,
“Seq_BaseTable”: “12”
},
{
“DisplayName”: “Duration”,
“Seq_Field”: “85”,
“Seq_BaseTable”: “12”
},
{
“DisplayName”: “Person”,
“Seq_Field”: “86”,
“Seq_BaseTable”: “12”
},
{
“DisplayName”: “Address”,
“Seq_Field”: “87”,
“Seq_BaseTable”: “12”
}
]

I have even tried displays dataAdapter.records.length inside the load complete of the dataAdapter but it returns 0 ?

[realtekParticipant]

ok, I do not know why but I have got it working with:

.jqxTree({source: dataAdapter.records})

Do you know what is causing this?

Thanks

[VladimirParticipant]

Hello realtek,

Make sure you have called the dataAdapter.dataBind() method.
Take a look at this sample with the json you provided.

Best Regards,
Vladimir

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

[realtekParticipant]

Hi,

ok it is finally sorted. It was due to the timing of things, basically because I had async set to true it did not have time to populate the tree.

Is that normal behaviour? Should the source be set in a bindingComplete or something?

[VladimirParticipant]

Hello realtek,

The Tree has no autobind functionality, so if the dataAdapter records get updated after the initialization, you need to reset the source manually.

You can try to use loadComplete callback of the dataAdapter:

         loadComplete: function () {
                        $('#jqxTree').jqxTree({ source: dataAdapter.records});
                    },

Best Regards,
Vladimir

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

[realtekParticipant]

Thanks, this is now working!

[Author]

Posts