Grid Bound Column with Checkbox Template

[Paul]

Hi there,

Following advice on another thread, I am using a client template to display a checkbox in place of a boolean field (named BooleanPropertyName for the purposes of this example):

Column Declaration:

columns => columns.Bound(m=> m.BooleanPropertyName).ClientTemplate(
"<input type='checkbox' " +
                                "#=BooleanPropertyName? 'checked=checked' : '' #" +
                                "disabled='disabled'</input>");

This is working fine when it comes to displaying and indeed editing the data. However, I am experiencing a problem when attempting to add a new record. I am using a custom edit form with the grid popup.

When clicking on the add button, I receive a jQuery error: "BooleanPropertyName" is undefined.". I can see where the error is occurring in what seems to be a function generated by the kendo grid:

function anonymous(data) {
var o,e=kendo.htmlEncode;with(data){o='<tr data-uid="'+(data.uid)+'" role=\'row\'><td  role=\'gridcell\'>'+e(data.OtherProperty==null?'':data.OtherProperty)+'</td><td  role=\'gridcell\'>'+(BooleanPropertyName ? 'Yes' : 'No' )+'</td><td  role=\'gridcell\'></tr>';}return o;
}

In the example above, I have included another property which is coming from a bound column - this appears to be working fine as it can get past this property before hitting the error.

I am fairly new to Kendo controls - what way do I need to modify the output of my client template in order to resolve this error?

Thanks,

P

[Nikolay Rusev]

Hello Paul,

We are not sure what is the cause of this behavior. Can you show us the EditorTemplate in question?

` I receive a jQuery error: "BooleanPropertyName" is undefined.". ` - this error can occur if data item to which the edit template is bound is not present. However this shouldn't be the case as you are already binding grid column to that field, i.e `columns.Bound(m=> m.BooleanPropertyName)`.

We will need more details in order to investigate this further.

Regards,
Nikolay Rusev
Telerik

 

 

[Paul]

Hi there,

Apologies for formatting - doesn't appear to be working for me at present. The Editor Template is pretty simple, just those two properties and a hidden field for a primary key (IsSystemDefined is the boolean field):

<

 

 

div

class

="form-group col-md-6">

 

 

@Html.LabelFor(model => model.ItemName)

@Html.EditorFor(model => model.ItemName)

@Html.ValidationMessageFor(model => model.ItemName)

</

 

 

div

>

 

<

 

 

 

div

class

="form-group col-md-6">

 

 

@Html.LabelFor(model => model.IsSystemDefined)

@Html.EditorFor(model => model.IsSystemDefined)

@Html.ValidationMessageFor(model => model.IsSystemDefined)

</

 

 

div>

@Html.HiddenFor(model => model.Id)

I'm not sure how the editor template could be at fault here - as stated above, this works fine when editing an item. The error is only encountered when attempting to add a record.

Please note I have made a mistake in my original post when anonymising this - the columns in question are created by looping around a collection of PropertyInfo objects gained from reflection. So we are not actually using an expression to bind the column, we are currently using the overload which accepts a property name and type:

StringBuilder

 

 

html =

new

StringBuilder

();

 

 

 

 

foreach

(

PropertyInfo

pi

in

modelProperties)

 

{

 

 

 

if

(pi.IsCustomDataType())

 

{

columns.Bound(pi.GetType(), pi.Name);

}

 

 

 

else

 

 

{

 

 

//custom boolean type

 

 

html.Append(

 

"<input type='checkbox' "

+

 

 

 

 

"#="

+ pi.Name +

" ? 'checked=checked' : '' #"

+

 

 

 

 

"disabled='disabled'</input>"

);

 

columns.Bound(pi.GetType(), pi.Name).ClientTemplate(html.ToString());

}

}

 

I have also tried this by manually building up an expression for each property and using that to bind the column but encounter the same problem. Any fields which are not using client templates work fine - as soon as I encounter a boolean property which uses the template above then I receive the error.

Regards,

Paul

[Paul]

Hi there,

Here's a better formatted post (hopefully):

Editor Template:

<div class="form-group col-md-6">
    @Html.LabelFor(model => model.ItemName)
    @Html.EditorFor(model => model.ItemName)
    @Html.ValidationMessageFor(model => model.ItemName)
</div>
<div class="form-group col-md-6">
    @Html.LabelFor(model => model.IsSystemDefined)
    @Html.EditorFor(model => model.IsSystemDefined)
    @Html.ValidationMessageFor(model => model.IsSystemDefined)
</div>


@Html.HiddenFor(model => model.Id)

Code to bind Column:

StringBuilder html = new StringBuilder();
foreach (PropertyInfo pi in modelProperties)
{
    if (!pi.IsCustomDataType())
    {
        columns.Bound(pi.GetType(), pi.Name);
    }
    else
    {
        //custom boolean type
         html.Append("<input type='checkbox' " +
         "#=" + pi.Name + " ? 'checked=checked' : '' #" +
         "disabled='disabled'</input>");

        columns.Bound(pi.GetType(), pi.Name).ClientTemplate(html.ToString());
    }
}

Regards,

Paul

[Nikolay Rusev]

Hello Paul,

Unfortunately I wasn't able to replicate the behavior. I'm attaching an example demonstrating my attempt to recreate the error. Can you please modify it so that it replicates problem in question?

Regards,
Nikolay Rusev
Telerik

 

 

[Paul]

Hi there,

Thanks for the demo project.

The issue was due to the fields which use that client template being marked as "Editable(true)" in the model of the datasource. Due to a bug in the code, all of the fields in the model were being marked this way.

I don't actually need this to be editable, so I have now resolved my issue - but I was just wondering whether it was valid to mark a field using such a client template as editable? Should this cause the error I received?

Thanks,

Paul.

[Nikolay Rusev]

Hello Paul,

Generally speaking you shouldn't have any issues with this template. We are not sure what might gone wrong in this case.

Regards,
Nikolay Rusev
Telerik