style of checkbox in grid

[David]

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

[Radoslav]

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

[David]

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

 

[Radoslav]

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

[David]

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

[Radoslav]

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

[Musashi]

Wouldn't the id attribute of the input being defined in the clienttemplate need to be unique? How does one achieve this?

[Radoslav]

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

[Mohammed]

Id there a way to display it as bootstrap switch in Client template help will be appreciated asap..

[Patrick | Technical Support Engineer, Senior]

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