DropdownList as Grid Column

[Stefano Capobianco]

Hi support, i've a grid defined as follow:

<ej-grid id="Grid"  allow-sorting="true"  allow-paging="true" allow-scrolling="true"  allow-resizing="true" is-responsive="true"  enable-responsive-row="true"

         action-complete="GridActionComplete" locale="@(System.Threading.Thread.CurrentThread.CurrentCulture.Name)"   end-add="GridEndAdd"  

allow-filtering="false" record-double-click="GridDoubleClick" record-click="GridClick">

    <e-edit-settings allow-adding="true"></e-edit-settings>

    <e-datamanager url="/Surgery/Patients/GridPatients" insert-url="/Surgery/Patients/GridCreatePatient" adaptor="UrlAdaptor"></e-datamanager>

    <e-sort-settings>

        <e-sorted-columns>

            <e-sorted-column field="FirstName, LastName" direction="Ascending"></e-sorted-column>

        </e-sorted-columns>

    </e-sort-settings>

    <e-page-settings page-size="5" show-defaults="true" enable-templates="true" template="#template">

    </e-page-settings>

    <e-columns>

        <e-column field="Id" is-identity="true" is-primary-key="true" visible="false"></e-column>

        <e-column field="Title.TitleAbbr" header-text="Titolo" header-text-align="TextAlign.Center" text-align="Center" width="50" edit-type="DropdownEdit" ></e-column>

        <e-column field="FirstName" header-text="Nome" header-text-align="TextAlign.Center" text-align="Center" width="100"></e-column>

        <e-column field="LastName" header-text="Cognome" header-text-align="TextAlign.Center" text-align="Center" width="150"></e-column>

        <e-column field="BirthDate" header-text="Data di Nascita" header-text-align="TextAlign.Center" text-align="Center" width="100"

                  edit-type="Datepicker" format="{0:dd/MM/yyyy}" date-edit-options='@new DatePickerProperties { AllowEdit = false }'>

        </e-column>

    </e-columns>

</ej-grid>

I need to populate the dropdown column with the following ajax calling:

        function GridActionComplete(args) {

            if (args.requestType == "add"){

//                alert('Add');

                var grid = this._id;

                $.ajax({ 

                    url: '/Commontables/Titles/GetTitles', 

                    type: 'GET', 

                    success: function (dataSet) { 

                    }

                });

            }

        }

how can i achieve that?

Thanks in advance

Stefano Capobianco

[Farveen Sulthana Thameeztheen Basha]

Hi Stefano, 

Thanks for contacting Syncfusion Support. 

We have checked your query and we have achieved your requirement using action-complete event. This event triggers for every complete action in the Grid. In this event, when the args.requestType is beginedit or add,  we have get the datasource from serverside using Ajax Call and bind dataSource for dropdownList using the dataSource property of ejDropDownList.  

 

Please refer to the code example:- 

 

<ej-grid id="FlatGrid" allow-paging="true" allow-filtering="true" action-complete="complete" > 

       <e-columns> 

            <e-column field="OrderID" header-text="Order ID" is-primary-key="true"></e-column> 

            <e-column field="CustomerID" header-text="Customer ID"></e-column> 

                    .   .    .             

        </e-columns> 

    </ej-grid> 

<script> 

    function complete(args) { 

        if (args.requestType == "beginedit" || args.requestType == "add") { 

            var grid = this._id; 

            $.ajax({ 

                url: '/Home/EmployeeID', 

                type: 'GET', 

                success: function (data1) { 

                    $("#" + grid + "ShipCity").ejDropDownList({ dataSource: data1 });//assign the dataSource obtained from serverSide 

                    $("#" + grid + "ShipCity").ejDropDownList("setSelectedText", args.model.selectedRecords[0].ShipCity); 

 

                } 

            }); 

        } 

    } 

</script> 

 

Serverside:- 

 

     public ActionResult EmployeeID() 

        { 

            var employeeID = order.Select(s => s.ShipCity).Distinct().ToList(); 

            var EmployeeID = new List<object>(); 

            foreach (var id in employeeID) 

            { 

                EmployeeID.Add(new { value = id, text = id }); 

            } 

            return Json(EmployeeID); 

        } 

 

Refer to the sample and API Link:- 

http://www.syncfusion.com/downloads/support/forum/137309/ze/WebApplication8_(2)640026771.zip 

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

https://help.syncfusion.com/api/js/ejdropdownlist#members:datasource 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Stefano Capobianco]

Hi Farveen sulthana T, i've solved my problem with the editTemplate option for the field:

{ 

     field: "Title.TitleAbbr", headerText: "Title", headerTextAlign: ej.TextAlign.Center, textAlign: ej.TextAlign.Center, 

     width: 60, editTemplate: { create: "create", read:"read", write:"write"  }                    

}, 

and:

function create() {

     return $("<input>");

}

function read(args) {

     return args.ejDropDownList("getValue");

}

function write(args) {

     args.element.ejDropDownList({

                dataSource: titleDataManager,

                fields: { id: "Id", text: "TitleAbbr", value: "Id" }

     }); 

        

}

Thanks for your help and if you have some suggestion it's really appreciated.

Stefano     

[Farveen Sulthana Thameeztheen Basha]

Hi Stefano, 

Thanks for your update. You can also use EditTemplate property to render DropdownList and bind DataSource from server side. We have already discussed this requirement  “How to render dropdown with datasource fetched by remote service while Editing” in our Syncfusion Knowledge base. 

Please refer to the KB link:- 

https://www.syncfusion.com/kb/6816/how-to-render-the-dropdown-with-datasource-fetched-by-remote-service-while-editing 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T