How to have cascading rad drop down lists in rad grid

1 Answer 14 Views
DropDownList Grid UI for ASP.NET AJAX in ASP.NET MVC
SMc
Top achievements
Rank 2
Veteran
Iron
SMc asked on 04 Oct 2021, 09:19 PM

I have done extensive research on this issue and have yet to find a solution that works. I have a simple RadGrid, 2 columns are Template Columns. Each of those 2 columns have a RadDropDownList (DDL) with SQL Data Sources. I would like the selection of the first DDL to define the data list of the second DDL. Also, this needs to work in Insert and Edit modes.

I am stuck at two instances, at one point the first DDL - after making a selection it posts-back and loses the selected item. It resets to "- Select -" and does not bind the second DDL with any data.

Another is when I get an error that states I can't use Eval, Bind, etc., to a non-databound control.

Please take a look at my code and point me in the correct direction!


						<telerik:RadGrid ID="rgvHDwithLoc" runat="server" AutoGenerateColumns="False" DataSourceID="sdsHDwithLoc" AllowAutomaticDeletes="True" AllowAutomaticInserts="True" AllowAutomaticUpdates="True" AutoGenerateDeleteColumn="false" AutoGenerateEditColumn="False">

							<GroupingSettings CollapseAllTooltip="Collapse all groups" />

							<MasterTableView AllowAutomaticDeletes="True" AllowAutomaticInserts="True" AllowAutomaticUpdates="True" CommandItemDisplay="Top" DataKeyNames="owedRequestID" DataSourceID="sdsHDwithLoc" EditMode="EditForms">

								<CommandItemSettings ShowCancelChangesButton="false" ShowSaveChangesButton="false" />

								<Columns>

									<telerik:GridEditCommandColumn EditText="Edit" UpdateText="Update" CancelText="Cancel" HeaderText="Edit"></telerik:GridEditCommandColumn>

									<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" ConfirmText="Are you sure you want to delete this record?" ConfirmTitle="Delete Adjustment" FilterControlAltText="Filter delete column" HeaderText="Delete" UniqueName="delete">
									</telerik:GridButtonColumn>

									<telerik:GridBoundColumn DataField="owedRequestID" DataType="System.Int32" FilterControlAltText="Filter owedRequestID column" HeaderText="owedRequestID" ReadOnly="True" SortExpression="owedRequestID" UniqueName="owedRequestID" Display="false">
									</telerik:GridBoundColumn>

									<telerik:GridBoundColumn DataField="wageAdjRequestID" DataType="System.Int32" FilterControlAltText="Filter wageAdjRequestID column" HeaderText="wageAdjRequestID" SortExpression="wageAdjRequestID" UniqueName="wageAdjRequestID" Display="false" ReadOnly="true">
									</telerik:GridBoundColumn>

									<telerik:GridTemplateColumn DataField="sapWageCode" FilterControlAltText="Filter sapWageCode column" HeaderText="Wage Code" SortExpression="sapWageCode" UniqueName="sapWageCode">
										<EditItemTemplate>

											<telerik:RadDropDownList ID="ddlsapWageCode" runat="server" SelectedValue='<%# Bind("sapWageCode") %>' DataTextField="sapWageCodeAndName" DataValueField="sapWageCode" DataSourceID="sdsWageCode" Width="400" DefaultMessage="- Select -" AutoPostBack="True" CausesValidation="false" EnableViewState="true" OnSelectedIndexChanged="ddlsapWageCode_SelectedIndexChanged"></telerik:RadDropDownList>

										</EditItemTemplate>
										<ItemTemplate>
											<asp:Label ID="sapWageCodeLabel" runat="server" Text='<%# Eval("sapWageCode") %>'></asp:Label>
										</ItemTemplate>
									</telerik:GridTemplateColumn>

									<telerik:GridTemplateColumn DataField="sapAttnCode" FilterControlAltText="Filter sapAttnCode column" HeaderText="Attn Code" SortExpression="sapAttnCode" UniqueName="sapAttnCode">
										<EditItemTemplate>
											<telerik:RadDropDownList ID="ddlsapAttnCode" runat="server" DataTextField="sapAttnCodeAndName" DataValueField="sapAttnCode" Width="400" SelectedValue='<%# Eval("sapAttnCode")%>' DefaultMessage="- Select -"></telerik:RadDropDownList>
										</EditItemTemplate>
										<InsertItemTemplate>
											<telerik:RadDropDownList ID="ddlsapAttnCode" runat="server" DataTextField="sapAttnCodeAndName" DataValueField="sapAttnCode" Width="400" DefaultMessage="- Select -"></telerik:RadDropDownList>
										</InsertItemTemplate>
										<ItemTemplate>
											<asp:Label ID="sapAttnCodeLabel" runat="server" Text='<%# Eval("sapAttnCode") %>'></asp:Label>
										</ItemTemplate>
									</telerik:GridTemplateColumn>

									<telerik:GridBoundColumn DataField="sapWorkCenter" FilterControlAltText="Filter sapWorkCenter column" HeaderText="Work Center" SortExpression="sapWorkCenter" UniqueName="sapWorkCenter">
									</telerik:GridBoundColumn>

									<telerik:GridBoundColumn DataField="sapDept" FilterControlAltText="Filter sapDept column" HeaderText="Dept" SortExpression="sapDept" UniqueName="sapDept">
									</telerik:GridBoundColumn>

									<telerik:GridBoundColumn DataField="Hours" DataType="System.Decimal" FilterControlAltText="Filter Hours column" HeaderText="Hours" SortExpression="Hours" UniqueName="Hours">
									</telerik:GridBoundColumn>

									<telerik:GridBoundColumn DataField="RatePay" DataType="System.Decimal" FilterControlAltText="Filter RatePay column" HeaderText="RatePay" SortExpression="RatePay" UniqueName="RatePay">
									</telerik:GridBoundColumn>

									<telerik:GridDateTimeColumn DataField="Date" DataType="System.DateTime" FilterControlAltText="Filter Date column" HeaderText="Date" SortExpression="Date" UniqueName="Date" DataFormatString="{0:d}">
									</telerik:GridDateTimeColumn>

									<telerik:GridTemplateColumn DataField="sapJobCode" FilterControlAltText="Filter sapJobCode column" HeaderText="Job Code" SortExpression="sapJobCode" UniqueName="sapJobCode">
										<EditItemTemplate>
											<telerik:RadDropDownList ID="ddlsapJobCode" runat="server" DataSourceID="sdsJobCode" DataTextField="sapJobCodeAndName" DataValueField="sapJobCode" SelectedValue='<%# Bind("sapJobCode") %>' Width="400" DefaultMessage="- Select -"></telerik:RadDropDownList>
										</EditItemTemplate>
										<ItemTemplate>
											<asp:Label ID="sapJobCodeLabel" runat="server" Text='<%# Eval("sapJobCode") %>'></asp:Label>
										</ItemTemplate>
									</telerik:GridTemplateColumn>
								</Columns>

								<EditFormSettings>
									<EditColumn FilterControlAltText="Filter EditCommandColumn1 column" UniqueName="EditCommandColumn1">
									</EditColumn>
								</EditFormSettings>

							</MasterTableView>

						</telerik:RadGrid>

