Want to do tabs inside the dialog edit mode.

[Matias Mutz]

Hello! I have been using SyncFusion for a project. I wanted to do a datagrid with the EditMode in Dialog. The problem with this is when I need to do the CRUD on a table that has over 50 columns. It turns a little tedious to complete all the data when i want to add data in the Dialog Mode. I want to do something like this:

I want to add a sort of tabs in the top where the first says, for example, product and when you press there it shows you the fields related to that, in the second could maybe be User and with that the fields related to the user. Is this possible? it could make much easier and organized the way the data is added and edited. Let me know if everything I wanted to explain was understood. Thanks, Matias.

[Jeevakanth Palaniappan]

Hi Matias, 

Greetings from Syncfusion support. 

We have validated your query and you can render tabs inside the dialog editing by using the SfTab component in the dialog template. Please refer the below documentation and the sample for your reference. 

Documentation : 

https://blazor.syncfusion.com/documentation/tabs/getting-started/  

https://blazor.syncfusion.com/documentation/datagrid/editing/#dialog-template  

https://blazor.syncfusion.com/documentation/datagrid/how-to/render-grid-inside-tab-with-specific-height/  

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/LatestVersion-1430765984  

Please get back to us if you have any other queries. 

Regards, 

Jeevakanth SP. 

[greenlab]

Hi,

I have the same requirement described in this topic.  I had the opportunity to see the documentation links however is not clear if tabs can be added to the edit form.  The requirement is to add tabs to the edit form in order to improve the organization of the item information.

[Monisha Saravanan]

Hi Justino, 

Thanks for your update. 

Query: “If tabs can be added to the edit form” 

 

Yes, we can render tabs inside the edit form by using SfTab component inside the dialog edit template. Kindly refer the below code snippet and sample for your reference. 

 

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

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog"> 

     

        <Template> 

            @{ 

                var Order = (context as OrdersDetails); 

                <SfTab> 

                    <TabItems> 

                        <TabItem> 

                            <ChildContent> 

                                <TabHeader Text="Tab1"></TabHeader> 

                            </ChildContent> 

                            <ContentTemplate> 

                               <SfNumericTextBox ID="OrderID" Placeholder="OrderID" @bind-Value="@(Order.OrderID)" Enabled="@((Order.OrderID == null) ? true : false)"></SfNumericTextBox> 

                            </ContentTemplate> 

                        </TabItem> 

                        <TabItem> 

                            <ChildContent> 

                                <TabHeader Text="tab2"></TabHeader> 

                            </ChildContent> 

                            <ContentTemplate> 

... 

                            </ContentTemplate> 

                        </TabItem> 

                        </TabItems> 

                </SfTab> 

 

            } 

        </Template> 

    </GridEditSettings> 

    <GridColumns> 

... 

    </GridColumns> 

</SfGrid> 

 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGrid1518860478.zip 

Kindly get back to us if you have further queries. 

Regards, 

Monisha