Unable to get data from foreign key doropdown list

[Rob K]

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

[Saravanan Arunachalam]

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. 

https://www.syncfusion.com/downloads/support/forum/128722/ze/F128722-55772616  

Regards, 

Saravanan A.