Validation in Grid column with client template

6 posts, 1 answers
  1. Archana
    Archana avatar
    5 posts
    Member since:
    Aug 2013

    Posted 04 Nov 2013 Link to this post

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

  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 06 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Archana
    Archana avatar
    5 posts
    Member since:
    Aug 2013

    Posted 06 Nov 2013 Link to this post

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

  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 08 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Archana
    Archana avatar
    5 posts
    Member since:
    Aug 2013

    Posted 12 Nov 2013 Link to this post

    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 ?
     
  7. Answer
    Archana
    Archana avatar
    5 posts
    Member since:
    Aug 2013

    Posted 12 Nov 2013 Link to this post

    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!!

Back to Top
Kendo UI is VS 2017 Ready