Questions on UI for ASP.NET AJAX Forum

3 answers

237 views

RadTreeView-expand()/collapse is not working as expected.

Hi,

I am trying to achive the below behaviour in RadTreeView at client side.

When uncheck the select All1, all the child nodes should collapse upto First Level which is "Contract1 and Contract2" in my case but presently it is collapsing upto root level "Select All 1" which is incorrect.

For your covenience, I have attached the snap shot and the piece of working code, please have a look and help me to find out the way to achieve this required behaviour.

PFA - radreeview_desiredbehaviour.png

Hrml and Javascript Markup -

<script type="text/javascript">

function OnClientNodeClicked(sender, eventArgs) {

var tree = $find("<%=RadTreeView1.ClientID %>");

var currentNode = eventArgs.get_node();

var currentNodeText = currentNode.get_textElement().innerHTML;

var allNodes = currentNode.get_allNodes();

var allNodesCount = allNodes.length;

if (currentNode.get_checked())

{

for (var i = 0; i < allNodes.length; i++)

{

allNodes[i].set_checked(true);

currentNode.set_checked(true);

allNodes[i].expand();

currentNode.expand()

}

else if (!currentNode.get_checked())

{

if (currentNodeText == "Select All 1")

{

for (var i = 0; i < allNodesCount; i++)

{

if (allNodes[i].get_level() == 1)

{

allNodes[i].expand();

currentNode.expand()

}

else

{

allNodes[i].set_checked(false);

currentNode.set_checked(false);

allNodes[i].collapse();

currentNode.collapse();

}

else

{

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

allNodes[i].set_checked(true);

currentNode.set_checked(true);

}

</script>

<telerik:RadTreeView ID="RadTreeView1" runat="server" EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedSkins="false" CheckBoxes="true" OnClientNodeChecked="OnClientNodeClicked">

</telerik:RadTreeView>

Server Side Code -

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

RenderNodes();

}

protected void RenderNodes()

{

List<Contract> contracts = GetData();

RadTreeNode selectAllContracts = new RadTreeNode("Select All 1");

RadTreeView1.Nodes.Add(selectAllContracts);

foreach (Contract contract in contracts)

{

RadTreeNode contracNode = new RadTreeNode(contract.Text);

AddPlanNode(contract, contracNode);

selectAllContracts.Nodes.Add(contracNode);

}

RadTreeView1.ExpandAllNodes();

RadTreeView1.CheckAllNodes();

}

private static void AddPlanNode(Contract contract, RadTreeNode contracNode)

{

RadTreeNode selectAllPlans = new RadTreeNode("Select All 2");

contracNode.Nodes.Add(selectAllPlans);

foreach (Plan plan in contract.Plans)

{

RadTreeNode planNode = new RadTreeNode(plan.Text);

selectAllPlans.Nodes.Add(planNode);

AddAdapterNode(plan, planNode);

}

private static void AddAdapterNode(Plan plan, RadTreeNode planNode)

{

RadTreeNode selectAllAdapters = new RadTreeNode("Select All 3");

planNode.Nodes.Add(selectAllAdapters);

foreach (Adapter adapter in plan.Adapters)

{

RadTreeNode adapterNode = new RadTreeNode(adapter.Text);

selectAllAdapters.Nodes.Add(adapterNode);

}

#region Dummy Data

private List<Contract> GetData()

{

Plan plan1 = new Plan { Text = "Plan1", Adapters = new List<Adapter> { new Adapter { Text = "Adapter1-1" }, new Adapter { Text = "Adapter1-2" } } };

Plan plan2 = new Plan { Text = "Plan2", Adapters = new List<Adapter> { new Adapter { Text = "Adapter2-1" }, new Adapter { Text = "Adapter2-2" } } };

Contract contract1 = new Contract { Text = "Contract1", Plans = new List<Plan> { plan1, plan2 } };

Plan plan3 = new Plan { Text = "Plan3", Adapters = new List<Adapter> { new Adapter { Text = "Adapter3-1" }, new Adapter { Text = "Adapter3-2" } } };

Plan plan4 = new Plan { Text = "Plan4", Adapters = new List<Adapter> { new Adapter { Text = "Adapter4-1" }, new Adapter { Text = "Adapter4-2" } } };

Contract contract2 = new Contract { Text = "Contract2", Plans = new List<Plan> { plan3, plan4 } };

List<Contract> contracts = new List<Contract> { contract1, contract2 };

return contracts;

}

public class Contract

{

public string Text { get; set; }

public List<Plan> Plans { get; set; }

}

public class Plan

{

public string Text { get; set; }

public List<Adapter> Adapters { get; set; }

}

public class Adapter

{

public string Text { get; set; }

}

#endregion

}

TreeView

answered on 24 Sep 2013

1 answer

95 views

Caching Issue in Telerik File Manager?

Is there a way that we can append a query string to an image, when telerik load the images? I have a caching issue. Please let me know how to fix this

General Discussions

answered on 24 Sep 2013

3 answers

135 views

Persisting imageUrl/cssClass through PostBack

Hi,

I have a bit of javascript to populate my RadListBox from WebService when the page is displayed for the first time. Based on some properties in the returned data I want to add imageUrl and/or cssClass to the RadListBoxItems i create. This is what I've come up with:

-aspx:

    
            <telerik:RadListBox ID="_rlbBrokers" runat="server" Skin="Default" PersistClientChanges="true"
 
                    SelectionMode="Multiple" height="200" />

-javascript:

    
            refreshBrokers: function() {
 
                    var me = this;
 
                    var brokersList = me.get_brokersList();
 
                    this.clearBrokers();
 
                    this.clearWarehouses();
 
                    Ewita.WebServices.WarehousesService.GetBrokerItems(this._get_includedBrokerTypes(), this._get_includedWarehouseTypes(), this._permission, this._selectionMode, function(result) {
 
                        var brokersList = me.get_brokersList();
 
                        var items = brokersList.get_items();
 
                        brokersList.trackChanges();
 
                        var selected = false;
 
                        for (var i = 0; i < result.length; ++i) {
 
                            var broker = result[i];
 
                            var brokerItem = new Telerik.Web.UI.RadListBoxItem();
 
                            brokerItem.set_text(broker.Name);
 
                            brokerItem.set_value(broker.ID);
 
                            items.add(brokerItem);
 
                            if (broker.IsSelected) {
 
                                brokerItem.select();
 
                                selected = true;
 
                            }
 
                            var li = brokerItem.get_element();
 
                            if (!broker.IsUserPermitted && !broker.IsActive) {
 
                                brokerItem.set_imageUrl("/images/inactive_not_permitted.jpg");
 
                                Sys.UI.DomElement.addCssClass(li, "inactive_not_permitted");
 
                            }
 
                            else if (!broker.IsActive) {
 
                                brokerItem.set_imageUrl("/images/inactive.jpg");
 
                                Sys.UI.DomElement.addCssClass(li, "inactive");
 
                            }
 
                            else if (!broker.IsUserPermitted) {
 
                                brokerItem.set_imageUrl("/images/not_permitted.jpg");
 
                                Sys.UI.DomElement.addCssClass(li, "not_permitted");
 
                            }
 
                        }
 
                        brokersList.commitChanges();
 
                        if (selected) {
 
                            me._brokersSelect();
 
                        }
 
                    });
 
                },

It all works perfect until I click a button which causes a postback. I've set PersistClientChanges to true and items, and items selection is preserved, but any css class and image url set in javascript disappears.

Is there a way to get around this problem?

I'm using Telerik Controls for ASP.NET AJAX v.2009.2.906.20 (tested also on v.2009.02.826.35), Opera 10.0 browser, .NET Framework 3.5 and Visual Studio 2008.

Thanks in advance.

regards

Paweł Aszklar

ListBox

answered on 24 Sep 2013

1 answer

98 views

Custom edit links and separate pages

I have read through the documentation, but what I want to do doesn't seem to be covered...which seems a little strange as not everyone wants to use AJAX or a window to edit records.

What I would like to is is have custom edit/delete links in each grid row that open up 2 separate (webforms) pages for editing and deleting records respectively. I do NOT want to use a custom control or to use rad window but would like to load a completely enw page. How do I do this within rad Grid?

Many thanks
Simon

Grid

answered on 24 Sep 2013

4 answers

252 views

ExportToExcel worksheet name

Simple question :)

Is it possible to assign a name to the Excel file worksheet created via RadGrid.MasterTableView.ExportToExcel() ? I've noticed that the sheet automatically gets the same name as the given filename, but I would like to be able to change that.

Grid

answered on 24 Sep 2013

1 answer

194 views

Html.Telerik().Editor() enabling disabling issue

Hi,

I have used multiple telerik editors in a table row and on click of a radio button I am required to disable the editor and enable it on the click of another radio button.
For disabling the editor I have tried various methodologies like adding "disabled" and "readonly" attributes(both attributes together and also singularly) but this has not helped me to disable it completely. This does disable the header section of the editor but not its content area which I mainly need.

<% Html.Telerik().Editor()

.Name("txtArea")

.Tools(tools => tools

.Clear()

.Bold().Italic().Underline()

.JustifyLeft().JustifyCenter().JustifyRight()

.InsertUnorderedList().InsertOrderedList()

.Indent().Outdent()

).HtmlAttributes(new

{

style = "display:inline;height:50;width:500;",

@readonly="readonly",

@disabled="disabled"

})

.ClientEvents(events => events.OnChange("change"))

.Value(HttpUtility.HtmlDecode(EnglishWording))

.Render();

%>

However on partial postback of the table(html table containing the editor) rendering the editor again results in the disabling of the editor(its content area section) and I am again not able to return to its enabled state - by removing any readonly or disabled attributes. Kindly let me know what would be the correct way of disabling and enabling the editor.

Editor

answered on 24 Sep 2013

3 answers

202 views

Autocomplete column

I want to be able to have the size column, have an autocomplete feature to where they would start typing and it would automatically show them the options that they can choose from, and they would need to choose one of them. Also i want to have the Description column also have an autocomplete feature but i want its options to be loaded based on whatever is chosen for the size column. Is this possible? if so, how would i go about doing something like this?

protected void Page_Load(object sender, EventArgs e)

{

if (Session["GridData"] == null)

{

DataTable table = GetTable();

Session.Add("GridData", table);

}

DefineGridStructure();

}

private void DefineGridStructure()

{

RadGrid grid = new RadGrid();

grid.ID = "RadGrid1";

grid.NeedDataSource += new GridNeedDataSourceEventHandler(grid_NeedDataSource);

grid.AutoGenerateEditColumn = true;

grid.AutoGenerateDeleteColumn = true;

grid.AllowAutomaticInserts = false;

grid.Width = Unit.Percentage(100);

grid.PageSize = 15;

grid.AllowPaging = true;

grid.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric;

grid.AutoGenerateColumns = false;

grid.MasterTableView.Width = Unit.Percentage(100);

grid.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.TopAndBottom;

grid.AllowAutomaticDeletes = false;

grid.AllowAutomaticUpdates = false;

grid.InsertCommand +=grid_InsertCommand;

grid.MasterTableView.DataKeyNames = new string[] { "RowNumber" };

GridBoundColumn boundColumn = new GridBoundColumn();

boundColumn.DataField = "RowNumber";

boundColumn.HeaderText = "RowNumber";

boundColumn.ReadOnly = true;