Questions on UI for ASP.NET AJAX Forum

0 answers

108 views

Hi,

I have the following problem:

I developed a holiday module for a selfdeveloped Intranet, where you can display holidays of different countries either in a RadCalendar or in a RadGrid.
You can change between the displaymodes with a RadioButtonList with the Items Calendar and List.
The Calendar is surrounded by a div-tag called divCalendar, the List by a div-tag called divList.
I use Skin-Files called Calendar.skin with the SkinID = "DefaultRadCalendar" and GridView.skin with the SkinID = "DefaultRad" with for the controls and I bind them with the controls via the SkinID-property. Everything gets displayed correctly. To change between the displaymodes without a PostBack, I use the RadAjaxManagerProxy. When I change from Calendar to List, everything is allright - the RadGrid gets displayed correctly. When I change back to Calendarmode, the RadCalendar gets displayed incorrectly. It is a mix of an integrated Skin (f.e. Sunset - I use some integrated Skins for other Controls) and my own Skin. When I do a PostBack, everything gets displayed correctly, it's only in the combination with Ajax. It doesn't matter, if I disable embedded Skins, Basestylesheets or AjaxSkinRendering in my RadCalendar or not, appearance is the same. Here is some Code:

AjaxManager

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="CalendarList_RadiobuttonList">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="chkCalendar" />

<telerik:AjaxUpdatedControl ControlID="chkList" />

<telerik:AjaxUpdatedControl ControlID="divCalendar" />

<telerik:AjaxUpdatedControl ControlID="divList" />

<telerik:AjaxUpdatedControl ControlID="CalendarList_RadiobuttonList" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadComboBox1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="divCalendar" />

<telerik:AjaxUpdatedControl ControlID="divList" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="divCalendar">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="divCalendar" />

<telerik:AjaxUpdatedControl ControlID="RadCalendar1"/>

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="divList">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="divList" />

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy

<div ID="divCalendar" runat="server" class="calendar">

<telerik:RadCalendar ID="RadCalendar1" SkinID="DefaultRadCalendar"

AutoPostBack="true" runat="server" CultureInfo="de-AT"

Width="100%" EnableMultiSelect="False" FocusedDate="2000-01-01"

OnDayRender="RadCalendar1_DayRender"

OnSelectionChanged="RadCalendar1_SelectionChanged"

RangeMaxDate="2099-12-31" RangeMinDate="2000-01-01"

SelectedDate="" ViewSelectorText="x"

OnDefaultViewChanged="RadCalendar1_DefaultViewChanged">

<CalendarDayTemplates></CalendarDayTemplates>

</telerik:RadCalendar>

</div>

It's not possible to send you the module, because it's part of the Intranet and needs other components to run.

Thanks in advance

Martin Holoubek

Calendar

asked on 31 May 2012

1 answer

451 views

[Solved] Telerik RadGrid And Filtering _Replaced Null Values_ Issue

i have a BooundColumn in my telerik RadGrid like below :

<telerik:GridBoundColumn DataField="Status" FilterControlAltText="Filter Status column"

HeaderText="Status" SortExpression="Status" UniqueName="Status"

FilterImageToolTip="Filter">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />

</telerik:GridBoundColumn>

Status Column in my sql server 2008 database can accept null values and RadGrid shows them with an empty string.
so i replaced those Empty Strings with the codes below ?

protected void grdSMS_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridDataItem)

