I want to display a boolean value in an ASP.NET Core Kendo grid column. However, I need it to display a checkbox in the column because I don't want to show the users the raw data. So, I put in a custom client template because it's not an option to have booleans display a checkbox despite that seeming like an option that should be available by default. However, this grid is supposed to be editable inline using the default CRUD operations and you have to click on the cells to bring up the editor.
The default editor for a boolean column is a checkbox. So, the users click on a checkbox to bring up a different checkbox and it looks like it just didn't work. If I make the initial checkbox greyed out, it looks like they can't edit it. So, no matter what I do, I can't make a column a checkbox and use the default editor without a bunch of ugly design issues which is ridiculous.
Am I just missing something? Is there a better way than resorting to doing scripting with Javascript and setting the column to uneditable?
4032:46 Uncaught TypeError: jQuery(...).kendoCheckBox is not a function
at HTMLDocument.<anonymous> (4032:46:169)
at i (jquery.min.js:2:27466)
at Object.fireWith [as resolveWith] (jquery.min.js:2:28230)
at Function.ready (jquery.min.js:2:30023)
at HTMLDocument.K (jquery.min.js:2:30385)
This is my code:
@model DMDPace.DataAccess.DomainModels.Project;
<div style="margin: 20px">
<h3>Project: @Model.ProjectName</h3>
<br/>
<div style="display: flex">
<h3 style="margin-right: 15px">Manager: </h3>
@(Html.Kendo().DropDownListFor(x => x.ProjectManagerId)
.DataTextField("DisplayName")
.DataValueField("Id")
.Events(e =>
{
e.Select("managerChange");
})
.DataSource(source =>
{
source.Read(read =>
{
read.Action("FilterEmployees", "Home");
});
})
.HtmlAttributes(new { style = "width: 15%; min-width: 280px;" }))
</div>
<div style="display: flex; align-items: center;">
<h3 style="margin-right: 15px">Is Active: </h3>
@(Html.Kendo().CheckBoxFor(x => x.IsActive))
</div>
</div>
DropDownListFor renders correctly, but checkBoxFor doesn't.
Project:
public class Project : Entity
{
public string ProjectName { get; set; }
public bool IsActive { get; set; }
public int? ProjectManagerId { get; set; }
public virtual User ProjectManager { get; set; }
}
How do you change the backcolor of the box where the checkmark is made? This is not the control backcolor, but the color inside the checkbox.
In this link it is called RadCheckMark checkPrimitive (1.1) https://docs.telerik.com/devtools/winforms/controls/buttons/checkbox/structure
I can't find any property that controls that checkPrimitive back color.
I upgrade from 'telerik.ui.for.aspnet.core.2019.1.220.commercial' to 'telerik.ui.for.aspnet.core.2023.1.117.commercial' and now the check box doesn't display check even though the data from the database is true
@(Html.Kendo().CheckBox() .Name("MyCheckbox").Label("Yes")
I even tried @(Html.Kendo().CheckBox() .Name("MyCheckbox").Checked(true).Label("Yes"), it still won't show the checkbox as checked.
Regards
I have a checkbox that is checked on a form but it should send its value on the post but should not be editable
The editor template looks like this
@(Html.Kendo().CheckBoxFor(m => m) .Label(label) .Enable(enable) .HtmlAttributes(ViewData) .Deferred(deferred) )
The checkbox does not have a readonly functionality like the textbox
Can this be achieved? I tried adding a hidden field like @Html.HiddenFor(m => m) but that generates another input with the same id
When using the Boolean editor template with the grid HtmlHelper a label is created in the cell next to the checkbox. This was not always the case. Older versions of kendo excluded the label and only rendered the checkbox. Is there a way to turn off the label and only render the checkbox?
vs
Question 1: I have a bool field that I want to show as a checkbox (checked if true, unchecked if false). I added it to grid as far as I know how to but I know it isn't reflecting true or false because the checkbox is unchecked even if the value is true.
Question 2: when I check a checkbox and move on to another row, it does not stay checked and instead it reverts back to unchecked. How do I set it up so that it remains checked when I select another row?
@(Html.Kendo().Grid<ArusUI.Areas.PODashboard.Models.POModel>()
.Name("poGrid")
.Columns(columns =>
{
columns.Command(command => command
.Custom("Print")
.Click("printRow"))
.HtmlAttributes(new { title = "PO" })
.Width(150);
columns.Bound(p => p.resend)
.Title("Resend")
.Editable("isResendEditable")
.ClientTemplate("#if(poEdiObjectMode == 'EMAIL'){# <input id='resend_' onclick='resendSelect(this)' name='resend_#=poNum#_#=poReleaseNbr#_#=poRevisionNbr#' value='#=resend#' class='k-checkbox' type='checkbox' /> #} else {# <p> </p> #}#")
.Width(135)
.Filterable(ftb => ftb.Multi(true))
.HtmlAttributes(new { style = "text-align:center;" });
columns.Bound(p => p.resend)
.Width(110)
.HtmlAttributes(new { @class = "kendo-column", style = "text-align:center;" })
.Editable("isResendEditable")
.ClientTemplate("#if(poEdiObjectMode == 'EMAIL'){# <input type ='checkbox' id='poResend_#=poNum#' class='k-checkbox' /> #} else {# <input type ='checkbox'id='poResend_#=poNum#' class='k-checkbox' disabled='disabled' /> #}#");
columns.Bound(p => p.poNum).Width(130).Editable("readOnlyCol").HtmlAttributes(new { @class = "disabled-kendo-column" });
columns.Bound(p => p.poReleaseNbr).Width(130).HtmlAttributes(new { @class = "disabled-kendo-column" });
columns.Bound(p => p.poRevisionNbr).Width(130).HtmlAttributes(new { @class = "disabled-kendo-column" });
columns.Bound(p => p.poIssueDT)
.Width(150)
.Format("{0:MM/dd/yyyy}")
.HtmlAttributes(new { @class = "disabled-kendo-column" });
columns.Bound(p => p.poEdiObjectMode)
.Width(100)
.Filterable(ftb => ftb.Multi(true))
.HtmlAttributes(new { @class = "disabled-kendo-column" });
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single))
.Scrollable(scrollable => scrollable.Endless(true))
.Scrollable(a => a.Height("650px"))
.PersistSelection(true)
.Navigatable()
.Sortable()
.Filterable(filterable => filterable
.Extra(true)
.Operators(ops => ops
.ForString(str => str.Clear()
.Contains("Contains")
.DoesNotContain("Does not contain")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
.StartsWith("Starts with")
.EndsWith("Ends with")
.IsNull("Is null")
.IsNotNull("Is not null")
.IsEmpty("Is empty")
.IsNotEmpty("Is not empty"))))
.AutoBind(false)
.Excel(excel => excel
.FileName("PODashboard.xlsx")
.Filterable(true)
.AllPages(true)
.ProxyURL(Url.Action("Excel_Export_Save", "poGrid")))
.Reorderable(reorder => reorder.Columns(true))
.ClientDetailTemplateId("template")
.Events(e => e.DataBound("poGridDataBound"))
.Events(e => e.CellClose("POGridCellClose"))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(25)
.Events(x => x.Error("onGridError"))
.Read(read => read.Action("GetPO","PO").Data("getPOParams").Type(HttpVerbs.Get))
.Model(model =>
{
model.Id(m => m.poNum);
model.Field(field => field.poReleaseNbr).Editable(false);
model.Field(field => field.poRevisionNbr).Editable(false);
model.Field(field => field.poIssueDT).Editable(false);
model.Field(field => field.poEdiObjectMode).Editable(false);
model.Field(field => field.resend).Editable(true);
})
).Resizable(resize => resize.Columns(true))
)
function isResendEditable(e) {
var ediType = e.poEdiObjectMode; var editable = false;
if (ediType == "EMAIL") { editable = true; }
return editable;
}
public class POModel
{
[DisplayName("Vendor")]
public string vendorName { get; set; }
[DisplayName("PO #")]
public string poNum { get; set; }
[DisplayName("Buyer")]
public string buyer { get; set; }
[DisplayName("Release #")]
public string poReleaseNbr { get; set; }
[DisplayName("Revision #")]
public string poRevisionNbr { get; set; }
[DisplayName("Original Issue")]
public string poIssueDT { get; set; }
[DisplayName("EDI Type")]
public string poEdiObjectMode { get; set; }
public bool resend { get; set; }
}
\
Hi,
Just updated from 2021.3.1207 to 2022.1.119 (VS2022 and .NET6) and all my checkboxes used in templates on all pages are not working any more.
This code:
<script id="toolbar" type="text/x-kendo-template">
<div id="blockSyncArea">
@(Html.Kendo().CheckBox().Name("blockSync").Enable(ViewBag.BlockSyncStatus.AllowUnblock).Checked(!ViewBag.BlockSyncStatus.BlockSync).Label("Sync Enabled").HtmlAttributes(new
{
onchange = "onBlockSyncChanged();",
title = "Toogle to enable or disabled syncing with clients while editing."
}))
</div>
}
</script>
Renders like this in 2021.3.1207 (seems to be plain HTML5) and works correctly without any problems:
<script id="toolbar" type="text/x-kendo-template">
<div id="blockSyncArea">
<input checked="checked" class="k-checkbox" id="blockSync" name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="checkbox" value="true" /><label class="k-checkbox-label" for="blockSync">Sync Enabled</label><input name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="hidden" value="false" />
</div>
</script>
But renders like this in 2022.1.119 and does not work and mess up my pages:
<script id="toolbar" type="text/x-kendo-template">
<div id="blockSyncArea">
<input id="blockSync" name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="checkbox" value="true" /><input name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="hidden" value="false" /><script>kendo.syncReady(function(){jQuery("#blockSync").kendoCheckBox({"checked":true,"label":"Sync Enabled","enabled":true});});</script>
</div>
</script>
Clearly there has been a change using a kendoCheckBox function instead.
I get these errors in Chrome:
Uncaught SyntaxError: Unexpected token '<'
Uncaught Error: Invalid template:'
<div id="blockSyncArea">
<input id="blockSync" name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="checkbox" value="true" /><input name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="hidden" value="false" /><script>kendo.syncReady(function(){jQuery("#blockSync").kendoCheckBox({"checked":true,"label":"Sync Enabled","enabled":true});});' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n <div id="blockSyncArea">\n <input id="blockSync" name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="checkbox" value="true" /><input name="blockSync" onchange="onBlockSyncChanged();" title="Toogle to enable or disabled syncing with clients while editing." type="hidden" value="false" /><script>kendo.syncReady(function(){jQuery("';blockSync").kendoCheckBox({"checked":true,"label":"Sync Enabled","enabled":true});});;$kendoOutput+=;}return $kendoOutput;'
at Object.compile (kendo.all.js:238:31)
at Object.i [as template] (jquery.min.js:2:88736)
at HTMLDocument.<anonymous> (Index:671:4117)
at e (jquery.min.js:2:30005)
at t (jquery.min.js:2:30307)
Please advise, what is the problem with my very simple code. I strongly suspect a bug in the rendering, since I use the checkboxes in kendo templates and in the error message there seems to be a invalid rendering of jQuery("';blockSync") at the end, that should be #blockSync?
Regards,
Mattias
Good afternoon
If we look at the following demo page, we see Discontinued as a bool
https://demos.telerik.com/aspnet-mvc/grid/editing
Now I understand we can change the bound column to use a ClientTemplate to change true/false to a checkbox like so:
columns.Bound(p => p.Discontinued).ClientTemplate(
"<input type='checkbox' value='#= Bin_ID #' " +
"# if (SiteHasBin) { #" +
"checked='checked'" +
"# } #" +
"/>").Width(100);
What I am struggling with is how we go about removing the "click once to enter edit mode, click again to uncheck/check the checkbox before clicking save"
How do I go about effectively removing/hacking the existing code so that if a user sees a checkbox, they just click the checkbox AND the batch editing works out the box?
I haven't been able to find and docs or samples on this.
I have a checkbox on an ASP.NET Core View page.
When checked it should set two button groups to unselected (may not be correct terminology) and hide two div classes that display text.
The div classes are displayed based on the two button selections.
Problem is I can't seem to find anything that shows how to capture an onclick event for the Kendo().Checkbox.
Is this possible?
TIA