Questions on UI for ASP.NET AJAX Forum

1 answer

55 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

185 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

194 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

373 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

145 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

9 answers

90 views

RadSpell leaving bits behind in document

Hello.

We're currently working on a mailmerge app and are keeping metadata within each letter we create (to tell the app what the name of the letter should be, what the header and footer logos should be, the email details, etc.). An example is below:

<blink emailbody="<P>
<\P>" fromline="eg@example.com" toline="[[~Email]]" subject="t/o ref diff to cc" footer="http://earnpsqldb01/letters/logos/[[brand]]Footer.html" header="http://earnpsqldb01/letters/logos/[[brand]]Header.html" ver="1.0" name="t_o ref diff to cc for [[~Title]] [[~Name]] (ID [[~ID]])"><br />

When the user runs a spell check on the letter we find that it is leaving bits of data behind - this is breaking the PDF and email functions. See below:

<blink emailbody="<P>
<\P>" fromline="eg@example.com" toline="[[~Email]]" subject="t/o ref diff to cc" footer="<span class='RadEWrongWord' id='RadESpellError_0'>http</span>://<span class='RadEWrongWord' id='RadESpellError_1'>earnpsqldb01</span>/letters/logos/[[brand]]Footer.<span class='RadEWrongWord' id='RadESpellError_2'>html</span>" header="<span class='RadEWrongWord' id='RadESpellError_3'>http</span>://<span class='RadEWrongWord' id='RadESpellError_4'>earnpsqldb01</span>/letters/logos/[[brand]]Header.<span class='RadEWrongWord' id='RadESpellError_5'>html</span>" ver="1.0" name="t_o ref diff to cc for [[~Title]] [[~Name]] (ID [[~ID]])"><br />

Is there any way to fix the spellcheck so that it removes ALL trace of itself?

Warren

Editor

answered on 28 Jul 2011

5 answers

244 views

AsyncUpload in UserControl

Im trying to setup a AsyncUpload in a UserControl based on the example here .The upload adds a file to the RadUploadTemp folder but never refreshes the image and does not add the image to the permanent folder. Any help would be great.

~Curt

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TEST.ascx.cs" Inherits="Controls_TEST" %>
<telerik:RadAjaxManagerProxy ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="Thumbnail" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>
<script type="text/javascript">
function fileUploaded(sender, args) {
$find('RadAjaxManager1').ajaxRequest();
$telerik.$(".invalid").html("");
sender.deleteFileInputAt(0);
}
function validationFailed(sender, args) {
$telerik.$(".invalid")
.html("Invalid extension, please choose an image file");
sender.deleteFileInputAt(0);
}
</script>
<div class="upload-panel">
<telerik:RadBinaryImage runat="server" Width="200px" Height="150px" ResizeMode="Fit"
ID="Thumbnail" ImageUrl="~/Images/1.jpg" AlternateText="Thumbnail" CssClass="binary-image" />
<span class="invalid"></span>
<telerik:RadAsyncUpload runat="server" ID="AsyncUpload1" MaxFileInputsCount="1" AllowedFileExtensions="jpeg,jpg,gif,png,bmp"
TargetFolder="~/Images" TemporaryFolder="~/Images/RadUploadTemp" TemporaryFileExpiration="00:00:05">
<Localization Select="Choose Avatar" />
</telerik:RadAsyncUpload>
</div>

AsyncUpload

answered on 28 Jul 2011

1 answer

75 views

OnButtonClick Doesn't Update After LoadXml

I have a project where I need to have a dynamic ribbon, that is, a ribbon that shows completely different items based on context. The way I accomplish this is through the LoadXml method on the ribbon. This works, but there are two side-effects. One is that the OnButtonClick event returns whatever button was in that position originally, regardless of what's there now, and sometimes there is a jscript index out of bounds error, probably for the same reason.

The version of RadControls is 2011.2.712.40.
The OS is Win7 Ent, SP1.
The browser is IE9 (9.0.8112.16421).
Preferred language is C#.

There's a good amount of code. I'll include what I think you'll need to repro. I see the "Attach Your Files" link at the bottom, but the forum instructions say that you don't support attachments.

Here's Default.aspx:

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

<!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 id="Head1" runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

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

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

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" />

<telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Office2007" />

<telerik:RadAjaxPanel runat="server" ID="RibbonPanel">

<telerik:RadRibbonBar runat="server" ID="Ribbon" SelectedTabIndex="0" OnButtonClick="RibbonButtonClick">