{

GridDataItem item = (GridDataItem)e.Item;

if (item["Status"].Text == " ")

{

item["Status"].ForeColor = Color.Red;

item["Status"].Text = "Empty";

}

now my problem is i can not filter Empty Columns.
how can i fix this issue?

Note:
In the codes upper if (item["Status"].Text == " ") Correction Isif (item["Status"].Text == " ")

thanks in advance

Grid

answered on 31 May 2012

4 answers

112 views

RadEditor with EventHandler within RadWindow crashes on Browser refresh

I have a RadEditor in a tooltip which is opened from a RadWindow. When the RadEditor is Enabled, I have added some event handlers to restrict the number of characters entered in the RadEditor (LimitCharacter code from http://www.telerik.com/community/forums/aspnet-ajax/chart/charector-limit-in-rad-editor.aspx). If the browser is refreshed while the editor is in Enabled mode, I get the error:

“Unable to get value of the property 'removeChild': object is null or undefined” .
This seems to happen after $telerik.removeExternalHandler is called (what I saw in the debug).
I’m not sure what I need to do to handle this, but I have not been able to find a solution. I use the exact same code but without the RadWindow, and it works.
Please let me know if you have any ideas as to what the problem might be.

RadEditor definition:
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="LimitCharacters" OnClientPasteHtml="OnClientPasteHtml" MaxTextLength="100" EditModes="All"

ToolsFile="~/EditorToolBar/Tools.xml" Width="600px" Height="100px" OnInit="RadEditor1_Init" ForeColor="Black" Font-Bold="true" Font-Size="Small" Content='<%# (Eval("Notes") == DBNull.Value || Eval("Notes") == "" || Eval("Notes").ToString() == "null") ? "" : Eval("Notes") %>'>

<telerik:EditorCssFile Value="~/Styles/RadEditorStyleOverrides.css" />

</CssFiles>

</telerik:RadEditor>

RadWindow definition (in a different file):
<telerik:RadWindow ID="RadWindow_ConsRecDocs" runat="server" Behaviors="Move,Resize,Close"

NavigateUrl="ConsRecDocs.aspx" Skin="Windows7" Width="900" Height="700" AutoSize="false">

</telerik:RadWindow>

Ajax

answered on 31 May 2012

1 answer

88 views

Implementing OrgChart to Telerik Report OR OrgChart save as image

Hi,

I'm showing all employers in a webpage by orgchart. This works fine. But now I have to show it on telerik report page. How can i do that?

If I cant do that, let me know how can I show all employers hierarchie on telerik report page?

Thanks..

OrgChart

answered on 31 May 2012

1 answer

152 views

Auto close window

What should i do to automatically close the rad window after 10 seconds?

Window

answered on 31 May 2012

7 answers

249 views

Control values on xmlHttpCallback

The scenario using version 2010_1_309:

I have a left pane with various controls that are used to filter the result of the main pane.

The main pane has a XmlHttpPanel with a ListView inside.

When I have chosen the values in my filter pane and click a "filter" button, it calls this javascript:

                    function search(sender, args) {         
                        var panel = $find("<%=RadXmlHttpPanelProperties.ClientID %>");         
                        panel.set_value('');         
                        return false;         
                    }         

(By the way, I can't call "set_value()" without a parameter - that cause a javascript error in Telerik javascript files

                    this.get_value() is undefined         
            [Break on this error] },_getCallbackArgument:function(){var b=this.get_value().replace(/"/g,'\\"');          

)

That initiates the xmlHttpPanel_ServiceRequest as it should.

But I can't read the values of my page controls from within that service request, shouldn't I be able to do that?
If the page has "Viewstate=false" then the selected value of a DropdownBox is empty, if the page viewstate is one, then the selected value is always the default value.

Thanks

Claus

XmlHttpPanel

answered on 31 May 2012

1 answer

86 views

Get the "EmptyMessage" value from a different control from Javascript function

Hello to everyone,

I can get the EmptyMessage from the sender by sender.get_emptyMessage() method, but if I want to get the emptyMessage of a different control , how can I do?

Thanks for your tips.

Alessio Simoni.

Example:

function getEmptyTextOfCtrl2 (sender, eventArgs) {

var emptyMessage_ctrl1 = sender.get_emptyMessage();

var emptyMessage_ctrl2 = ????

}

<telerik:RadNumericTextBox ID="ctrl1" runat="server" EmptyMessage="654321" >

<ClientEvents OnValueChanging="getEmptyTextOfCtrl2" />

</telerik:RadNumericTextBox>

<telerik:RadNumericTextBox ID="ctrl2" runat="server" EmptyMessage="123456" >

</telerik:RadNumericTextBox>

Input

answered on 31 May 2012

1 answer

206 views

Drag and Drop from RadGrid to RadTreeView: a better solution

I am trying to implement this functionality, and have referred to the example shown here:

http://www.telerik.com/community/code-library/aspnet-ajax/general/drag-and-drop-between-radgrid-and-radtreeview.aspx

This makes sense, however it is not a valid solution. I have modified the tree view population code to populate it like this:

root1
child1
child2
root2
child1
child2

If I drop a row from the grid on root2, child2 it shows up in root1, child2. I have chosen unique values for the nodes, as well as adding unique identifiers as attributes, however the approach taken, using the node's text as the identifier of the node onto which the grid row is dropped, does not handle ambiguous node names.

This post was originally intended as a request for help, but in looking at the code, a simple solution is to give the nodes unique values, and using those to find the node, using FindNodeByValue. See the code snippets for a modified version of Default.aspx and Default.aspx.cs

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

</head>

<body>

<script type="text/javascript">

/* <![CDATA[ */

var gridId = "<%= RadGrid1.ClientID %>";

//Handles the OnNodeDropping event of RadTreeView.

function onNodeDropping(sender, args)

{

var dest = args.get_destNode();

if (dest)

{

//Handle dropping on a Node if required.

}

else

{

dropOnHtmlElement(args);

}

//Handles the case when a Node is dropped onto an HTML element.

function dropOnHtmlElement(args)

{

if(droppedOnGrid(args))

return;

}

//Checks whether a Node is being dropped onto the RadGrid with ID: 'gridId'.

//If not, the OnClientDropping event is canceled.

function droppedOnGrid(args)

{

var target = args.get_htmlElement();

while(target)

{

if(target.id == gridId)

{

args.set_htmlElement(target);

return;

}

target = target.parentNode;

}

args.set_cancel(true);

}

/* ]]> */

</script>

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

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

</asp:ScriptManager>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadTreeView1" />

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadTreeView1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadTreeView1" />

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

<div style="float: left; width: 20%;">

<telerik:RadTreeView

runat="server"

Skin="Vista"

ID="RadTreeView1"

Width="200px"

OnClientMouseOver="onNodeMouseOver"

OnClientMouseOut="onNodeMouseOut"

OnClientNodeDropping="onNodeDropping"

EnableDragAndDrop="True"

LoadingStatusPosition="BeforeNodeText" OnNodeDrop="RadTreeView1_NodeDrop">

<CollapseAnimation Duration="100" Type="OutQuint" />

<ExpandAnimation Duration="100" Type="OutQuart" />

</telerik:RadTreeView>

</div>

<div style="float: left; width: 80%;">

<telerik:RadGrid runat="server" Skin="Vista" ID="RadGrid1" OnItemCreated="RadGrid1_ItemCreated"

GridLines="None" AllowMultiRowSelection="True" OnNeedDataSource="RadGrid1_NeedDataSource">

<MasterTableView>

<RowIndicatorColumn Visible="False">

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn Resizable="False" Visible="False">

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowMouseOver="onRowMouseOver" />

</ClientSettings>

</telerik:RadGrid>

</div>

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">

<script type="text/javascript">

/* <![CDATA[ */

var currentDraggedRow = null;

var dataSetIndex = null;

var visualClue = null;

var currentNode = null;

function onNodeMouseOver(sender, args)

{

//gets the node upon mousing over the node

currentNode = args.get_node();

}

function onNodeMouseOut(sender, args)

{

//resets the currentNode value upon mousing out

currentNode = null;

}

function onRowMouseOver(sender, args)

{

//gets the grid to be draggaed from

grid = sender;

}

function onMouseDown(e, element, dataIndex)

{

//Store the currently dragged row (TR)

currentDraggedRow = element;

//Store the data key value of the dragged data grid row

dataSetIndex = dataIndex;

//Attach events to support rendering the visual clue

$addHandler(document, "mousemove", mouseMove);

$addHandler(document, "mouseup", mouseUp);

//Prevent selection of text while dragging

//Internet Explorer

$addHandler(document, "selectstart", preventSelect);

//Other browsers

if (e.preventDefault)

e.preventDefault();

}

function preventSelect(e)

{

e.preventDefault();

}

function createVisualClue()

{

var div = document.createElement("div");

div.style.position = "absolute";

div.className = $get("<%= RadGrid1.ClientID %>").className;

div.innerHTML = String.format("<table class='{0}'><tr>{1}</tr></table>",

$get("<%= RadGrid1.MasterTableView.ClientID %>").className,

currentDraggedRow.innerHTML);

return div;

}

function mouseMove(e)

{

if (!visualClue)

{

visualClue = createVisualClue();

document.body.insertBefore(visualClue, document.body.firstChild);

}

visualClue.style.left = e.clientX + 10 + "px";

visualClue.style.top = e.clientY + 10 + "px";

}

function mouseUp(e)

{

if (visualClue)

{

//Remove the visual clue

visualClue.parentNode.removeChild(visualClue);

visualClue = null;

}

//Detach the events supporting the visual clue

$removeHandler(document, "mousemove", mouseMove);

$removeHandler(document, "mouseup", mouseUp);

//Detach the event preventing selection in Internet Explorer

$removeHandler(document, "selectstart", preventSelect);

if (currentNode && currentDraggedRow)

{

//Store the value of the node on which the mouse is over

$get("<%=TreeNodeText.ClientID%>").value = currentNode.get_text();

$get("<%=TreeNodeValue.ClientID%>").value = currentNode.get_value();

//Store the data key value of the dragged data grid row

$get("<%= DataSetIndex.ClientID %>").value = dataSetIndex;

//Initiate AJAX request to update the page

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

ajaxManager.ajaxRequest();

}

/* ]]> */

</script>

</telerik:RadScriptBlock>

<asp:HiddenField runat="server" ID="DataSetIndex" />

<asp:HiddenField runat="server" ID="TreeNodeValue" />

<asp:HiddenField runat="server" ID="TreeNodeText" />

</div>

</form>

</body>

</html>

and

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

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

{

//Creates a datatable and adds it to the session to be used later .

//The datatable is added to the session as it is being modified during the Drag And Drop operations.

//Therefore, the "data" object always contains the proper rows and columns.

private DataTable DataSource

{

get

{

DataTable data = (DataTable)Session["DataSource"];

if (data == null)

{

data = new DataTable();

data.Columns.Add("Column1");

data.Columns.Add("Column2");

data.Rows.Add(new object[] { "item1", "value1" });

data.Rows.Add(new object[] { "item2", "value2" });

data.Rows.Add(new object[] { "item3", "value3" });

Session["DataSource"] = data;

}

return data;

}

protected override void OnLoad(EventArgs e)

{

if (!Page.IsPostBack)

{

RadTreeNode node = new RadTreeNode("root1", "rootValue1");

RadTreeView1.Nodes.Add(node);

RadTreeNode childnode = new RadTreeNode("child1", "childValue1");

childnode.Attributes.Add("ID", "1");

node.Nodes.Add(childnode);

childnode = new RadTreeNode("child2", "childValue2");

childnode.Attributes.Add("ID", "2");

node.Nodes.Add(childnode);

node = new RadTreeNode("root2", "rootValue2");

RadTreeView1.Nodes.Add(node);

childnode = new RadTreeNode("child1", "childValue3");

childnode.Attributes.Add("ID", "3");

node.Nodes.Add(childnode);

childnode = new RadTreeNode("child2", "childValue4");

childnode.Attributes.Add("ID", "4");

node.Nodes.Add(childnode);

}

base.OnLoad(e);

}

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item is GridDataItem)

{

GridDataItem dataItem = e.Item as GridDataItem;

//Registers the onmousedown event to be fired upon selecting a grid's row and passes arguments to the event handler

e.Item.Attributes["onmousedown"] = string.Format("onMouseDown(event, this,{0})", dataItem.DataSetIndex);

e.Item.Style["cursor"] = "move";

}

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)

{

//This ajax request is fired upon dropping a grid's row onto a TreeNode

//Finds the node, onto which the grid's row should be dropped, by text using the previously stored value of the "TreeNodeText" hidden field

//RadTreeNode destinationNode = RadTreeView1.FindNodeByText(TreeNodeText.Value);

RadTreeNode destinationNode = RadTreeView1.FindNodeByValue(TreeNodeValue.Value);

DataRow sourceRow = DataSource.Rows[Convert.ToInt32(DataSetIndex.Value)];

//Creates a new node using the respective grid's row information. The text of the TreeNode is set to be the value of the needed cell in the grid's datasource

RadTreeNode sourceNode = new RadTreeNode((string)sourceRow["Column1"], (string)sourceRow["Column2"]);

destinationNode.Nodes.Add(sourceNode);

destinationNode.Expanded = true;

//Removes the row that has been dropped onto the treeview

DataSource.Rows.Remove(sourceRow);

//Rebinds the grid to address the changes made to its datasource

RadGrid1.Rebind();

}

protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)

{

RadGrid1.DataSource = DataSource;

}

/// <summary>

/// Fires when a Node is dropped onto the <see cref="RadTreeView"/> 'RadTreeView1'.

/// </summary>

/// <param name="sender">The 'RadTreeView1' object.</param>

/// <param name="e">Event arguments.</param>

protected void RadTreeView1_NodeDrop(object sender, RadTreeNodeDragDropEventArgs e)

{

if (e.DestDragNode != null)

{

//Handle when dropped on another Node.

}

else if (e.HtmlElementID == RadGrid1.ClientID)

{

DataTable dt = (DataTable)Session["DataSource"];

foreach (RadTreeNode node in e.DraggedNodes)

{

AddRowToGrid(dt, node);

AddRowsToGrid(dt, node.Nodes);

node.Remove();

}

/// <summary>

/// Adds rows to the specified Data Table for

/// every Node in the specified list of nodes and its child Nodes.

/// </summary>

/// <param name="dt">The <see cref="DataTable"/> object where rows are added.</param>

/// <param name="nodes">A <see cref="RadTreeNodeCollection"/> for Nodes.</param>

private void AddRowsToGrid(DataTable dt, RadTreeNodeCollection nodes)

{

foreach (RadTreeNode node in nodes)

{

AddRowToGrid(dt, node);

AddRowsToGrid(dt, node.Nodes);

}

/// <summary>

/// Adds a new Row to the specified <see cref="DataTable"/> using data

/// from the specified <see cref="RadTreeNode"/> object and

/// binds the <see cref="RadGrid"/> 'RadGrid1'.

/// </summary>

/// <param name="dt"></param>

/// <param name="node"></param>

private void AddRowToGrid(DataTable dt, RadTreeNode node)

{

string[] values = { node.Text, node.Value };

dt.Rows.Add(values);

RadGrid1.DataSource = dt;

RadGrid1.DataBind();

}

Steve

Grid

answered on 31 May 2012

1 answer

39 views

Requirement - Make TabStrip Design Like AjaxToolkit

perhaps the tabstrip cluster of controls can be made to design like ajaxtoolkit but i have not figured out how to achieve it. your tool would be so much easier to use if tabs were selectable at design time, thus clearing the clutter of having each pagview visible at once....it is a pain to scroll and hunt for items across tabs with the telrik control.

TabStrip

answered on 31 May 2012

1 answer

195 views

RadGrid with Details table

I am working on a master/detail type grid project. The parent level tables are bound to the grid using a "NeedsDatasource" event. The DetailViewTableBind event is used to bind data to the child items. In reality the parent data row contains a list of objects which represent the data being displayed in the child data.

Visually everything looks like it is working until I press the "edit" button on a element of the child table. When I do this the grid appears to refresh and the "details" vanish. The grid is left in update mode with no details visible and no ability to cancel the update mode.

As an example,

header row 1
(edit) detail row 1-1
(edit) detail row 1-2
header row 2
(edit) detail row 2-1
(edit) detail row 2-1

If I click on the edit button on "detail row 2" (on header row 1), the display refreshes as follows:

header row 1
header row 2
(edit) detail row 2-1
(edit) detail row 2-2

Visually the two detail rows present on header row 1 vanish.

The parent grid is setup with allow automatic update/inserts/deletes. The HierarchyLoadMode is set to Client.

Can anyone give me a clue what I am overlooking? I need to be able to edit the child "table" without the parent rows being in edit mode.

Any suggestions would be appreciated.

Grid

answered on 31 May 2012