Trying to solve a challenge with: TreeGrid. Any help?

[jovanovicParticipant]

How do I access and modify the underlying data source of jqxTreeGrid dynamically with jQuery?

[adminKeymaster]

Hi,

var source = {
    dataType: "json",
    dataFields: [
        { name: "id", type: "number" },
        { name: "name", type: "string" },
        { name: "quantity", type: "number" },
        { name: "parentid", type: "number" }
    ],
    hierarchy: {
        keyDataField: { name: 'id' },
        parentDataField: { name: 'parentid' }
    },
    id: "id",
    localData: [
        { id: 1, name: "Beverages", quantity: 10, parentid: null },
        { id: 2, name: "Coffee", quantity: 5, parentid: 1 }
    ]
};

var dataAdapter = new $.jqx.dataAdapter(source);

$("#treeGrid").jqxTreeGrid({
    width: 600,
    source: dataAdapter,
    columns: [
        { text: "Name", dataField: "name", width: 250 },
        { text: "Quantity", dataField: "quantity", cellsAlign: "right", align: "right" }
    ]
});

and you can use these CRUD methods:

$("#treeGrid").jqxTreeGrid('addRow', null, {
    id: 4,
    name: "Herbal Tea",
    quantity: 4,
    parentid: 3
}, 'last');

// Update a row
$("#treeGrid").jqxTreeGrid('updateRow', 2, { name: "Espresso", quantity: 6 });

// Delete a row
$("#treeGrid").jqxTreeGrid('deleteRow', 4);

Hope this helps.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts