want to add validation on saving the kendo grid

0 Answers 8 Views
DropDownList Grid ToolTip Validation
saurabh
Top achievements
Rank 1
saurabh asked on 17 Apr 2024, 12:19 PM

let me explain what issue i am facing , i have two cloumns in kendogrid one is dropdown and other is simple textbox

let say dropodown column has (emailadress, website dropdown) now i want to match the exact expression of mail to the other column

if it matches then save the record if not matches than show the toolptip and prevent for saving changes

this is the code

save: function(e) {
                                    // Get the data item being saved
                                    var dataItem = e.model;

                                    // Access properties of the data item and perform actions accordingly
                                    var addressType = dataItem.intInternetAddressTypeID;
                                    var inputField = dataItem.strInternetAddress;

                                    // Perform validation or other actions based on the properties
                                    if (addressType === "2") {
                                        // Email validation for input field
                                        var emailRegex = /^[^\s@@]+@@[^\s@@]+\.[^\s@@]+$/;
                                        if (!emailRegex.test(inputField)) {
                                            // Set validation message on the corresponding cell
                                            e.container.find("[name=strInternetAddress]").closest("td").attr("data-strInternetAddress-msg", "Invalid email address format");
                                            e.preventDefault(); // Prevent saving the record
                                        }
                                    } else if (addressType === "10") {
                                        // Phone number validation for input field
                                        var phoneRegex = /^[0-9]+$/;
                                        if (!phoneRegex.test(inputField)) {
                                            // Set validation message on the corresponding cell
                                            e.container.find("[name=strInternetAddress]").closest("td").attr("data-strInternetAddress-msg", "Invalid phone number format");
                                            e.preventDefault(); // Prevent saving the record
                                        }
                                    }
                                },

i also enable the tooltip from databound
dataBound: function (e) {
   e.sender.element.find("[data-strInternetAddress-msg]").each(function () {
                                    $(this).kendoTooltip({
                                        position: "bottom",
                                        content: $(this).attr("data-strInternetAddress-msg"),
                                    });
                                });
}but tooltip is not showing in the page , it preventing from saving but not showing tooltip after inspection i found that it creating this html

<td role="gridcell" data-container-for="strInternetAddress" data-strinternetaddress-msg="Invalid email address format"><input type="text" class="k-input k-textbox k-valid" name="strInternetAddress" required="required" data-required-msg="Internet Address is required" data-bind="value:strInternetAddress"></td>


Help me how to show the tooltip not alert i dont want alert

Nikolay
Telerik team
commented on 22 Apr 2024, 10:08 AM

Hi Saurabh,

I recommend setting the validation inside the schema.model as demonstrated in the next demo:

https://demos.telerik.com/kendo-ui/grid/editing-custom-validation

Example:

            schema: {
              model: {
                fields: {
                  ProductID: { editable: false, nullable: true },
                  ProductName: {
                    validation: {
                      required: true,
                      productnamevalidation: function (input, e) {
                        if (input.is("[name='ProductName']") && input.val() != "") {
                          input.attr("data-productnamevalidation-msg", "Product Name should start with capital letter");
                          return /^[A-Z]/.test(input.val());
                        }

                        return true;
                      }
                    }
                  }
                }
              }
            }

If this does not help please share a sample Dojo demo with your Grid implementation so I can advise further.

Regards,

Nikolay

No answers yet. Maybe you can help?

Tags
DropDownList Grid ToolTip Validation
Asked by
saurabh
Top achievements
Rank 1
Share this question
or