Questions on UI for ASP.NET AJAX Forum

3 answers

109 views

When bound to a webservice, how do I intercept whats going to show in the panel and show something custom?

I'm returning a serialized javascript object so I want to deserialize it, and just just ONE property of the object.

This is what I've been trying, but I think the cancel is stopping the content from showing in the panel?...or is this the wrong method?

function onSaveNotificationPanel_Updating(sender, args) {

var callbackresult = Sys.Serialization.JavaScriptSerializer.deserialize(args.get_content());

//Put the content into the panel

args.set_cancel(true);

args.set_content(callbackresult.Message);

}

Notification

answered on 28 Jul 2011

2 answers

154 views

Context menu items are not running code behind correctlly

my radscheduler functions as follows:

double left click on a date: bring up advancedinserttemplate

this is working fine...

rightclick: context menu: delete and edit

when I click edit it is supposed to bring up my advancededittemplate

this is working on my local machine but for some reason when I move it over to my server I click edit in the contextmenu, and it just reloads the calendar...

any help would be really appreciated.

Thank you

Scheduler

answered on 28 Jul 2011

1 answer

252 views

Can the notification control...

I can't seem to get a background of 100% width and height and a 30% opacity around the notification control. Is it even possible to do this? I realize it's just like a modal popup, but that's that point. I would love it if my notification controls could match the site more. Here is my code:

<style type="text/css">

.notificationContent

{

display: inline-block;

zoom: 1;

*display: inline;

width: 160px;

vertical-align: bottom;

}

.newBackground

{

width: 100%;

height: 100%;

background-color:#666;

filter:alpha(opacity=30);

opacity:0.7;

-moz-opacity:0.7;

}

</style>

<div class="newBackground"><telerik:RadNotification ID="RadNotification1" runat="server" Position="Center" Width="240" Height="100" OnClientShowing="OnClientShowing"

OnClientHidden="OnClientHidden" LoadContentOn="PageLoad" AutoCloseDelay="60000"

Title="Continue Your Session" TitleIcon="" Skin="Office2007"

EnableRoundedCorners="true" Animation="Fade" CssClass="newBackground">

<ContentTemplate>

<div class="notificationContent">

Time remaining:

<span id="timeLbl">60</span>

<telerik:RadButton Skin="Office2007" ID="continueSession" runat="server" Text="Continue Your Session" Style="margin-top: 10px;">

</telerik:RadButton>

</div>

</ContentTemplate>

</telerik:RadNotification></div>

Notification

answered on 28 Jul 2011

1 answer

79 views

Unable to set the tree view node properties on server side click event

Hi,

I have a treeview with parent node and child nodes. When clicked on any node, I need to have that node of the treeview expanded and clicked node to be disabled. The code below did not work.. I have tried setting a forecolor property to distinguish clicked node but that did not work either. Thanks for your help.

Public Sub RadTreeView1_NodeClick1(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTreeNodeEventArgs) Handles RadTreeView1.NodeClick

e.Node.Expanded = True

e.Node.Enabled = False

'e.Node.ForeColor = Drawing.Color.Aqua

If (e.Node.Value > 9000) Then

Session("Page1ToNavigate") = e.Node.Text

Response.Redirect("~/Page1.aspx")

Else

Session("Page2ToNavigate") = e.Node.Value

Response.Redirect("~/Page2.aspx")

End If

End Sub

<telerik:RadPanelItem Text="Company View" Expanded="false" Font-Bold="true">

<Items>

<telerik:RadPanelItem >

<ContentTemplate>

<telerik:RadTreeView ID="RadTreeView1" runat="server" DataSourceID="SqlDataSource4"

DataFieldID="UserID" DataFieldParentID="ParentID" DataValueField="UserID"

DataTextField="DisplayName" Skin="Outlook" >

</telerik:RadTreeView>

</ContentTemplate>

</telerik:RadPanelItem>

TreeView

