Updating dataSource values

[Jay]

I've got a viewModel with a dataSource whose values I end up calculating after some event occurs. What I'm wondering is how to access the dataSource. It seems like directly accessing it in the changeEvent function works, but is it better to access it via the get() method? I'm also wondering if I should be trying to set its member data via set() somethow or if what I'm doing is correct. Here is a dojo, and the code is also below.

<div id="example">
    <div class="demo-section k-content wide">
        <div class="box">
          <input id="Value1NumericTextBox" data-role="numerictextbox"
                 data-format="c0"
                 data-decimals="0"
                 data-bind="value: Value1, events: { change: Value1Change }"
                 data-min="0" />
          <input id="Value2NumericTextBox" data-role="numerictextbox"
                 data-format="c0"
                 data-decimals="0"
                 data-bind="value: Value2, events: { change: Value2Change }"
                 data-min="0" />
        </div>

        <div>
            <div id="chart1" data-role="chart"
               data-series-defaults="{ type: 'column' }"
               data-series="[
                 {field: 'v1', categoryField: 'category'},
                 {field: 'v2', categoryField: 'category'}
               ]"
               data-bind="source: dataSource"
               style="height: 200px;" >
            </div>
        </div>
    </div>
<script>
    (function() {
        var viewModel = kendo.observable({
            Value1: 10,
            Value2: 20,

            dataSource: new kendo.data.DataSource({
                data: [
                  { v1: 10, v2: 20, category: "A B" },
                  { v1: 100, v2: 200, category: "A*10 B*10" }
                ]
            }),

            Value1Change: function(e) {
              var a = viewModel.get("Value1");
              var b = viewModel.get("Value2");

              // Is it incorrect to access the dataSource directly?
              this.dataSource.at(0).v1 = a;
              this.dataSource.at(0).v2 = b;

              this.dataSource.at(1).v1 = a*10;
              this.dataSource.at(1).v2 = b*10;

              var chart = $("#chart1").data('kendoChart');
              chart.refresh();
            },

            Value2Change: function(e) {
              var a = viewModel.get("Value1");
              var b = viewModel.get("Value2");

              // Is it better to access the dataSource via get()
              var ds = viewModel.get("dataSource");

              // Should I be setting the data via set() somehow?
              ds.at(0).v1 = a;
              ds.at(0).v2 = b;

              ds.at(1).v1 = a*10;
              ds.at(1).v2 = b*10;

              var chart = $("#chart1").data('kendoChart');
              chart.refresh();
            }
        });
        kendo.bind($("#example"), viewModel);
    })();
</script>
</div>

[Nikolay]

Hello Jay,

Both ways represent a reference to the same dataSource object so there is not really a better approach to this. The dataSource is one object either way and so it is entirely up to you to decide how to reference it. The same applies to how to set the field values, just a preference.

More about kendo.data.ObservableObject could be read in the following article:

• https://docs.telerik.com/kendo-ui/framework/mvvm/observableobject

Regards,

Nikolay
Progress Telerik