<asp:SqlDataSource ID="sdsHDwithLoc" runat="server" ConnectionString="<%$ ConnectionStrings:XXXXXX_SAP %>"
		DeleteCommand="DELETE FROM [tblSAP_HoursDollarsOwedRequest] WHERE [owedRequestID] = @owedRequestID"
		SelectCommand="SELECT * FROM view_SAP_WageAdjRequest_hoursDollarsOwed WHERE (wageAdjRequestID = @wageAdjRequestID)"
		UpdateCommand="UPDATE tblSAP_HoursDollarsOwedRequest SET sapWageCode = @sapWageCode, sapAttnCode = @sapAttnCode, sapWorkCenter = @sapWorkCenter, sapDept = @sapDept, Hours = @Hours, RatePay = @RatePay, sapJobCode = @sapJobCode, Date = @Date  WHERE (owedRequestID = @owedRequestID)"
		InsertCommand="INSERT INTO tblSAP_HoursDollarsOwedRequest (wageAdjRequestID, sapWageCode, sapAttnCode, sapWorkCenter, sapDept, Hours, RatePay, sapJobCode, [Date]) VALUES (@wageAdjRequestID, @sapWageCode, @sapAttnCode, @sapWorkCenter, @sapDept, @Hours, @RatePay, @sapJobCode, @Date)">
		<SelectParameters>
			<asp:ControlParameter ControlID="lblWageAdjID" PropertyName="Text" Name="wageAdjRequestID" Type="Int32" />
		</SelectParameters>
		<DeleteParameters>
			<asp:Parameter Name="owedRequestID" Type="Int32" />
		</DeleteParameters>
		<UpdateParameters>
			<asp:Parameter Name="sapWageCode" Type="String" />
			<asp:Parameter Name="sapAttnCode" Type="String" />
			<asp:Parameter Name="sapWorkCenter" Type="String" />
			<asp:Parameter Name="sapDept" Type="String" />
			<asp:Parameter Name="Hours" Type="Decimal" />
			<asp:Parameter Name="RatePay" Type="Decimal" />
			<asp:Parameter Name="sapJobCode" Type="String" />
			<asp:Parameter Name="Date" Type="DateTime" />
			<asp:Parameter Name="owedRequestID" Type="Int32" />
		</UpdateParameters>
		<InsertParameters>
			<asp:ControlParameter ControlID="lblWageAdjID" PropertyName="text" Name="wageAdjRequestID" Type="Int32" />
			<asp:Parameter Name="sapWageCode" Type="String" />
			<asp:Parameter Name="sapAttnCode" Type="String" />
			<asp:Parameter Name="sapWorkCenter" Type="String" />
			<asp:Parameter Name="sapDept" Type="String" />
			<asp:Parameter Name="Hours" Type="Decimal" />
			<asp:Parameter Name="RatePay" Type="Decimal" />
			<asp:Parameter Name="sapJobCode" Type="String" />
			<asp:Parameter Name="Date" Type="DateTime" />
		</InsertParameters>
	</asp:SqlDataSource>