answered on 28 Jul 2011

1 answer

96 views

Colour of the Appointment of Scheduler lost on Moving or Resizing

Hai,

I have a scheduler and I have assigned Specific colours for diffrent Appointment Types.

When I move or resize the appointment, I want to update the DB through the "Ajax Call".

Though the DB and the Schuduler is updated with the Ajax Action, the colour of the moved or resized Appointment is lost.

What could be the reason ?

Any help will be appreciated.

with regards,

Roshil

Scheduler

answered on 28 Jul 2011

1 answer

45 views

Customized control with radtreeview and radmenu

Hello Support,

I had a requirment to design a navigation control with radtreeview using XML.

The treeview should expand to 1st level by default, from 1st level onwards the further levels need to be displayed as radmenu ie., on hover of treeview node on 1st level, i should display rest of the child nodes in a rad menu.

Any idea how to achive this?

Regards,
Suresh.

TreeView

answered on 28 Jul 2011

8 answers

173 views

Relative Height

Hi,

we are having trouble with a treeview we are using in a navigation panel.
Since we need to support different client resolutions we have to use relative height for the control.
But if we put the tree control into a div or table with relative height and don't give the tree a absolute height, the tree will overlay the next element, disregarding the height of the parent container (in any other browser than IE).
We found a way to fix the height using javascript, but then the scroll position will not be retained.
I will post a simple example below. The commented out javascript was a try to fix the height on resizing.
What we need is a solution that will work with relative height, for all major browsers and will maintain the scroll position on expand.
Any ideas would be appreciated.

Cheers,
Michael

Aspx:

    
            <body onload="fixTreeHeights()" onresize="fixTreeHeights()"> 
        
                <form id="form1" runat="server"> 
        
                    <asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager> 
        
                    <div id="wrapperDiv" style="height:50%;border:1px solid black;"> 
        
                        <telerik:RadAjaxPanel ClientEvents-OnResponseEnd="fixTreeHeights()" ID="ajaxPanel" runat="server"> 
        
                            <telerik:RadTreeView style="overflow:auto;" 
        
                                OnNodeExpand="tree_NodeExpand" ID="tree" RetainScrollPosition="true" runat="server" Height="100%"> 
        
                            </telerik:RadTreeView> 
        
                        </telerik:RadAjaxPanel> 
        
                    </div> 
        
                    <div style="height:50%;"> 
        
                        Footer 
        
                    </div> 
        
                </form> 
        
                <script type="text/javascript"> 
        
                    function fixTreeHeights() { 
        
            //          var panelBar = document.getElementById("wrapperDiv"); 
        
            //          var documentdocumentTree = document.getElementById('<%= tree.ClientID %>'); 
        
            //          if (panelBar.offsetHeight > 0) { 
        
            //              var intCompensate = 0; 
        
            //              var documentdocumentObj = document.documentElement; 
        
            //              if ((window.opera) || (document.all && (!(document.compatMode && document.compatMode == "CSS1Compat")))) { 
        
            //                  documentdocumentObj = document.body; 
        
            //              } 
        
            //              documentTree.style.height = (parseInt(documentObj.clientHeight) - intCompensate) + "px"; 
        
            //              documentTree.style.width = (documentObj.clientWidth) + 'px'; 
        
            //              if (window.scrollDocumentTreeSelectedNode) scrollDocumentTreeSelectedNode(); 
        
            //          } 
        
                    }     
        
                </script>  
        
            </body>

