Using widgets with remote datasource and templates correctly

[James]

Hi all,

I've been trying to load my rangeSlider, numerictextfiled and comboBox with no success once using the templates.

I am using the data source just to enable and disable the correct widgets to be loaded in the correct tile width if else.

Widgets work all fine outside the templates and in the templates I am having all sorts of problems.

Please have a look at the example.

http://jsbin.com/cuduto/edit?html,js,output

I am sure there is a correct way of doing this but I could not find it. I've tried all that I could find from examples on line, still could not get as much as the combo box looking like a combobox with its data loading with the templates.

Any ideas please.

[Daniel]

Hello,

The second rangeslider and numerictext will not be initialized because the tenanciesRangeSlider template does not have a single root element:

<script id="tenanciesRangeSlider" type="text/x-kendo-template">
    <span>
        <div id="tenancySlider" data-role="rangeslider"
            ...
        </div>
        <div class="sliderInputs">
            ...
        </div>
    </span>
</script>

which is required by the source binding.
The combobox is not initialized because the data attributes are not set. It seems to work correctly after the attributes are added:

<script id="tenanciesComboBox" type="text/x-kendo-template">
    <input  placeholder="Choose status..." data-role="combobox" data-bind="source:comboData" data-text-field="text" data-value-field="value" />
</script>

I am not sure if I understand why is the sliderVM need but binding a different ViewModel to a nested element is not supported. You should add the needed fields and methods in the main tilesVM.


Regards,
Daniel
Telerik

 

 

[James]

Hi Daniel,

Thanks for your reply. The rangeSlider is actually only one with numeric fields mirroring the slider. I am not sure why I end up with two instead. I have added how I intended them to work here please have a look.

http://jsbin.com/cuduto/edit?html,js,output

This works fine until I add it to load dynamically from the remote JSON.

ComboBox I have tried adding this still no success. I just need one working example so I can fix the others.

Thanks again.

[James]

Hi Daniel,

If you could help please to get the range slider working, it seems to stop it's connection to the numeric text box when loaded with template.

http://jsbin.com/cuduto/edit?html,js,output

I've added the top one which works fine, but the second one which is loaded with template it is not working as expected in terms of mirroring it's figures with the corresponding numeric box.

Thanks.

[Alexander Valchev]

Hi Savas,

The tilesVM which binds to the not working range parent element does not have val, start, end and onChange fields. This is the reason binding does not work. In order to resolve the issue tilesVM should implement the fields range slider is bound to.

Regards,
Alexander Valchev
Telerik

 

 

[James]

Hi Alexander,

Thanks for your reply. I've tried a few things before I've added my question. It is not clear to me how to get the syntax correct in order to call an kendo observable inside another kendo observable or simply adding rangeSlider is not giving me the results expected.

If you could have a look and perhaps update to demonstrate how to get this working.

http://jsbin.com/cuduto/edit?html,js,output

Thanks again.

[Alexander Valchev]

Hi Savas,

I extracted all nested templates with rangesliders in a this example.
Please examine it and let me know in case you have any further questions.

Regards,
Alexander Valchev
Telerik

 

 

[James]

Thank you for the update. I've managed to get the required result with the rest of the nested templates I am using to dynamically load this page content.

That was interesting learning curve, as it gets more complex that is probably the reason why you have separated the rangeslider code out of the main template. But that helped me to add it in correctly.

Cheers.