style of checkbox in grid

10 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
  17. Mohammed
    Mohammed avatar
    26 posts
    Member since:
    May 2020

    Posted 04 May 2020 in reply to Radoslav Link to this post

    Id there a way to display it as bootstrap switch in Client template help will be appreciated asap..
  19. Patrick
    Admin
    Patrick avatar
    257 posts

    Posted 05 May 2020 Link to this post

    Hi Mohammed,

    We do not have a bootstrap switch example on hand.  However, we do have a UI for ASP.NET MVC knowledge base article which includes one way to add a Kendo UI Switch to a Kendo UI Grid.  It additionally shows how to set the messages in the Switch. 

    I hope this helps with your web application.  

    Regards,
    Patrick
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  20.
Back to Top