BuyLog In
Ticket T653010
Visible to All Users

dxDataGrid - How to define a custom validation rule for NumberBox in cellTemplate

created 7 years ago

Hello,

I am trying to use custom rule validation as described here :-

https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxValidator/Validation_Rules/CustomRule/ .

I would like to use data:Object within the validation Callback.

Here is my below code snippet-

HTML
 <dx-data-grid..........>  

<dxi-column dataField="deliveryQuantity" dataType="number" [allowEditing]="false"  
                            cellTemplate="deliveryQuantityTemplate"  
                            [caption]="'app.orderDetails.columns.deliveryQuantity' | translate">  


   <div *dxTemplate="let cell of 'deliveryQuantityTemplate'" class="dx-cell-focus-disabled">  

                    <dx-number-box  
                        [valueChangeEvent]="'keyup'"  
                        [(value)]="cell.data.deliveryQuantity"  
                        required>  
                        <dx-validator>  
                            <dxi-validation-rule type="custom" [reevaluate]="true"  
                                                 [validationCallback]="customDeliveryQuantityValidationCallback">  
                            </dxi-validation-rule>  
                        </dx-validator>  
                    </dx-number-box>  
 </div>  

 </dx-data-grid.>

I understand reading the documentation that the data object in the validation callback is only present when used directly with the data grid itself. I would like to know what could be the other possible solution to fetch the current row values. In my *.ts file , I have below block code of shortened code, which doesnt work ofcourse.

JavaScript
customDeliveryQuantityValidationCallback(): boolean {  
    console.log(data);  
        if (this.outGoingGoodsInfo.length === 1) {  
           if (event.data.orderedQuantity === 1) {  

                   return true;  
          }  
        return false;  
   }

Any help is appreciated.

Regards
Akshay

Comments (2)
Artem (DevExpress Support) 7 years ago

    Hi,

    Validation rules can be defined using the columns.validationRules option if editCellTemplate is used (see Customize Editors). At the same time, it's not clear why cellTemplate is necessary in your case. Do you need to enable editing and always display editors for a particular column? If so, use editCellTemplate  and set showEditorAlways to "true".

    If your idea is different, please describe why it's necessary to use cellTemplate with validation in greater detail.

    We look forward to your reply.

    AG AG
    Abhilash Ghosh 7 years ago

      Hi Artem.

      Thanks for your response.

      Well, this is what I tried based on your reply. I cannot get the error message to pop up in the given field. It only becomes slight red when there is an error input. Along with the code below, also find the screenshot attached along with this.

      HTML
      <dx-data-grid..........>  

  <dxi-column dataField="deliveryQuantity" dataType="number" [allowEditing]="true"  
                           editCellTemplate="deliveryQuantityTemplate"  [showEditorAlways]="true"  
                           [caption]="'app.orderDetails.columns.deliveryQuantity' | translate">  
                   <dxi-validation-rule type="custom" [reevaluate]="true"  
                   [validationCallback]="customDeliveryQuantityValidationCallback">  
                   </dxi-validation-rule>>  
               </dxi-column>  

                   <div *dxTemplate="let cell of 'deliveryQuantityTemplate'" class="dx-cell-focus-disabled">  
                       <dx-number-box  
                           [valueChangeEvent]="'keyup'"  
                           [(value)]="cell.value"  
                           required>  
                       </dx-number-box>  
                   </div>  

</dx-data-grid.>

      In the .ts file

      JavaScript
      customDeliveryQuantityValidationCallback(): boolean {  
          event.rule.isValid = false;  
          event.rule.message = 'invalid input';  
          return false;  
    }

      Also, when I remove the focus from the field, the field is moved back to its initial value. Do I need to reset the value manually to the latest one after every input.

      Please suggest.

      Regards!

      Sign in to comment on this post

      Answers approved by DevExpress Support

      created 7 years ago (modified 7 years ago)

      Hello Abhilash,
      I created a sample based on the provided code and noticed that you are using the 'event' property in the customDeliveryQuantityValidationCallback callback, however, its value is not passed to this callback.
      Also, if editCellTemplate is used, it is required to manually implement cell updating using the setValue method of editCellTemplate. In addition, bind the value property of an editor the the data property:

      HTML
      <dx-number-box valueChangeEvent="keyup"  
    [value]="cell.data.FieldName">  
</dx-number-box>

      When I fixed the above issues, the validation message was displayed as expected. See the attached screencast and sample.
      Let me know if this helps. Otherwise, please modify my sample so I can reproduce the problematic behavior. I look forward to your reply.

        Comments (2)
        AG AG
        Abhilash Ghosh 7 years ago

          Hello Nataly,

          Thanks for your feedback.

          I tried your code base and it seems to work . It displays the error message promptly. What is missing for me right now is the way the field is looking. The css seems to be broken and there is no red mark on the cell even when I put it as required . Normally this red turns to blue on the sides when the user enters the data in the field. I will attach a screenshot of the cell , the way it should look.

          You could just modify your code above, as I am using the similar solution.

          Thanks in advance.

          Regards
          Akshay

          DevExpress Support Team 7 years ago

            The provided image demonstrates the appearance of a standard input element when it is invalid. Our widgets use different marks to demonstrate that an editor is not valid, usually this is a red border and a message, however, this depends on the applied theme. You can refer to the Validation - Overview demo to see this in action.
            If you wish to implement similar appearance, you will need to do this manually ( for example, add a wide left border). You can handle the focusOut event, check if an editor is valid and assign a CSS class to the editors input if it is required.
            Let me know if you have any further questions.

            Sign in to comment on this post

            Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

            Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.