1. Home
  2. Forum
  3. WPF
  4. Ordering and order lines in Master Details mode

Ordering and order lines in Master Details mode

I would need to display order data and order lines in Master-Details mode as shown in the attached screenschot

I have prepared an example project, sent in attachment, to allow you to create the form with SfDatagrid that displays the data in the format Master-Detail as shown in the attached screenshot.
The credentials to be used to access the login form are inserted in the attached document

The application plans to be able to manage restaurant orders.
Products ordered by customers can be grouped into two distinct groups:
- Products to be eaten that must be cooked and subsequently delivered;
- Products to drink that only need to be delivered.
To this end I have created specific and separate credentials for the figure of the kitchen manager, who must have access to orders with products for the kitchen (in which there are the stages of cooking and subsequent delivery) and the manager of the beverage department who must have access, within the same order, only the products for drinking (for which there is only the phase of delivery).

In the attached project I visualize the data using two sfdatagrid:
in the upper Sfdatagrid I see the orders;
selecting the order the respective products that meet the prerequisites for the respective cooking and delivery phases are displayed in the sfdatagrid below.
The queries accurately extract the products of the related orders; I would ask you to create a new form that displays the order data and products in Master-Details mode with your modalities as shown in the screenshots that are part of this documentation.
Thank you for your kind attention and availability.
I would then ask you for an explanation of the interventions carried out to allow me to proceed independently if I had other needs of the type.
I hope to have expressed the problem at best and I remain available for all the explanations of the case.
Thank you
Moreno

Attachment: Per_SyncFusion__SfDataGrid_15563787.zip

12 Replies
MI misonsan replied to misonsan April 16, 2018 02:24 PM UTC

I would need to display order data and order lines in Master-Details mode as shown in the attached screenschot

I have prepared an example project, sent in attachment, to allow you to create the form with SfDatagrid that displays the data in the format Master-Detail as shown in the attached screenshot.
The credentials to be used to access the login form are inserted in the attached document

The application plans to be able to manage restaurant orders.
Products ordered by customers can be grouped into two distinct groups:
- Products to be eaten that must be cooked and subsequently delivered;
- Products to drink that only need to be delivered.
To this end I have created specific and separate credentials for the figure of the kitchen manager, who must have access to orders with products for the kitchen (in which there are the stages of cooking and subsequent delivery) and the manager of the beverage department who must have access, within the same order, only the products for drinking (for which there is only the phase of delivery).

In the attached project I visualize the data using two sfdatagrid:
in the upper Sfdatagrid I see the orders;
selecting the order the respective products that meet the prerequisites for the respective cooking and delivery phases are displayed in the sfdatagrid below.
The queries accurately extract the products of the related orders; I would ask you to create a new form that displays the order data and products in Master-Details mode with your modalities as shown in the screenshots that are part of this documentation.
Thank you for your kind attention and availability.
I would then ask you for an explanation of the interventions carried out to allow me to proceed independently if I had other needs of the type.
I hope to have expressed the problem at best and I remain available for all the explanations of the case.
Thank you
Moreno

Attachment: Per_SyncFusion__SfDataGrid_15563787.zip

sorry, I forgot to insert a document in the attachment.

Attachment: Per_SyncFusion__SfDataGrid_2d642865.zip

JG Jai Ganesh S Syncfusion Team April 18, 2018 03:23 AM UTC

Hi Misonsan, 
 
We have tried to log in your given application using the credentials you shared (Username Password) in attachmen but we got a below error while login your application, 
 
 
Based on your query, you want to implement the details view in your application. We already have a UG and Dashboard sample for DetailsView and please find the UG link and sample from the below location, 
 
UG Link: 
 
Path Location: \{installed location}\Users \{Users.Login}\AppData\Local\Syncfusion\EssentialStudio\{installed Syncfusion ES build version}\WPF\SfGrid.WPF\Samples\MasterDetailsViewDemo 
 
 
Could you please refer the above UG and sample to implement the DetailsView? If you are facing any difficulties, then please share the valid credentials to login your application and share the more details about your requirement. This would be more helpful for us to proceed further. 
 
Regards, 
Jai Ganesh S

MI misonsan April 18, 2018 01:31 PM UTC

Thank you, Jai Ganesh S for your kind attention
in the attached document, I have definitely not correctly clarified the credentials to be used.
In fact, Username and Password were NOT the credentials to be used, but were intended as a header of the underlying fields used.
In fact, the correct credentials are those listed in the below table


Username
Password
Comment
userb
userb
to access orders with products - Beverages
userc
userc
to be able to access orders with products - Kitchen


I try to verify what is indicated in the link attached, but I think using the credentials that I transmit more clearly, you should be able to access the demo application sent correctly.
Thank you and good day.
Hello
Moreno


