kendo.observable (modelView) field with default value from template engine

5 posts, 0 answers
  1. Stoyan
    Stoyan avatar
    9 posts
    Member since:
    Jan 2015

    Posted 31 Mar 2015 Link to this post

    Hello,

    I have a modelView
           
    var viewModel = kendo.observable({
        logoAlt: null
    });

    The field "logoAlt" is bound to

    <input data-bind="value:logoAlt"/>

    I would like the value of the input to be passed from the server through template engine and update "logoAlt" with it.
    <input value="{{valueFromServer}}"/>

    I've tryed the following, but of course it doesn't work:
    <input  data-bind="value:logoAlt" value="{{valueFromServer}}"/>

  2. Stoyan
    Stoyan avatar
    9 posts
    Member since:
    Jan 2015

    Posted 31 Mar 2015 in reply to Stoyan Link to this post

    I can do this like this, but I find it complicated:

    <input  id="alt" data-bind="value:logoAlt" data-defaulvalue="{{valueFromServer}}"/>

    var defaulvalue = $('#alt').data('defaulvalue');
    var viewModel = kendo.observable({
        logoAlt: defaulvalue
    });
  3. Kendo UI is VS 2017 Ready
  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 02 Apr 2015 Link to this post

    Hello Stoyan,

    In order to achieve the desired functionality I would suggest initiating an jQuery ajax request to the server with the value typed in the input element.  In the success method you can update your model-view logoAlt field using the set method


    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Stoyan
    Stoyan avatar
    9 posts
    Member since:
    Jan 2015

    Posted 06 Apr 2015 Link to this post

    For my project ajax was not an option.

    I found a workaround. The steps are as follows:

    1. Initialise empty View-Model

    var viewModel = kendo.observable();

    2. Get the form input name and corresponding values

    var inputsNameValuePairs = $('form').serializeArray(); // returns array of JSONs

    3. Iterate inputsNameValuePairs and set the pairs in View-Model

    $.each(inputsNameValuePairs, function(index, item){
        viewModel.set(item.name, item.value);
    });

    4. Final step is to bind View-Model to View

    kendo.bind($('#someId'), viewModel);

  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 08 Apr 2015 Link to this post

    Hello Stoyan,

    Thank you for sharing your solution with the community. 

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready