Using widgets with remote datasource and templates correctly

8 posts, 1 answers
  1. Savas
    Savas avatar
    16 posts
    Member since:
    Nov 2015

    Posted 09 Dec 2015 Link to this post

    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.

  2. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 11 Dec 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Savas
    Savas avatar
    16 posts
    Member since:
    Nov 2015

    Posted 11 Dec 2015 in reply to Daniel Link to this post

    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.

  5. Savas
    Savas avatar
    16 posts
    Member since:
    Nov 2015

    Posted 15 Dec 2015 in reply to Savas Link to this post

    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.

  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 16 Dec 2015 Link to this post

    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!
     
  7. Savas
    Savas avatar
    16 posts
    Member since:
    Nov 2015

    Posted 16 Dec 2015 in reply to Alexander Valchev Link to this post

    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.

  8. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 18 Dec 2015 Link to this post

    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!
     
  9. Savas
    Savas avatar
    16 posts
    Member since:
    Nov 2015

    Posted 21 Dec 2015 in reply to Alexander Valchev Link to this post

    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.

Back to Top
Kendo UI is VS 2017 Ready