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

Postback with dropdownedit and numericedit in grid

Thread ID:

Created:

Updated:

Platform:

Replies:

141623 Dec 21,2018 09:52 AM UTC Jan 4,2019 01:31 PM UTC ASP.NET Core - EJ 2 9
loading
Tags: DataGrid
Stefan
Asked On December 21, 2018 10:33 AM UTC

Hi

EJ2.Grid in ASP.Net Core with razor pages. 



1. Everything is posted when saving except that I cannot get/set id from the dropdown. Model.Categories contains two fields: FundCategoryName and FundCategoryID. How do I get the updated field FundCategoryID on postback?

2. The numeric edit control on field Weight. How do I set step, max, min etc? Is it possible to use a template like this:




Madhu Sudhanan P [Syncfusion]
Replied On December 24, 2018 05:36 AM UTC

Hi Stefan, 

Thanks for contacting Syncfusion support. 

Query: Model.Categories contains two fields: FundCategoryName and FundCategoryID. How do I get the updated field FundCategoryID on postback? 

Please modify the edit params as follows to send FundCategoryID to the server side from the dropdown edit. 


@{ 
    var editParams = new { @params = new { dataSource = Model.Catergories, fields = new { text = "FundCategoryName", value = "FundCategoryID" } }}; 
} 


Query: The numeric edit control on field Weight. How do I set step, max, min etc? Is it possible to use a template like this: 

You can customize the numeric edit options using the edit property of the column as follows.   


@{ 
    var numericEditParams = new { @params = new { min = 5, max = 10, step = 2 } }; 
}  

<e-grid-column field="Weight" headerText="Weight" edit="numericEditParams" textAlign="Right" editType="numericedit"></e-grid-column> 



Regards, 
Madhu Sudhanan P 


Stefan
Replied On December 24, 2018 10:23 AM UTC

Hi again. 

Query: Model.Categories contains two fields: FundCategoryName and FundCategoryID. How do I get the updated field FundCategoryID on postback? 
I've already tried your suggestion on this one. The dropdown only shows one item on edit or add.  See the attached code. 

Attachment: SyncfusionDropdown_d95d06e7.zip

Madhu Sudhanan P [Syncfusion]
Replied On December 24, 2018 10:52 AM UTC

Hi Stefan, 

Thanks for the update. 

The Query property should be passed to the dropdown edit params to resolve this issue. Also please set the edit params as the instance of DropDownList class instead of anonymous object as follows. 


var editParams = new Syncfusion.EJ2.DropDowns.DropDownList() {  
        DataSource = Model.Catergories,  
        Query = "new ej.data.Query()",  
        Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "FundCategoryID", Text = "FundCategoryName" } 
    }; 



Regards, 
Madhu Sudhanan P 


Stefan
Replied On December 24, 2018 12:44 PM UTC

Hi 

Getting  closer. The only values showing in the dropdown are those in the grid. In the case below I have two categories in the grid and those are the only one showing in the dropdown. I have 5 in the category list. See attached project.



Attachment: SyncfusionDropdown_5d0ce89d.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On December 26, 2018 09:25 AM UTC

Hi Stefan, 
 
Query: The only values showing in the dropdown are those in the grid. In the case below I have two categories in the grid and those are the only one showing in the dropdown. I have 5 in the category list. See attached project. 
 
We checked your sample and tried to run your sample but we unable to run your sample due to some build failures. We have prepared a sample based on your code snippets and it works fine at our end. Please find the sample for your reference. 
 
 
If you still face the same problem, please check whether your dropdown data is properly bind to dropdown dataSource or not. Bind actionComplete event to grid and check whether the dropdown dataSource is properly bind or not. Please find the below code example for your reference.  
 
[code example] 
 
<div> 
    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" actionComplete="actionComplete" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Cancel", "Update"})"> 
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 
        ... 
       </e-grid-columns> 
    </ejs-grid> 
</div> 
 
<script> 
    function actionComplete(args) { 
        if (args.requestType === "beginEdit") 
        var dropIns = document.getElementById("GridFundCategoryName").ej2_instances[0]; 
        console.log(dropIns.dataSource); 
    } 
