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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Pass data value to the grid in partial view

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
loading
Tags: Grid
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

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



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

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. 

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



Regards, 
Madhu Sudhanan P 


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.

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 


Mohd Mohaimin Zakaria
Replied On March 25, 2019 09:31 AM UTC

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


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
Replied On March 29, 2019 01:41 AM UTC

Hi,

Thanks for your help. Got it.

Madhu Sudhanan P [Syncfusion]
Replied On March 29, 2019 04:56 AM UTC

Hi Mohd, 
  
Thanks for the update. 
  
Regards, 
Madhu 


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

;