Skip to content

Commit 2547aab

Browse files
danail-vasilevdanail-vasilev
committed
added content to decorator troubleshooting article
1 parent bc9a164 commit 2547aab

File tree

1 file changed

+125
-32
lines changed

1 file changed

+125
-32
lines changed

‎controls/formdecorator/troubleshooting/decorated-gridview-is-not-bound-to-sqldatasource-with-controlparameter .md‎

Lines changed: 125 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,67 +10,160 @@ position: 2
1010

1111
# Decorated GridView Is Not Bound to SqlDataSource with ControlParameter
1212

13-
This help article offers a solution to an issue where a decorated input's click event is not triggered when the input is followed by an HTML label element.
13+
This help article offers a solution to an issue where a decorated asp:GridView by RadFormDecorator cannot be bound to an SqlDataSource with ControlParameter on initial page load.
1414

1515
**Problem:**
1616

17-
The client-side click event of decorated HTML input element of type "radio" or "checkbox" is not fired when the following conditions are met at the same time.
17+
The asp:GridView cannot be bound on initial page load when it is decorated by RadFormDecorator and the GridView is bound to an SqlDataSource with ControlParameter. The issue can be reproduced with **Example 1**.
1818

19-
* The input is followed by a label element and there is not a whitespace between them.
19+
>caption **Example 1**: Decorated asp:GridView is not visible on initial page load when it is bound to an SqlDataSource with ControlParameter.
20+
21+
**ASP.NET**
22+
23+
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
24+
25+
<asp:DropDownList ID="Dropdownlist1" runat="server" DataSourceID="DropDownListDataSource" AutoPostBack="true" DataTextField="CompanyName" DataValueField="CustomerID">
26+
</asp:DropDownList>
27+
<asp:SqlDataSource runat="server" ID="DropDownListDataSource" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
28+
ProviderName="System.Data.SqlClient" SelectCommand="Select [CustomerID], [CompanyName], [Address], [City], [PostalCode], [Country] From [Customers]"
29+
OldValuesParameterFormatString="original_{0}" ConflictDetection="CompareAllValues" />
30+
31+
32+
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" DataKeyNames="OrderID" DefaultMode="ReadOnly"
33+
DataSourceID="GridViewDataSource" Width="300" Style="float: left;">
34+
</asp:GridView>
35+
<asp:SqlDataSource runat="server" ID="GridViewDataSource" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
36+
ProviderName="System.Data.SqlClient" SelectCommand="SELECT [OrderID], [CustomerID], [EmployeeID],[OrderDate] FROM [Orders] WHERE ([CustomerID] = @CustomerID)"
37+
OldValuesParameterFormatString="original_{0}" ConflictDetection="CompareAllValues">
38+
<SelectParameters>
39+
<asp:ControlParameter ControlID="Dropdownlist1" Name="CustomerID" PropertyName="SelectedValue"
40+
Type="String"></asp:ControlParameter>
41+
</SelectParameters>
42+
</asp:SqlDataSource>
2043

21-
* The "for" attribute of the label element and the "id" attribute of the input element are not declared.
2244

2345
**Cause:**
2446

