Grid validation not working with custom grid behavior

[Tomislav]

I can not get validation to work in my custom grid. The grid is designed to change the value of cell below the edited cell. After both cells have new values, cell focus is set to the next cell (cell to the right if enter/tab is pressed, or whichever cell is mouse-clicked next). In order for all that to work, I had to write my own refresh() and current() functions and use custom edit() and save() events in the grid. I also use custom editor in cells, which removes the spinners and selects the cell's value.

I have made a simplified working example which shows that validation is not working. In the example you can edit a cell in the first row, and when you press enter or tab, cell below will get the same value as the edited cell. Custom functions and events are necessary in order for both mouse and keyboard focusing to work so I have to use them.

If you delete the cell's value, and press enter no validation error will be shown. Is there a way to make the validation work?

EXAMPLE

[Rosen]

Hi Tomislav,

The validation is not triggered due to the missing validation attributes. As you may know, when custom column editor is used, the developer is responsible for adding the appropriate validation attributes to the correct elements within this editor. Similar to the following:

function editNumberWithoutSpinners(container, options) {

    // add name attribute to connect the validation placeholder with the validated element
    $('<input name="' + options.field + '" data-text-field="' + options.field + '" ' +
        'data-value-field="' + options.field + '" ' +
        'data-bind="value:' + options.field + '" ' +
        'data-format="' + options.format + '" required/>') // add the validation attributes
        .appendTo(container)
        .kendoNumericTextBox({
            spinners: false,
            min: 0
    });

   // custom validation message placeholder is required due to the way NumericTextBox is rendered
   $('<span class="k-invalid-msg" data-for="' + options.field + '"></span>').appendTo(container);
}

Regards,
Rosen
Telerik

 

 

[Tomislav]

Thank you, I didn't know about about that. Just a few more follow-up questions:

1. Is there a way to implement custom validation in a custom column editor? If that's possible, could you create an example?

2. Let's say, in my updated example from above, I want to enter '10' in a cell in the 1st row, and update the cell below it (in the 2nd row) with the value from above subtracted by 100 (10 - 100 = -90). Is there a way to invoke validation in below cell when actually editing the above cell?

[Rosen]

Hi Tomislav,

1. The custom validation can be implemented the same way as with the built-in editors. However, if the validation function relies on some part of the rendering of the actual element, you should make sure it is rendered when custom editor is constructed.

2. I'm afraid that this is not possible. The validation is executed only on the input UI elements. Therefore, such element is required in order validation to run. Also note that during cell editing the actual validator is attached only to the edited cell.

Regards,
Rosen
Telerik

 

 

[Stefan]

Hi Rosen,

 

I am not sure why, but if i keep my validation required = true in my Kendo grid, the required message is shown correctly, but I am not bale to navigate to the next cell unless i fill in that particular cell where error is shown.

 

i would like the error message to be displayed like that, but i should be able to navigate to next cell even without correcting the previous required field. (I just want to edit multiple field with required = true)

 

This problem is just for my example, in the demos shown, there are no issues.

can you please help me why?

 

http://jsfiddle.net/Lw6awf6g/1/

 

[Rosen]

Hello Stefan,

 

This behavior is by design. This is how the incell edit mode should work - it does not allow invalid values to be set. If you need to edit multiple values, you should consider a different edit mode - inline or popup.

 

Also as your question is not related to the original topic of this thread, I would ask you to a separate support request if additional question raise.

 

Regards,
Rosen
Telerik

 

 

[Stefan]

Hi Rosen,

It doesn't work even if i keep editable:"inline". (Still that problem persists, only if you enter some value in a field, it's able to navigate to the next cell)

[Rosen]

Hello Stefan,

 

Although, there is an editable: inline setting in the sample you have provided, the editable setting is duplicated. This is not supported and only the last setting will be applied. Therefore, the grid is set for incell edit mode, instead of inline. In order this to work you should merge the editable setting in a single object.

 

As this discussion diverged from the original topic, you should open a separate support request if you continue to experience difficulties.

 

Regards,
Rosen
Telerik