and the codebehind:

    
            protected void Page_Load(object sender, EventArgs e) 
        
                    { 
        
                        if(!IsPostBack) 
        
                        { 
        
                            tree.Nodes.Clear(); 
        
                            for(var i = 0; i < 100; i++) 
        
                            { 
        
                                var node = new RadTreeNode 
        
                                               { 
        
                                                   Text = "node" + i, 
        
                                                   ExpandMode = TreeNodeExpandMode.ServerSide, 
        
                                                   Expanded = false, 
        
                                               }; 
        
                                tree.Nodes.Add(node); 
        
                            } 
        
                        } 
        
                    } 
        
                    protected void tree_NodeExpand(object sender, RadTreeNodeEventArgs e) 
        
                    { 
        
                        var node = new RadTreeNode {Text = "child", ExpandMode = TreeNodeExpandMode.ServerSide}; 
        
                        e.Node.Nodes.Add(node); 
        
                        e.Node.Expanded = true; 
        
                        e.Node.ExpandMode = TreeNodeExpandMode.ClientSide; 
        
                    }

TreeView

answered on 28 Jul 2011

1 answer

182 views

Change tabs on mouseover and on mouseout

Hi,
   I am having a RadTabstrip control with tabs and sub tabs. My need is, when mouse overing the tab, I want to display the sub tabs the following code works fine. During the mouseout event, if the focus is out of tabstrip control I need to select the tab which is selected at first(from server side).
But,
   var destElement = e.relatedTarget || e.toElement;

   " destElement" always returns undefined even I mouse over the sub tabs.

I am using the Telerik RadAjaxcontrols version 2011.2.712.35 .

<head runat="server">

<title></title>

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

<script type="text/javascript" language="javascript">