<telerik:RibbonBarTab Text="Project">

<telerik:RibbonBarGroup Text="Project">

<Items>

<telerik:RibbonBarButton Text="Settings" Size="Large" Value="PROJECT_SETTINGS" />

<telerik:RibbonBarButton Text="Closeout Assumptions" Size="Large" Value="CLOSEOUT_ASSUMPTIONS" />

<telerik:RibbonBarButton Text="View Solution" Size="Large" Value="CLOSEOUT_SOLUTION" />

</Items>

</telerik:RibbonBarGroup>

<telerik:RibbonBarGroup Text="Actions">

<Items>

<telerik:RibbonBarButton Text="Duplicate Project" Size="Large" Value="PROJECT_DUPLICATE" />

</Items>

</telerik:RibbonBarGroup>

<telerik:RibbonBarGroup Text="Navigation">

<Items>

<telerik:RibbonBarButton Text="Portfolio" Size="Large" Value="PORTFOLIO_LIST" />

</Items>

</telerik:RibbonBarGroup>

</telerik:RibbonBarTab>

</telerik:RadRibbonBar>

</telerik:RadAjaxPanel>

</form>

</body>

</html>

Here's Default.aspx.cs:

using System;

using System.Collections.Generic;

using System.Linq;

using Tel = Telerik.Web.UI;

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

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void RibbonButtonClick(object sender, Tel.RibbonBarButtonClickEventArgs e)

{

string message = string.Format("Button {0} was clicked.", e.Button.Text);

string details = string.Format("Group: {0}, Index: {1}", e.Group.Text, e.Index);

SlimCommand command = _slimCommands.Where(item => item.Key == e.Button.Value).First();

Ribbon.LoadXml(command.Ribbon);

//ContentPanel.Attributes.Add("src", Page.MapPath(command.Destination));

}

protected static SlimCommand[] _slimCommands =

{

new SlimCommand("PORTFOLIO_LIST", "~/View/ListView.aspx", Ribbons.HomeMenu),

new SlimCommand("PORTFOLIO_DASHBOARD","~/View/Dashboard.aspx", Ribbons.HomeMenu),

new SlimCommand("PORTFOLIO_BENCHMARK","~/View/Benchmark.aspx", Ribbons.HomeMenu),

new SlimCommand("PROJECT_NEW", "~/View/ListView.aspx", Ribbons.HomeMenu),

new SlimCommand("PROJECT_DELETE", "~/View/ListView.aspx", Ribbons.HomeMenu),

new SlimCommand("PROJECT_EDIT", "~/View/Project.aspx", Ribbons.ProjectMenu),

new SlimCommand("PROJECT_SETTINGS", "~/View/Settings.aspx", Ribbons.ProjectMenu),

new SlimCommand("PROJECT_DUPLICATE", "~/View/ListView.aspx", Ribbons.HomeMenu),

new SlimCommand("CLOSEOUT_ASSUMPTIONS", "~/View/CloseoutAssumptions.aspx", Ribbons.ProjectMenu),

new SlimCommand("CLOSEOUT_SOLUTION", "~/View/ViewSolution.aspx", Ribbons.ProjectMenu),

};

protected class SlimCommand

{

public SlimCommand(string key, string destination, string ribbon)

{

this.Key = key;

this.Destination = destination;

this.Ribbon = ribbon;

}

public string Key { get; private set; }

public string Destination { get; private set; }

public string Ribbon { get; private set; }

}

public enum SlimCommandId

{

PORTFOLIO_LIST,

PORTFOLIO_DASHBOARD,

PORTFOLIO_BENCHMARK,

PROJECT_DUPLICATE,

PROJECT_NEW,

PROJECT_DELETE,

PROJECT_EDIT,

PROJECT_SETTINGS,

CLOSEOUT_ASSUMPTIONS,

CLOSEOUT_SOLUTION,

};

Here's Ribbons.cs

/// <summary>

/// Summary description for Ribbons

/// </summary>

public static class Ribbons

