Validation in Grid column with client template

[Archana]

Hi,

I am trying to validate textboxes inside a grid column. This column is having different html controls depending on source data.
For example it can have textbox in one row and dropdown in next. I am able to achieve this using client template.
I want to validate inputs in textboxes. Validation can be different for each text box. It can be for number, max length and/or custom.
I am passing list of validation attributes in source data.

This is working good unless I click on any other grid cell having client template. As soon as I click such cell the validation message is disappering.

Any help on this is greatly appricated!

Thanks

Client template code -

01.sourceData
02.function CustomControlEditor(sourceData, defaultValue, templateType, controlType)
03.    {
04.
05.        if (sourceData != null && sourceData != '' )
06.        {
07.            var dd;
08.            if (controlType == "Multiselect")
09.            {
10.                dd = "<select id= 'dd' multiple='multiple'  onchange='SensorDropDownChanged(this,\"" + templateType + "\");'>";
11.
12.                //get source data
13.
14.        //get default values
15.
16.        //populate list
17.
18.                return dd;
19.            }
20.            else if (controlType == "Dropdownlist")
21.            {
22.                dd = "<select id= 'dd' onchange='SensorDropDownChanged(this,\"" + templateType + "\");'>";
23.
24.                 //get source data
25.
26.        //get default values
27.
28.        //populate list
29.
30.                return dd;
31.            }
32.
33.        //textbox sourceData is list of validation attributes
34.           else {
35.
36.            var tb;
37.
38.            if (defaultValue != null)
39.        {
40.
41.                    tb = "<input id= 'tbText' type='text' value='" + defaultValue + "' onblur='SensorTextBoxChanged(this,\"" + templateType + "\");' " + sourceData + "/>";
42.                }
43.            else
44.        {
45.                    tb = "<input id='tbText' 'tb' type='text' 'onblur='SensorTextBoxChanged(this,\"" + templateType + "\");' " + sourceData + "/>";
46.                }
47.            return tb;
48.        }
49.        }
50.
51.
52.    }

[Daniel]

Hello,

From the provided code and description it is not clear whether you are using an editor template or a display template. If you are using an editor template validation rules should be added as attributes to the elements and no other changes should be required. If you are using a display template then please provide the code you are using for the Grid and the Validator. A possible reason for the problem in this scenario is that you are updating the value on change in the model with the set method without checking if the input is valid. In this case the Grid will be redrawn and the message will disappear.

Regards,
Daniel
Telerik

[Archana]

Thank you for your reply, Daniel!  I am using client template for that column.

Grid code -

  @(Html.Kendo().Grid<BIOTA.ViewModel.FieldDetailsViewModel>()
    .Name("HeaderGrid")
    .AutoBind(false)
    .Selectable( sel => sel.Mode(GridSelectionMode.Single))
    .Columns(columns =>
    {
        .
    .
    .
        columns.Bound(e => e.DISPLAY_ORDER).Width("13%").Title("Display Order").EditorTemplateName("Short");
        columns.Bound(e => e.TAB_ORDER).Width("12%").Title("Tab Order").EditorTemplateName("Short");
        columns.Bound(e => e.DEFAULT_VALUE).Width("24%").Title("Default Value").ClientTemplate("#=DefaultDropDownEditor(SOURCE_DATA, DEFAULT_VALUE,'HEADER',CONTROL_TYPE)#");
        columns.Bound(e => e.TEMPLATE_ID).Width("0px").Title("").Hidden();
        columns.Bound(e => e.TEMPLATE_TYPE_ID).Width("0px").Title("").Hidden();
    })
    .DataSource(dataSource => dataSource
                                .Ajax()
                                .Batch(true)
                                .PageSize(15)
                                .Model(modelheader =>
                                {
                                    modelheader.Id(p => p.APP_CONTROLS_ID_PK);
                                    modelheader.Field(p => p.SELECTED).Editable(true);
                                    modelheader.Field(p => p.FIELD_NAME).Editable(false);
                                    modelheader.Field(p => p.DISPLAY_NAME).Editable(false);
                                    modelheader.Field(p => p.DISPLAY_ORDER).Editable(true);
                                    modelheader.Field(p => p.TAB_ORDER).Editable(true);
                                    modelheader.Field(p => p.DEFAULT_VALUE).Editable(false);
                                    modelheader.Field(p => p.TEMPLATE_ID).Editable(false);
                                    modelheader.Field(p => p.TEMPLATE_TYPE_ID).Editable(false);

                                })
                                .Read(read => read.Action(".....", ".......").Data("GetHeaderTemplateType").Type(HttpVerbs.Post))
                                .Update("Editing_Update", "Project")
                                .Events(events => events.Error("error_handler"))
                                .ServerOperation(false)
                )
    .ToolBar(toolbar => { toolbar.Save(); })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Navigatable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:500px;" })
     .Events(evnt => evnt.SaveChanges("onGridSave"))
)