function SelectMyTab(sender, args) {

try {

var multiPageID = sender.get_multiPageID();

sender.set_multiPageID(null);

args.get_tab().select();

sender.set_multiPageID(multiPageID);

} catch (e) {

}

function UnSelectMyTab1(e) {

var tabStrip = $find('<%= RadTabStrip1.ClientID%>');

//Find the element which the mouse is over

var destElement = e.relatedTarget || e.toElement;

var initialTab = null;

if (tabStrip != null && destElement != null) {

if ($telerik.isDescendant(tabStrip.get_element(), destElement))

return;

initialTab = tabStrip.findTabByText("<%= MyTab %>");

//initialTab.unselect();

initialTab.selectParents();

}

</script>

</telerik:RadScriptBlock>

</head>

<body>

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

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

</asp:ScriptManager>

<div>

<telerik:RadTabStrip OnClientMouseOver="SelectMyTab" OnClientMouseOut="UnSelectMyTab1"

ID="RadTabStrip1" UnSelectChildren="true" Skin="Windows7" MultiPageID="RadMultiPage1"

runat="server">

<Tabs>

<telerik:RadTab Selected="true" Font-Bold="true" Text="Home">

</telerik:RadTab>

<telerik:RadTab Text="Products" Font-Bold="true">

<Tabs>

<telerik:RadTab Font-Bold="true" Text="Product1">

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="Product2">

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="Product3">

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="Product4">

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="Product5">

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="Product6">

</telerik:RadTab>

</Tabs>

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="Policy">

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="HelpDesk">

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="Reports">

</telerik:RadTab>

<telerik:RadTab Font-Bold="true" Text="License">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server">

<telerik:RadPageView ID="RadPageView1" Selected="true" runat="server">

<h1>

RadPageView</h1>

</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

</form>

</body>

Please suggest me in a right way.

Thanks,
Tamil.

TabStrip

answered on 28 Jul 2011

5 answers

361 views

How to insert item programmatically without saving all other items first

I'm trying to programmatically insert items in radgrid while having all items in edit mode.
The item needs to be inserted and saved immediately so more items can be inserted. Please see below sample project.

I noticed that raising both the InitInsertCommandName and PerformInsertCommandName commands will cause the grid's datasource to fire selecting event again. All changes the user made in the grid will be lost because of this.
Does this mean i have to update the entire grid first, before i insert the item? Is there a better way to achieve described functionality?

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

<%@ Register Assembly="Telerik.Web.UI, Version=2011.1.413.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"

Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register Assembly="Microsoft.Practices.Web.UI.WebControls, Version=2.0.2.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

Namespace="Microsoft.Practices.Web.UI.WebControls" TagPrefix="pp" %>

<!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></title>

</head>

<body>

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

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div>

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" CellSpacing="0"

DataSourceID="ObjectContainerDataSource1" GridLines="None" AllowAutomaticInserts="true"

AllowMultiRowEdit="true" OnItemCommand="RadGrid1_ItemCommand"

onprerender="RadGrid1_PreRender">

<MasterTableView DataKeyNames="Id" EditMode="InPlace" CommandItemDisplay="Top" >

<Columns>

<telerik:GridBoundColumn DataField="Id" DataType="System.Int32" FilterControlAltText="Filter Id column"

HeaderText="Id" SortExpression="Id" UniqueName="Id">

</telerik:GridBoundColumn>

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

HeaderText="Abc" SortExpression="Abc" UniqueName="Abc">

</telerik:GridBoundColumn>

<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="InitInsertAndPerformSave"

Text="ADD" UniqueName="AddColumn" ShowInEditForm="true">

<ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />

</telerik:GridButtonColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

<pp:ObjectContainerDataSource ID="ObjectContainerDataSource1" runat="server" DataObjectTypeName="RadGridAdd.A"

OnSelecting="ObjectContainerDataSource1_Selecting"

OnInserted="ObjectContainerDataSource1_Inserted"

onupdated="ObjectContainerDataSource1_Updated" />

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

using Microsoft.Practices.Web.UI.WebControls;

namespace RadGridAdd

{

[Serializable]

public class A

{

public int Id { get; set; }

public string Abc { get; set; }

}

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

{

protected void Page_Load(object sender, EventArgs e)

{

for (int i = 0; i < RadGrid1.PageSize; i++)

{

RadGrid1.EditIndexes.Add(i);

}

private List<A> Data

{

get { return ViewState["data"] as List<A>; }

set { ViewState["data"] = value; }

}

protected void ObjectContainerDataSource1_Selecting(object sender, ObjectContainerDataSourceSelectingEventArgs e)

{

if (Data == null)

{

List<A> la = new List<A>();

la.Add(new A() { Id = 1, Abc = "123" });

la.Add(new A() { Id = 2, Abc = "456" });

Data = la;

}

ObjectContainerDataSource1.DataSource = Data;

}

protected void ObjectContainerDataSource1_Inserted(object sender, ObjectContainerDataSourceStatusEventArgs e)

{

A new_a = (A)e.Instance;

Data.Add(new_a);

//RadGrid1.Rebind();

}

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)

{

if (e.CommandName == "InitInsertAndPerformSave")

{

GridCommandItem GCI = (GridCommandItem)RadGrid1.MasterTableView.GetItems(GridItemType.CommandItem)[0];

RadGrid1.MasterTableView.NoMasterRecordsText = string.Empty;

GCI.FireCommandEvent(RadGrid.InitInsertCommandName, String.Empty);

var gi = RadGrid1.MasterTableView.GetInsertItem();

gi.FireCommandEvent(RadGrid.PerformInsertCommandName, string.Empty);

}

protected void RadGrid1_PreRender(object sender, EventArgs e)

{

GridCommandItem GCI = (GridCommandItem)RadGrid1.MasterTableView.GetItems(GridItemType.CommandItem)[0];

GCI.Visible = false;

}

protected void ObjectContainerDataSource1_Updated(object sender, ObjectContainerDataSourceStatusEventArgs e)

{

}

Grid

answered on 28 Jul 2011

2 answers

130 views

Change Title & Text in RadGrid event

Hi, I can't change the property Text and Title in the event UpdateCommand in RadGrid.

protected void gvList_UpdateCommand(object sender, GridCommandEventArgs e)

{

RadNotification1.Title = "1";

RadNotification1.Text = "2";

RadNotification1.Show();

}



Is it a a problem of Ajax ?

Notification

answered on 28 Jul 2011