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.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

124610 Jun 17,2016 01:52 AM Jun 24,2016 02:35 AM JavaScript 7
loading
Tags: ejGrid
Prashant Prasad
Asked On June 17, 2016 01:52 AM

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

Prashant Prasad
Replied On June 17, 2016 02:16 AM

Please find newly attached file and make corrections within that

Attachment: ej.Grid.EditingType.Dropdown_57bd6bf1.rar

Jayaprakash Kamaraj [Syncfusion]
Replied On June 20, 2016 05:30 AM

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. 


Prashant Prasad
Replied On June 20, 2016 05:50 AM

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.



Prashant Prasad
Replied On June 21, 2016 06:08 AM

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.


Jayaprakash Kamaraj [Syncfusion]
Replied On June 21, 2016 08:56 AM

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. 


Prashant Prasad
Replied On June 23, 2016 01:23 AM

Thanks Jayaprakash. It solves my problem.

Jayaprakash Kamaraj [Syncfusion]
Replied On June 24, 2016 02:35 AM

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. 


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.

;