1. Home
  2. Forum
  3. Blazor
  4. Dialog with a Grid instead of an Autocomplete/Dropdown

Dialog with a Grid instead of an Autocomplete/Dropdown

In my custom Grid edit template, I'd like to divert from the official demo code on 


which uses Autocomplete/Dropdown and implement a Dialog/Grid solution.

The idea is as follows:

     - User clicks a field [A] (e.g. "Customer Name", "Ship Country", "Ship City" from the example of the URL above)
     - A second modal [M2] opens with a table of the related entities with all the filter/search features of a full-fledged SfGrid
     - Once the user narrowed down the large list of entities in this modal [M2], the user selects one (in case of a one-to-many) or multiple (in case of a many-to-many) rows and clicks the "ok"/"select"/"done" button in the [M2]. 
      - The [M2] is closed and the [A] is populated with a chips corresponding to selected rows (e.g. https://blazor.syncfusion.com/demos/chips/default-functionalities?theme=bootstrap4)

Could you please give me some directions as to how should I implement this workflow?

Thanks in advance
Eugene



3 Replies
RS Renjith Singh Rajendran Syncfusion Team July 8, 2020 01:00 PM UTC

Hi Eugene, 
 
Greetings from Syncfusion support. 
 
Query 1 :  - User clicks a field [A] (e.g. "Customer Name", "Ship Country", "Ship City" from the example of the URL above)   - A second modal [M2] opens with a table of the related entities with all the filter/search features of a full-fledged SfGrid 
We suggest you to use the OnRecordClick event of Grid. In this event handler, you can open the SfDialog(which contains a full-fledged grid) by changing the value of @bind-Visible property of SfDialog. Now when click on a row in Grid, the SfDialog will be opened with a Grid in it.  
Documentation :  
 
Please refer the code below,  
 
 
<SfDialog ShowCloseIcon="true" Width="300" IsModal="true" @bind-Visible="ShowDialog"> 
    <DialogTemplates> 
        <Content> 
                <div class="row"> 
                    <SfGrid ID="Grid" @ref="InnerGrid" DataSource="@Orders" ...> 
                        ... 
                    </SfGrid> 
                </div> 
                <DialogButtons> 
                    <DialogButton OnClick="@(() => SaveClick())"> 
                        <DialogButtonModel Content="Save" IsPrimary="true"></DialogButtonModel> 
                    </DialogButton> 
                    <DialogButton OnClick="@(() => { ShowDialog = false; })"> 
                        <DialogButtonModel Content="Cancel"></DialogButtonModel> 
                    </DialogButton> 
                </DialogButtons> 
        </Content> 
    </DialogTemplates> 
</SfDialog> 
 
<SfGrid DataSource="@Orders" AllowPaging="true" AllowFiltering="true" > 
    <GridEvents OnRecordClick="OnRecordClick" TValue="Order"></GridEvents> 
    ... 
</SfGrid> 
 
@code { 
    ... 
    private void OnRecordClick(RecordClickEventArgs<Order> args) 
    { 
        ShowDialog = true;                    //show the dialog
    } 
} 
 
 
Query 2 : Once the user narrowed down the large list of entities in this modal [M2], the user selects one (in case of a one-to-many) or multiple (in case of a many-to-many) rows and clicks the "ok"/"select"/"done" button in the [M2]. 
You can use the GetSelectedRecords method of the Grid, to fetch the selected record data when the button in the Dialog is clicked. Now you will have the selected records data of the Grid inside the Dialog component.  
 
Please refer the code below, 
 
SfGrid<Order> InnerGrid;...private async Task SaveClick(){    var selectedRecords = await InnerGrid.GetSelectedRecords();   //get the selected records data    //now you will have the selected rows data in selectedRecords variable. You can use this data to update in the Orders List,     before closing the Dialog by setting the ShowDialog to false.    InnerGrid.Refresh();     //refresh the changes in inner Grid before closing dialog    ShowDialog = false;                     //hide the dialog}
 
 
Query 3 : The [A] is populated with a chips corresponding to selected rows (e.g. https://blazor.syncfusion.com/demos/chips/default-functionalities?theme=bootstrap4) 
We are not clear about this query. As explained above, you can use the value you get from the GetSelectedRecords method to update your datasource. If you need further assistance, regarding this query, then we need more details to further proceed on this. Kindly get back to us with the following details to proceed further on this. 
  1. Share with us the details regarding how you are using the Chips component in Grid.
  2. Share with us a pictorial representation(video demo explaining your requirement ) showing your requirement in Query 3.
  3. Share with us the codes you are using to bind Chip to Grid.
  4. On clicking the save, do you want to update the entire datasource of the main Grid, or just the particular chip in a cell in Grid?
  5. Share with us a detailed explanation regarding the structure of Grid you are using. Share the complete Grid rendering codes. And dialog codes.
 
We have prepared a sample based on the above explanations in Query 1, Query 2. We are attaching the sample for your convenience. Please download the sample from the link below, 
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith Singh Rajendran 


EK Eugene Kudryavtsev July 10, 2020 02:34 PM UTC

Hi,

Thank you very much with the detailed response and the code samples.

Unfortunately, this is not the behavior I'm was aiming for. Let me put my initial requirements in the context I had in mind:

  • User wants to create/edit a record [R1] in a main grid [G1]
  • A modal [M1] open up with either empty fields or fields populated by [R1]'s data as per:
    https://blazor.syncfusion.com/demos/datagrid/grid-dialog-template?theme=bootstrap4
  • One of these fields in [M1] is either a many-to-one or a many-to-many relationship (such as "Customer Name", "Ship Country", "Ship City" from the example of the URL above). The corresponding field [A] is either an Autocomplete or a Dropdown in the example from the link above. Instead I want it to be a field, where once clicked in, the following happens:
  • User clicks a field [A] 
  • A second modal [M2] opens with a table of the related entities with all the filter/search features of a full-fledged SfGrid
  • Once the user narrowed down the large list of entities in this modal [M2], the user selects one (in case of a one-to-many) or multiple (in case of a many-to-many) rows and clicks the "ok"/"select"/"done" button in the [M2]. 
  • The [M2] is closed and the [A] is populated with a chips corresponding to selected rows (e.g. https://blazor.syncfusion.com/demos/chips/default-functionalities?theme=bootstrap4), here the [M1] is still open.
Please let me know if anything is unclear in my requirements specification.

Thanks in advance
Eugene

RS Renjith Singh Rajendran Syncfusion Team July 15, 2020 12:27 PM UTC

Hi Eugene, 

Thanks for your update. 

Based on your shared requirement details, we have prepared a sample. Please download the sample form the link below, 
 
In the above sample, we will open a dialog[M2] having Grid, when click on a field[A](we have used button here) in [M1]. In the [G2] we will select the rows. And when press save in [M2] we will fetch the selected rows information using GetSelectedRecords method. And from that we will fetch the data and assign to the Chips property of Chip component in [M1]. 

Please refer the codes below, 

 
<SfButton OnClick="OnRecordClick">Click to open Tags Grid</SfButton>    @*We have used button here for [A] field. You can use your required component.*@     
 
<SfChipList @ref="list" Chips="SelectItems"> 
</SfChipList> 

private async Task SaveClick(){    selectedRecords = await InnerGrid.GetSelectedRecords();       //get the selected row data from [G2]    InnerGrid.Refresh();    foreach(var a in selectedRecords)    {        SelectItems.Add(new ChipListChip() { Text = a.Tags.FirstOrDefault().Name });    //populate the chiplist     }    ShowDialog = false;    StateHasChanged();}

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran 


Loader.
Up arrow icon