Kendo Validator not responsive unless edit mode in grid active

7 posts, 0 answers
  1. Neeraj
    Neeraj avatar
    139 posts
    Member since:
    May 2015

    Posted 28 Sep 2020 Link to this post

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

      

     

     

     

  2. Eyup
    Admin
    Eyup avatar
    4076 posts

    Posted 30 Sep 2020 Link to this post

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

  3. Neeraj
    Neeraj avatar
    139 posts
    Member since:
    May 2015

    Posted 30 Sep 2020 in reply to Eyup Link to this post

    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
  4. Eyup
    Admin
    Eyup avatar
    4076 posts

    Posted 01 Oct 2020 Link to this post

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

  5. Neeraj
    Neeraj avatar
    139 posts
    Member since:
    May 2015

    Posted 13 Oct 2020 Link to this post

    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. 

              

  6. Eyup
    Admin
    Eyup avatar
    4076 posts

    Posted 15 Oct 2020 Link to this post

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

  7. Eyup
    Admin
    Eyup avatar
    4076 posts

    Posted 18 Oct 2020 Link to this post

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

Back to Top