Question : RadCombo Box loses Items on postback.

We have 3 related RadComboBoxes that filter a grid as shown in the image and based on the following example; http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultcs.aspx

The second task of the code is meant to filter a grid from a combobox to produce the result shown in this sample;  http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridcomboajax/defaultcs.aspx?product=grid

A RadGrid has been added to the page and the Selected Value of the 3rd combobox is used to populate the grid.  The Problem is that the comboboxes lose their value when postback occurs and grid is bound.  

We have tried to use update panels and storing selected values into session but this does not work.

Is there a javscript addition that needs to interact between the 3rd combobox and the grid?

The final result needs all combobox values to persist and the user MUST be able to select from the filtered items in RadComboBox3 (ie choose another lesson filtered from the lesson group (RadComboBox2).

We are NOT using Telerik AJAX Manager as we have the AJAX Control Toolkit Script Manager running on the MasterPage.
 
GridFilteredbyComboSample.jpg (104 KB) (File Type Details) 
The controls in action
305777
 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:

using System;
using Telerik.Web.UI;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;


public partial class Applications_xTrain_Controls_xtv_VideoSelector : System.Web.UI.Page
{
    readonly DataAccess _data = new DataAccess();
    protected void Page_Load(object sender, EventArgs e)
    {         
        //fill the continents combo
        LoadContinents();

        #region Session Variables
        Geek.XTV7_Categories_ID = RadComboBox1.SelectedValue;
        Geek.XTV7_Categories_Sub_ID = RadComboBox2.SelectedValue;
        Geek.XTV7_Videos_ID = RadComboBox3.SelectedValue;
        #endregion

        if (Page.IsPostBack) return;
        RadComboBox2.SelectedValue = Geek.XTV7_Categories_Sub_ID.ToString();
        RadComboBox3.SelectedValue = Geek.XTV7_Videos_ID.ToString();
    
    }
    #region RadComboBox Databinding
    protected void LoadContinents()
    {
        SqlConnection connection = new SqlConnection(
        ConfigurationManager.ConnectionStrings["XtrainConnectionString"].ConnectionString);

        SqlDataAdapter adapter = new SqlDataAdapter("SELECT Xtrain.XTV7_1_Categories.XTV7_Categories_Image, Xtrain.XTV7_1_Categories.XTV7_Categories_ID, Xtrain.XTV7_1_Categories.XTV7_Categories_Name, COUNT(Xtrain.XTV7_2_Videos.XTV7_Videos_ID) AS Videos FROM         Xtrain.XTV7_1_Categories INNER JOIN Xtrain.XTV7_2_Videos ON Xtrain.XTV7_1_Categories.XTV7_Categories_ID = Xtrain.XTV7_2_Videos.XTV7_Categories_ID GROUP BY Xtrain.XTV7_1_Categories.XTV7_Categories_Image, Xtrain.XTV7_1_Categories.XTV7_Categories_ID, Xtrain.XTV7_1_Categories.XTV7_Categories_Name HAVING      (Xtrain.XTV7_1_Categories.XTV7_Categories_Name LIKE N'ESRI%') AND (COUNT(Xtrain.XTV7_2_Videos.XTV7_Videos_ID) <> 0)", connection);
        DataTable dt = new DataTable();
        adapter.Fill(dt);

        RadComboBox1.DataTextField = "XTV7_Categories_Name";
        RadComboBox1.DataValueField = "XTV7_Categories_ID";
        RadComboBox1.DataSource = dt;
        RadComboBox1.DataBind();
        //insert the first item
        RadComboBox1.Items.Insert(0, new RadComboBoxItem("- Select a category -"));
    }

    protected void LoadCountries(string continentID)
    {
        SqlConnection connection = new SqlConnection(
        ConfigurationManager.ConnectionStrings["XtrainConnectionString"].ConnectionString);

        //select a country based on the continentID
        SqlDataAdapter adapter = new SqlDataAdapter("SELECT XTV7_Categories_Sub_ID, XTV7_Categories_Sub_Name, XTV7_Categories_Sub_Available FROM Xtrain.XTV7_1_Categories_Sub WHERE(XTV7_Categories_ID = @XTV7_Categories_ID) AND (XTV7_Categories_Sub_Available = 1)", connection);
        adapter.SelectCommand.Parameters.AddWithValue("@XTV7_Categories_ID", continentID);

        DataTable dt = new DataTable();
        adapter.Fill(dt);

        RadComboBox2.DataTextField = "XTV7_Categories_Sub_Name";
        RadComboBox2.DataValueField = "XTV7_Categories_Sub_ID";
        RadComboBox2.DataSource = dt;
        RadComboBox2.DataBind();
    }

    protected void LoadCities(string countryID)
    {
        SqlConnection connection = new SqlConnection(
        ConfigurationManager.ConnectionStrings["XtrainConnectionString"].ConnectionString);

        //select a city based on the countryID
        SqlDataAdapter adapter = new SqlDataAdapter("SELECT  XTV7_Videos_ID, XTV7_Categories_Sub_ID, XTV7_Videos_Title FROM Xtrain.XTV7_2_Videos WHERE (XTV7_Categories_Sub_ID=@XTV7_Categories_Sub_ID) AND (XTV7_VideoAvailable = 1) AND (NOT (XTV7_Videos_Title IS NULL))", connection);
        adapter.SelectCommand.Parameters.AddWithValue("@XTV7_Categories_Sub_ID", countryID);

        DataTable dt = new DataTable();
        adapter.Fill(dt);

        RadComboBox3.DataTextField = "XTV7_Videos_Title";
        RadComboBox3.DataValueField = "XTV7_Videos_ID";
        RadComboBox3.DataSource = dt;
        RadComboBox3.DataBind();
    }
    #endregion

    #region RadComboBox SelectedIndex Changed
    protected void RadComboBox2_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
    {
        //BindData(Geek.XTV7_Categories_Sub_ID.ToString());
    }

    protected void RadComboBox3_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
    {
        BindData(Geek.XTV7_Videos_ID.ToString());
    }

    #endregion

    #region Bind RadGrid with Video data
    protected void BindData(string Video)
    {

        string sql = "";
        sql +=
            "SELECT  XTV7_Videos_ID, XTV7_Categories_Sub_ID, XTV7_Videos_Title FROM Xtrain.XTV7_2_Videos WHERE (XTV7_Videos_ID= " +
            Video + ") AND (XTV7_VideoAvailable = 1) AND (NOT (XTV7_Videos_Title IS NULL))";

        DataTable dt = _data.GetDataTable(sql);
        if (dt.Rows.Count > 0)
        {
            RadGrid1.DataSource = dt;
           RadGrid1.DataBind();
        }
        else
        {
            RadGrid1.DataSource = null;
            RadGrid1.DataBind();
        }
    }
    #endregion

    #region RadComboBox Requested Items
    protected void RadComboBox1_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
    {
        LoadContinents();
    }

    protected void RadComboBox2_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
    {
        // e.Text is the first parameter of the requestItems method
        // invoked in LoadCountries method
        LoadCountries(e.Text);
    }

    protected void RadComboBox3_ItemsRequested(object o, RadComboBoxItemsRequestedEventArgs e)
    {
        // e.Text is the first parameter of the requestItems method
        // invoked in LoadCities method
        LoadCities(e.Text);
    }
    #endregion

    #region Bind Image to Grid Value (Unrelated to Issue)
    protected string GetImageUrl(int item)
    {
        if (item.Equals(0))
        {
            return "~/App_Themes/XGIS/images/LessonLevels/Beginner.png";
        }
        else if (item.Equals(1))
        {
            return "~/App_Themes/XGIS/images/LessonLevels/Intermediate.png";
        }
        else if (item.Equals(2))
        {
            return "~/App_Themes/XGIS/images/LessonLevels/Advanced.png";
        }
        else item.Equals("");
        {
            return "~/App_Themes/XGIS/images/LessonLevels/clear.gif";
        }
    }
    #endregion
  
}
 
RadCombo-LostStatePostGridFilter.jpg (85 KB) (File Type Details) 
The issue with empty comboboxes
305796
 
 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:

<%@ Page Title="" Language="C#" MasterPageFile="~/App_Master/SingleColumnFixed.master"
    AutoEventWireup="true" CodeFile="xtv_VideoSelector.aspx.cs" Inherits="Applications_xTrain_Controls_xtv_VideoSelector" %>

<%@ Register Assembly="Telerik.Web.UI" TagPrefix="telerik" Namespace="Telerik.Web.UI" %>
<asp:Content ID="Content1" ContentPlaceHolderID="main" runat="Server">
    <div id="qsfexWrapper">
        <asp:Label ID="Label1" runat="server" AssociatedControlID="RadComboBox1">Category:</asp:Label>
        <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="300px" CssClass="ComboBox_Continents"
            OnClientSelectedIndexChanging="LoadCountries" OnItemsRequested="RadComboBox1_ItemsRequested" />
        <br />
        <asp:Label ID="Label2" runat="server" AssociatedControlID="RadComboBox2">Group:</asp:Label>
        <telerik:RadComboBox ID="RadComboBox2" runat="server" Width="400px" CssClass="ComboBox_Countries"
            OnClientSelectedIndexChanging="LoadCities" OnClientItemsRequested="ItemsLoaded"
            OnItemsRequested="RadComboBox2_ItemsRequested" EnableItemCaching="True" OnSelectedIndexChanged="RadComboBox2_SelectedIndexChanged" />
        <br />
        <asp:Label ID="Label3" runat="server" AssociatedControlID="RadComboBox3">Lesson:</asp:Label>
        <telerik:RadComboBox ID="RadComboBox3" runat="server" Width="500px" CssClass="ComboBox_Cities"
            OnClientItemsRequested="ItemsLoaded" OnItemsRequested="RadComboBox3_ItemsRequested"
            OnSelectedIndexChanged="RadComboBox3_SelectedIndexChanged" AutoPostBack="True"
            EnableItemCaching="True">
        </telerik:RadComboBox>
        <br />
        <br />
        <div>
            <telerik:RadGrid ID="RadGrid1" AllowPaging="True" runat="server" GridLines="None"
                Width="97%" AllowSorting="True">
            </telerik:RadGrid>
        </div>
        <script type="text/javascript">
            //global variables for the countries and cities comboboxes
            var countriesCombo;
            var citiesCombo;

            function pageLoad() {
                // initialize the global variables
                // in this event all client objects
                // are already created and initialized
                countriesCombo = $find("<%= RadComboBox2.ClientID %>");
                citiesCombo = $find("<%= RadComboBox3.ClientID %>");
            }

            function LoadCountries(combo, eventArqs) {
                var item = eventArqs.get_item();
                countriesCombo.set_text("Loading...");
                citiesCombo.clearSelection();

                // if a continent is selected
                if (item.get_index() > 0) {
                    // this will fire the ItemsRequested event of the
                    // countries combobox passing the continentID as a parameter
                    countriesCombo.requestItems(item.get_value(), false);
                }
                else {
                    // the -Select a continent- item was chosen
                    countriesCombo.set_text(" ");
                    countriesCombo.clearItems();

                    citiesCombo.set_text(" ");
                    citiesCombo.clearItems();
                }
            }

            function LoadCities(combo, eventArqs) {
                var item = eventArqs.get_item();

                citiesCombo.set_text("Loading...");
                // this will fire the ItemsRequested event of the
                // cities combobox passing the countryID as a parameter
                citiesCombo.requestItems(item.get_value(), false);
            }

            function ItemsLoaded(combo, eventArqs) {
                if (combo.get_items().get_count() > 0) {
                    // pre-select the first item
                    combo.set_text(combo.get_items().getItem(0).get_text());
                    combo.get_items().getItem(0).highlight();
                }
                combo.showDropDown();

            }

        </script>
    </div>
</asp:Content>

Answer : RadCombo Box loses Items on postback.

Well, you're going to have some unexpected behavior if you're using the *_SelectedIndexChanged() event to set the value of a control. At the very least you can expect unnecessary roundtrips through the code which may produce different values than you're actually expecting. Also, the general best practice is to use ViewState() to store values if you're not leaving a page, then use Session() to store values that need to be shared between pages. Give this, I would try something like the following... and please note this is completely untested. I don't have the Telerik controls to verify this, but this general framework will do what you're looking for (may require a little tweaking to perfect)...
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:

private const string CATEGORY = "CategoryId";
private const string SUBCATEGORY = "SubCategoryId";
private const string VIDEO = "VideoId";

protected void Page_Load(object sender, EventArgs e)
{
	if (IsPostBack) return;
	
	InitializeElements();
	LoadContinents();
	PopulateControls();
}

private static void InitializeElements()
{
	// are these true Session objects? Right now they appear to be simple variables.
	Geek.XTV7_Categories_ID = string.Empty;
	Geek.XTV7_Categories_Sub_ID = string.Empty;
	Geek.XTV7_Videos_ID = string.Empty;
	
	ViewState.Remove(CATEGORY);
	ViewState.Remove(SUBCATEGORY);
	ViewState.Remove(VIDEO);
	
    RadGrid1.Visible = false;
}

private void PopulateControls()
{
	RadGrid1.Visible = false;
	
	if(ViewState[CATEGORY] != null && !string.IsNullOrEmpty((string)ViewState[CATEGORY]))
	{
		var tempCategory = (string)ViewState[CATEGORY];
        LoadCountries(tempCategory);
        Label4.Text = tempCategory;
		
		var tempC1 = RadComboBox1.Items.FindByValue(tempCategory);
		if(tempC1 != null) tempC1.Selected = true;
	}
	
	if(ViewState[SUBCATEGORY] != null && !string.IsNullOrEmpty((string)ViewState[SUBCATEGORY]))
	{
		var tempSubCategory = (string)ViewState[SUBCATEGORY];
        LoadCities((tempSubCategory);
        Label5.Text = tempSubCategory;
		
		var tempC2 = RadComboBox2.Items.FindByValue(tempSubCategory);
		if(tempC2 != null) tempC2.Selected = true;
	}
	
	if(ViewState[VIDEO] != null && !string.IsNullOrEmpty((string)ViewState[VIDEO]))
	{
		var tempVideo = (string)ViewState[VIDEO];
        BindData(tempVideo);
        Label6.Text = tempVideo;
		
		var tempC3 = RadComboBox3.Items.FindByValue(tempVideo);
		if(tempC3 != null) tempC3.Selected = true;
	}
}

private void BindData(string videoId)
{
	// this line should be added before your RadGrid1.DataBind()
	RadGrid1.Visible = true;
		
	//keep your existing logic, but add the following block somewhere in this method...
	#region Session Variables
	Geek.XTV7_Categories_ID = (string)ViewState[CATEGORY];
	Geek.XTV7_Categories_Sub_ID = (string)ViewState[SUBCATEGORY];
	Geek.XTV7_Videos_ID = (string)ViewState[VIDEO];
	#endregion
}

#region RadComboBox SelectedIndex Changed
protected void RadComboBox1_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
{
	ViewState.Remove(CATEGORY);
	ViewState.Remove(SUBCATEGORY);
	ViewState.Remove(VIDEO);
	
	ViewState.Add(CATEGORY, RadComboBox1.SelectedValue.Trim());
	PopulateControls();
}

protected void RadComboBox2_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
{
	ViewState.Remove(SUBCATEGORY);
	ViewState.Remove(VIDEO);
	
	ViewState.Add(SUBCATEGORY, RadComboBox2.SelectedValue.Trim());
	PopulateControls();
}

protected void RadComboBox3_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
{
	ViewState.Remove(VIDEO);
	
	ViewState.Add(VIDEO, RadComboBox3.SelectedValue.Trim());
	PopulateControls();
}
Random Solutions  
 
programming4us programming4us