Kendo Validator not responsive unless edit mode in grid active

[Neeraj]

Hello,
           I have kendo grid in mvvm.

 

<script id="TSTSettlementTemplate" type="text/x-kendo-template">
    <div data-bind="visible: isSettlementGridVisible" class="test67">


        <div data-role="grid" id="SettlementGrid"
             data-editable="true"
             data-toolbar='[{"template": "<div class=\"toolbar\"><input type=\"button\" class=\"k-button k-button-icontext\" onclick=\"AddSettlementrow(this)\" value=\"+ Add New Record\"/></div>" }]'
             data-columns="[
                   { 'field': 'Entity', 'title': 'Entity', 'width': 110 ,editor: SettlementGridEntityEditor , template: kendo.template($('\\#SettlementEntityDisplay').html()) },
                   { 'field': 'Entity', 'title': 'Entity Type', 'width': 50 , editable: false, editor: nonEditorforEntityTypeDisplay, template: kendo.template($('\\#SettlementEntityTypeDisplay').html()) },
                   { 'field': 'Payer', 'title': 'Payer', 'width': 110 ,editor: SettlementGridPayerEditor , template: kendo.template($('\\#SettlementPayerDisplay').html()) },
                   { 'field': 'SettlementType', 'title': 'Settlement Type', 'width': 110 ,editor: SettlementTypeEntityEditor , template: kendo.template($('\\#SettlementTypeDisplay').html()) },
                   { 'field': 'PaymentMode', 'title': 'Payment Mode', 'width': 150 ,editor: SettlementGridPaymentModeEditor , template: kendo.template($('\\#SettlementPaymentModeDisplay').html()) },
                   { 'field': 'PaidUsing', 'title': 'Paid Using', 'width': 150 ,editor: SettlementGridPaidUsingEditor , template: kendo.template($('\\#SettlementGridCreditCardTemplate').html()) },
                   { 'field': 'Amount', 'title': 'Amount', 'width': 150 ,editor: SettlementGridAmountEditor  },
                   { 'field': 'remark', 'title': 'Remark', 'width': 150 ,editor: SettlementGridRemarkEditor },
                   { text: 'Select', title: 'Action', template: kendo.template($('\\#SettlementGridOperationTemplate').html()) , 'width': 110}
                 ]"
             data-bind="source: settlementgridDS"
             style="height: 200px"></div>


    </div>
</script>

 

By javascript i programatically set DataSource as below code before binding object to above template :

SettlementVm.Data.settlementgridDS = new kendo.data.DataSource({
                      data: data.PricingSettlements,
                      schema: {
                          model: {
                              id: "ID",
                              fields: {
                                  ID: { type: "number", editable: false, nullable: true }
                                  //Entity: { type: "string", validation: { required: true } },
                                  //Payer: { type: "string", validation: { required: true } },
                                  //SettlementType: { type: "string", validation: { required: true } },
                                  //PaymentMode: { type: "string", validation: { required: true } },
                                  //PaidUsing: { type: "string" },
                                  //Amount: { type: "number", validation: { required: true } },
                                  //PCCCode: { type: "string", validation: { required: true } },
                                  //Remark: { type: "string", validation: { required: true } }
                              }
                          }
                      }
                  });

 

Amount, Remark are simple values rest other columns are complex types.

Problem: When i add new record in kendo grid / or there is existing pre-filled data and when i validate using kendo-Validator it shows no error even if values are not bound. Unless i open edit mode and click on anywhere . Kendo Validator only works when i activate Editor template. 

Question:

1) Can i change In-cell Edit mode to full Grid Edit mode?

2) How to validate columns values if Editor template not called ( user doesnt click on in-cell to open edit mode) ?

  

 

 

 

[Eyup]

Hi Neeraj,

 

Generally, for this kind of scenarios the Kendo UI toolset provides the option of Custom Validation by defining your own rules:
https://demos.telerik.com/kendo-ui/grid/editing-custom-validation

I hope this will prove suitable for your project.

 

Regards,
Eyup
Progress Telerik

[Neeraj]

But this done in html / jquery .I have implemented in MVVM . Just wanted to know how can i validate the kendo Grid mvvm without opening editor template . 
    I cannot run for loop for each cell in custom validation .... any idea

[Eyup]

Hello Neeraj,

 

In this case, feel free to modify the following live sample to demonstrate the exact issue you are facing and send us the new URL back to us:
https://dojo.telerik.com/AVOYAyiD

Then, we will be able to reproduce the problem locally and provide more accurate and precise suggestions.

 

Regards,
Eyup
Progress Telerik

[Neeraj]

Hello,

        Here is the   link
        The grid has 2 columns. 1st column has dropdownlist editor . 2nd has normal text . there is button (not added) on click of button i want to validate grid and should prompt for missing dropdown selection or text if unfilled for multiple rows . I dont know why grid is not getting displayed . no error in console though. 

          

[Eyup]

Hello Neeraj,

 

Thank you for the provided dojo sample.

I will investigate the issue and get back to you with my findings.

 

Regards,
Eyup
Progress Telerik

[Eyup]

Hello Neeraj,

 

Thank you for the provided sample once again.

I was able to display the grid and analyze the code. Since this is an MVVM scenario, to resolve the issues, you can take the following steps:

1. Place the grid inside a form
2. Create a .kendoValidator for this form
3. Bind to the change event of the observable instance
4. Ensure that every input has a name:
https://www.telerik.com/forums/kendo-mvvm-validation-on-window#nrkbkU7sGUqjWOCOV2LLcg

All of these are demonstrated in the following working sample:
https://docs.telerik.com/kendo-ui/controls/editors/validator/how-to/validator-in-mvvm

Feel free to give it a try and let me know how it goes.

 

Regards,
Eyup
Progress Telerik