Set Datasource for Dropdown for EditMode: Dialog

[Martin Sickel]

Dear All

I try to archieve the following.

I have created a grid which looks like this

                    <ej:Grid ID="mainGrid" AllowSorting="true" AllowScrolling="True" AllowFiltering="True" AllowTextWrap="True"  AllowPaging="true" AllowSearching="true"

                        OnServerWordExporting="mainGrid_ServerWordExporting" OnServerPdfExporting="mainGrid_ServerPdfExporting" OnServerExcelExporting="mainGrid_ServerExcelExporting" 

                        OnServerEditRow="mainGrid_ServerEditRow"   IsResponsive="true" runat="server">

                        <DataManager Adaptor="WebApiAdaptor"  URL="api/main" Offline="true" />                  

                        <Columns>

                            <ej:Column Field="PHONENUMBER" HeaderText="PHONENUMBER" IsPrimaryKey="True" TextAlign="Right" Width="150">

                            </ej:Column>

                            <ej:Column Field="PNR_TYP" HeaderText="PNR_TYP" TextAlign="Right" Width="50">

                            </ej:Column>                         

                            <ej:Column Field="PNR_STATE" HeaderText="PNR_STATE"  TextAlign="Right" EditType="Dropdown"  Width="80">

                               <%-- <DataManager Adaptor="WebApiAdaptor"  URL="api/main/pnr_state"  />  --%>  

                            </ej:Column>                        

                        </Columns>                                       

                        <ClientSideEvents ToolbarClick="onToolBarClick" />

                        <ScrollSettings Height="400" Width="auto" AutoHide="false" />

                        <ToolbarSettings ShowToolbar="True" ToolbarItems="search,excelExport,wordExport,pdfExport, add,edit,delete,update,cancel">

                        </ToolbarSettings>

                        <SearchSettings Fields="PHONENUMBER,COUPLED_PHONENUMBER,COUPLED_PHONENUMBER,USER_DESCRIPTION,USER_GO_MA_ID" />

                        <PageSettings PageSize="10" />

                        <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Dialog"></EditSettings>

                        <SelectionSettings EnableToggle="true" />

                        <FilterSettings FilterBarMode="Immediate" ShowFilterBarStatus="True" StatusBarWidth="300" FilterType="FilterBar"></FilterSettings>

                    </ej:Grid>

And in my Code Behind I setup the values for the DropDown.

        protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                List<Models.InternalPhonenumber.PNR_TYP_DATA> PNR_STATE = new List<Models.InternalPhonenumber.PNR_TYP_DATA>();

                PNR_STATE.Add(new Models.InternalPhonenumber.PNR_TYP_DATA("FREE", "FREE"));

                PNR_STATE.Add(new Models.InternalPhonenumber.PNR_TYP_DATA("ALLOCATED", "ALLOCATED"));

                 var index = mainGrid.Columns.FindIndex(col => col.Field == "PNR_STATE");

                mainGrid.Columns.ElementAt(index).DataSource = PNR_STATE.ToList();

            }

        }

Here is my Controller for it and the custom class

        [Route("api/main/pnr_state")]

        public object GET_PNR_TYP()

        {

            List<Models.InternalPhonenumber.PNR_TYP_DATA> PNR_STATE = new List<Models.InternalPhonenumber.PNR_TYP_DATA>();

            PNR_STATE.Add(new Models.InternalPhonenumber.PNR_TYP_DATA("FREE", "FREE"));

            PNR_STATE.Add(new Models.InternalPhonenumber.PNR_TYP_DATA("ALLOCATED", "ALLOCATED"));

            var data = PNR_STATE.ToList();

            return new { Items = data, Count = data.Count() };

            //return new { Items = data.Take(20), Count = data.Count() };

            //return data;

        }

        public class PNR_TYP_DATA

        {

            public PNR_TYP_DATA()

            {

            }

            public PNR_TYP_DATA(String pnr_typ_value, String pnr_typ_text)

            {

                this.value = pnr_typ_value;

                this.text = pnr_typ_text;

            }

            public String value { get; set; }

            public String text { get; set; }

        }

this is working as expected, so far so good.

I now would like to set the Items for the Dropdown direct in aspx File, I thought that I can do it like this

                            <ej:Column Field="PNR_STATE" HeaderText="PNR_STATE"  TextAlign="Right" EditType="Dropdown"  Width="80">

                                <DataManager Adaptor="WebApiAdaptor"  URL="api/main/pnr_state"  />  

                            </ej:Column>

but sadly this is not working.

Is it possible like this?

Thanks for any help

Martin

[Seeni Sakthi Kumar Seeni Raj]

Hi Martin,  

We could see that you would like to bind the remote datasource for the columns. Since we don’t have support to bind the remote dataSource for the columns, we have considered this as a usability issue and created support incident to track the task. 

Please log on to our support website to check for further updates. 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

To work around this, we have used the EditTemplate of Columns and sent a POST in the DataBound event of the Grid to collect the data for the dropdown. Refer to the following code example and Help Document. 

    <ej:Grid ID="Grid" runat="server" AllowPaging="true"> 

             . . . 

        <DataManager Adaptor="WebApiAdaptor" URL="/api/Orders" Offline="true" /> 

        <Columns> 

            <ej:Column Field="OrderID" HeaderText="OrderID" IsPrimaryKey="true" /> 

            <ej:Column Field="EmployeeID" HeaderText="Employee ID"> 

                <EditTemplate Create="create" Read="read" Write="write" /> 

                <%--render dropdown and datasource using the editTemplate--%> 

            </ej:Column> 

             . . . 

        </Columns> 

        <ClientSideEvents DataBound="dataBound" /> 

    </ej:Grid> 

 

    <script type="text/javascript"> 

        function dataBound(args) { 

            var data = new ej.DataManager({ 

                url: "/api/Employees", adaptor: new ej.WebApiAdaptor(), offline: true 

            }) 

            this.element.ejWaitingPopup("show");//show popup 

            data.executeQuery(new ej.Query()) 

            .done(function (e) { 

                var obj = $('#<%= Grid.ClientID %>').ejGrid('instance'); 

                obj.element.ejWaitingPopup("hide");//hide after loading data for dropdown 

                obj.getColumnByField("EmployeeID").dataSource = e.result 

            }) 

        } 

        function create() { 

            return $("<input>"); 

        } 

        function write(args) { 

            var obj = $('#<%= Grid.ClientID %>').ejGrid('instance'); 

            args.element.ejDropDownList({ 

                width: "100%", 

                dataSource: ej.distinct(obj.getColumnByField("EmployeeID").dataSource, "EmployeeID"), 

                value: args.rowdata !== undefined ? args.rowdata["EmployeeID"] : "" 

            }); 

        } 

        function read(args) { 

            return args.ejDropDownList("getValue"); 

        } 

    </script> 

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

http://help.syncfusion.com/aspnet/grid/editing#cell-edit-template 

We have also prepared a sample that can be downloaded from the following location. 

Sample: http://www.syncfusion.com/downloads/support/forum/125143/ze/WebApplication21657697461.zip 

Regards, 

Seeni Sakthi Kumar S. 

[Martin Sickel]

Thank you very much for this great support

[Seeni Sakthi Kumar Seeni Raj]

Hi Martin, 

Thanks for your feedback. Please track the created incident for better follow-up on the reported issue. 

Regards, 

Seeni Sakthi Kumar S.