JG Jai Ganesh S Syncfusion Team April 24, 2018 02:32 AM UTC

 
Thank you for the update. Now we can able to log in your application using the given credentials. In your update, you have mentioned like to display order data and order lines in Master-Details mode. We have prepared a simple form (MainWindow) to display the data in Master-Details mode. 
 
 
 
 
 
In the above sample, we have displayed the ProductID for the corresponding OrderID in Master-Details mode. Could you please refer this and make the changes based on your application?  If you are facing any difficulties then please share the more details for how you want to display the form in Master-Details mode. This would be more helpful for us to proceed further. 
 
Regards, 
Jai Ganesh S

MI misonsan April 25, 2018 05:54 PM UTC

Good morning Jai Ganesh S
Thanks for paying attention to my problem.
I received your example, but by filling out the solution I get an empty form.
In order to better understand how to solve the problem, I created a new form, inside the Windows folder, called "TestSfDataGridMdWindow".
To view it you must:
- Loggarti with "userc" credentials as username and "userc" as password.
  the "Management Products Commande" form is displayed.
Attached to the file that I transmit you can find the file "20180425_ImmaginiApplicazione" with screenshots and kit information.

by clicking on the "Test Grid Md" button, the "Management Products Commande Master Details" form is displayed.
In the current form, the order data is displayed in the SfDatagrid indicated with the arrow "A".
The order lines selected in the Grid "A" are displayed in the underlying SfDataGrid indicated with the arrow "B".

In the new form "TestSfDataGridMdWindow" I have replicated the ObservableCollection for editing the data.
You are asked to carry out the corrections that you deem appropriate on the new form, to be able to view the data on the old form "Management of products commande".


I am attaching the modified project with the accompanying notes for your assessment of the problem.
I would ask you to correct the new TestSfDataGridMdWindow form.
Thank you
Moreno







Attachment: TestSfDataGrid_f4f34be7.zip

JG Jai Ganesh S Syncfusion Team April 27, 2018 02:11 AM UTC

Hi Misonsan, 
 
We have modified the sample to show the TestSfDataGridMdWindow form in master-detail view mode by implement the below code. 
 
for(int i=0;i< CommandeList.Count;i++) 
{ 
    CommandeList[i].RigheCommandeCucinaList = getDetailsViewData(CommandeList[i].IdCommanda); 
} 
 
private ObservableCollection<CommandaRiga> getDetailsViewData(int id) 
{ 
    ObservableCollection<CommandaRiga> relaitonalSource = new ObservableCollection<CommandaRiga>(); 
    for(int i =0; i<RigheCommandeCucinaList.Count;i++) 
    { 
        if(id== RigheCommandeCucinaList[i].NCommanda) 
        { 
            relaitonalSource.Add(RigheCommandeCucinaList[i]); 
        } 
    } 
    return relaitonalSource; 
} 
 
We have implement this code in RicercaCommandeCucina() method in TestSfDataGridMdWindow.cs class. 
 
 
Regards, 
Jai Ganesh S 
 


MI misonsan April 27, 2018 03:19 PM UTC

thanks Jai Ganesh S for the example.
It works.
but I would like to ask you some clarifications to better chair the logic of data connection in the grim Master / Details.

Question 1

It is not necessary to create a data relationship between the two grids? it's true ?
in my specific case, the command number represented the join between the tables.
I see however that in the detail table the field is empty so I can not enhance it.



Question 2

in the two sfdatagrid, only some of the tabular fields are present as edit fields;
the behavior seems to me very different indeed in the sfdatagrid of the order table (Commanda) only the detailed fields in the XAML file are visible, while in the order detail table (CommandaRighe), despite declaring only a few detail fields, the whole record is also displayed with unintended fields.
If I wanted to see only the fields set at XAML level, how can I do?


