We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Validation cover dropdown in Grid???

Thread ID:

Created:

Updated:

Platform:

Replies:

125945 Sep 13,2016 06:47 PM UTC Sep 15,2016 12:40 PM UTC ASP.NET Web Forms 3
loading
Tags: Grid
Michael Lambert
Asked On September 13, 2016 06:47 PM UTC

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 [Syncfusion]
Replied On September 14, 2016 11:07 AM UTC

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> 


Regards, 
Prasanna Kumar N.S.V 
 


Michael Lambert
Replied On September 14, 2016 05:39 PM UTC

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 [Syncfusion]
Replied On September 15, 2016 12:40 PM UTC

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> 


Regards, 

Jayaprakash K. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;