<asp:SqlDataSource ID="sdsWageCode" runat="server" ConnectionString="<%$ ConnectionStrings:XXXXXX_SAP %>"
		SelectCommand="SELECT [sapWageCode], sapWageCode + ' - ' + sapWageCodeName AS sapWageCodeAndName FROM [tblSAP_WageCode] WHERE [sapWageCodeActive] = 1 ORDER BY [sapWageCodeName]"></asp:SqlDataSource>

	<asp:SqlDataSource ID="sdsAttnCode" runat="server" ConnectionString="<%$ ConnectionStrings:XXXXXX_SAP %>"
		SelectCommand="SELECT [sapAttnCode], sapAttnCode + ' - ' + sapAttnCodeName AS sapAttnCodeAndName FROM [tblSAP_AttnCode] WHERE [sapAttnCodeActive] = 1 AND sapWageCode = @sapWageCode">
		<SelectParameters>
			<asp:ControlParameter ControlID="ddlsapWageCode" PropertyName="SelectedValue" Name="sapWageCode" Type="String" />
		</SelectParameters>
	</asp:SqlDataSource>

And I have tried this in my VB code behind:


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

		Dim wageCodeDDL As RadDropDownList = CType(sender, RadDropDownList)
		Dim insertItem As GridEditFormInsertItem = CType(wageCodeDDL.NamingContainer, GridEditFormInsertItem)
		Dim attnCodeDDL As RadDropDownList = CType(insertItem.FindControl("ddlsapAttnCode"), RadDropDownList)
		Dim strWageCode = wageCodeDDL.SelectedValue.ToString

		Dim strAttnCode As String = Nothing
		Dim strAttnCodeAndName As String = Nothing

		Dim myConn As New SqlConnection(ConfigurationManager.ConnectionStrings("XXXXXX_SAP").ConnectionString)
		Dim strSelect As String = "SELECT [sapAttnCode], sapAttnCode + ' - ' + sapAttnCodeName AS sapAttnCodeAndName FROM [tblSAP_AttnCode] WHERE [sapAttnCodeActive] = 1 AND sapWageCode = @sapWageCode"
		Dim myCmd As New SqlCommand(strSelect, myConn)

		myConn.Open()

		With myCmd.Parameters
			.Add(New SqlParameter("@sapWageCode", strWageCode))
		End With

		Dim dr As SqlDataReader = myCmd.ExecuteReader

		While dr.Read
			strAttnCode = dr("sapAttnCode")
			strAttnCodeAndName = dr("sapAttnCodeAndName")
		End While

		myConn.Close()
		myCmd.Dispose()
		myConn.Dispose()
		dr.Close()

		attnCodeDDL.DataValueField = strAttnCode
		attnCodeDDL.DataTextField = strAttnCodeAndName

		attnCodeDDL.DataBind()

	End Sub
Thank you in advance!
Attila Antal
Telerik team
commented on 07 Oct 2021, 01:03 PM

Hi Sean,

I can see how you are trying to change the data source of the second DropDownList, but I would need to know how binding is done initially, and I need to know for both of them. Can you share all the server logic that you use to bind data to this DropDownLists and also share all the server logic that is making changes to the Grid?

The way data is being bound to the DropDownLists and making changes to the Grid might be related to both instances of problems.

SMc
Top achievements
Rank 2
Veteran
Iron
commented on 07 Oct 2021, 06:28 PM | edited

I was able to get something to work: I put the Rad Controls inside an ASP.NET GridView instead of a Telerik:RadGrid.

 

Here are my complete files - 

1 Answer, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 12 Oct 2021, 05:28 PM

Hi Sean,

Thank you for sharing the details. Okay, so, when the Controls are inside a Template (whether it is in the Grid or other ASP control, the SqlDataSource controls cannot see them, therefore, the Control parameter will not work.

SqlDataSource is mainly used for easy setup and automatic operations. However, a dynamic scenario like Cascading DropDown lists requires you to dynamically change the data source. Instead of using a SqlDataSource, try to assign data dynamically in the code behind. 

Here is a Code Library sample that shows the approach: Using related RadComboBoxes in RadGrid.

The Code-behind is written with C#, but you can use the Telerik Code Converter to translate it to VB code.

Take a look at this sample and let us know if you have any questions.

Regards,
Attila Antal
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
DropDownList Grid UI for ASP.NET AJAX in ASP.NET MVC
Asked by
SMc
Top achievements
Rank 2
Veteran
Iron
Answers by
Attila Antal
Telerik team
Share this question
or