How Can I get data selected on dropdown inside of the grid

[Rob K]

Hi,

I'm facing a problem to get a data selected from a drop down list inside of Grid. I have a custom action and I need to send this to an action result on my controller.

Below 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).AllowEditing(true).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);
            }

        });

    }

[CS}

       public ActionResult CommitPayments(int? Data, char? Data1)
        {
            var PaymentNumber = Data;
            var Dropdown = Data1;

        .... // here I work with the data received from VIEW

Thanks in advance.

Roberto

[Thavasianand Sankaranarayanan]

Hi Roberto, 

Thanks for contacting Syncfusion support. 

Query: To get a Dropdown list get selected data inside the grid. 

We have analyzed your query and we prepared a sample as you given in the code example. We suspect that you need to pass the ForeignKey value of selected row data in grid. 

In the attached sample, we get the ForeignKey value of the selected row data in the command button click event, from the column datasource  and ForeignKeyField property value of current row data. 

Refer the code example. 

@(Html.EJ().Grid<object>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

          

         -------------------- 

 

       .Columns(col => 

        { 

            col.HeaderText("Button").Commands(command => 

            { 

                command.Type("Commit") 

                           .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties() 

                           { 

                               Text = "Commit", 

                               Width = "100px", 

                               Click = "onClickCommit" 

                           }).Add(); 

 

            }).Add(); 

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(130).Add(); 

            col.Field("EmployeeID").HeaderText("Employee Name").AllowEditing(true).ForeignKeyField("EmployeeID") 

               .ForeignKeyValue("FirstName").DataSource((IEnumerable<object>)ViewBag.dataSource2).EditType(EditingType.Dropdown) 

               .TextAlign(TextAlign.Left).AllowEditing(false).Width(90).Add();   

             

             --------------------- 

            

             

        })) 

</div> 

 

<script type="text/javascript"> 

 

    function onClickCommit(args) { 

 

        var gridObj = $("#FlatGrid").data("ejGrid"); 

 

        //getting corresponding record 

 

        var data = gridObj.getSelectedRecords()[0].OrderID; 

        var data1 = gridObj.getSelectedRecords()[0].EmployeeID; 

 

        var Foreignkey = gridObj.model.columns[2].dataSource; // get the ForeignKey column datasource in the grid model column.  

        var dataManager = ej.DataManager(Foreignkey); 

 

        var query = ej.Query().select(["EmployeeID", "LastName", "FirstName", "Country"]).where("EmployeeID", "equal", data1); //  

 

        var promise = dataManager.executeLocal(query);  

 

        var ForeignkeyValue = promise[0].FirstName; // get the ForeignKey value of the selected record in the grid. 

 

        $.ajax({ 

 

            ---------------- 

 

        }); 

 

    } 

 

</script> 

We have prepared a sample and it can be downloadable in the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/128761/ze/SyncfusionMvcApplication15474594713 

Refer the help documentation. 

Link: https://help.syncfusion.com/aspnetmvc/grid/columns#foreign-key-column 

Link: https://help.syncfusion.com/api/js/ejdatamanager#methods:executelocal 

Link: https://help.syncfusion.com/js/datamanager/filtering 

If we misunderstood your query and please get back to us. 

Regards, 

Thavasianand S.