Grid add/edit with different DTO objects

[SZL]

Hello,

I have a Grid control with object type: DemoDto

I would like use the dialog editing, but in add / edit form I would like use another dto: DemoAddOrEditDto with custom form.

(I know that the grid is strongly typed, but it is not problem because I will refresh the grid after the add/edit dialog closing).

For example with Add operation:

I need call a web api to fill the default values to a new DemoAddOrEditDto object and bind these values to editing controls in the form. (This contains advanced calculation in some fields so I cannot avoid call web api to fill default values). 

So if I use the web api call inside the grid's ActionBegin event and use 

  Args.PreventRender = true;

and save the response to a global variable, I can bind the response object to a custom EditForm control inside the <GridEditSettings>.<Template> tag of the Grid.

So this works fine.

But my problem is that the API call takes a few seconds. During this waiting period I would like show a preloader above the add dialog, but the main problem is that the dialog is not rendered yet, because the API call in  ActionBegin event executes before the dialog rendered. 

So my plan is:

- I would like load a custom object to the add/edit form but only after the dialog and the form is visible.

Step by step:

1. Click on Add button in Grid toolbar
2. The empty Add dialog appear immediately with custom EditForm (without bind anything)
3. A loader appear above the Add dialog.
4. Start the wep api to download default (new) values. 
5. The response object arrives from web api.
6. Bind the response object to the existing form in the Add dialog.
7. Hide the preloader.

Is this idea achievable?

(The problem is with the above working solution that the user clicks on the Add button in toolbar, nothing happen in GUI for seconds (while in the background the web api sends the data back) and the dialog shown. ) This can confuse the end-users. 

Thank you for help!

[Rahul Narayanasamy]

Hi SZL,

Greetings from Syncfusion.

Based on your shared details we have checked your query. We checked from our side, but while editing the record, the dialog renders without any delay with a sample from our side. As from your update, you have shown some other model data to the Grid Edit dialog for performing edit operations. So, we suspect that the customized solution codes in implementing your requirement might have caused this delay while opening the edit dialog.

So we are quite unclear about the exact scenario regarding this problem. So we need some details regarding the reported query to proceed with this further. Could you please share the below details which will be helpful to validate and provide a better solution?

• Share a simple reproducible sample based on your scenario for us to validate.
• Full Grid code snippets.
• How did you handle data binding to that edit dialog?
• When did you make the call for fetching the data?
• Video demonstration of the problem.

Regards,

Rahul

[SZL]

Hi,

" So, we suspect that the customized solution codes in implementing your requirement might have caused this delay while opening the edit dialog. "

Yes, my code causes the delay.

Meanwhile I succeed to solve the problem.

