CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-treeview
aw1975
aw1975

Reputation: 253

Getting original data from kendo UI DataSource

In the Kendo UI documentation for the DataSource component, it states that the data function is used to get data items for the data source.

However it also states that if the data source is bound to a JavaScript array (via the data option) the data method will return the items of that array. Every item from the array is wrapped in a kendo.data.ObservableObject or kendo.data.Model.

How can I retrieve the original unwrapped data items (i.e. having same reference) that were passed into the data source?

I ask because I'm using a Kendo UI treeview control and in its event handlers (e.g. check event) I want to update the original data item for a tree node based on some custom logic.

Update

For example here is a simple treeview having a single node (of course in a realistic scenario the tree would contain many nodes) . When checking the node I want to get a reference to the original data item for the checked node. this.dataItem(e.node) does not return the original data item as the log statement outputs false. 

<div id="treeview"></div>
<script>
  var mydata =  [
    { text: "foo", checked: false}
  ];
$("#treeview").kendoTreeView({
  checkboxes: true,
  dataSource: mydata,
  check: function(e) {    
    console.log(this.dataItem(e.node) == mydata[0]); //I want this to output true
  }
});
</script>

Upvotes: 2

Views: 1334

Answers (2)

The_Black_Smurf
The_Black_Smurf

Reputation: 5269

Unfortunately, I don't think there's a way get the underlying object behind the kendo.data.ObservableObject directly.

However, you can still rely on the dataSource to find out what was the index of your original item. You can do that by calling dataSource.data().indexOf() but you have to keep in mind that the index mapping is only possible if your original array indexes still match the ones you have provided to the dataSource:

<div id="treeview"></div>
<script>
    var mydata =  [
        { text: "foo", checked: false}
    ];
    $("#treeview").kendoTreeView({
        checkboxes: true,
        dataSource: mydata,
        check: function(e) {

            let checkDataItem = this.dataItem(e.node);
            let checkIndex = this.dataSource.data().indexOf(checkDataItem);
            let underlyingData = mydata[checkIndex];

            if (underlyingData == mydata[0]) {
                alert("same instance");
            } else {
                alert("different instance");
            }

        }
    });
</script>

Upvotes: 0

getglad
getglad

Reputation: 2562

If I understand your question correctly, you can get to the records independently by referencing your data source and using the .at(x) function, where x equals whatever record of your data source you are attempting to access. So to get the first.

var theData = yourDataSource.at(0);

To update it, you then use .set and .sync.

theData.set('userFirstName', 'Joe');
theData.set('userAverageTime', 10);
yourDataSource.sync();

Using .set() is handy because if you store all your updates into an iterable collection, then you can just run through them.

$.each(updatedVars, function(key, element) {
   theData.set(key, element);
});
yourDataSource.sync();

Upvotes: 0

Related Questions