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

Using widgets with remote datasource and templates correctly

7 Answers 52 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 09 Dec 2015, 04:26 PM

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.

7 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 11 Dec 2015, 03:56 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
James
Top achievements
Rank 1
answered on 11 Dec 2015, 04:35 PM

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.

0
James
Top achievements
Rank 1
answered on 15 Dec 2015, 05:09 PM

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.

0
Alexander Valchev
Telerik team
answered on 16 Dec 2015, 08:52 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
James
Top achievements
Rank 1
answered on 16 Dec 2015, 10:09 AM

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.

0
Accepted
Alexander Valchev
Telerik team
answered on 18 Dec 2015, 10:19 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
James
Top achievements
Rank 1
answered on 21 Dec 2015, 01:15 PM

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.

Tags
Data Source
Asked by
James
Top achievements
Rank 1
Answers by
Daniel
Telerik team
James
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or