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

reload treeview in combobox

3 Answers 66 Views

ComboBox

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

TIGER asked on 02 Oct 2011, 05:20 AM

HI,
I'm trying to implement a treeview in a combobox. the treeview uses WEBService mode for loadondemand. It is required that the treeview would be initialized whenever the user close and reopen the dropdown of the combobox, since the user may have checked some checkboxes and expand a few tree nodes, so the treeview has to be returned to the initial state. I tried looking up documents, demos and example for a treeview client method that could result in a reloading of the treeview data items, nor could I find a client method from either treeview or combobox that could fire an event on the server side that I could reload the treeview from server side. Of cause there is the Ajaxrequest that could relay to the server side, but this is another problem. I tried to implement the ajaxrequest in the OnClientDropdownOpened and OnClientDropdownOpening event and run the webservice data load function on server side. but the dropdown opened with an empty treeview (a blank area the side of the treeview). I actually encountered same delima in previouse attemps to use ajaxrequest for tooltip and rotator, grid etc. I tried avoid using ajaxrequest because I luckily found the OnItemCommand event that meets the trigger in client and fire on server criteria. Could you advice if that is any way to reload treeview data triggered from client.
I would appreciate it very much if you could explain the problems with ajaxrequest and how to use it correctly.
Thank you very much!

<head runat="server">

<title></title>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

var arItems = new Array();

function shownText() {

if (arItems.length == 0)

return "";

var text = "";

var cnt = 0;

for (i = 0; i < arItems.length; i++)

if (arItems[i].code != "-") {

if (cnt > 0)

text += "+";

text += arItems[i].text;

cnt++;

}

return text;

}

function treeNodeChecked_handler(sender, args) {

var comboBox = $find("<%= cmbClass.ClientID %>");

var node = args.get_node()

if (args.get_node().get_checked()) {

var item = new Object();

var code = node.get_value().split('|');

item.code = code[1];

item.text = node.get_text();

arItems[arItems.length] = item;

}

else {

var txt = node.get_text();

for (i=0; i<arItems.length; i++) {

if (arItems[i].text == txt) {

arItems[i].code = "-";

arItems[i].text = "-";

break;

}

var showtext = shownText();

comboBox.set_text(showtext);

// comboBox.trackChanges();

// comboBox.get_items().getItem(0).set_text(showtext);

// comboBox.commitChanges();

// comboBox.hideDropDown();

// Call comboBox.attachDropDown if:

// 1) The RadComboBox is inside an AJAX panel.

// 2) The RadTreeView has a server-side event handler for the NodeClick event, i.e. it initiates a postback when clicking on a Node.

// Otherwise the AJAX postback becomes a normal postback regardless of the outer AJAX panel.

// comboBox.attachDropDown();

}

function StopPropagation(e) {

if (!e) {

e = window.event;

}

e.cancelBubble = true;

}

function dropdownOpened_handler(sender, eventArgs) {

var ajaxManager = $find("<%= cmbAjaxManager.ClientID %>");

ajaxManager.ajaxRequest("");

}

</script>

</telerik:RadCodeBlock>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

<telerik:RadComboBox ID="cmbClass" Runat="server" Skin="Windows7"

DropDownWidth="500px"

Height="300px" Width="250px" AutoPostBack="true" onload="cmbClass_Load"

ontextchanged="cmbClass_TextChanged" >

<ItemTemplate>

<div id="div_tv">

<telerik:RadTreeView ID="tvClass" runat="server" Height="400px" Width="500px" OnClientNodeChecked="treeNodeChecked_handler"

Skin="Windows7" CheckBoxes="True" CheckChildNodes="True">

<WebServiceSettings Path="CategoryComboBox.aspx" Method="GetClassItems" />

</telerik:RadTreeView>

</div>

</ItemTemplate>

<Items>

<telerik:RadComboBoxItem Text="" />

</Items>

</telerik:RadComboBox>

</div>

<telerik:RadAjaxManager runat="server" id="cmbAjaxManager" >

</telerik:RadAjaxManager>

</form>

</body>

I CAN LOAD THE TREEVIEW IN ONLOAD EVENT CORRECTLY

protected void cmbClass_Load(object sender, EventArgs e)

{

RadTreeView tv = cmbClass.Items[0].FindControl("tvClass") as RadTreeView;

LoadRootNodes(tv, TreeNodeExpandMode.WebService);

}

USING AJAXREQUEST FAILED TO DISPLAY THE TREEVIEW CORRECTLY

protected void cmbAjaxManager_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

RadTreeView tv = cmbClass.Items[0].FindControl("tvClass") as RadTreeView;

LoadRootNodes(tv, TreeNodeExpandMode.WebService);

}

3 Answers, 1 is accepted

answered on 05 Oct 2011, 02:34 PM

Demo.zip

Hi Tiger,

I have made a sample web page which shows how to return the initial state of the RadTreeView when the drop down list of the RadComboBox is re-opened.

Attached are the .aspx, .aspx.cs files and the Telerik.mdf file I am using as a data source.

I hope you find the sample page helpful.

Kind regards,
Ivana
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

answered on 10 Oct 2011, 03:43 PM

Hi Tiger,

To achieve the scenario in question server-side using an Ajax request, you could subscribe to the OnClientDropDownClosing event and call the AjaxRequest event handler of the AjaxManager, where the RadTreeView inside the RadComboBox could be rebind to its data source.

Here is an example of how it could be achieved:

function OnClientDropDownClosing(sender, args) {

var ajaxManager = $find("RadAjaxManager1");

ajaxManager.ajaxRequest("");

}

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="cmbClass" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="cmbClass">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="cmbClass" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadComboBox ID="cmbClass" runat="server" Skin="Windows7" DropDownWidth="500px"

OnClientDropDownClosing="OnClientDropDownClosing" Height="300px" Width="250px"

AutoPostBack="true" ontextchanged="cmbClass_TextChanged">

<ItemTemplate>

<div id="div_tv">

<telerik:RadTreeView ID="tvClass" runat="server" Height="400px" Width="500px" OnClientNodeChecked="treeNodeChecked_handler"

Skin="Windows7" CheckBoxes="True" CheckChildNodes="True">

<WebServiceSettings Path="LoadOnDemandTreeViewInCombo_ReturnInitialStateWhenDropDownOpened.aspx"

Method="GetProducts" />

</telerik:RadTreeView>

</div>

</ItemTemplate>

<Items>

<telerik:RadComboBoxItem Text="" />

</Items>

</telerik:RadComboBox>

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

(cmbClass.Items[0].FindControl("tvClass") as Telerik.Web.UI.RadTreeView).Nodes.Clear();

LoadRootNodes(cmbClass.Items[0].FindControl("tvClass") as Telerik.Web.UI.RadTreeView, TreeNodeExpandMode.WebService);

}

For more information about the RadAjaxManager, you could refer to the online documentation on our website at the following link: RadAjax: RadAjaxManager.

Hope this helps.

Regards,
Ivana
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

reload treeview in combobox

3 Answers, 1 is accepted