Telerik Forums
UI for ASP.NET Core Forum
5 answers
1.3K+ views

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?

Maksim
Top achievements
Rank 1
Iron
 updated answer on 10 Nov 2023
1 answer
36 views
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; }
    }

Mihaela
Telerik team
 answered on 09 Aug 2023
1 answer
193 views

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.

 

Stoyan
Telerik team
 answered on 02 Aug 2023
1 answer
413 views

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

 

Alexander
Telerik team
 answered on 21 Apr 2023
1 answer
815 views

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

Mihaela
Telerik team
 answered on 15 Nov 2022
2 answers
67 views

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 


Daniel
Top achievements
Rank 1
Iron
 answered on 28 Jun 2022
1 answer
1.3K+ views

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; }
    }



\

Stoyan
Telerik team
 answered on 02 Feb 2022
1 answer
2.4K+ views

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

Tsvetomir
Telerik team
 answered on 28 Jan 2022
1 answer
773 views

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?

 


Aleksandar
Telerik team
 answered on 08 Nov 2021
1 answer
3.3K+ views

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

Alexander
Telerik team
 answered on 18 Oct 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?