How to insert a DropdownList in a header cell of a grid

[Carlos]

Hi everybody:

Can I insert a DropdownList in grid header and get value on post to controller?

I save data following:

function _SaveGrid() {
        var grid = $("#OfertaUPDATE").ejGrid("instance");
        $.ajax({
            url: "/PresupuestoCabeceras/UpdateData",
            type: "POST",
            datatype: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                grid: JSON.stringify(grid.model.dataSource),
            }),
            beforeSend: function () {
                $("#spinnerSaveOferta").addClass("spinner-border spinner-border-sm");
                $("#SaveOferta").prop("disabled", true);
            },
            complete: function () {
                $("#spinnerSaveOferta").removeClass("spinner-border spinner-border-sm");
                $("#SaveOferta").prop("disabled", false);
            },
            success: function (result) {

                switch (result.mensaje.correcto) {
                    case true:
                        debugger;
                        $('#MensajePresupuestoCabecera').html(result.mensaje.mensajehtml);
                        $('#OfertaAgregada').empty();
                        EstadoCampos(false);
                        $('#textosubmitoferta').text("Generar oferta");
                        break;
                    case false:
                        $('#MensajePresupuestoCabecera').html(result.mensaje.mensajehtml);
                        break;
                }
            }
        });
    }

Thank you in advance.

[Padmavathy Kamalanathan]

Hi Carlos, 

  

Thanks for contacting Syncfusion Support. 

  

QUERY: Can I insert DropdownList in grid header and get value on post to controller? 

  

We have achieved your requirement by using the header template. We have rendered the dropdown in the dataBound event of grid and in the change event of the dropdown we have passed the dropdown value to the server end. 

  

 

<script id="employeetemplate" type="text/x-jsrender"> 

    <input id="dropdown1" /> 

</script> 

  

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

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

        .AllowPaging() 

        .ClientSideEvents(eve => { eve.DataBound("dataBound"); }) 

        .Columns(col => 

        { 

         col.Field("OrderID").HeaderText("Order ID").Add(); 

         col.Field("CustomerID").HeaderText("Order ID").Add();                         

          col.Field("EmployeeID") 

                .HeaderTemplateID("#employeetemplate").Add(); 

 

        })) 

 

<script> 

    var items = [ 

    { 

        text: "ListItem 1", 

        value: "item1" 

    }, { 

        text: "ListItem 2", 

        value: "item2" 

    },  

     ------- 

    ]; 

 

    function dataBound(args) { 

        $('#dropdown1').ejDropDownList({ 

            dataSource: (items), 

            value: "item1", 

            change: function (args) { 

                var data = { "data": args.text }; 

                $.ajax({ 

                    url: '/Home/DataSource', 

                    dataType: "json", 

                    contentType: 'application/json; charset=utf-8', 

                    type: 'POST', 

                    data: JSON.stringify(data), 

               //pass the selectedValue of the dropdown to server side 

                    success: function (data) { 

  

                    } 

                }) 

            } 

        }); 

    } 

 

</script> 

  

in controller end 

  

        public ActionResult DataSource(string data) 

        { 

            //perform your action 

  

            return Json(data); 

  

        } 

  

Please check the below screenshots, 

 

  

  

  

 

  

Please check the below help documentations, 

https://help.syncfusion.com/aspnetmvc/grid/columns#header-template 

https://js.syncfusion.com/demos/jquery/#!/bootstrap/grid/columns/headertemplate 

https://help.syncfusion.com/api/js/ejgrid#events:databound 

https://help.syncfusion.com/api/js/ejdropdownlist#events:change 

Kindly get back to us for further assistance. 

  

Regards, 

Padmavathy Kamalanathan 

[Carlos]

Thank you very much Padmavathy for your help. It has been very useful to me.

[Padmavathy Kamalanathan]

Hi Carlos,

We are glad to hear that you have achieved your requirement. 

 

Kindly get back to us for further assistance. 

  

Regards, 

Padmavathy Kamalanathan