Questions on UI for ASP.NET AJAX Forum

1 answer

123 views

Add New Node Context Menu - Capture Text

I have a context menu where I add new nodes. I used this example to create the context menu:http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/contextmenu/defaultcs.aspx. My issue is that when a user add's a new node I need to capture what the user names the node, so that I can add it to the database. Currently the code uses javascript to set the node as editable on Page Load.

How do I go about capturing the text value the user inputs when adding a new node?

JAVASCRIPT

<script type="text/javascript">

//<!--

function onClientContextMenuShowing(sender, args) {

var treeNode = args.get_node();

treeNode.set_selected(true);

//enable/disable menu items

setMenuItemsState(args.get_menu().get_items(), treeNode);

}

function onClientContextMenuItemClicking(sender, args) {

var menuItem = args.get_menuItem();

var treeNode = args.get_node();

menuItem.get_menu().hide();

switch (menuItem.get_value()) {

case "Rename":

treeNode.startEdit();

break;

case "addLocation":

break;

}

//this method disables the appropriate context menu items

function setMenuItemsState(menuItems, treeNode) {

for (var i = 0; i < menuItems.get_count(); i++) {

var menuItem = menuItems.getItem(i);

switch (menuItem.get_value()) {

case "Rename":

formatMenuItem(menuItem, treeNode, 'Rename "{0}"');

break;

case "addLocation":

if (treeNode.get_parent() == treeNode.get_treeView()) {

menuItem.set_enabled(false);

}

else {

menuItem.set_enabled(true);

}

break;

}

//formats the Text of the menu item

function formatMenuItem(menuItem, treeNode, formatString) {

var nodeValue = treeNode.get_value();

if (nodeValue && nodeValue.indexOf("_Private_") == 0) {

menuItem.set_enabled(false);

}

else {

menuItem.set_enabled(true);

}

var newText = String.format(formatString, extractTitleWithoutMails(treeNode));

menuItem.set_text(newText);

}

//checks if the text contains (digit)

function hasNodeMails(treeNode) {

return treeNode.get_text().match(/$[\d]+$/ig);

}

//removes the brackets with the numbers,e.g. Inbox (30)

function extractTitleWithoutMails(treeNode) {

return treeNode.get_text().replace(/\s*$[\d]+$\s*/ig, "");

}

//-->

</script>

ASPX

<telerik:RadAjaxLoadingPanel ID="LocationsLoadingPanel" runat="server" Transparency="30" Skin="Vista"></telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxPanel ID="LocationsPanel" runat="server" LoadingPanelID="LocationsLoadingPanel">

<telerik:RadTreeView ID="LocationsTreeView" runat="server" EnableDragAndDrop="true" MultipleSelect="true" EnableDragAndDropBetweenNodes="true"

AllowNodeEditing="true" OnContextMenuItemClick="LocationsTreeView_ContextMenuItemClick" OnClientContextMenuItemClicking="onClientContextMenuItemClicking"

OnClientContextMenuShowing="onClientContextMenuShowing" OnNodeEdit="LocationsTreeView_NodeEdit">

<ContextMenus>

<telerik:RadTreeViewContextMenu ID="MainContextMenu" runat="server">

<Items>

<telerik:RadMenuItem Value="Rename" Text="Rename ..." Enabled="true" ImageUrl="images/icons/edit_48.png"

PostBack="false">

</telerik:RadMenuItem>

<telerik:RadMenuItem IsSeparator="true">

</telerik:RadMenuItem>

<telerik:RadMenuItem Value="addLocation" Text="Add Location" ImageUrl="images/icons/add_16.png">

</telerik:RadMenuItem>

</Items>

<CollapseAnimation Type="none" />

</telerik:RadTreeViewContextMenu>

</ContextMenus>

</telerik:RadTreeView>

</telerik:RadAjaxPanel>

C#

protected void LocationsTreeView_ContextMenuItemClick(object sender, RadTreeViewContextMenuEventArgs e)

{

RadTreeNode clickedNode = e.Node;

switch (e.MenuItem.Value)

{

case "addLocation":

RadTreeNode newLocation = new RadTreeNode(string.Format("Add Location"));

newLocation.Selected = true;

newLocation.ImageUrl = clickedNode.ImageUrl;

clickedNode.Nodes.Add(newLocation);

clickedNode.Expanded = true;

//update the number in the brackets

if (Regex.IsMatch(clickedNode.Text, unreadPattern))

clickedNode.Text = Regex.Replace(clickedNode.Text, unreadPattern, "(" + clickedNode.Nodes.Count.ToString() + ")");

clickedNode.Font.Bold = true;

//set node's value so we can find it in startNodeInEditMode

newLocation.Value = newLocation.GetFullPath("/");

startNodeInEditMode(newLocation.Value);

// Add Location Record to Database

string ParentID = clickedNode.Value;

Guid ID = Guid.NewGuid();

string LocationID = ID.ToString();

string Name = newLocation.Text;

LocationsTreeView_AddLocation(ParentID, LocationID, Name);

break;

case "Delete":

clickedNode.Remove();

break;

}

private void startNodeInEditMode(string nodeValue)

{

//find the node by its Value and edit it when page loads

string js = "Sys.Application.add_load(editNode); function editNode(){ ";

js += "var tree = $find(\"" + LocationsTreeView.ClientID + "\");";

js += "var node = tree.findNodeByValue('" + nodeValue + "');";

js += "if (node) node.startEdit();";

js += "Sys.Application.remove_load(editNode);};";

RadScriptManager.RegisterStartupScript(Page, Page.GetType(), "nodeEdit", js, true);

}

// Used when adding a Location

protected void LocationsTreeView_AddLocation(string ParentID, string LocationID, string Name)

{

// Set parameters for insert

locationDataSource.InsertParameters["LocationID"].DefaultValue = LocationID;

locationDataSource.InsertParameters["ParentID"].DefaultValue = ParentID;

locationDataSource.InsertParameters["Name"].DefaultValue = Name;

// locationDataSource.Insert();

}

// Used when renaming a Location

protected void LocationsTreeView_NodeEdit(object sender, RadTreeNodeEditEventArgs e)

{

// Update Name on client side

e.Node.Text = e.Text;

// Update Name in database

locationDataSource.UpdateParameters["Name"].DefaultValue = e.Text;

locationDataSource.UpdateParameters["ID"].DefaultValue = e.Node.Value;

locationDataSource.Update();

}

TreeView

answered on 24 Jun 2011

3 answers

98 views

Columns loose their width

I have a radgrid and because I wanted the expand button to be shown on the right most column part of the grid, i set in mastertableview the attribute ExpandCollapseColumn-Visible="false" and added a new GridTemplateColumn with a button that performs the expand command.

<telerik:GridTemplateColumn ItemStyle-Width="27px" ItemStyle-Height="46px" Resizable="false"                 >
            <ItemTemplate>
                <asp:Button CommandName="ExpandCollapse" runat="server" ID="EC"   CssClass="expandbutton" />
            </ItemTemplate>
        </telerik:GridTemplateColumn>
Obviously in code behind, I intercept my command and the nestedviewtemplate in my case is shown correctly on expand. So far so good, expand and collpase work fine, the problem is that on expand, the columns of my grid (outer grid) loose their size(some become smaller, same become larger than in the all collapsed state). I tried setting Resizable=false on all GridTemplateColumn, but no result....
Any ideas? Can you please help?

Thank you,
Marina

Grid

answered on 24 Jun 2011

2 answers

130 views

update parent from usercontrol with ajaxmgr

I have a raddockzone in a page. Each dock has a usercontrol in its contenttemplate. If I make a change in the usercontrol, how can I update the parent raddockzone that is in the parent page?

Ajax

answered on 24 Jun 2011

3 answers

191 views

Combo box size too large

The RadCombox I am using has only two values "AND" and "OR". How do I make the combo box shorter?
Please have a look at the attached screen shot and the corresponding code block below:

<telerik:RadComboBox ID="drpFilterType" runat="server" AutoPostBack="true" EnableViewState="true"

Width="100px" Skin="Default" MarkFirstMatch="True">

<Items>

<telerik:RadComboBoxItem Text="AND" Selected="true" Value="AND"/>

<telerik:RadComboBoxItem Text="OR" Value="OR"/>

</Items>

</telerik:RadComboBox>

ComboBox

answered on 24 Jun 2011

2 answers

91 views

Listbox backword button

Hi All,

Is it possible to remove the listbox backword button. i want the button that move from left list box to right listbox, but I don't want the button that moves from right listbox to left. Is it possible to remove that particular button. Also, once the user moves the item from left listbox to right listbox, I don't want the items to disappaer from the left listbox.

Can I acheive this.

Please let me know

Any help will be appreciated.

ListBox

answered on 24 Jun 2011

1 answer

54 views

Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Editor / Uploading images and files to a Shared Drive Uploading images and files to a Shared Drive IIS7

I cannot get image listing to show in the Image Manager of the Editor control. It just shows nothing. I verified that my virtual directory is correct because it is showing image listing in IIS7 Server Manager.

I linked it to a virtual directory however it does not work when using a virtual directory link to a remote server directory. If I link it to a local folder on the web hosting server it works fine.

I followed the instructions on this link: http://www.telerik.com/support/kb/aspnet-ajax/editor/uploading-images-and-files-to-a-shared-drive.aspx
however the instructions seems specific to IIS6.

Is these a different technique used for IIS7? Is this a permissions problem?

General Discussions

answered on 24 Jun 2011

3 answers

343 views

RadDateTimePicker not working client-side

Hello,

I'm having issues when setting the selected and minimum dates on a RadDateTimePicker client-side.

I've two RadDateTimePickers, one for setting the starting datetime (dtpBegin) and other for the ending (dtpEnd) declared as follows:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">

......

<telerik:RadDateTimePicker ID="dtpBegin" runat="server">

<ClientEvents OnDateSelected="startDateTimeSelected" OnPopupClosing="startDateTimePopupClosing" />

</telerik:RadDateTimePicker>

<telerik:RadDateTimePicker ID="dtpEnd" runat="server">

<ClientEvents OnPopupClosing="endDateTimePopupClosing" />

</telerik:RadDateTimePicker>

</telerik:RadAjaxPanel>

<telerik:RadScriptBlock runat="server">

<script type="text/javascript">

var endDateTimePickerId = "<%= dtpEnd.ClientID %>";

</script>

</telerik:RadScriptBlock>

When selecting the starting datetime, I'd like to set the selected value as minimum on the ending control and also would like to set a valid value for that control (say the starting datetime plus 1 minute). To do that, I've the following code client-side:

function startDateTimeSelected(sender, e) {

if (e.get_newDate != undefined && e.get_newDate() != null) {

var startDate = e.get_newDate();

var endDateTimePicker = $find(endDateTimePickerId);

endDateTimePicker.set_minDate(e.get_newDate());

if (endDateTimePicker.get_timeView().getTime() < startDate) {

var timeView = timePicker.get_timeView();

timeView.setTime(newDate.getHours(), newDate.getMinutes() + 1, newDate.getSeconds(), newDate);

}

Now, even though the calls to set_minDate and setTime are not throwing any errors, the selected date on dtpEnd is not changed neither is the minimum date time set. One thing I find weird is that after setting the time on dtpEnd, if I run on Firebug's console:

$find(endDateTimePickerId).get_timeView().getTime()

I get null.

And regarding the minimum date, if I run on Firebug's console:

$find(endDateTimePickerId).get_minDate()

I get the expected value (even though the calendar allows to select any value).
One extra thing that might be useful for troubleshooting is that I'm also setting the MinDate server-side for these two controls (setting it to DateTime.Now to forbid users selecting past datetimes).

Thanks a lot,
Diego.

Calendar

answered on 24 Jun 2011

4 answers

97 views

Template Manager - Resize iframe

Hi.
I´ve got some problem to get my template manager dialog to fit my needs.
As below I set with / height of the dialog from code-behind, but i also need to set new width / height to the iframe that holds "preview".

protected override void OnInit(EventArgs e)

{

base.OnInit(e);

this.Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete);

}

void Page_PreRenderComplete(object sender, EventArgs e)

{

Telerik.Web.UI.DialogDefinition TemplateManager = bloggEditor.GetDialogDefinition("TemplateManager");

TemplateManager.Height = Unit.Pixel(500);

TemplateManager.Width = Unit.Pixel(1020);

}

How can i access Template Manager dialog iframe "templateIframe" to set my own width / height?

/Mattias

Editor

answered on 24 Jun 2011

1 answer

118 views

Rad editor not insert html tag in database

Hi

I use editor insert text ( Example : <b>abcdefghr </b> ) I was format "Bold" for Text. But when i insert in Database, It remove tag HTML become "abcdefghr" not Bold.

Please help

Editor

answered on 24 Jun 2011

1 answer

86 views

Ajax (mgr_AjaxRequest) on close of a rad Pop up

Hi there ,
Can i call a Ajax request on the content page when i close the rad pop up window from the 'X' on the pop up window and not a button on the pop up window ?
Please advise if anyone has done this
Thanks

Ajax

answered on 24 Jun 2011