This is a migrated thread and some comments may be shown as answers.

[Solved] Load On Demand for RadcomboBox in Radrid

4 Answers 173 Views

Grid

This is a migrated thread and some comments may be shown as answers.

AratiS asked on 25 Jan 2013, 04:14 AM

I have a RadGrid in a user control and have Radcombo boxes in Radgrid's Items Template. I want to use Load on demand to populate the combobox in 3rd column of the grid (ddlElementEdit in code below). The data in this column will be populated based on the value selected in the comboboxes in 1st column (ddlETypeEdit in code below) and 2nd column (ddlCOIDEdit) of the grid. Please let me know how can I implement this. Please find the markup of the grid below.

<telerik:RadGrid ID="RadGrid1" GridLines="None" runat="server" AllowAutomaticDeletes="True"
EnableViewState="true" AllowAutomaticInserts="True" Skin="Outlook" ShowHeader="true"
CssClass="GridStyle" AllowPaging="true" PageSize="10"
OnDeleteCommand="RadGrid1_DeleteCommand" OnPageIndexChanged="RadGrid1_PageIndexChanged"
Height="100%" HorizontalAlign="Center"
OnItemDataBound="RadGrid1_ItemDataBound"
onitemcommand="RadGrid1_ItemCommand" ShowGroupPanel="true">
<PagerStyle AlwaysVisible="true" />
<ItemStyle HorizontalAlign="Center" />
<AlternatingItemStyle HorizontalAlign="Center" />
<MasterTableView CommandItemDisplay="Bottom" EnableViewState="true"
NoMasterRecordsText="" EditMode="InPlace" HorizontalAlign="Center" AutoGenerateColumns="False"
Caption="Manual Assignment" TableLayout="Auto" GroupLoadMode="Server">

<GroupByExpressions>
<telerik:GridGroupByExpression>
<SelectFields>
<telerik:GridGroupByField FieldName="Seq"
HeaderValueSeparator=":"></telerik:GridGroupByField>
</SelectFields>
<GroupByFields>
<telerik:GridGroupByField FieldName="Seq" SortOrder="Ascending"></telerik:GridGroupByField>
</GroupByFields>
</telerik:GridGroupByExpression>
</GroupByExpressions>

<Columns>
<telerik:GridButtonColumn ButtonType="ImageButton" ConfirmDialogType="RadWindow"
ConfirmText="Delete this Element?" CommandName="Delete" Text="Delete" ConfirmTitle="Delete"
UniqueName="DeleteColumn" ItemStyle-Width="50px" HeaderStyle-Width="50px">
<ItemStyle CssClass="MyImageButton" HorizontalAlign="Center" />
</telerik:GridButtonColumn>
<telerik:GridTemplateColumn ItemStyle-Width="125px" UniqueName="ManETypeCol"
HeaderText="Type" HeaderStyle-Width="125px">
<ItemTemplate>
<telerik:RadComboBox ID="ddlETypeEdit" runat="server" AutoPostBack="true" DataSourceID="SqlDataSource2"
DataTextField="Description" DataValueField="ID" Width="110px" EnableViewState="false"
OnSelectedIndexChanged="ddlETypeEdit_SelectedIndexChanged" NoWrap="true" OnDataBound="ddlETypeEdit_DataBound">
</telerik:RadComboBox>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn ItemStyle-Width="225px" UniqueName="ManCOIDColumn" HeaderText="Location" HeaderStyle-Width="225px">
<ItemTemplate>
<%--<telerik:RadComboBox ID="ddlCOIDEdit" runat="server" AutoPostBack="true" Width="200px"
DataSourceID="SqlDataSource3" DataTextField="CODescription" DataValueField="coID"
OnSelectedIndexChanged="ddlCOIDEdit_SelectedIndexChanged" EnableViewState="false" NoWrap="true" OnDataBound="ddlCOIDEdit_DataBound">
</telerik:RadComboBox>--%>
<telerik:RadComboBox ID="ddlCOIDEdit" runat="server" AutoPostBack="true" Width="200px"
OnSelectedIndexChanged="ddlCOIDEdit_SelectedIndexChanged" EnableViewState="false" NoWrap="true" OnDataBound="ddlCOIDEdit_DataBound">
</telerik:RadComboBox>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn ItemStyle-Width="225px" UniqueName="ManElementColumn"
HeaderText="Element" HeaderStyle-Width="225px">
<ItemTemplate>
<telerik:RadComboBox ID="ddlElementEdit" runat="server" AutoPostBack="true" Width="200px"
EnableViewState="false" OnSelectedIndexChanged="ddlElementEdit_SelectedIndexChanged" NoWrap="true" OnDataBound="ddlElementEdit_DataBound"
EnableLoadOnDemand="true" ShowMoreResultsBox="true" EnableVirtualScrolling="true" OnItemsRequested="ddlElementEdit_ItemsRequested">
</telerik:RadComboBox>

</ItemTemplate>
</telerik:GridTemplateColumn>

4 Answers, 1 is accepted

answered on 25 Jan 2013, 07:36 AM

Hi,

Following is the sample code I tried to achieve your scenario.

ASPX:

<telerik:GridTemplateColumn>

<ItemTemplate>

<telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanged="LoadCustomerID"

EnableLoadOnDemand="true" OnItemsRequested="RadComboBox1_ItemsRequested">

</telerik:RadComboBox>

<telerik:RadComboBox ID="RadComboBox2" runat="server" EnableLoadOnDemand="true" OnClientSelectedIndexChanged="LoadOrderID"

OnItemsRequested="RadComboBox2_ItemsRequested">

</telerik:RadComboBox>

