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

MVVM chart's dataSource doesn't update like I thought it might

2 Answers 21 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 12 Mar 2020, 08:06 PM

 

I tried what I thought was a pretty basic use of the observables: binding a numeric text box to a value, and then using that value in the datasource.  However, it does not work. I'm wondering if what I'm trying to do is possible and I'm just doing it wrong, or if what I'm trying to do isn't possible. Here's a dojo, and the code is below as well. 

<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: ValueChange }"
                 data-min="0" />
          <input id="Value2NumericTextBox" data-role="numerictextbox"
                 data-format="c0"
                 data-decimals="0"
                 data-bind="value: Value2, events: { change: ValueChange }"
                 data-min="0" />
        </div>
                      
        <div>
            <div id="chart1" data-role="chart"
                 data-series-defaults="{ type: 'line' }"
                 data-series="[ {field: 'amount'} ]"
                 data-bind="source: values"
                 style="height: 200px;" ></div>
        </div>
    </div>
<script>
    (function() {
        var viewModel = kendo.observable({
            Value1: 10,
            Value2: 20,
            ValueChange: function(e) {
              var chart = $("#chart1").kendoChart();
              chart.refresh();
            },
            values: new kendo.data.DataSource({
                data: [
                  { amount: function() { return this.get("Value1"); } },
                  { amount: function() { return this.get("Value2"); } }
                ]
            })
        });
        kendo.bind($("#example"), viewModel);
    })();
</script>
</div>

2 Answers, 1 is accepted

Sort by
0
Accepted
Georgi
Telerik team
answered on 16 Mar 2020, 10:19 AM

Hello Jay,

There are few issues with the provided code, firstly a reference to a function is passed as a value to the amount objects in the values dataSource. Getters are defined as follows:

{get amount(){
    return value;
}}

Secondly, the chart is being reinitialized within the ValueChange handler.

Nevertheless, to achieve the described behavior you should use the same observable objects in both chart and numerics.

e.g.

    <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: values[0].amount, events: { change: ValueChange }"
                 data-min="0" />
          <input id="Value2NumericTextBox" data-role="numerictextbox"
                 data-format="c0"
                 data-decimals="0"
                 data-bind="value: values[1].amount, events: { change: ValueChange }"
                 data-min="0" />
        </div>

        <div>
          <div id="chart1" data-role="chart"
               data-series-defaults="{ type: 'line' }"
               data-series="[ {field: 'amount'} ]"
               data-bind="source: values"
               style="height: 200px;" ></div>
        </div>
      </div>
      <script>
        (function() {
          var viewModel = kendo.observable({

            ValueChange: function(e) {
              var chart = $("#chart1").data('kendoChart');
              chart.refresh();
            },
            values: [{amount: 10}, {amount:20}]
          });
          kendo.bind($("#example"), viewModel);
        })();
      </script>
    </div>

Below you will find a sample:

Regards,
Georgi
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jay
Top achievements
Rank 1
Iron
Veteran
answered on 17 Mar 2020, 11:33 AM
Hi Georgi. Thanks for the reply. I started down a similar route when my first approach didn't work, so at least I know I'm doing it properly.
Tags
Charts
Asked by
Jay
Top achievements
Rank 1
Iron
Veteran
Answers by
Georgi
Telerik team
Jay
Top achievements
Rank 1
Iron
Veteran
Share this question
or