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. Image for the cookie policy date

Set data source for ej.Grid.EditingType.Dropdown using Ajax call

I have ejGrid with number of dropdowns and I want to bind data using ajax call to those when the foucs goes to cell which contain dropdown.
Please correct my code in my attachment and resend me.

Attachment: ej.Grid.EditingType.Dropdown_1aa7628b.rar

7 Replies

PP Prashant Prasad June 17, 2016 06:16 AM UTC

Please find newly attached file and make corrections within that

Attachment: ej.Grid.EditingType.Dropdown_57bd6bf1.rar


JK Jayaprakash Kamaraj Syncfusion Team June 20, 2016 09:30 AM UTC

Hi Prashant,   
  
Thank you for contacting Syncfusion Support.   
  
We have achieved your requirement using actionComplete event. This event triggers for every complete action in the Grid. In this event, when the args.requestType is beginedit or add change the JS controls based on the column type (ejDropDownList) and bind dataSource using the dataSource property of ejDropDownList. Please refer to the below Help document, code example, and sample.   
 
 
<script> 
 
    // Load data in grid 
    var dataManager = ej.DataManager({ 
        url: "/Grid/DataSource", 
        updateUrl: "/Grid/Update", 
        insertUrl: "/Grid/Insert", 
        removeUrl: "/Grid/Delete", 
        adaptor: "UrlAdaptor" 
        }); 
 
        $("#FlatGrid").ejGrid({ 
            dataSource: dataManager, 
            actionComplete : "complete", 
        }); 
        function complete(args) { 
            if (args.requestType == "beginedit" || args.requestType == "add") 
            { 
                var grid = this._id; 
                $.ajax({ 
                    url: '/Grid/EmployeeID', 
                    type: 'GET', 
                    success: function (data1) { 
                        $("#" + grid + "ShipCountry").ejDropDownList({ dataSource: data1 });//assign the dataSource obtained from serverSide 
                     
                    } 
                }); 
            } 
        } 
</script> 
 
 
If we have misunderstood your requirement, please share the following:     
1.       Client and server-side full code example.   
2.       In which scenario you want to bind dataSource into columns?     
3.       Give us more details of your requirement.     
 
 
Regards, 
 
Jayaprakash K. 



PP Prashant Prasad June 20, 2016 09:50 AM UTC

In the code given by you the drop down is fixed i.e. "ShipCountry" but I want to fetch this drop-down id at runtime. Is it possible to check on which cell we have clicked using complete event ? I think on RecordDoubleClick, we get cell information. When the edit type is dropdown then only I have bind dropdown data. so for that I will require source cell and its editing type. Also provide me an example using edit template and ajax function for dropdown.

Thanks.




PP Prashant Prasad June 21, 2016 10:08 AM UTC

As per your suggestion, I have tried the code, 

$("#" + grid + "ShipCountry").ejDropDownList({ dataSource: data1 });

to assign the data source obtained from server side. The code is written on cellEdit event but it will not bind data source even though it is successfully fetched by Ajax call.



JK Jayaprakash Kamaraj Syncfusion Team June 21, 2016 12:56 PM UTC

Hi Prashant, 

Query 1: example using edit template and ajax function for dropdown. 
 
A support incident has been created under your account to resolve the issue. Please log on to our support website to check for further updates.  
 
Query 2:  The code is written on cellEdit event but it will not bind data source even though it is successfully fetched by Ajax call. 
 
We have created sample with cellEdit event.  In this event, when the args.columnName is “ShipCountry”(dropdown column),  change the JS controls based on the column type (ejDropDownList) and bind dataSource using the dataSource property of ejDropDownList. Please refer to the below Help document, code example, and sample. 
 
<script> 
 
    // Load data in grid 
    var dataManager = ej.DataManager({ 
        url: "/Grid/DataSource", 
        batchUrl: "/Grid/BatchUpdate", 
        adaptor: "UrlAdaptor" 
        }); 
 
        $("#FlatGrid").ejGrid({ 
            dataSource: dataManager, 
             
            cellEdit: "cellEdit", 
            columns: [ 
                { field: "ShipCountry", headerText: "Ship Country” }, 
                { field: "ShipCity", headerText: "Ship City" } 
            ], 
            allowPaging: true 
        }); 
        function cellEdit(args) { 
 
                     if (args.columnName == "ShipCountry") 
            { 
                var grid = this._id; 
                $.ajax({ 
                    url: '/Grid/EmployeeID', 
                    type: 'GET', 
                    success: function (data1) { 
                        $("#" + grid + "ShipCountry").ejDropDownList({ dataSource: data1 });//assign the dataSource obtained from serverSide 
                        $("#" + grid + "ShipCountry").ejDropDownList("setSelectedText", args.model.selectedRecords[0].ShipCountry); 
                     
                    } 
                }); 
            } 
        } 
</script> 
 
 
Regards, 
 
Jayaprakash K. 



PP Prashant Prasad June 23, 2016 05:23 AM UTC

Thanks Jayaprakash. It solves my problem.


JK Jayaprakash Kamaraj Syncfusion Team June 24, 2016 06:35 AM UTC

Hi Prashant,  
 
We are happy that the problem has been solved. 
 
Please get back to us if you need any further assistance.   
 
Regards,  
 
Jayaprakash K. 


Loader.
Live Chat Icon For mobile
Up arrow icon