Validation cover dropdown in Grid???

[Michael Lambert]

When using validation with the ej:grid on a dropdown the validation message covers at least the first two entries making it impossible to see or select them with the mouse.  I can use cursor keys to change the selection.  I would think that once I set focus to the validated field, the validation message would disappear and let me make a selection.  Tell me how I can overcome this issue?

Thanks,
                    <ej:Column Field="BU" HeaderText="BU" EditType="Dropdown">
                        <ValidationRule>
                            <ej:KeyValue Key="required" Value="true" />
                        </ValidationRule>
                    </ej:Column>

[Prasanna Kumar Viswanathan]

Hi Michael, 

Thanks for contacting Syncfusion support. 

To overcome this issue, use the jQuery Validation’s errorPlacement event to change the position of the validation error message. In the ActionComplete event of the Grid, while the requestType is either “beginedit/add”, you have to extend the errorPlacement event. 

Find the code example and sample: 

 

<ej:Grid ID="Grid" runat="server" AllowPaging="True"> 

----------------------------------- 

        <ClientSideEvents ActionComplete="complete" /> 

        <Columns> 

                 ------------------------ 

                        <ej:Column Field="ShipCity" HeaderText="Ship City" Width="90" EditType="Dropdown"> 

                            <ValidationRule> 

                                <ej:KeyValue Key="required" Value="true" /> 

                            </ValidationRule> 

                        </ej:Column> 

             --------------------- 

                        

            </Columns> 

        </ej:Grid>  

 

<script> 

    function complete(args) { 

        if (args.requestType == "beginedit" || args.requestType == "add") { 

            var old = $("#" + this._id + "EditForm").validate().settings.errorPlacement; 

            $("#" + this._id + "ShipCity").ejDropDownList({ 

                select: function (args) { 

                    $(this.element.closest(".e-ddl")).siblings(".e-error").remove(); 

                } 

            }) 

            var proxy = this; 

            $("#" + this._id + "EditForm").validate().settings.errorPlacement = function (error, element) { 

                if (element.attr("ID") == proxy._id + "ShipCity") { 

                    $container = $(error).addClass("e-error"); 

                    $tail = ej.buildTag("div.e-errortail e-toparrow"); 

                    $container.append($tail); 

                    $container.offset({ left: $(element).parent().position().left + $(element).closest("td").width() }); 

                    $container.insertBefore(element.closest(".e-widget")) 

                } 

                else 

                    old.apply(this, [error, element]); 

            } 

        } 

    } 

</script> 

Sample: http://www.syncfusion.com/downloads/support/forum/125945/ze/Sample1438312908 

Regards, 

Prasanna Kumar N.S.V 

 

[Michael Lambert]

Thanks Prasanna,

That works, though is there anyway instead of having a function for individual controls, it there a way to have it apply to all the control in a grid or specific type of controls, like for dropdowns?

Mike

[Jayaprakash Kamaraj]

Hi Michael, 

We can apply all the controls in Grid and also we have prepared a grid sample with NumericTextBox and DropDown controls. Please refer to the below code example and sample. 

<ej:Grid ID="Grid" runat="server" AllowPaging="True"> 

         

        <Columns> 

                …………………………….. 

              <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}" EditType="Numeric"> 

                            <NumericEditOptions DecimalPlaces="2"></NumericEditOptions> 

                   <ValidationRule> 

                                <ej:KeyValue Key="required" Value="true" /> 

                           </ValidationRule> 

                        </ej:Column> 

                        <ej:Column Field="ShipCity" HeaderText="Ship City" Width="90" EditType="Dropdown"> 

                            <ValidationRule> 

                                <ej:KeyValue Key="required" Value="true" /> 

                            </ValidationRule> 

                        </ej:Column> 

……………………………………………………………………………..                        

            </Columns> 

        </ej:Grid>  

 

<script> 

    function complete(args) { 

        if (args.requestType == "beginedit" || args.requestType == "add") { 

            var old = $("#" + this._id + "EditForm").validate().settings.errorPlacement; 

            $("#" + this._id + "ShipCity").ejDropDownList({ 

                select: function (args) { 

                    $(this.element.closest(".e-ddl")).siblings(".e-error").remove(); 

                } 

            }) 

            var proxy = this; 

            $("#" + this._id + "EditForm").validate().settings.errorPlacement = function (error, element) { 

                if (element.attr("ID") == proxy._id + "ShipCity" || element.attr("ID") == proxy._id + "Freight" ) { 

                    $container = $(error).addClass("e-error"); 

                    $tail = ej.buildTag("div.e-errortail e-toparrow"); 

                    $container.append($tail); 

                    $container.offset({ left: $(element).parent().position().left + $(element).closest("td").width() }); 

                    $container.insertBefore(element.closest(".e-widget")) 

                } 

                else 

                    old.apply(this, [error, element]); 

            } 

        } 

    } 

</script> 

</asp:Content> 

Sample: http://www.syncfusion.com/downloads/support/forum/125945/ze/Sample-867474966 

Regards, 

Jayaprakash K.