Pass data value to the grid in partial view

[Mohd Mohaimin Zakaria]

Hi,

How do I pass a datavalue from a dropdownlist to the grid in the partial view.

I want to save a data from a grid along with the datavalue in the dropdownlist.

Thank you

[Madhu Sudhanan P]

Hi Mohd, 

Greeting from Syncfusion. 

Query: I want to save a data from a grid along with the datavalue in the dropdownlist. 

 

From your query, we understood that you want to apply external dropdown list value to the grid field while perform editing and adding in Grid  so we suggest you to use the  below way to achieve your requirement. 

In the below code example, we have bind the actionBegin event(checked requestType as save so it call when perform adding and updating record in Grid) and applied the dropdown list value for Grid EmployeeID field. Now the DropDown value can be accessed at the server side/controller using the property EmployeeID.  

@Component({ 

    selector: 'app-container', 

    template: ` 

    <ejs-grid #grid [dataSource]='data' [allowPaging]='true'[allowFiltering]='true' [allowSorting]='true' [filterSettings]='filterOptions' [editSettings]='editSettings' (actionBegin)="actionBegin($event)"> 

    <e-columns> 

            <e-column field='EmployeeID' headerText='EmployeeID' ></e-column> 

        </e-columns> 

                </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

    actionBegin(args): void { 

        if (args.requestType === 'save') { 

               // you can assign external dropdown list value to grid field 

               args["data"]["EmployeeID"] = ddObj.value; 

        } 

    } 

} 

Help documentation : https://ej2.syncfusion.com/angular/documentation/api/grid/#actionbegin  

If we misunderstood your query then share more information it will helpful for us to provide  a better solution as soon as possible. 

Regards, 

Madhu Sudhanan P  

[Mohd Mohaimin Zakaria]

Thanks for the reply.

I'm sorry, I'm using .NET Core Platform.

The dropdown is outside of the grid.

But when I want to save/update the data in the grid, the value of the dropdown is also saved along with the grid in one table/store procedure.

Can you provide the example based on .NET Core. Thanks.

[Madhu Sudhanan P]

Hi Mohd, 

Thanks for your update. 

As per your suggestion we have created a sample in ASP.NET core Platform. Please find the below code example and sample for more information. 

<div class='content'> 

    <ejs-dropdownlist id="games" dataSource="@ViewBag.DataSource" value="ViewBag.value" placeholder="Select a customer Name" popupHeight="200px"> 

        <e-dropdownlist-fields text="Email"></e-dropdownlist-fields> 

    </ejs-dropdownlist> 

</div> 

<div id="ControlRegion"> 

    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" actionBegin="actionBegin" toolbar="@(new List<string>() { "Add","Edit", "Update", "Cancel" })" allowPaging="true"> 

        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column> 

            <e-grid-column field="Email" headerText="Email" width="150" type="email"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<Script> 

    function actionBegin(args) { 

        if (args.requestType === 'save') { 

            // we have stored the dropdown value for grid Email field 

            args.data['Email'] = document.getElementById('games').ej2_instances[0].value; 

        } 

    } 

</Script> 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/external-dropdown-grid173651401  

Help documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/?no-cache=1#editing  

Regards, 

Madhu Sudhanan P 

[Mohd Mohaimin Zakaria]

Thanks for the reply.

In your example, the dropdown and the grid is in a same view.

In my situation, the dropdown is on the main view while the grid is in a partial view.

So how could the dropdown value being passed to the grid in the partial view when 'save'.

Thanks.

[Madhu Sudhanan P]

Hi Mohd, 

Thanks for the update. 

After partial view is inserted into the view page, both dropdown and grid will be in the same document tree and so you can simply access it with the solution provided previously. If we misunderstood your requirement, please share us the view page and partial view page code and also how the partial view page is inserted into the current view to analyze further on this problem.  

Regards, 

Madhu Sudhanan P 

[Mohd Mohaimin Zakaria]

Main view code

<div class="container-fluid" style="background-color:white; height:900px;">

                <div class='row'>

                    <div class="col-md-2">

                        <b>Risk Match Name</b>

                    </div>

                        <div class="col-md-6">

                            <ejs-dropdownlist id="cmbRiskMatch" enabled="false" placeholder="Select Risk Match Name" dataSource="@ViewBag.RiskMatchDataType"

                                              change="valueChange" ignoreAccent="true" allowFiltering="true" ejs-for="RiskMatchDesc" popupHeight="220px" width="100%">

                                <e-dropdownlist-fields text="RiskMatchDesc" value="RiskMatchDesc"></e-dropdownlist-fields>

                            </ejs-dropdownlist>

                        </div>

               </div>

        <div id="EQL" class="row">

            <div class="col-md-12">

                @Html.Partial("_ConfigureScore_EQL", Model)

            </div>

        </div>

_______________________________________________

Partial view code

{

    <ejs-grid id="Grid" actionBegin="actionBegin" 

              toolbar="@(new List<string>() { "Add", "Edit", "Delete","Cancel","Update","ExcelExport" })"

              allowPaging="true"

              allowSorting="true"

              allowFiltering="true"

              allowTextWrap="false"

              allowReordering="true"

              allowResizing="true"

              toolbarClick="toolbarClick"

              allowSelection="true"

              allowExcelExport="true"

              showColumnMenu="true">

        <e-data-manager url="/ConfigureScore/GetScoringConfigDS" insertUrl="/ConfigureScore/AddConfigureScore" updateUrl="/ConfigureScore/UpdateConfigureScore" removeUrl="/ConfigureScore/DeleteConfigureScore" adaptor="UrlAdaptor"></e-data-manager>

        <e-grid-editSettings allowAdding="true"

                             allowEditing="true"

                             allowDeleting="true"

                             mode="Normal"

                             showDeleteConfirmDialog="true"></e-grid-editSettings>

        <e-grid-filterSettings type="Menu"></e-grid-filterSettings>

        <e-grid-selectionsettings type="Single"></e-grid-selectionsettings>

        <e-grid-pagesettings pageCount="5" pageSize="10" pageSizes="@(new string[] { "5", "10", "20", "All"}) "></e-grid-pagesettings>

        <e-grid-columns>

            <e-grid-column field="ValueToMatch" headerText="First Value" validationRules="@(new { required = true })" textAlign="Left" format="C2" width="250"></e-grid-column>

            <e-grid-column field="Score" headerText="Score" validationRules="@(new { required = true })" textAlign="Left" format="C2" width="150"></e-grid-column>

            <e-grid-column field="Description" headerText="Description" validationRules="@(new { required = false })" textAlign="Left" format="C2" width="250"></e-grid-column>

            <e-grid-column field="RiskMeasureId" headerText="RiskMeasureId" validationRules="@(new { required = true })" textAlign="Left" visible="false" format="C2" width="25" defaultValue="@ViewBag.MeasureId" showInColumnChooser="false"></e-grid-column>

            <e-grid-column field="RiskMeasureEntityId" headerText="RiskMeasureEntityId" isPrimaryKey="true" validationRules="@(new { required = true })" textAlign="Left" visible="false" format="C2" width="25" defaultValue="@ViewBag.RiskMeasureEntityId" showInColumnChooser="false"></e-grid-column>

            <e-grid-column field="DocumentTypeDesc" headerText="DocumentTypeDesc" visible="false" defaultValue="@ViewBag.DocumentTypeDesc" showInColumnChooser="false"></e-grid-column>

            <e-grid-column field="RiskEntityId" headerText="RiskEntityId" visible="false" defaultValue="@ViewBag.RiskEntityId" showInColumnChooser="false"></e-grid-column>

            <e-grid-column field="RiskEntityDesc" headerText="RiskEntityDesc" visible="false" defaultValue="@ViewBag.RiskEntityDesc" showInColumnChooser="false"></e-grid-column>

            <e-grid-column field="RiskMatchDesc" headerText="RiskMatchDesc" visible="false" defaultValue="@ViewBag.RiskMatchDesc" showInColumnChooser="false"></e-grid-column>

            <e-grid-column field="RiskMatchId" headerText="RiskMatchId" visible="false" defaultValue="@ViewBag.RiskMatchId" showInColumnChooser="false"></e-grid-column>

            <e-grid-column field="SecondVaueToMatch" headerText="No" visible="false" defaultValue="@ViewBag.SecondVaueToMatch" showInColumnChooser="false"></e-grid-column>

            <e-grid-column field="GranuleCode" headerText="Granule Code" visible="false" defaultValue="@ViewBag.GranuleCode" showInColumnChooser="true"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

}

    <script>

        function actionBegin(args) {

            if (args.requestType === 'save') {

                args.data['RiskMatchDesc'] = document.getElementById('cmbRiskMatch').ej2_instances[0].value;

            }

        }

    </script>

[Thavasianand Sankaranarayanan]

Hi Mohd, 

Thanks for your update. 

As per your suggestion, we have created as sample and rendered Grid in partial view & dropdown in Main View(Index.cshtml) and its working fine at our sample. Could you please find the below sample for more information. 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/UrlAdaptor-partialViewGrid1410323843  

If you still faced the problem then provide below details it will helpful for us to validate further. 

1. Share whether you are not able to get the dropdown value in partial view(actionBegin event) ?
2. Did you faced any script error?
3. If possible reproduce the reported problem with our sample.

Regards, 

Thavasianand S. 

[Mohd Mohaimin Zakaria]

Hi,

Thanks for your help. Got it.

[Madhu Sudhanan P]

Hi Mohd, 

  

Thanks for the update. 

  

Regards, 

Madhu