25-
When a **RadFormDecorator** decorates "radio button" and "checkbox" HTML elements, it positions them outside of the visible viewport and then puts a label with a background image that represents the decorated input in their place.
47+
In order to decorate all the controls on the page, the RadFormDecorator decorates the children controls of the complex controls as well (i.e., the RadFormDecorator iterates through the controls' collections).
48+
49+
There is, however, a binding issue with the GridView when an SqlDataSource is used with ControlParameter and at the same time the GridView's collection is accessed from the code behind. This issue can be easily reproduced on a page with no Telerik UI for ASP.NET AJAX controls and is shown in **Example 2**. The problem also affect the scenario with RadFormDecorator from **Example 1**.
50+
51+
>caption **Example 2**: asp:GridView cannot be bound to an SqlDataSource with ControlParameter when the GridView's collection is accessed from the code behind.
52+
53+
**ASP.NET**
54+
55+
<asp:DropDownList ID="Dropdownlist1" runat="server" DataSourceID="DropDownListDataSource" AutoPostBack="true" DataTextField="CompanyName" DataValueField="CustomerID">
56+
</asp:DropDownList>
57+
<asp:SqlDataSource runat="server" ID="DropDownListDataSource" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
58+
ProviderName="System.Data.SqlClient" SelectCommand="Select [CustomerID], [CompanyName], [Address], [City], [PostalCode], [Country] From [Customers]"
59+
OldValuesParameterFormatString="original_{0}" ConflictDetection="CompareAllValues" />
60+
61+
62+
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" DataKeyNames="OrderID" DefaultMode="ReadOnly"
63+
DataSourceID="GridViewDataSource" Width="300" Style="float: left;">
64+
</asp:GridView>
65+
<asp:SqlDataSource runat="server" ID="GridViewDataSource" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
66+
ProviderName="System.Data.SqlClient" SelectCommand="SELECT [OrderID], [CustomerID], [EmployeeID],[OrderDate] FROM [Orders] WHERE ([CustomerID] = @CustomerID)"
67+
OldValuesParameterFormatString="original_{0}" ConflictDetection="CompareAllValues">
68+
<SelectParameters>
69+
<asp:ControlParameter ControlID="Dropdownlist1" Name="CustomerID" PropertyName="SelectedValue"
70+
Type="String"></asp:ControlParameter>
71+
</SelectParameters>
72+
</asp:SqlDataSource>
73+
74+
**C#**
75+
76+
protected void Page_PreRender(object sender, EventArgs e)
77+
{
78+
var c = GridView1.Controls;
79+
}
2680

27-
Before inserting a new label, however, the **RadFormDecorator** tries to set the corresponding background image to the HTML label element that follows the input element. This operation is performed because the control assumes a relation between the input and the following label. In scenarios where this association is missing (i.e., the "for" attribute of the label HTML element is not specified), however, the click event of the input will not be raised. The main purpose of the label HTML element is to create an association with an input element, so it is advisable to use the "for" attribute.
81+
**VB**
82+
83+
Protected Sub Page_PreRender(sender As Object, e As EventArgs)
84+
Dim c = GridView1.Controls
85+
End Sub
2886

29-
This limitation is a consequence of the control's implementation and if the input-label relation cannot be created, one of the workarounds below must be used.
3087

3188
**Solution:**
3289

3390
There are a few options you can choose from, in order to handle the scenario described above.
3491

35-
* Declare the "for" and "id" attributes for the label and the input respectively. For example:
92+
* Bind the DropDownList's data from the code behind instead of declaring the DataSourceID property of the DropDownList.
3693

37-
>caption **Example 1**: Associating a label to an input element by matching the input's "id" to the label's "for" attribute.
94+
>caption **Example 3**: Binding DropDownList's data from the code behind instead of declaring its DataSourceID property.
3895

3996
**ASP.NET**
4097

41-
<telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
42-
<input type="checkbox" id="checkbox1" name="name1" value="value1" onclick="alert(1);" /><label for="checkbox1">label 1</label>
43-
<input type="radio" id="radio1" name="name2" value="value2" onclick="alert(2);" /><label for="radio1">label 2</label>
98+
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
4499

45-
* Insert a space between the input and the label - either in the markup (see an **Example 2**), or with JavaScript prior to the **RadFormDecorator**'s decoration (see an **Example 3**).
100+
<asp:DropDownList ID="Dropdownlist1" runat="server" AutoPostBack="true" DataTextField="CompanyName" DataValueField="CustomerID">
101+
</asp:DropDownList>
102+
<asp:SqlDataSource runat="server" ID="DropDownListDataSource" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
103+
ProviderName="System.Data.SqlClient" SelectCommand="Select [CustomerID], [CompanyName], [Address], [City], [PostalCode], [Country] From [Customers]"
104+
OldValuesParameterFormatString="original_{0}" ConflictDetection="CompareAllValues" />
46105

47-
>caption **Example 2**: Inserting a whitespace between an input and a label element in the markup.
48106

49-
**ASP.NET**
107+
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" DataKeyNames="OrderID" DefaultMode="ReadOnly"
108+
DataSourceID="GridViewDataSource" Width="300" Style="float: left;">
109+
</asp:GridView>
110+
<asp:SqlDataSource runat="server" ID="GridViewDataSource" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
111+
ProviderName="System.Data.SqlClient" SelectCommand="SELECT [OrderID], [CustomerID], [EmployeeID],[OrderDate] FROM [Orders] WHERE ([CustomerID] = @CustomerID)"
112+
OldValuesParameterFormatString="original_{0}" ConflictDetection="CompareAllValues">
113+
<SelectParameters>
114+
<asp:ControlParameter ControlID="Dropdownlist1" Name="CustomerID" PropertyName="SelectedValue"
115+
Type="String"></asp:ControlParameter>
116+
</SelectParameters>
117+
</asp:SqlDataSource>
118+
119+
**C#**
120+
121+
protected void Page_Init(object sender, EventArgs e)
122+
{
123+
DataSourceSelectArguments args = new DataSourceSelectArguments();
124+
DataView view = (DataView)DropDownListDataSource.Select(args);
125+
DataTable dt = view.ToTable();
126+
127+
Dropdownlist1.DataSource = dt;
128+
Dropdownlist1.DataBind();
129+
}
130+
131+
**VB**
50132

51-
<telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
52-
<input type="checkbox" name="name1" value="value1" onclick="alert(1);" /> <label>label 1</label>
53-
<input type="radio" name="name2" value="value2" onclick="alert(2);" /> <label>label 2</label>
133+
Protected Sub Page_Init(sender As Object, e As EventArgs)
134+
Dim args As New DataSourceSelectArguments()
135+
Dim view As DataView = DirectCast(DropDownListDataSource.[Select](args), DataView)
136+
Dim dt As DataTable = view.ToTable()
54137

55-
>caption **Example 3**: Inserting a whitespace between an input and a label element with JavaScript prior to decoration.
138+
Dropdownlist1.DataSource = dt
139+
Dropdownlist1.DataBind()
140+
End Sub
56141

57-
**JavaScript**
142+
* Skip the following controls form decoration - GridFormDetailsViews, LoginControls, Textbox and ValidationSummary:
58143

59-
<%--The external jQuery reference is needed because RadFormDecorator doesn't reference internally jQuery--%>
60-
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
61-
<script type="text/javascript">
62-
$(function () {
63-
$("label").each(function () {
64-
this.parentNode.insertBefore(document.createTextNode(" "), this);
65-
});
66-
});
67-
</script>
144+
>caption **Example 4**: Skip the GridFormDetailsViews,LoginControls,Textbox and ValidationSummary controls from decoration.
68145

69146
**ASP.NET**
70147

71-
<telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
72-
<input type="checkbox" name="name1" value="value1" onclick="alert(1);" /><label>label 1</label>
73-
<input type="radio" name="name2" value="value2" onclick="alert(2);" /><label>label 2</label>
148+
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" ControlsToSkip="GridFormDetailsViews,LoginControls,Textbox,ValidationSummary" />
149+
150+
* Set the DataSourceID property of the DropDownList in the Page_Init event. This approach, however, will force the dropdownlist to rebind itself which may lead to performance issues for large data sources.
151+
152+
**C#**
153+
154+
protected void Page_Init(object sender, EventArgs e)
155+
{
156+
Dropdownlist1.DataSourceID = "DropDownListDataSource";
157+
Dropdownlist1.DataBind();
158+
}
159+
160+
**VB**
161+
162+
Protected Sub Page_Init(sender As Object, e As EventArgs)
163+
Dropdownlist1.DataSourceID = "DropDownListDataSource"
164+
Dropdownlist1.DataBind()
165+
End Sub
166+
74167

75168
# See Also
76169

0 commit comments

Comments
 (0)