Can we do validation inside the client detail template?

[Karthik]

 Hello All,
        I have a client detail template like this,
<script id="ItemsMoreTemplate" type="text/x-kendo-template">
<div class="form-group required">
        <div class="col-sm-2 control-label">
            @Html.LabelFor(x => x.Expire1Message)
        </div>
        <div class="col-sm-3">            
            @Html.Kendo().TextBoxFor(x => x.Expire1Message).HtmlAttributes(new { , required=true ,id = "Expire1Message_#=Id#", @class = "form-control", value = "#if(Expire1Message!=null){##=Expire1Message##}#" })
            
        </div>
    </div>
</script>

I am just expanding this template when I click the edit button (just expanding on edit event from grid) and the data are binding well. 
 I updated the post data source on Save event of kendo grid. Anyway the value is updating and getting saved.
 But my problem is the validation, original grid text boxes are validating well, but my client template text boxes are not validating, because no validation message or required attributes are added to the text box. 

Is there any way to do validate the client detail template text boxes??
Kindly advice me.
 

[Daniel]

Hello,

The detail is not part of the editing container so the grid validator will not validate the inputs. You should initialize a validator in the detailInit event:

function onDetailInit(e) {
    e.detailRow.kendoValidator();

and then check if the inputs are valid in the save event by using the validate method:

function onSave(e) {
    var detailValidator = e.container.next().data("kendoValidator");
    if (!detailValidator.validate()) {
            e.preventDefault();
    }

Regards,
Daniel
Telerik

 

 

[Chris]

Hi, we cannot use the save event because that is executed after the save happens. I tried with saveChanges event but it wasn't executed. On the other hand, I used the suggested code for the onDetailInit, but still the validation only happens for the field in the inline row and not the template detail

This is my model and template. I'd appreciate any help. Thanks.

model: {

    id: 'id',

    fields: {

        id: { type: 'number', defaultValue: null, editable: false },

        name: {

            type: 'string',

            validation: { required: { message: 'Promotional Sale name is required.' } },

        },

        startDate: {

            type: 'date',

            validation: { required: { message: 'Start date is required.' } },

        },

        endDate: {

            type: 'date',

            validation: { required: { message: 'End date is required.' } },

        },

        discountId: {

            type: 'number',

            validation: { required: { message: 'Discount Name is required.' } },

        },

        discountType: { type: 'string' },

        amount: { type: 'number', validation: { required: { message: 'Amount is required.' } } },

        salesType: {

            type: 'number',

            validation: { required: { message: 'Apply Discount to is required.' } },

        },

        storeNumber: { type: 'number' },

        categoryId: { type: 'number' },

        subCategoryId: { type: 'number' },

    },

<div class="tabstrip">
    <ul class="inner-tabs-wrapper">
    <li class="k-state-active tab-details">Details</li>
    </ul>
    <div class="item-details">
    <div class="flex flex-wrap">
        <div class="col-6">
        <div class="clearfix p1 mt1 field-container">
            <div class="col col-3 right-align pr2">
            <label class="labelGray" for="discountId">
                Discount Name
            </label>
            </div>
            <div class="col col-7">
            <input
                type="text"
                class="sbiz-form__dropdown w-100 mt-m5px"
                value="#: discountId #"
                name="discountId"
                autocomplete="off"
                data-bind="value:discountId"
            />
            </div>
        </div>
        <div class="clearfix p1 mt1 field-container">
            <div class="col col-3 right-align pr2">
            <label class="labelGray" for="discountType">
                Discount Type
            </label>
            </div>
            <div class="col col-7">
            <div class="discountType-value">#: discountType #</div>
            </div>
        </div>
        <div class="clearfix p1 mt1 field-container">
            <div class="col col-3 right-align pr2">
            <label class="labelGray" for="amount">
                Amount
            </label>
            </div>
            <div class="col col-7">
            <input
                type="text"
                class="k-textbox currency-editor text-editor w-100 mt-m5px"
                value="#: amount #"
                name="amount"
                autocomplete="off"
                data-bind="value:amount"
            />
            </div>
        </div>
        <div class="clearfix p1 mt1 field-container">
            <div class="col col-3 right-align pr2">
            <label class="labelGray" for="startDate">
                From
            </label>
            </div>
            <div class="col col-7">
            <input
                type="text"
                class="k-input sbiz-form__datepicker w-100 mt-m5px"
                value="#: startDate #"
                name="startDate"
                autocomplete="off"
                data-bind="value:startDate"
            />
            </div>
        </div>
        <div class="clearfix p1 mt1 field-container">
            <div class="col col-3 right-align pr2">
            <label class="labelGray" for="endDate">
                To
            </label>
            </div>
            <div class="col col-7">
            <input
                type="text"
                class="k-input sbiz-form__datepicker w-100 mt-m5px"
                value="#: endDate #"
                name="endDate"
                autocomplete="off"
                data-bind="value:endDate"
            />
            </div>
        </div>
        </div>
        <div class="col-6">
        <div class="clearfix p1 mt1 field-container">
            <div class="col col-3 right-align pr2">
            <label class="labelGray" for="salesType">
                Apply Discount to
            </label>
            </div>
            <div class="col col-7">
            <input
                type="text"
                class="sbiz-form__dropdown w-100 mt-m5px"
                value="#: salesType #"
                name="salesType"
                autocomplete="off"
                data-bind="value:salesType"
            />
            </div>
        </div>
        <div class="clearfix p1 mt1 field-container">
            <div class="col col-3 right-align pr2">
            <label class="labelGray" for="categoryId">
                Category
            </label>
            </div>
            <div class="col col-7">
            <input
                type="text"
                class="sbiz-form__dropdown w-100 mt-m5px"
                value="#: categoryId #"
                name="categoryId"
                autocomplete="off"
                data-bind="value:categoryId"
            />
            </div>
        </div>
        <div class="clearfix p1 mt1 field-container">
            <div class="col col-3 right-align pr2">
            <label class="labelGray" for="subCategoryId">
                Sub-Category
            </label>
            </div>
            <div class="col col-7">
            <input
                type="text"
                class="sbiz-form__dropdown w-100 mt-m5px"
                value="#: subCategoryId #"
                name="subCategoryId"
                autocomplete="off"
                data-bind="value:subCategoryId"
            />
            </div>
        </div>
        </div>
    </div>
    </div>
</div>

 

[Alex Hajigeorgieva]

Hi, Chris,

Thank you very much for the provided code snippets.

It appears that the editors in the snippets are missing their HTML validation attributes. The suggested workflow should do the trick if you place the necessary attributes, e.g required.

https://docs.telerik.com/kendo-ui/controls/editors/validator/rules

Here is a runnable test Dojo for your reference. If you clear either editor, you will see the required message appear:

https://dojo.telerik.com/@bubblemaster/uwEpAWIn/2

 

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Chris]

Thanks Alex, now the messages are happening. But in order to release validation before saving, I need to make it happen when the 'Save' button is clicked. However, now I'm facing another issue: The click handler only happens for the initial 'Edit' button, is possible to add click handlers for the update and cancel buttons that appears after the edit button is clicked? Thanks.

columns: [
    { field: 'name', title: 'Promotional Sales Name', width: 500 },
    {
        command: [
            {
                name: 'edit',
                className: 'k-button-secondary special-css-class',
                text: { edit: 'Edit', update: 'Save', cancel: 'Cancel' },
                click: function (e) {
                    console.log('click::: ', e);
                },
            },
            {
                name: 'Delete',
                className: 'k-button-secondary',
                iconClass: 'k-icon k-i-delete',
                width: 50,
            },
        ],
    },
],

[Viktor Tachev]

Hello Chris,

 

In order to implement the functionality you can handle the Grid edit event. When this event is raised the save and cancel buttons will be shown and it will be possible to handle their click event. In the click handler you can get reference of the Kendo Validator widget and call its validate() method to validate the content.

The updated dojo below illustrates the approach:

https://dojo.telerik.com/eBuxUnEx

Give it a try and let me know how it works for you.

 

Regards,
Viktor Tachev
Progress Telerik

[Chris]

That did the trick. Thank you.