{

public const string HomeMenu =

@"<?xml version='1.0' encoding='utf-16'?>

<RibbonBar EnableAjaxSkinRendering='False'>

<Tab Text='Portfolio'>

<Group Text='View'>

<Button Size='Large' Text='List' Value='PORTFOLIO_LIST' />

<Button Size='Large' Text='Dashboard' Value='PORTFOLIO_DASHBOARD' />

<Button Size='Large' Text='Benchmark' Value='PORTFOLIO_BENCHMARK' />

</Group>

<Group Text='Project'>

<Button Size='Large' Text='Create New' Value='PROJECT_NEW' />

<Button Size='Large' Text='Delete' Value='PROJECT_DELETE' />

<Button Size='Large' Text='Edit' Value='PROJECT_EDIT' />

<Button Size='Large' Text='Duplicate' Value='PROJECT_DUPLICATE' />

</Group>

</Tab>

</RibbonBar>";

public const string ProjectMenu =

@"<?xml version='1.0' encoding='utf-16'?>

<RibbonBar EnableAjaxSkinRendering='False'>

<Tab Text='Project'>

<Group Text='Project'>

<Button Size='Large' Text='Settings' Value='PROJECT_SETTINGS' />

<Button Size='Large' Text='Closeout Assumptions' Value='CLOSEOUT_ASSUMPTIONS' />

<Button Size='Large' Text='View Solution' Value='CLOSEOUT_SOLUTION' />

</Group>

<Group Text='Actions'>

<Button Size='Large' Text='Duplicate Project' Value='PROJECT_DUPLICATE' />

</Group>

<Group Text='Navigation'>

<Button Size='Large' Text='Portfolio' Value='PORTFOLIO_LIST' />

</Group>

</Tab>

</RibbonBar>";

}

Given this, what's the normal way to accomplish dynamic ribbons?

Jamie

RibbonBar

answered on 28 Jul 2011

3 answers

405 views

javascript is not working

Hi,
I want to call javascript function on dropdown onchange method.
I have a page which contains <telerik:RadWindow> and my dropdown is in telerik:RadWindow.

Please refer bellow code for more details,
MyPage.aspx -

<telerik:RadWindow ID="EditClientDetails" runat="server" DestroyOnClose="true" Title="Edit Client Details"

VisibleOnPageLoad="false" Behaviors="Minimize, Move" Left="580" Width="860" Height="550"

Top="-8" EnableShadow="true" Modal="true">

<ContentTemplate>

<table>

<td align="left" valign="top">

<asp:LinqDataSource ID="linqDsContactMode" runat="server" ContextTypeName="DataClassesDataContext"

OrderBy="ContactMode" Select="new (id, ContactMode)" TableName="tbl_client_contactModes">

</asp:LinqDataSource>

<asp:DropDownList ID="ddlContactMode" runat="server" Width="155" CssClass="standard-input"

DataSourceID="linqDsContactMode" DataTextField="ContactMode" DataValueField="id"

AppendDataBoundItems="True" >

<asp:ListItem Value="0" Text="Select"></asp:ListItem>

<asp:ListItem Value="-1" Text="Other" />

</asp:DropDownList>

<br />

<div id="txtOtherContactModeDiv" runat="server" style="margin-top: 5px;">

<telerik:RadTextBox ID="txtOtherContactMode" MaxLength="50" runat="server" Width="150" BorderColor="#000000" />

</div>

</td>

</table>

<div align="center" class="gap">

<telerik:RadButton ID="RadBtnUpdate" runat="server" Text="Update" ValidationGroup="EditClient"

OnClick="RadBtnUpdate_Click" OnClientClicked="validate">

</telerik:RadButton>

</div>

</ContentTemplate>

</telerik:RadWindow>

Javascript function in Mypage.aspx-

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

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

function otherContactModeValidation() {

var empty = document.getElementById('<%= ddlContactMode.ClientID %>').value;

alert(empty);

if (empty == "-1") {

document.getElementById('<%= txtOtherContactModeDiv.ClientID %>').style.display = 'block';

}

else

{

document.getElementById('<%= txtOtherContactModeDiv.ClientID %>').style.display = 'none';

}

</script>

</telerik:RadScriptBlock>

Mypage.cs

protected void Page_Load(object sender, EventArgs e)

{

ddlContactMode.Attributes["onchange"] = "otherContactModeValidation()";

}

Javascript function is not able call on dropdown change.
Please help me...
Abhi

General Discussions

answered on 28 Jul 2011

2 answers

133 views

[Solved] radRibbonButton Width - Issue

I have some issue with the width of Buttons.
In IE doesnt support the width but in FF yes.
I created the Buttons dinamically

like this:

RadRibbonButton newbutton = new RadRibbonButton();
...........
newButton.Width = Unit.Pixel(110)

I attach the 2 views in IE and FF.

Any solution?

Thanks

RibbonBar

answered on 28 Jul 2011