In the AnctionBegin event I use this code to prevent the default dialog and show my:

 switch (Args.RequestType)

                {

                    case Syncfusion.Blazor.Grids.Action.Add:

                        IsAdd = true;

                        IsEdit = false;

                        Args.PreventRender = true;

                        IsAddOrEditDialogVisible = true;

                        await AddOrEditDialogShownAsync(new AnyagRendelesListItemDto());

                        Args.Cancel = true;

                        break;

And I use this code in my custom form to show the preloader:

 @if (IsAddOrEditDialogVisible)

    {

        <SfDialog ID="mainDialogAE" CssClass="gp-dialog w1000 hide-dialog-footer" Width="1000px" Height="625px" ShowCloseIcon="true" AllowDragging="true" CloseOnEscape="true" EnableResize="false" IsModal="true">

            <DialogEvents Destroyed="@btnAfterAddOrEditDialogDestroyed" Closed="@btnAfterAddOrEditDialogClosed"></DialogEvents>

            <DialogTemplates>

                <Content>

                    @if (AddOrEditDataSourceLoaded)

                    {

                      // ...

                    }

                    else

                    {

                        <LoaderControl IsVisible="true"></LoaderControl>

                    }

                </Content>

            </DialogTemplates>

        </SfDialog>

    }

This works well, so this is good for me.

I'm wondering how the combo datasource loading works in the integrated solution with dataadaptor. Do you have an existing example somewhere that show the data in the grid as text and when the add/edit dialog opened a combobox (dropdown) will be shown? When will the dataadaptor load the datasource of the combo? Where the data loading time appear when (for example) the combo contains 100000 records? There are an integrate solution to preload the combo datasource for example in an async thread?

Thank you!

[Rahul Narayanasamy]

Hi SZL,

Thanks for the update. We are happy to hear that you have achieved your requirement.

Query: There are an integrate solution to preload the combo datasource for example in an async thread?

We need some details regarding your requirement. Could you please share the below details which will be helpful to validate and provide a better solution?

• Whether did you want to show a loading spinner while loading the data in the combo box?
• Whether did you want to show the data in the combo box while opening which is rendered in the SfDialog?
• Did you want to load the combo box datasource asynchronously?
• Share Code snippets/ simple sample for your case.
• More details about your requirement.

Regards,

Rahul

[SZL]

Hello,

Thank you! 

Currently I have a custom grid-edit form in a dialog with DropDownList controls (4 pcs).

When user clicks on Add button, my custom edit dialog appear and the dropdown datasource will be loaded after the user clicks on dropdown icon of the DropDownList.

This datasource loading is an API call with UrlAdaptor.

I have 4 DropDownList in this dialog so I thinking about: load all dropdown datasource before the user clicks on Add button in parallel async threads (4 treads) when the page loads. So in this case when the user clicks on the Add button, every datasource is available now and can be used immediately. 

The current solution is not bad, but I think with the preload I can speed up the dropdown loading (from the end user's point of view).

I'm curious there are an integrated solution for this, or I should be develop manually?

Thank you!

• Whether did you want to show the data in the combo box while opening which is rendered in the SfDialog? I plan to load the datasource on page load.
• Did you want to load the combo box datasource asynchronously? Yes, but this is a plan only, because I have 4 combo in this form.

I think I cannot archive this with UrlAdaptor, so I should be call the API manually and save the result in global variables. After that I can bind the global variable to the DropDownList.

BR, SZL

[Rahul Narayanasamy]

Hi SZL,

Thanks for the update.

If you want to load data source before clicking onto the input, you can bind preselect value to the Dropdown list. While setting pre-select values, a request will be sent to fetch the data on initial rendering that is on dialog opens here. please check the code below,

Code snippet:

<div class="col-lg-12 control-section" id="target">

            <button class="e-btn" @onclick="@OnBtnClick">Open</button>

    <SfDialog Target="#target" Width="500px" ShowCloseIcon="true" @bind-Visible="Visibility">

        <DialogTemplates >

            <Header> About SYNCFUSION succinctly series </Header>

            <Content>

               <SfDropDownList TValue="string" TItem="OrderDetails" PopupHeight="230px" Placeholder="Select a name" Query="@RemoteDataQuery" @bind-Value="@OrderValue">

                    <SfDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.ODataAdaptor"/>

                    <DropDownListFieldSettings Text="CustomerID" Value="CustomerID"/>

                </SfDropDownList>

            </Content>

        </DialogTemplates>

        <DialogEvents  OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents>

        <DialogButtons>

            <DialogButton IsPrimary="true" Content="<a id='newTab' rel='nofollow' href='https://www.syncfusion.com/company/about-us' target='_blank'>Learn More</a>" OnClick="@OnBtnClick" />

        </DialogButtons>

    </SfDialog>

</div>

<style>

    a, a:hover, .highcontrast #dialog a, .highcontrast #dialog a:hover {

        color: inherit;

        text-decoration: none;

    }

    .fabric #target .e-dialog {

        height: 306px;

    }

    .material #target .e-dialog {

        height: 270px;

    }

    .bootstrap4 #target .e-dialog {

        height: 305px;

    }

    #target .e-dialog {

        height: 270px;

    }

    #target {

        height: 500px;

    }

</style>

@code {

    public string OrderValue { get; set; } = "VICTE";

    public class OrderDetails

    {

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public int? EmployeeID { get; set; }

        public double? Freight { get; set; }

        public string ShipCity { get; set; }

        public bool Verified { get; set; }

        public DateTime? OrderDate { get; set; }

        public string ShipName { get; set; }

        public string ShipCountry { get; set; }

        public DateTime? ShippedDate { get; set; }

        public string ShipAddress { get; set; }

    }

    public Query RemoteDataQuery = new Query().Select(new List<string> { "CustomerID" }).Take(6).RequiresCount();

    private bool Visibility { get; set; } = false;

    private bool ShowButton { get; set; } = false;

    private void OnBtnClick()

    {

        this.Visibility = true;

    }

    private void DialogOpen(Object args)

    {

        this.ShowButton = false;

    }

    private void DialogClose(Object args)

    {

        this.ShowButton = true;

    }

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Net6_Server11-975866735

Please let us know if you have any concerns.

Regards,

Rahul