style of checkbox in grid

8 posts, 2 answers
  1. David
    David avatar
    5 posts
    Member since:
    Aug 2015

    Posted 12 Sep 2015 Link to this post

    Hi there,

    I am using this code in the Html.Kendo().Grid:

    columns.Bound(p => p.Positive).ClientTemplate("<input type='checkbox' \\#= Positive ? checked='checked' :'' \\# />");

    In the login form I use a @Html.Kendo().CheckBoxFor (checkbox for 'remember me').

    How can I change the style of the rendered checkbox in the grid to the style of the kendo checkbox?

    Kind regards,

    David

  2.
  3. Answer
    Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 15 Sep 2015 Link to this post

    Hi David,

    To achieve the desired functionality you can try changing the template as following:
    .ClientTemplate("<input id='eq1' class='k-checkbox' type='checkbox' \\#= Positive  ? checked='checked' :'' \\# /><label class='k-checkbox-label for='eq1'></label>");
    Also live example of different styling you can find here;
    http://demos.telerik.com/kendo-ui/styling/checkboxes

    I hope this helps.

    Regards,
    Radoslav
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. David
    David avatar
    5 posts
    Member since:
    Aug 2015

    Posted 29 Sep 2015 in reply to Radoslav Link to this post

    Hi Radoslav,

    thanks for your reply. Styling works fine.

    Unfortunately I have a dropdown-list for this boolean field ('not set', 'True', 'False') in editing mode. How do I change it to check / uncheck?

    Regards,

    David

     

  7. Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 30 Sep 2015 Link to this post

    Hi David,

    To achieve the desired functionality you can try instantiate a kendoDropDownList from the corresponding select element in the grid’s dataBound event. I created a small example which demonstrates this here:
    http://dojo.telerik.com/epiLe/4

    I hope this helps.

    Regards,
    Radoslav
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. David
    David avatar
    5 posts
    Member since:
    Aug 2015

    Posted 30 Sep 2015 in reply to Radoslav Link to this post

    Hi Radoslav,

    thanks. How do I achieve that the grid is always rendering a checkbox. When the grid is read-only the boolean column is a checkbox (with correct style). After activating edit-mode I cant check/uncheck the cells because I get a dropdown-list for the boolean field. 

    Regards, David

  11. Answer
    Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 02 Oct 2015 Link to this post

    Hi David,

    If you have client template and not set the field for the column the cells will not be put in edit mode. For example:
    http://dojo.telerik.com/ICoMi
    Please give it try and let me know if it helps you.

    Looking forward for your reply.

    Regards,
    Radoslav
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  13. Musashi
    Musashi avatar
    23 posts
    Member since:
    Jan 2014

    Posted 01 Feb 2016 Link to this post

    Wouldn't the id attribute of the input being defined in the clienttemplate need to be unique? How does one achieve this?
  14.
  15. Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 02 Feb 2016 Link to this post

    Hello Musashi,

    The id attributes always need to be unique. This is a best practice and in the mentioned case you can achieve it by using following code snippet:

    { width: 120, template: '<input id="checkbox#=ID#"  type="checkbox" #= Discontinued ? "checked=checked" : "" # class="chkbx" #= (UnitPrice >= 39 && UnitPrice <= 41 ? "disabled=disabled" : "")# ></input>'},

    Where the ID is a column which keeps an unique row Id identifier from the database.

    Additionally I updated the example here with mentioned code snippet.

    I hope this helps.

    Regards,
    Radoslav
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top