databinding checkbox to numeric value

4 posts, 0 answers
  1. David
    David avatar
    6 posts
    Member since:
    Jun 2007

    Posted 21 Nov 2016 Link to this post

    Hello,

     

    I have been unable to locate an example of how I would go about using kendo's data binding to bind a checkbox with a numeric column on my model, where 0 = unchecked, and 1 = checked.

     

    Thanks

  2. Stefan
    Admin
    Stefan avatar
    1012 posts

    Posted 22 Nov 2016 Link to this post

    Hello David,

    The desired result can be achieved using the Kendo UI template and an if statement inside the template. I can suggest inside the template to check if the value of the item in the column is 1 and based on that information to render the checkbox either checked or unchecked:

    http://docs.telerik.com/kendo-ui/framework/templates/overview#create-external-templates

    http://dojo.telerik.com/OdUXo

    If the column is in a Kendo UI Grid, I can suggest the following. On the dataBound event of the Grid to go through the items in the dataSource and adding the appropriate attribute or property to the checkboxes. The data can be retrieved using the view method of the Grid. I can suggest using the columns.template property of the Grid to add the checkbox column: 

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-view

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template

    http://dojo.telerik.com/UYevi

    Let me know if you need additional information on this matter.
     
    Regards,
    Stefan
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  3. David
    David avatar
    6 posts
    Member since:
    Jun 2007

    Posted 22 Nov 2016 in reply to Stefan Link to this post

    Hi Stefan,

    Thanks for your response.  I am interested in two way databinding with the model.  If I understand your examples, they seem to only show how to display them.

    When I use <input type='checkbox' name='TOGGLE' data-bind='checked: TOGGLE' data-type='number' value='0' /> it seems to still want to save the value as a boolean.

    Dave

  4. Stefan
    Admin
    Stefan avatar
    1012 posts

    Posted 24 Nov 2016 Link to this post

    Hello David,

    Thank you for the clarification that the requirement is to use two-way binding.

    In the described scenario the binding will work only the first time as the checkbox will convert 0 and 1 respectively to true and false, but the checkbox will only return true and false which cannot be automatically converted to 0 or 1 by the NumericTextBox.

    In this scenario, I can suggest using a custom two-way binding to manually handle converting the true and false values to 0 and 1. Please check the article in our documentation demonstrating how to achieve custom two-way binding:

    http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/custom#two-way-custom-bindings

    I hope this will help to achieve the desired result.

    Regards,
    Stefan
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
Back to Top