Dialog Template tooltip not showing

I have a grid with a dialog template. The error tooltip works correctly on the Email Field but it doesn't show for the Username and Password fields. The annotations are working because the field turns red but the tool tip just doesn't display. See the attached file with the grid and data object with annotations. I can't see any difference between the fields.

Thanks



Attachment: tooltip_bc6e747f.zip

3 Replies

RN Rahul Narayanasamy Syncfusion Team February 28, 2022 02:07 PM UTC

Hi Sheldon, 
 
Greetings from Syncfusion. 
 
Based on your shared details we have checked the reported problem at our end. We could not able to reproduce the reported case. After editing the record, all the validation rules and tooltip was shown property while saving the record. Find the sample for your reference. 
 
 
 
 
If you are still facing the problem, then could you please share the below details which will be helpful to validate and provide a better solution. 
 
  • Reproduce the problem in the provided sample and revert back to us.
  • Share a simple reproduceable sample if possible.
  • Video demonstration of the problem.
 
Regards, 
Rahul 



SP Sheldon Parkes February 28, 2022 07:47 PM UTC

There seems to be 2 issues here.

1) If you remove the Password column from the grid then the dialog tool tip for the Password field no longer works. Even with a hidden column it doesn't work.

2) Username had IsPrimaryKey="true" - when I removed that the tool tip began working for this field.


I worked around #1 for now by doing what your sample does and using a template with "****" in it. So I have it working well enough now but this does seem like you have a couple of bugs.


Thanks


Sheldon Parkes



VN Vignesh Natarajan Syncfusion Team March 1, 2022 06:39 AM UTC

Hi Sheldon,  
 
Thanks for the update.  
 
Query: “If you remove the Password column from the grid then the dialog tool tip for the Password field no longer works. Even with a hidden column it doesn't work. 
 
We understand your requirement and issue you are facing. We suggest you to overcome the reported issue by define the GridColumn in Grid component and define width as 0. So that it will be visible in edit form and hidden in GridColumn. So that validation is shown properly in edit dialog.  
 
Refer the below code example.  
 
<SfGrid DataSource="@GridData" Toolbar="@(new string[] { "Edit" ,"Delete","Update","Cancel" })"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog" Dialog="DialogParams"> 
        <Template> 
            @{ 
                var Order = (context as OrdersDetails); 
                <div> 
                    <div class="form-row"> 
                        <div class="form-group col-md-6"> 
                            <label class="e-float-text e-label-top">Order ID</label> 
                            <SfNumericTextBox ID="OrderID" @bind-Value="@(Order.OrderID)" Enabled="@((Order.OrderID == null) ? true : false)"></SfNumericTextBox> 
                        </div> 
                        <div class="form-group col-md-6"> 
                            <label class="e-float-text e-label-top">User Name</label> 
                            <SfTextBox ID="UserName" @bind-Value="@(Order.UserName)" FloatLabelType="FloatLabelType.Always" Placeholder="User Name"></SfTextBox> 
                        </div> 
                    </div> 
                    <div class="form-row"> 
                        <div class="form-row"> 
                            <div class="form-group col-md-6"> 
                                <SfTextBox ID="Email" @bind-Value="@(Order.Email)" FloatLabelType="FloatLabelType.Always" Placeholder="Email Address"></SfTextBox> 
                            </div> 
                         
                        </div> 
                    </div> 
                   
                    <div class="form-row"> 
                        <div class="form-group col-md-12">                           
                            <SfTextBox ID="Password" @bind-Value="@(Order.Password)" Type="InputType.Password" FloatLabelType="FloatLabelType.Always" Placeholder="Password"></SfTextBox> 
                        </div> 
                    </div> 
                </div> 
            } 
        </Template> 
    </GridEditSettings> 
    <GridColumns> 
        <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" HeaderTextAlign="@TextAlign.Center" Width="140"></GridColumn> 
        <GridColumn Field=@nameof(OrdersDetails.UserName) HeaderText="User Name" Width="150"></GridColumn> 
        <GridColumn Field=@nameof(OrdersDetails.Password) HeaderText="Password" Width="0"></GridColumn> 
        <GridColumn Field="@nameof(OrdersDetails.Email)" HeaderText="Email" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left" Width="110"> </GridColumn> 
        <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" Width="140" TextAlign="@TextAlign.Right" HeaderTextAlign="@TextAlign.Right"></GridColumn> 
        <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" Width="160"></GridColumn> 
        <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn> 
    </GridColumns> 
</SfGrid> 
   
Refer the below modified sample for your reference 
 
 
Please get back to us if you have further queries.  
 
Query: “Username had IsPrimaryKey="true" - when I removed that the tool tip began working for this field. 
 
PrimaryKey column is necessary to perform built-in CRUD operation in Grid. So kindly define the IsPrimaryKey property to any one of the available column whose value is unique. Removing the IsPrimaryKey from GridColumn might cause issue while saving the changes in Grid or while inserting a record.  
 
Kindly refer the below documentation for your reference 
 
 
Note: if you want to make UserName column a editable one, kindly change the IsPrimaryKey property to other columns whose value is unique.  
 
Please get back to us if you have further queries.  
  
Regards, 
Vignesh Natarajan 


Loader.
Up arrow icon