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.
Syncfusion Feedback

Set Datasource for Dropdown for EditMode: Dialog

Thread ID:

Created:

Updated:

Platform:

Replies:

125143 Jul 25,2016 10:37 AM UTC Jul 27,2016 04:22 AM UTC ASP.NET Web Forms 3
loading
Tags: Grid
Martin Sickel
Asked On July 25, 2016 10:37 AM UTC

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 [Syncfusion]
Replied On July 26, 2016 11:27 AM UTC

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. 


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> 


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


Regards, 
Seeni Sakthi Kumar S. 


Martin Sickel
Replied On July 26, 2016 07:03 PM UTC

Thank you very much for this great support

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On July 27, 2016 04:22 AM UTC

Hi Martin, 

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

Regards, 
Seeni Sakthi Kumar S. 


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.

Warning Icon 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.Close Icon

;