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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

128761 Feb 9,2017 02:43 PM Feb 10,2017 05:25 AM ASP.NET MVC 1
loading
Tags: Grid
Rob K
Asked On February 9, 2017 02:43 PM

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 [Syncfusion]
Replied On February 10, 2017 05:25 AM

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. 


Refer the help documentation. 




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

Regards, 
Thavasianand S. 


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.

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.

;