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. Image for the cookie policy date
close icon

Unable to get data from foreign key doropdown list

Hello,

Please, I need help to get a value selected from drop down list(field quickcreditstatusid) and send to my controller when I'm editing one row, below my code from my view:

@(Html.EJ().Grid<object>("CommandGrid")
        .Datasource((IEnumerable<object>)ViewBag.datasource)
        .TextWrapSettings(wrap => { wrap.WrapMode(WrapMode.Header); })
        .AllowResizeToFit()
        .EditSettings(edit => { edit.AllowEditing(); })
        .ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>
        {
 
            items.AddTool(ToolBarItems.ExcelExport);
 
            items.AddTool(ToolBarItems.WordExport);
 
            items.AddTool(ToolBarItems.PdfExport);
 
        }))
        .AllowPaging()
        .AllowFiltering()
        .AllowScrolling()
        .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })   /*Filtering Enabled*/
        .AllowSorting()    /*Sorting Enabled*/
        .PageSettings(page => { page.PageSize(10); })
        .ScrollSettings(col => { col.Width(1250).Height(380); })
        .Columns(col =>
        {
            col.HeaderText("       ").Commands(command =>
            {
                command.Type("Commit")
                           .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()
                           {
                               Text = "Commit",
                               Width = "100px",
                               Click = "onClickCommit"
                           }).Add();
 
            })
            .TextAlign(TextAlign.Center)
            .Width(150).Add();
            col.Field("quickCreditStatusID").HeaderText("Action").ForeignKeyField("quickCreditStatusID")
            .ForeignKeyValue("Name").DataSource((IEnumerable<object>)ViewBag.datasource1)
            .TextAlign(TextAlign.Left).Width(90).EditType(EditingType.Dropdown).Width(250).Add();
            col.Field("PaymentNumber").HeaderText("Cheque #").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(180).AllowEditing(false).Add();
            col.Field("quickCreditStatus").HeaderText("Bank Validation Status").TextAlign(TextAlign.Right).Width(200).AllowEditing(false).Add();
            col.Field("VersaChequeAmount").HeaderText("Versa Cheque Amount").TextAlign(TextAlign.Right).Width(200).AllowEditing(false).Format("{0:C2}").Add();
            col.Field("BankChequeAmount").HeaderText("Bank Cheque Amount").TextAlign(TextAlign.Right).Width(200).AllowEditing(false).Format("{0:C2}").Add();
            col.Field("BankDate").HeaderText("Bank Date").TextAlign(TextAlign.Right).AllowEditing(false).Width(200).Format("{0:MM/dd/yyyy}").Add();
            col.Field("BMIIssuedDate").HeaderText("BMI Issued Date").TextAlign(TextAlign.Right).AllowEditing(false).Width(200).Format("{0:MM/dd/yyyy}").Add();
            col.Field("Age").HeaderText("Age").TextAlign(TextAlign.Right).AllowEditing(false).Width(150).Add();
        })
)
 
 
<script type="text/javascript">
 
 
 
    function onClickCommit(args) {
 
        var gridObj = $("#CommandGrid").data("ejGrid");
 
        //getting corresponding record
 
        var data = gridObj.getSelectedRecords()[0].PaymentNumber;
        var data1 = gridObj.getSelectedRecords()[0].quickCreditStatusID;
 
 
 
        $.ajax({
 
            type: "POST",
 
            url: "/AdminPaidCheques/CommitPayments",
 
            //Sending  data to the server(controller) side
 
            data: { "data": data, "data1": data1 },
            
            success: function (data) {
                var gridData = ej.parseJSON(data);
                var gridModel = $("#CommandGrid").ejGrid("model");
                $("#CommandGrid").data("ejGrid") !== undefined && $("#CommandGrid").ejGrid("destroy")// destroy the grid if already rendered
                gridModel.query = new ej.Query();//clear the queries
                gridModel.dataSource = gridData;//binding the data to grid  
                //re- render the grid with the changed dataSource
                $("#CommandGrid").ejGrid(gridModel);
            }
 
        });
 
    }
 
 
</script>

Thanks!

Roberto















1 Reply

SA Saravanan Arunachalam Syncfusion Team February 9, 2017 09:55 AM UTC

Hi Roberto, 
Thanks for contacting Syncfusion’s support. 
We understood from your query, you need to render the Grid control and perform the CRUD operation on it and we suggest you to use the remoteSaveAdaptor of DataManager to achieve your requirement. Please refer to the below code example. 
[ASPX] 
<ej:Grid ID="Grid1" AllowPaging="True" runat="server"> 
        . . . 
</ej:Grid> 
[CS] 
public partial class GridFeatures : System.Web.UI.Page 
    { 
         
        protected void Page_Load(object sender, EventArgs e) 
        { 
            this.Grid1.DataManager = new DataSource() { Json = OrderRepository.GetAllRecords(),  
               Adaptor = "remoteSaveAdaptor", 
               InsertURL = "GridFeatures.aspx/Insert", 
               RemoveURL = "GridFeatures.aspx/Remove",  
               UpdateURL="GridFeatures.aspx/Update" }; 
        } 
        [WebMethod] 
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
        public static object Update(EditableOrder value) 
        { 
            OrderRepository.Update(value); //To update the record 
            return value; 
        } 
        [WebMethod] 
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
        public static object Insert(EditableOrder value) 
        { 
            OrderRepository.Add(value); //To add a new record 
            return value; 
        } 
        [WebMethod] 
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] 
        public static void Remove(int key) 
        { 
            OrderRepository.Delete(key); //To delete a record 
        }  
    } 
 
And we have created sample that can be downloaded from the below link. 
Regards, 
Saravanan A. 


Loader.
Live Chat Icon For mobile
Up arrow icon