Pass data value to the grid in partial view

Mohd Mohaimin Zakaria

Asked On March 20, 2019 08:29 AM UTC

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

Reply | Reply with quote

Madhu Sudhanan P [Syncfusion]

Replied On March 21, 2019 12:21 PM UTC

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

Reply | Reply with quote

Mohd Mohaimin Zakaria

Replied On March 22, 2019 03:25 AM UTC

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.

Reply | Reply with quote

Madhu Sudhanan P [Syncfusion]

Replied On March 22, 2019 07:27 AM UTC

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.

<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>

<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>

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

Reply | Reply with quote

Mohd Mohaimin Zakaria

Replied On March 22, 2019 08:11 AM UTC

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.

Reply | Reply with quote

Madhu Sudhanan P [Syncfusion]

Replied On March 22, 2019 08:50 AM UTC

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

Reply | Reply with quote

Mohd Mohaimin Zakaria

Replied On March 25, 2019 09:31 AM UTC

Main view code

<b>Risk Match Name</b>

</div>

<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>

@Html.Partial("_ConfigureScore_EQL", Model)

</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>

}

function actionBegin(args) {

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

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

}

</script>

Reply | Reply with quote

Thavasianand Sankaranarayanan [Syncfusion]

Replied On March 26, 2019 09:35 AM UTC

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.

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

Regards,

Thavasianand S.

Reply | Reply with quote

Mohd Mohaimin Zakaria

Replied On March 29, 2019 01:41 AM UTC

Hi,

Thanks for your help. Got it.

Reply | Reply with quote

Madhu Sudhanan P [Syncfusion]

Replied On March 29, 2019 04:56 AM UTC

Hi Mohd,

Thanks for the update.

Regards,

Madhu

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
143437	Mar 20,2019 08:29 AM UTC	Mar 29,2019 04:56 AM UTC	Angular - EJ 2	9

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US