I dont have validator code. I am passing validation attributes in client template and attching to html of textbox.
You are correct I am not checking if the input is valid or not. Can you tell me how to do it? I am attching code where I am assigning textbox value to underlying model property.

function SensorTextBoxChanged(e, templateType)
{

    var grid;
    var cellHeader;
    var cellIndex;
    var gridName = "";

        cellHeader = $("#HeaderGrid").find("th[data-title='Default Value']");
        cellIndex = cellHeader[0].cellIndex;
        grid = $('#HeaderGrid').data("kendoGrid");
        gridName = "HeaderGrid";

    .
    .
    .

    var item = grid.dataItem(grid.select());


    //item.sel1();
    if (item != null) {
        if (item.DEFAULT_VALUE != e.value)
        {
            var row = grid.tbody.find("tr[data-uid='" + item.uid + "']");
            var cell = row.find("td:eq(" + cellIndex + ")");
            if (cell.error()[0].innerText == null || cell.error()[0].innerText == "") {
                if (!cell.hasClass("k-dirty-cell")) {
                    cell.prepend("<span class='k-dirty'></span>");
                }
                item.DEFAULT_VALUE = e.value;
                item.dirty = true;
            }
            else {
                item.dirty = false;
                if (!cell.hasClass("k-dirty-cell")) {
                    cell.prepend("<span class='k-dirty'></span>");
                }

            }
        }
    }
}

[Daniel]

Hello again,

If the attributes are already set then you can initialize a validator on the Grid element or the table and call the validate method to check if it is valid before setting the value. However, I am not sure if I understand which message is hidden if a Validator is not currently initialized. Could you clarify a bit? 

Regards,
Daniel
Telerik

[Archana]

Hi Daniel,

I have attached a document to show screenshot of error message and JavaScript functions. Please check it. I am trying all different kind of things to make it to work. I think, I am missing something like I need to call validateInput on grid ?

[Archana]

Finally it’s working. Thank you very much for showing me right direction!!!

I corrected couple of mistakes in my JavaScript code-
1) using NAME instead of  ID in html textbox in client template.
2) Initializing Validator on each grid not just on form.
I have attached working code -

$(document).ready(function () {
    $("form").kendoValidator();
    $("#ReplicateGrid").kendoValidator();
    $("#HeaderGrid").kendoValidator();
    $("#GridOrg").kendoValidator();
});

function DefaultDropDownEditor(sourceData, defaultValue, templateType, controlType, fieldName)
{
.
.
.
//validation attributes work on unique name of control not on id
return "<input name= '"+ templateType +"_"+fieldName+"' type='text' value='" + defaultValue + "' onblur='SensorTextBoxChanged(this,\"" + templateType + "\");' " + sourceData + "/>";
}

//attached to RequestStart event of grid’s datasource
// and to grid’s save to avoid those events
function PreventEventIfError_Datatype(e) {
    if ($("#GridOrg").data("kendoValidator") != null) {
        $("#GridOrg").data("kendoValidator").validate();
    }
    if ($("#GridOrg").data("kendoValidator").errors().length > 0) {
        e.preventDefault();
    }
}

Thank you very much once again!!