Icons don't load and cannot lose focus on controls when AddIconAsync is used on Grid Dialog Template

Question

Hi, I am trying to load some controls in to the Dialog grid template with icons appended. First issue is, the icons does not show straightaway when you double click a grid row and when the dialog box opens up. It only shows the icon when you click on the control itself. The icons should be shown for both Email and Mobile controls. See Image 1 Second issue is, the focused controls keep highlighted when clicked on a different control. See Image 2 I am using the following code to achieve this.

@code { SfTextBox? sftPrefferredContactIconMobile; SfTextBox? sftPrefferredContactIconEmail; public void PrefferedContactIconForMobile() { this.sftPrefferredContactIconMobile?.AddIconAsync("append", "e-icons e-radio-button"); } public void PrefferredContactIconForEmail() { this.sftPrefferredContactIconEmail?.AddIconAsync("append", "e-icons e-radio-button"); }}Can you please help me to correct these issues? Thank you. Harry.

Rahul Narayanasamy · Accepted Answer

Hi Harryi,

Greetings from Syncfusion.

Query: First issue is, the icons does not show straightaway when you double click a grid row and when the dialog box opens up. It only shows the icon when you click on the control itself. The icons should be shown for both Email and Mobile controls.

Based on your query, you are rendering the textbox with icon dynamically in edit dialog when editing the Grid record. In this case, you are facing the reported problem(the textbox icon is not shown at initial rendering of the dialog). If so, we would like to inform you that we have prevented the unnecessary rendering of the grid/edit dialog while adding/editing to improve the performance. So the reported behavior occurs. So, we suggest you to resolve the reported case by setting PreventRender as false in the OnActionComplete event handler based on RequestType as Add/BeginEdit. It will allow you to re-render the grid/edit dialog which will resolve your case.

Please refer and add the codes below,

<SfGrid DataSource="@GridData" Toolbar="@(new string[] {"Add", "Edit" ,"Delete","Update","Cancel" })">

<GridEvents OnActionComplete="ActionCompletedHandler" TValue="OrdersDetails"></GridEvents>

. . .

<GridColumns>

. . .

</SfGrid>

@code{

SfTextBox customerTextBoxRef;

SfTextBox shipaddressTextBoxRef;

private async Task CreatedHandler(Object args)

{

await this.customerTextBoxRef?.AddIconAsync("append", "e-icons e-radio-button");

}

private async Task CreatedHandler1(Object args)

{

await this.shipaddressTextBoxRef?.AddIconAsync("append", "e-icons e-radio-button");

}

public void ActionCompletedHandler(ActionEventArgs<OrdersDetails> args)

{

if (args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.Add) || args.RequestType.Equals(Syncfusion.Blazor.Grids.Action.BeginEdit))

{

//based on Add or Edit action disable the PreventRender

args.PreventRender = false;

}

. . .

}

Reference:

https://blazor.syncfusion.com/documentation/datagrid/events#onactioncomplete

Also, we suspect that you have not enabled IsPrimaryKey in any one of the Grid Column. Editing feature requires a primary key column for CRUD operations. We suggest you to enable IsPrimaryKey to one of the GridColumn whose value is unique.

Reference:

https://blazor.syncfusion.com/documentation/datagrid/editing

Query: Second issue is, the focused controls keep highlighted when clicked on a different control.

We could not able to reproduce this problem at our end. After moving to the next control, the highlighted focus is not maintained in previous controls. Find the below picture and sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/forum/172061/ze/GridSample1596101480

If you are still facing the problem, then could you please share the below details. It will be helpful to validate and provide a better solution.

Reproduce the problem in the provided sample and revert back to us.
Syncfusion Blazor NuGet version details and .Net version details.
Share a simple reproduceable sample if possible.

Regards,

Rahul

Harryi · Answer

Hi Rahul,

Thank you so much for your excellent answer. Your examples helped me to resolve all the issues I had. The label issue was due to setting up "FloatLabelType="@FloatLabelType.Always"" in controls itself. Changing them to individual labels as stated in your example resolved it. However, I still think it could be an issue if someone wants to go about showing the labels that way. Try setting up a controller as below and see if you can reproduce the issue.

Also, to answer the IsPrimaryKey question you raised, I have setup the userName to be the primary key in my scenario as below.

Thank you very much.

Rahul Narayanasamy · Answer

Hi Harryi, Thanks for the update. We are happy to hear that the provided solution helps to resolve your issues. Query: The label issue was due to setting up "FloatLabelType="@FloatLabelType.Always"" in controls itself. . . . Try setting up a controller as below and see if you can reproduce the issue. We have defined the FloatLabelType as like your code example and removed the individual label above the control. Still we could not able to reproduce the reported problem. Find the below code snippets and sample for your reference. Sample: https://www.syncfusion.com/downloads/support/forum/172061/ze/SampleGrid2064676671 If you are still facing the problem, then could you please share the below details. It 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. Regards, Rahul