We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

two grids connected with foreign key

Thread ID:

Created:

Updated:

Platform:

Replies:

149565 Nov 30,2019 11:30 AM UTC Dec 3,2019 06:29 AM UTC Blazor 3
loading
Tags: Grid
Junaid
Asked On November 30, 2019 11:30 AM UTC

Good day, 

I have two grids. I want to show the foreign key field text & value of grid1's selected row in grid2's corresponding column upon adding a new element in grid2. I feel I have done the right code but still there is a problem. 

When ActionBeginHandler of grid2 is called upon pressing 'Add', the DataSource for the corresponding foreign key field is changed through ActionBeginHandler. But right after this, the ActionBeginHandler is called automatically and the args.Request parameter contains "Refresh" which doesn't let the Add row appear. The Add row just blinks and goes away. Kindly tell me how to show the foreign key field value of grid1's selected row in grid2's corresponding column upon adding. This column is a dropdown list in grid2. Kidnly refer to the code below. 

Please help. Thanks

Code:

<EjsGrid ModelType="@ProjectModel" TValue="Projekte" AllowPaging="true" AllowFiltering="true" AllowSorting="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
    <GridEvents QueryCellInfo="QueryCellInfoHandler" RowSelected="RowSelectHandler" TValue="Projekte"></GridEvents>
    <EjsDataManager Url="/Api/Default" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager>
    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Normal"></GridEditSettings>

    <GridColumns>
        <GridColumn Field=@nameof(Projekte.Id) Type="ColumnType.Number" DefaultValue=0 AllowEditing="false" IsIdentity="true" IsPrimaryKey="true" HeaderText="ID" Width="100" TextAlign="TextAlign.Center"></GridColumn>
        <GridColumn Field=@nameof(Projekte.ProjectNo) AllowEditing="false" DefaultValue="0" HeaderText="ProjectNo" TextAlign="TextAlign.Center"></GridColumn>
    </GridColumns>
</EjsGrid>

<EjsGrid ModelType="@OrderModel" TValue="Order" AllowFiltering="true" AllowSorting="true" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Query="@QueryData">
    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Normal"></GridEditSettings>
    <GridEvents OnActionBegin="ActionBeginHandler" QueryCellInfo="QueryCellInfoHandler" TValue="Order"></GridEvents>
    <EjsDataManager Url="/Api/Orders" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></EjsDataManager>

    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderId) Type="ColumnType.Number" DefaultValue=0 AllowEditing="false" IsIdentity="true" IsPrimaryKey="true" HeaderText="ID" TextAlign="TextAlign.Center"></GridColumn>             
        <GridColumn Field=@nameof(Order.ProjectId) Type="ColumnType.Number" HeaderText="Projekte ID" AllowFiltering="false" EditType="EditType.DropDownEdit" TextAlign="TextAlign.Center"
                    DataSource="@projectsDataSource"
                    ForeignKeyField="Id" ForeignKeyValue="Name">
            <FilterTemplate Context="ProjectId"></FilterTemplate>
        </GridColumn>
    </GridColumns>

</EjsGrid>

@code
{
    public List<ProjectVM> projectsDataSource { set; get; }
    public Projekte ProjectModel = new Projekte();
    public Order OrderModel = new Order();

    protected override async Task OnInitializedAsync()
    {
        projectsDataSource = new List<ProjectVM>();
        projectsDataSource = await Http.GetJsonAsync<List<ProjectVM>>("/Api/Default/GetProjectsList");              
    }

    private string selectedProjNum;
    private string QueryData { get; set; }
    public void RowSelectHandler(RowSelectEventArgs<Projekte> args) //takes project id and project No of the selected row in grid1
    {
        var id = args.Data.Id; // fetching clicked project's id and
        QueryData = $"new ej.data.Query().addParams('$projId', {id})"; //setting this parameter as a part of Get orders query
        selectedProjNum = args.Data.ProjectNo;
    }

    public void ActionBeginHandler(ActionEventArgs<Order> args)
    {
        // change datasource of grid2 upon value of Porject no selected in grid1
        if ((args.RequestType.ToString() == "Add") && selectedProjNum != null && args.Type == "actionBegin")
        {
            projectsDataSource = projectsDataSource.Where(m => m.Name == selectedProjNum).ToList(); //select only one project number
        }
    }
}




Renjith Singh Rajendran [Syncfusion]
Replied On December 2, 2019 01:13 PM UTC

Hi Junaid, 

Thanks for contacting Syncfusion support. 

Problem : the ActionBeginHandler is called automatically and the args.Request parameter contains "Refresh" which doesn't let the Add row appear. 
Changing the data source for the foreign key column, will automatically refresh the Grid to reflect the changed data source value to that particular column. This is the default behavior. We have analyzed your codes, and in that we could see that, you have changed the column’s DataSource property value in the “OnActionBegin” event handler. So by default, the Grid will refresh which had caused the edit form to disappear. 

Based on your requirement, we would suggest you to change the value for the foreign key column’s DataSource property, in the “RowSelected” event hanlder of the Grid1, after finding the “selectedProjNum”. Instead of changing this in “OnActionBegin” handler of grid2. We suggest you to modify your code as like the below code, 

 
    public void RowSelectHandler(RowSelectEventArgs<Projekte> args) 
    { 
        var id = args.Data.Id;  
        QueryData = $"new ej.data.Query().addParams('$projId', {id})"; 
        selectedProjNum = args.Data.ProjectNo; 
        if ((selectedProjNum != null) 
        { 
            projectsDataSource = projectsDataSource.Where(m => m.Name == selectedProjNum).ToList(); //just change the grid2's foreign key column’s data in RowSelected event hanlder of grid1 instead of the OnActionBegin hanlder of grid2 
        } 
    } 


Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


Junaid
Replied On December 2, 2019 02:39 PM UTC

Thanks.

I already solved this problem by using the said approach. 

Regards.
Junaid 

Renjith Singh Rajendran [Syncfusion]
Replied On December 3, 2019 06:29 AM UTC

Hi Junaid, 

Thanks for your update. 

We are happy to hear that your requirement has been achieved. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon