Grid example with dropdownlist for a column using a datatable as source using vb.net

[Ed]

Can you show me an example of Grid with dropdownlist for a column using a datatable as source using vb.net?

[Farveen Sulthana Thameeztheen Basha]

Hi Ed, 

Greetings from Syncfusion Support. 

We have already discussed “How to place SQL DataTable to dropdownlist column” in our Syncfusion KnowledgeBase. 

 

Refer to the KB link:- 

https://www.syncfusion.com/kb/7617/how-to-bind-sql-table-data-to-dropdown-column 

 

Code in vb#:- 

<ej:Grid ID="DetailGrid" runat='server'> 

      <EditSettings AllowEditing="true" AllowAdding="true" AllowEditOnDblClick="true" RowPosition="Top"EditMode="InlineForm" />                         

          <ClientSideEvents ActionComplete="complete" />                       

                          <Columns> 

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

                                     

                                    <ej:Column Field="EmployeeID" HeaderText="Time" Width="70" AllowEditing="true" EditType="DropdownEdit"></ej:Column> 

 

                                        .     .     . 

                                </Columns> 

                            </ej:Grid> 

                       

            </ContentTemplate>           

    </asp:UpdatePanel> 

Serverside:- 

Public data As IEnumerable 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) 

        Dim myConnection As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("NORTHWNDConnectionString").ToString()) 

        Dim dt As DataTable = New DataTable("Orders") 

        Dim cmd As SqlCommand = New SqlCommand() 

        cmd.Connection = myConnection 

        cmd.CommandText = "select * from Employees" 

        cmd.CommandType = CommandType.Text 

        Dim da As SqlDataAdapter = New SqlDataAdapter() 

        da.SelectCommand = cmd 

 

        If myConnection.State = ConnectionState.Closed Then 

            myConnection.Open() 

        End If 

 

        da.Fill(dt) 

        Dim dropObj As List(Of Object) = New List(Of Object)() 

 

        Using dr As SqlDataReader = cmd.ExecuteReader() 

 

            While dr.Read() 

                dropObj.Add(New With {Key 

                .text = dr.GetValue(0).ToString(), Key 

                .value = dr.GetValue(0) 

            }) 

        End While 

        End Using 

 

        Me.DetailGrid.Columns(1).DataSource = dropObj      //Bind Dropdownlist for Column 

        Session("SqlDataSource") = dt 

        BindDataSource() 

    End Sub 

 

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

 

Regards, 

Farveen sulthana T 

[Padmini Ramamurthy]

From: Ed Willis
Sent: Tuesday, September 7, 2021 4:37 PM
To: Syncfusion Support <[email protected]>
Subject: Re: Syncfusion Forum [168636] has a new reply - Grid example with dropdownlist for a column using a datatable as source using vb.net 

Thank you so much for the help I got it working, one more question. I am disabling/enabling the toolbar based on a column value and it disables the toolbar but the enable is not working? Can you see what I am doing wrong? 

    <ej:Grid ID="Grid1" runat="server" AllowPaging="True" AllowScrolling="True" AllowSorting="True" CssClass="" DataSourceCachingMode="None" DataSourceID="SqlDataSource1" EnableLoadOnDemand="False" MinWidth="0">
        <ClientSideEvents RowSelected="rowSelect" />
        <SelectionSettings EnableToggle="true" /> 

    <script type="text/javascript">
        function rowSelect(args) {
            var grid = $("#Grid1").ejGrid("instance");
            var statusid = args.data.status_id
            //status_id   status_desc
            //0   Not Set
            //1   Active
            //2   Archive
            //3   Running
            //4   Complete
            if (statusid == 0) {
                $("#" + this.element.attr("id") + "_delete").addClass("e-enable");
                $("#" + this.element.attr("id") + "_edit").addClass("e-enable");
                var $toolbar = $("#" + grid.element.attr("id") + "_toolbarItems");
                var deletetoolbar = $("#" + grid.element.attr("id") + "_delete");
                var edittoolbar = $("#" + grid.element.attr("id") + "_edit");
                $toolbar.ejToolbar("enableItem", deletetoolbar);
                $toolbar.ejToolbar("enableItem", edittoolbar);
            }
            else {
                $("#" + this.element.attr("id") + "_delete").addClass("e-disable");
                $("#" + this.element.attr("id") + "_edit").addClass("e-disable");
                var $toolbar = $("#" + grid.element.attr("id") + "_toolbarItems");
                var deletetoolbar = $("#" + grid.element.attr("id") + "_delete");
                var edittoolbar = $("#" + grid.element.attr("id") + "_edit");
                $toolbar.ejToolbar("disableItem", deletetoolbar);
                $toolbar.ejToolbar("disableItem", edittoolbar);
            }
        }
    </script> 

[Farveen Sulthana Thameeztheen Basha]

Hi Ed,  

Thanks for your feedback. 

Query#:-  I am disabling/enabling the toolbar based on a column value and it disables the toolbar but the enable is not working?  

 

We have checked your reported problem by preparing sample using your provided but we are unable to replicate it at our end. Refer to the sample Link:- 

https://www.syncfusion.com/downloads/support/forum/168636/ze/Sample_(10)483754280 

 

From your provided code we suspect that you couldn’t get the proper Grid Instance on RowSelecting event which will cause the problem. So we suggest to add ClientIDMode as Static or else use like this  $('#<%=Grid1.ClientID %>'.ejGrid("instance"); in Grid Instance on RowSelecting event to resolve the problem. 

 

Refer to the code below:- 

Default.aspx:- 

 

<ej:Grid ID="Grid1"  runat="server" AllowPaging="True" ClientIDMode="Static" IsResponsive="true" EnableResponsiveRow="true"> 

       <ClientSideEvents RowSelecting="rowSelecting" /> 

           .     .    . 

                 

  </ej:Grid> 

 

After following this, still faced Issue share us the following details. 

1. Share Screenshot of Script Error(if any) faced on console window. Also ensure that you can get Grid Instance on RowSelecting event.
2. Video Demo to replicate the issue.
3. If possible replicate it in the above sample and revert us back.

Regards, 

Farveen sulthana T 

[Ed]

ClientIDMode="Static" worked thanks for the help 

[Farveen Sulthana Thameeztheen Basha]

Hi Ed, 

Thanks for your update. Please get back to us if you need any further assistance. We are happy to assist you. 

Regards, 

Farveen sulthana T