</script> 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Thavasianand S. 


Stefan
Replied On December 26, 2018 11:20 AM UTC

I cannot submit comment to this (see below message) so I've attached a word document with my comments. 

You have tried to enter a word or URL that is not allowed on this site. If you believe that this is inaccurate, please contact us at support@syncfusion.com.


Attachment: RazorPages_f70f23b8.zip

Pavithra Subramaniyam [Syncfusion]
Replied On January 2, 2019 12:24 PM UTC

 
Based on your request, we have created sample in razor pages. Here, we have set dropdown datasource in editParams. The corresponding id will be shown when editing and corresponding name will be shown after saving the record. Please find the below code example and sample for your reference. 
 
[code example] 
... 
 
@{ 
    var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() 
    { 
        DataSource = ViewData["dropDownData"], 
        Query = "new ej.data.Query()", 
        Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "ShipCity", Text = "EmployeeID" } 
    }; 
} 
 
<ejs-grid id="Grid" dataSource=@ViewData["dataSource"] allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update", "Cancel"})"> 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" width="120"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column> 
        <e-grid-column field="EmployeeID" headerText="EmployeeID" width="130"></e-grid-column> 
        <e-grid-column field="ShipCity" headerText="ShipCity" editType="dropdownedit" edit="new {@params = DropDownList }" width="120"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 


Stefan
Replied On January 2, 2019 02:03 PM UTC

Hi.

The sample provide does not work correctly. When editing a row id is shown in the dropdown not text, see image. 



It looks like EmployeeID and ShipCity is wrong in the supplied sample. It should be Value=EmployeeID and Text=ShipCity? If I make this change text is shown in dropdown but in the edited row the dropdown is blank, it should show current selected item. When I select another row dropdown shows EmployeeID not text? Does this sample really work on your side?



Madhu Sudhanan P [Syncfusion]
Replied On January 4, 2019 01:31 PM UTC

Hi Stefan, 

Based on your requirement, we have prepared a sample. Here, we have used ShipCity and ShipID instead of FundCategoryName and FundCategoryID. When editing dropdown column, the ShipCity value will be shown. After saving the data, the updated ShipID will be return to grid dataSource. Please find the below code example and sample for your reference. 

[code example] 
 
@{ 
    var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() 
    { 
        DataSource = ViewData["DropdownData"], 
        Query = "new ej.data.Query()", 
        Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "ShipCity", Text = "ShipCity" } 
   }; 
} 
 
<div> 
    <ejs-grid id="Grid" allowPaging="true" actionBegin="actionBegin" allowSorting="true" allowFiltering="true" height="273" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 
        <e-data-manager url="/Home/GridDatasource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete" adaptor="UrlAdaptor"></e-data-manager> 
        <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal" showConfirmDialog="true" showDeleteConfirmDialog="true"></e-grid-editSettings> 
        <e-grid-pagesettings pageSize="7"></e-grid-pagesettings> 
        <e-grid-columns> 
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 
            <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 
            <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 
            <e-grid-column field="ShipCity" headerText="ShipCity" editType="dropdownedit" edit="new {@params = DropDownList }" width="120"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
<script> 
    var EmployeeID; 
    var dropdowndata = @Json.Serialize(ViewData["DropdownData"]); 
 
    function actionBegin(args) { 
        if (args.requestType === "save") { 
         
            args.data['ShipID'] = dropdowndata.filter(function (d) { return d.ShipCity === args.data['ShipCity'] })[0].ShipID; 
        } 
    } 
</script> 

You need to define ShipID attribute in grid model class. 

public class OrdersDetails 
    { 
        public static List<OrdersDetails> order = new List<OrdersDetails>(); 
        ... 
 
            public int? OrderID { get; set; } 
            public string CustomerID { get; set; } 
            ... 
 
            public int? ShipID { get; set; } 
        } 


[screenshot] [returned ShipID] 
 



Please get back to us if you need further assistance. 

Regards, 
Madhu Sudhanan P 


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

;