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
9 Answers, 1 is accepted
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>");http://demos.telerik.com/kendo-ui/styling/checkboxes
I hope this helps.
Regards,
Radoslav
Telerik
Rank 1
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
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
Rank 1
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
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
Rank 1
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
Rank 1
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
Our thoughts here at Progress are with those affected by the outbreak.