This is a migrated thread and some comments may be shown as answers.
style of checkbox in grid
9 Answers 180 Views
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 12 Sep 2015, 06:30 PM

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

Sort by
0
Accepted
Radoslav
Telerik team
answered on 15 Sep 2015, 08:42 AM
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
0
David
Top achievements
Rank 1
answered on 29 Sep 2015, 09:09 AM

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

 

0
Radoslav
Telerik team
answered on 30 Sep 2015, 07:17 AM
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
0
David
Top achievements
Rank 1
answered on 30 Sep 2015, 11:00 AM

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

0
Accepted
Radoslav
Telerik team
answered on 02 Oct 2015, 06:26 AM
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
0
Musashi
Top achievements
Rank 1
answered on 01 Feb 2016, 09:19 PM
Wouldn't the id attribute of the input being defined in the clienttemplate need to be unique? How does one achieve this?
0
Radoslav
Telerik team
answered on 02 Feb 2016, 09:28 AM
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
0
Mohammed
Top achievements
Rank 1
answered on 04 May 2020, 09:01 AM
Id there a way to display it as bootstrap switch in Client template help will be appreciated asap..
0
Patrick
Telerik team
answered on 05 May 2020, 06:42 PM

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.
Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
David
Top achievements
Rank 1
Musashi
Top achievements
Rank 1
Mohammed
Top achievements
Rank 1
Patrick
Telerik team
Share this question
or