This is a migrated thread and some comments may be shown as answers.

Updating dataSource values

1 Answer 19 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Jay
Top achievements
Rank 1
Iron
Veteran
Jay asked on 20 Mar 2020, 01:47 PM

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>

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 24 Mar 2020, 11:56 AM

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:

Regards,


Nikolay
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Charts
Asked by
Jay
Top achievements
Rank 1
Iron
Veteran
Answers by
Nikolay
Telerik team
Share this question
or