I modified the code of the "getDetailsViewData" method to select only some fields of the CommandaRiga table, but they do not appear as I would like.
Because ?

       private ObservableCollection<CommandaRiga> getDetailsViewData(int id)
        {

            /*  original instructions set by Jai Ganesh S
          
            ObservableCollection<CommandaRiga> relaitonalSource = new ObservableCollection<CommandaRiga>();
            for(int i =0; i<RigheCommandeCucinaList.Count;i++)
            {
                if(id== RigheCommandeCucinaList[i].NCommanda)
                {
                    relaitonalSource.Add(RigheCommandeCucinaList[i]);
                }
            }
            return relaitonalSource;
           */      //  fine originale

            // instructions modified by Moreno

            ObservableCollection<CommandaRiga> relaitonalSource = new ObservableCollection<CommandaRiga>();
            for(int i =0; i<RigheCommandeCucinaList.Count;i++)
            {
                if(id== RigheCommandeCucinaList[i].NCommanda)
                {
                    CommandaRiga comri = new CommandaRiga();
                    comri.IdRigaCommanda = RigheCommandeCucinaList[i].IdRigaCommanda;
                    comri.Categoria = RigheCommandeCucinaList[i].Categoria;
                    comri.DescrizioneProdotto = RigheCommandeCucinaList[i].DescrizioneProdotto;
                    comri.QtaOrd = RigheCommandeCucinaList[i].QtaOrd;
                    comri.Prezzo = RigheCommandeCucinaList[i].Prezzo;
                    relaitonalSource.Add(comri);
                }
            }
            return relaitonalSource;


Question 3





Question 4

I would need to be able to pass the code relative to the field "IdRigaCommanda" of the SfDatagrid of detail to a new form.
I do not seem to see the possibility of setting up the "Click" event for the IdRigaCommanda field. "How can I do?
For debugging, I'd like to be able to set up a MessageBox by displaying the value of the idRigaCommanda field.


Thank you
Moreno


JG Jai Ganesh S Syncfusion Team May 2, 2018 02:17 AM UTC

Could you please find the responses for your queries as below, 
Query 1: 
In your application the master and detail grid are related by using the RigheCommandeCucinaList field. 
 
<syf:GridViewDefinition RelationalColumn="RigheCommandeCucinaList"> 
The IdCommanda filed is not contains the RigheCommandeCucinaList collection that bind in DetailsViewDataGrid. Hence this will not be shown. 
 
Query 2: 
You can show the defined fields only in DetailsViewDataGrid by setting the AutoGeneraeColumns as False like below, 
<syf:SfDataGrid x:Name="FirstDetailsViewGrid"  
                                        AutoGenerateColumns="False"> 
 
Query 3: 
We cannot understand your requirement clearly. Could you please share the more details for your query. This would be more helpful for us to proceed further. 
Query 4: 
You can achieve your requirement to perform the click action in IdRigaCommanda column by using the CellTemplate like below code, 
 
<syf:GridTextColumn MappingName="IdRigaCommanda" > 
       <syf:GridTextColumn.CellTemplate> 
                <DataTemplate> 
                     <TextBlock Text="{Binding IdRigaCommanda}"  
                                                       PreviewMouseDown="TextBlock_PreviewMouseDown" > 
                                                 
                     </TextBlock> 
                 </DataTemplate> 
       </syf:GridTextColumn.CellTemplate> 
 </syf:GridTextColumn> 
 
private void TextBlock_PreviewMouseDown(object sender, MouseButtonEventArgs e) 
{ 
    var textBox = (sender as TextBlock).Text; 
    MessageBox.Show(textBox.ToString()); 
} 

Regards, 
Jai Ganesh S 


MI misonsan May 14, 2018 07:44 AM UTC

thank you Jai Ganesh S for your kind reply.
I apologize for the delay in the reply, but I tried to make the most of your insuffi- ciencies and I modified the original form in a much more effective from the visual and functional point of view.
I show you the original form and the new one.



original form




New form in Master Details mode

I think the new form in Master / Details Mode is a very functional solution that matches my needs.

I still have a clarification to ask you and in the previous email did not find exhaustive explanations certainly for my lack of exposure to the problem.







you said that the relationship that links the lines of sfdatagrid of detail with the SfDatagrid Master is represented by the property "RelationalColumn" present in the sfdatagrid of Detail.
In this regard I have seen that in the "Commanda" class has created a property "RigheCommandeConsegnaList" of type observablecollection <CommadaRiga>

I would like a clarification regarding the "RicercaCommandeCucina" method.
In the creo method, at the point indicated by the arrow "A", the list of the rows relating to the selected orders.
As the final instructions of the method, then the "RigheCommandeConsegnaList" property will be enhanced at the point indicated by the arrow "B".

Was not the list created in point "A" sufficient?

Can you clarify this passage?

I hope I have clarified the meaning of my problem at best

Thank you for your kind attention.

Thanks again for the usual and patient availability.
A hug.

Moreno

JG Jai Ganesh S Syncfusion Team May 15, 2018 01:11 PM UTC

Hi Misonsan,   
 
We have analyzed your query. The RigheCommandeCucinaList is the RelationalColumn used to map the DetailsViewDataGrid. Below code have been used to get the complete selected orders collection which can be used for the child grid but it was not holding the records collection specific to the each parent  record. 
 
 
Hence, below code can be used to get the orders collection specific to the particular parent row based on the IdCommanda value of parent record  
Regards, 
Jai Ganesh S 


MI misonsan May 15, 2018 02:22 PM UTC

Thank you for the exhaustive explanation.
You are really effective and timely support.
Thanks again for the expertise and availability.

Good job.
Moreno

JG Jai Ganesh S Syncfusion Team May 16, 2018 04:03 AM UTC

Hi Misonsan,  
 
Thank you for the update. 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Jai Ganesh S

Loader.
Up arrow icon