This is a migrated thread and some comments may be shown as answers.

Kendo Validator not responsive unless edit mode in grid active

6 Answers 184 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Neeraj
Top achievements
Rank 1
Veteran
Neeraj asked on 28 Sep 2020, 06:39 AM

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) ?

  

 

 

 

6 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 30 Sep 2020, 06:21 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Neeraj
Top achievements
Rank 1
Veteran
answered on 30 Sep 2020, 07:22 AM
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
0
Eyup
Telerik team
answered on 01 Oct 2020, 12:23 PM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Neeraj
Top achievements
Rank 1
Veteran
answered on 13 Oct 2020, 11:48 AM

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. 

          

0
Eyup
Telerik team
answered on 15 Oct 2020, 11:58 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Eyup
Telerik team
answered on 19 Oct 2020, 04:15 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
MVVM
Asked by
Neeraj
Top achievements
Rank 1
Veteran
Answers by
Eyup
Telerik team
Neeraj
Top achievements
Rank 1
Veteran
Share this question
or