<telerik:RadComboBox ID="RadComboBox3" runat="server" EnableLoadOnDemand="true" OnItemsRequested="RadComboBox3_ItemsRequested">

</telerik:RadComboBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

JS:

<script type="text/javascript">

var countriesCombo;

var citiesCombo;

function pageLoad() {

var grid = $find("<%= RadGrid1.ClientID %>");

var masterTableView = grid.get_masterTableView();

var item = masterTableView.get_dataItems()[0];

countriesCombo = item.findControl("RadComboBox2");

citiesCombo = item.findControl("RadComboBox3");

}

function LoadCustomerID(sender, eventArgs) {

var item = eventArgs.get_item();

countriesCombo.set_text("Loading...");

citiesCombo.clearSelection();

if (item.get_index() > 0) {

countriesCombo.requestItems(item.get_value(), false);

}

else {

countriesCombo.set_text(" ");

countriesCombo.clearItems();

citiesCombo.set_text(" ");

citiesCombo.clearItems();

}

function LoadOrderID(sender, eventArgs) {

var item = eventArgs.get_item();

citiesCombo.set_text("Loading...");

citiesCombo.requestItems(item.get_value(), false);

}

function ItemsLoaded(sender, eventArgs) {

if (sender.get_items().get_count() > 0) {

sender.set_text(sender.get_items().getItem(0).get_text());

sender.get_items().getItem(0).highlight();

}

sender.showDropDown();

}

</script>

C#:

protected void RadComboBox1_ItemsRequested(object sender, Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs e)

{

string txt = e.Text;

RadComboBox RadComboBox1 = (RadComboBox)sender;

String ConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;

SqlConnection conn = new SqlConnection(ConnString);

SqlDataAdapter adapter = new SqlDataAdapter("SELECT * from Customers WHERE CompanyName LIKE @text + '%'", ConnString);

adapter.SelectCommand.Parameters.AddWithValue("@text", txt);

DataTable dt = new DataTable();

adapter.Fill(dt);

RadComboBox1.DataTextField = "CustomerID";

RadComboBox1.DataValueField = "CustomerID";

RadComboBox1.DataSource = dt;

RadComboBox1.DataBind();

RadComboBox1.Items.Insert(0, new RadComboBoxItem("- Select.... -"));

}

protected void RadComboBox2_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)

{

string continentID = e.Text;

RadComboBox RadComboBox2 = (RadComboBox)sender;

String ConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;

SqlConnection conn = new SqlConnection(ConnString);

SqlDataAdapter adapter = new SqlDataAdapter();

adapter.SelectCommand = new SqlCommand("SELECT * FROM Orders WHERE CustomerID=@CustomerID ORDER By CustomerID", conn);

adapter.SelectCommand.Parameters.AddWithValue("@CustomerID", continentID);

DataTable dt = new DataTable();

adapter.Fill(dt);

RadComboBox2.DataTextField = "OrderID";

RadComboBox2.DataValueField = "OrderID";

RadComboBox2.DataSource = dt;

RadComboBox2.DataBind();

}

protected void RadComboBox3_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)

{

string countryID = e.Text;

RadComboBox RadComboBox3 = (RadComboBox)sender;

String ConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;

SqlConnection conn = new SqlConnection(ConnString);

SqlDataAdapter adapter = new SqlDataAdapter();

adapter.SelectCommand = new SqlCommand("SELECT * FROM [Order Details] WHERE OrderID =@OrderID ORDER By ProductID", conn);

adapter.SelectCommand.Parameters.AddWithValue("@OrderID", countryID);

DataTable dt = new DataTable();

adapter.Fill(dt);

RadComboBox3.DataTextField = "ProductID";

RadComboBox3.DataValueField = "ProductID";

RadComboBox3.DataSource = dt;

RadComboBox3.DataBind();

}

Hope this helps.

Regards,
Princy.

answered on 28 Jan 2013, 07:14 PM

Thanks for the Sample code Princy.
I have another issue now, when the radgrid loads I need to display a pre-selected item in these combo boxes.When I enable load on demand feature and insert the pre-selected item in the ItemDataBound event using the below code, I have to erase the pre-selected text in order to fire the Load on demand. Is there any other way I can display the pre-selected item in the combo box without having the user to delete it to enable load on demand?.

protected void ManualGrid_ItemDataBound(object sender, GridItemEventArgs e)

{

try

{

if (e.Item is GridDataItem)

{

GridDataItem manComboItem = e.Item as GridDataItem;

RadComboBox ddlObj3 = (RadComboBox)manComboItem.FindControl("ddlElementEdit");

ManualGridDT = (DataTable)ViewState["Data"];

DataRow dr=null;

if (ManualGridDT.Rows.Count > 0)

{

int iRowcount = iCount + (sender as RadGrid).CurrentPageIndex * (sender as RadGrid).PageSize;

if (ManualGridDT.Rows.Count > iRowcount)

{

dr = ManualGridDT.Rows[iRowcount];

if (!(dr["ElementID"].ToString() == "" && dr["ElementDesc"].ToString() == ""))

{

RadComboBoxItem preselecteditem = new RadComboBoxItem();

preselecteditem.Value = dr["ElementID"].ToString();

preselecteditem.Text = dr["ElementDesc"].ToString();

ddlObj3.Items.Insert(0, preselecteditem);

ddlObj3.SelectedIndex = 0;

}

answered on 30 Jan 2013, 02:29 PM

Hello Arati,

To achieve your goal you can perform the request for items manually at client-side. This can be done if you set the EnableLoadOnDemand to "false" and then handle the OnClientDropDownOpening and call combo.requestItems() function:

function OnClientDropDownOpening(sender, eventArgs)

{

sender.requestItems("", false);

}

Greetings,
Pavlina
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.