Questions on UI for ASP.NET AJAX Forum

1 answer

136 views

RadTooltipmanager inside the radgrid problem

Hi,

I have the radgrid in a main page with link button column.I want to open a radtooltip in the linkbutton mousehover event.Every thing is working fine but i am getting error message like in the attached file.I did everything as the forum replies.But still no luck.Please chekc the below code and give me the solution.

Default.Aspx:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" OnClientResized="ClientResized"

AutoGenerateColumns="False" AllowMultiRowSelection="true" OnNeedDataSource="RadGrid1_NeedDataSource"

PageSize="15" ShowStatusBar="True" AlternatingItemStyle-BackColor="LightBlue"

Skin="WebBlue" Width="100%" Height="650px" OnItemCreated="RadGrid1_ItemCreated"

OnItemDataBound="RadGrid1_ItemDataBound" Style="margin-top: 0px" OnDataBound="RadGrid1_DataBound"

OnItemCommand="RadGrid1_ItemCommand">

<MasterTableView ClientDataKeyNames="PUR_CAT,CAT_TOT,FTMC,TOT_PUR_CAT,Dependent_PO,Dependent_RM"

TableLayout="Fixed" Width="100%">

</EditColumn>

</EditFormSettings>

</RowIndicatorColumn>

</ExpandCollapseColumn>

<telerik:GridClientSelectColumn HeaderStyle-Font-Bold="true" UniqueName="ClientSelectColumn">

</telerik:GridClientSelectColumn>

<telerik:GridBoundColumn DataField="PUR_CAT" FooterText="Total:" HeaderStyle-Font-Bold="true"

HeaderStyle-Width="9%" HeaderText="Purchase Category">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="TOT_EXT_QTY" DataType="System.Double" HeaderStyle-Font-Bold="true"

HeaderStyle-Width="7%" HeaderText="Total Qty" ItemStyle-HorizontalAlign="Right"

UniqueName="TOT_EXT_QTY">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="TOT_PUR_CAT,Dependent_PO" HeaderStyle-Font-Bold="true"

HeaderStyle-Width="40%" ItemStyle-HorizontalAlign="Left" UniqueName="TOT_PUR_CAT,Dependent_PO">

<tr>

-100</div>

100</div>

<telerik:RadSlider ID="RadSliderPOCAT" runat="server" MaximumValue="100" MinimumValue="-100"

OnClientSlideEnd="CalculateNewProductCostPO" OnClientSlideStart="ClientSlideStart"

OnClientValueChanged="ClientValueChangedPO" SelectionEnd="<%# POEndSlider %>"

SelectionStart="<%# POStartSlider %>" ShowDecreaseHandle="true" ShowIncreaseHandle="true"

Skin="Forest" SmallChange="1" Style="float: left" Value="0" Width="385px" CssClass="ApplyPosition" />

</td>

</tr>

PO Price

<tr>

<td align="justify" style="border-style: solid; border-color: #455F77; border-width: 1px;

width: 20%;">

Total PO Price

</td>

<td align="justify" style="border-color: #455F77; border-width: 1px; width: 20%;

border-right-style: solid; border-bottom-style: solid; border-top-style: solid;">

Future PO Price

</td>

<td align="center" style="border-color: #455F77; border-width: 1px; width: 20%; border-right-style: solid;

border-bottom-style: solid;">

Current Selection

</td>

<td align="justify" style="border-color: #455F77; border-width: 1px; width: 20%;

border-right-style: solid; border-top-style: solid; border-bottom-style: solid;">

Other Affected PO

</td>

<td align="justify" style="border-color: #455F77; border-width: 1px; width: 20%;

border-right-style: solid; border-bottom-style: solid; border-top-style: solid;">

Future Other Affected PO

</td>

</tr>

</caption>

</table>

</HeaderTemplate>

<tr>

<asp:Label ID="lbl_tot_putcat" runat="server" Text='<%#"$"+CheckEmpty(DataBinder.Eval(Container.DataItem,"TOT_PUR_CAT","{0:#,###0}"))%>'></asp:Label>

<%--<asp:Label ID="lbl_tot_putcat" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "TOT_PUR_CAT", "{0:C}")%>'></asp:Label>--%>

<%-- <%#DataBinder.Eval(Container.DataItem, "TOT_PUR_CAT", "{0:C}")%>--%>

</td>

<asp:Label ID="lbl_FUT_TOT_PUR_CAT" ForeColor="#3C0000" runat="server" Text='<%#"$"+CheckEmpty(DataBinder.Eval(Container.DataItem, "FUT_TOT_PUR_CAT", "{0:#,###0}"))%>'></asp:Label>

<%-- <%#DataBinder.Eval(Container.DataItem, "FUT_TOT_PUR_CAT", "{0:C}")%>--%>

</td>

<asp:Label ID="lblCurSelPO" runat="server" Text="Current Selection: 0" />

</td>

<%-- <%#CheckEmpty(DataBinder.Eval(Container.DataItem, "Dependent_PO", "{0:C}"))%>--%>

<asp:LinkButton ID="lnk_totpo" runat="server" ForeColor="Blue" Text=' <%#"$"+CheckEmpty(DataBinder.Eval(Container.DataItem, "Dependent_PO","{0:#,###0}"))%>'></asp:LinkButton>

</td>

<%-- <%#CheckEmpty(DataBinder.Eval(Container.DataItem, "FUT_Dependent_PO", "{0:C}"))%>--%>

<asp:Label ID="lnk_effpo" runat="server" Text='<%#"$"+CheckEmpty(DataBinder.Eval(Container.DataItem, "FUT_Dependent_PO", "{0:#,###0}"))%>'></asp:Label>

</td>

</tr>

<%-- <tr>

</tr>--%>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="CAT_TOT,Dependent_RM" HeaderStyle-Font-Bold="true"

HeaderStyle-Width="40%" ItemStyle-HorizontalAlign="Left" UniqueName="CAT_TOT,Dependent_RM">

<tr>

-100</div>

100</div>

<telerik:RadSlider ID="RadSlider1" runat="server" MaximumValue="100" MinimumValue="-100"

OnClientSlideEnd="CalculateNewProductCost" OnClientSlideStart="ClientSlideStart"

OnClientValueChanged="ClientValueChanged" SelectionEnd="<%# endSlider %>" SelectionStart="<%# startSlider %>"

ShowDecreaseHandle="true" ShowIncreaseHandle="true" Skin="Forest" SmallChange="1"

Value="0" Width="385px" Style="float: left" CssClass="ApplyPosition" />

</td>

</tr>

Material Cost

<tr>

<td align="justify" style="border-style: solid; border-color: #455F77; border-width: 1px;

width: 20%;">

Total Material Cost

</td>

<td align="justify" style="border-color: #455F77; border-width: 1px; width: 20%;

border-right-style: solid; border-bottom-style: solid; border-top-style: solid;">

Future Total Material Cost

</td>

<td align="center" style="border-color: #455F77; border-width: 1px; width: 20%; border-right-style: solid;

border-bottom-style: solid;">

Current Selection

</td>

<td align="justify" style="border-color: #455F77; border-width: 1px; width: 20%;

border-right-style: solid; border-top-style: solid; border-bottom-style: solid;">

Other Affected RM

</td>

<td align="justify" style="border-color: #455F77; border-width: 1px; width: 20%;

border-right-style: solid; border-bottom-style: solid; border-top-style: solid;">

Future Other Affected RM

</td>

</tr>

</caption>

</table>

</HeaderTemplate>

<tr>

<asp:Label ID="lbl_CAT_TOT" runat="server" Text='<%#"$"+CheckEmpty(DataBinder.Eval(Container.DataItem, "CAT_TOT", "{0:#,###0}"))%>'></asp:Label>

<%--<%#DataBinder.Eval(Container.DataItem, "CAT_TOT", "{0:C}")%> <%#Eval("CAT_TOT") %>--%>

</td>

<asp:Label ID="lbl_FTMC" runat="server" Text='<%#"$"+CheckEmpty(DataBinder.Eval(Container.DataItem, "FTMC", "{0:#,###0}"))%>'></asp:Label>

<%-- <%#DataBinder.Eval(Container.DataItem, "FTMC", "{0:C}")%>--%>

</td>

<asp:Label ID="lblCurSel" runat="server" Text="Current Selection: 0" />

</td>

<asp:LinkButton ID="lnk_rm" runat="server" ForeColor="Blue" Text='<%#"$"+CheckEmpty(DataBinder.Eval(Container.DataItem, "Dependent_RM", "{0:#,###0}"))%>'></asp:LinkButton>

<%--<%#CheckEmpty(DataBinder.Eval(Container.DataItem, "Dependent_RM", "{0:C}"))%>--%>

</td>

<asp:Label ID="lnk_effrm" runat="server" Text='<%#"$"+CheckEmpty(DataBinder.Eval(Container.DataItem, "Future_Dependent_RM", "{0:#,###0}"))%>'></asp:Label>

<%--<%#CheckEmpty(DataBinder.Eval(Container.DataItem, "Future_Dependent_RM", "{0:C}"))%>--%>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</ClientSettings>

</FilterMenu>

</telerik:RadGrid>

<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" OffsetY="-1" EnableShadow="true"

Position="BottomRight" Animation="Fade" OnAjaxUpdate="OnAjaxUpdate" RelativeTo="Mouse"

Width="500px" Height="250px" Style="font-size: 18px; text-align: center; font-family: Arial;"

RenderInPageRoot="true" Skin="Forest" AutoCloseDelay="2000" HideDelay="0" ShowDelay="0"

ContentScrolling="Auto" ShowEvent="OnMouseOver" AnimationDuration="1" HideEvent="ManualClose">

</telerik:RadToolTipManager>

ASpx.CS:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)

{

LinkButton lnk_rm1 = item.FindControl("lnk_rm") as LinkButton;

if (!Object.Equals(lnk_rm1, null))

{

if (!Object.Equals(this.RadToolTipManager1, null))

{

//Add the button (target) id to the tooltip manager

string str = (e.Item as GridDataItem).GetDataKeyValue("PUR_CAT").ToString().Replace("<br/>", "/");

string[] ariba_cat2 = str.Split('.');

string last = ariba_cat2[2];

this.RadToolTipManager1.TargetControls.Add(lnk_rm1.ClientID, last, true);

}

protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)

{

this.UpdateToolTip(args.Value, args.UpdatePanel);

}

private void UpdateToolTip(string elementID, UpdatePanel panel)

{

Control ctrl = Page.LoadControl("CategoryDetailsfromIndex.ascx");

panel.ContentTemplateContainer.Controls.Add(ctrl);

CategoryDetailsfromIndex details = (CategoryDetailsfromIndex)ctrl;

details.Ariba21 = elementID;

}

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)

{

if (e.CommandName == "Sort" || e.CommandName == "Page")

{

RadToolTipManager1.TargetControls.Clear();

}

CategoryDetailsfromIndex.Ascx

<telerik:RadGrid ID="RadGrid_det" runat="server" Skin="Forest">

</telerik:RadGrid>

CategoryDetailsfromIndex.Ascx.cs:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

namespace CPT_NEW

{

public partial class CategoryDetailsfromIndex : System.Web.UI.UserControl

{

Home obj = new Home();

private string Ariba2;

public string Ariba21

{

get { return Ariba2; }

set { Ariba2 = value; }

}

protected override void OnPreRender(EventArgs e)

{

base.OnPreRender(e);

RadGrid_det.DataSource = obj.Get_DetailsfromIndexMapping(Ariba21);

RadGrid_det.DataBind();

}

protected void Page_Load(object sender, EventArgs e)

{

}

Thanks.

ToolTip

answered on 23 Jul 2012

1 answer

48 views

Styling edited row problem

I don't understand where styling for edited row is coming from. In this case my grid is using WebBlue skin with default settings. When I click on "Edit" row becomes "highlighted" with white background overriding grid's row background and rendering bottom border. What I would like to have is for the row being edited to inherit background from the grid or have its background transparent (so that grid's row background is showing thru) and to get rid of bottom border. I'm attaching few images reference. One is showing normal grid with WebBlue skin and then two additional images show what the rows look like when I click on "Edit" button.

Of course, I have read this part of the documentation but none of the suggestions had any effect. I edited GridEditRow_WebBlue but nothing chagned.

Grid

answered on 23 Jul 2012

4 answers

342 views

RadRating not displaying stars properly

I have implemented a RadRating control on a usercontrol, and I haven't done anything super fancy to the tool itself. It sits inside a table cell. Here is the code for the RadRating tool:

<td valign="top">

<telerik:RadRating ID="VendorRating" runat="server" Skin="CustomSkin" EnableEmbeddedSkins="false"

EnableEmbeddedBaseStylesheet="false" />

<asp:RangeValidator ID="RatingValidator" runat="server" ControlToValidate="VendorRating"

MinimumValue="1" MaximumValue="5" ErrorMessage="Please provide a rating!"></asp:RangeValidator>

</td>

This table also contains a textbox for comments and a save button. When the save button is clicked, VendorRating.Value is saved to the database. The save functionality all works properly, and the validator on VendorRating works.

This table sits inside a control that is hidden until the user clicks an "Add a Review" button that sits at the bottom of a table containing all of the existent reviews. It is when the "Add a Review" button that displays the radrating that the error occurs.

The problem is that when I view the website outside of the development environment, on certain computers the rating stars consistently don't show up at all (they look like white space) and that whitespace turns to black boxes when clicked. This happens consistently on affected computers, but never on others. The stars in the existing ratings display properly on page load, but when the user control to enter a review is made visible, those stars also render strangely.

I have attached a screenshot to demonstrate the viewing error. The RadRatings use a custom skin (all I did for that was to edit the sprite image to match my needs. The RadRatings in the existing reviews are disabled so the number of stars cannot be changed. The RadRating in the write review control is enabled to allow users to select the rating value.

Any help is greatly appreciated!

Kaleb

Rating

answered on 23 Jul 2012

0 answers

96 views

Content Property and get_html() on Compatability View

Hello;

I am using rad editor, my issue occurs when when I set Content property to fill rad editor with HTML on server side page load event, then invoke RadEditor.get_html(True) on client side event OnClientLoad; I noticed that Divs I set on server side is missing on client side.

It gives me different HTML Structure (Different than server side's Content property).

It used to work fine for me when i was using teleik version 2009.1.527.35 but after i upgraded to 2011.3.1305.35 version the issue appeared.

Please note that the issue appears when I set Browser Mode to IE9 Compatability View.

Below is the properties for RadEditor:

<rad:RadEditor ID="EmailBody" runat="server" Width="100%" ToolsFile="~/_CSS/EditorBasicTools.xml"

OnClientLoad="EmailBody_OnClientLoad" StripFormattingOptions="NoneSupressCleanMessage" Skin="Default"

SpellCheckSettings-DictionaryPath="~/App_Data/RadSpell/" SpellCheckSettings-DictionaryLanguage="en-US"

EditModes="Design" ContentFilters=

"RemoveScripts, FixUlBoldItalic, FixEnclosingP, IECleanAnchors, MozEmStrong, IndentHTMLContent, EncodeScripts, OptimizeSpans"

>

<ContextMenus>

<rad:EditorContextMenu Enabled="false" TagName="IMG">

</rad:EditorContextMenu>

<rad:EditorContextMenu Enabled="false" TagName="A">

</rad:EditorContextMenu>

</ContextMenus>

</rad:RadEditor>

Below is the value for the server side Content property :

<div id='dvEmailHistory'><div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'><p class=MsoNormal><b><span style='font-size:12.0pt;font-family:"Times New Roman"'>From:</span></b><span style='font-size:12.0pt;font-family:"Times New Roman"'> Ruba.Shannak@aramex.com <br /><b>Sent:</b> 4/24/2012 3:26:00 PM<br /><b>To:</b> DEV.TEST@aramex.com<br /><b>Cc:</b> <br /><b>Subject:</b> RE: Test<o:p></o:p></span></p></div><br/><html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">

<meta name="Generator" content="Microsoft Word 14 (filtered medium)">

<style><!--

/* Font Definitions */

@font-face

{font-family:Calibri;

panose-1:2 15 5 2 2 2 4 3 2 4;}

@font-face

{font-family:Tahoma;

panose-1:2 11 6 4 3 5 4 4 2 4;}

/* Style Definitions */

p.MsoNormal, li.MsoNormal, div.MsoNormal

{margin:0in;

margin-bottom:.0001pt;

font-size:11.0pt;

font-family:"Calibri","sans-serif";}

a:link, span.MsoHyperlink

{mso-style-priority:99;

color:blue;

text-decoration:underline;}

a:visited, span.MsoHyperlinkFollowed

{mso-style-priority:99;

color:purple;

text-decoration:underline;}

span.EmailStyle17

{mso-style-type:personal-compose;

font-family:"Calibri","sans-serif";

color:windowtext;}

.MsoChpDefault

{mso-style-type:export-only;

font-family:"Calibri","sans-serif";}

@page WordSection1

{size:8.5in 11.0in;

margin:1.0in 1.0in 1.0in 1.0in;}

div.WordSection1

{page:WordSection1;}

--></style><!--[if gte mso 9]><xml>

<o:shapedefaults v:ext="edit" spidmax="1026" />

</xml><![endif]--><!--[if gte mso 9]><xml>

<o:shapelayout v:ext="edit">

<o:idmap v:ext="edit" data="1" />

</o:shapelayout></xml><![endif]-->

</head>

<body lang="EN-US" link="blue" vlink="purple">

<div class="WordSection1">

<p class="MsoNormal">This is the email body..... <span style="font-size:8.0pt;font-family:"Tahoma","sans-serif";color:#8AB131"><o:p></o:p></span></p>

<p class="MsoNormal"><o:p> </o:p></p>

</div>

</body>

</html></div>

Below is value for client side get_html(true) property:

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY lang=EN-US vLink=purple link=blue>

<DIV class=WordSection1>

<P class="MsoNormal">This is the email body.....<SPAN style="FONT-FAMILY: 'Tahoma','sans-serif'; COLOR: #8ab131; FONT-SIZE: 8pt"><o:p></o:p></SPAN></P>

<P class="MsoNormal"><o:p> </o:p></P>

</DIV>

</BODY>

</HTML>

Please note that the div "dvEmailHistory" is missing when trying to read the value from client side.

Your help is highly appreciated.

Editor

asked on 23 Jul 2012

1 answer

57 views

How to get RadWindow to display and close in a procedure

I want to open a RadWindow when a button is clicked. I placed the code in the Button Click event on the server side. However, when the button is clicked the entire Click event is processed before the RadWIndow is displayed and the user input from that RadWIndow is captured. I want to use the User's input from the RadWindow within the Button Click event. Is this possible?

Protected Sub RadButtonBudgetSettingsEdit_Command(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.CommandEventArgs)

Dim script As String = "function f(){$find(""" + RadWindowBudgetIDNo.ClientID + """).show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);"

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, True)

'

'Based on the User's input in the RadWindow displayed above, I want to execute some code before leaving this procedure

'The user's input is captured in a Session variable.

'

'e.g.

NewSubRoutineToBeExecutedBeforeLeavingThisClickEvent(Session("UserSelectedIDNo")

End Sub

Currently, this button click procedure executes all the way to the End Sub before the RadWIndow is displayed.

Here is the ASPX code.

<telerik:RadWindow runat="server" ID="RadWindowBudgetIDNo" NavigateUrl="SelectBudget.aspx" Modal="true" ></telerik:RadWindow>

Thanks,
pat

Window

answered on 23 Jul 2012

1 answer

153 views

Applying theme for web application

Hi

I have already developed a windows application. Now i am going to convert the windows application to web application.. I want to use the same theme used in windows application in my web application also. Is there any easy way to convert the themes from windows to web.

Will Telerik provides various themes for whole application? I need apple theme to be applied in my application.. Please provide me the apple theme css Files...

Thanks

SkinManager

answered on 23 Jul 2012

2 answers

171 views

AsyncUpload AllowedFileExtensions Dynamically

hello,
I am using AsyncUpload in ASP.Net with Vb . i want to add File Extension Dynamically from Code behind but it doesn't work. Below is my Code please help me if any one have idea its urgent

Dim strIds as string=".wmv, .mp4, .pdf, .swf"

Dim ids As String() = {strIds}

Upload1.AllowedFileExtensions = ids

AsyncUpload

answered on 23 Jul 2012

1 answer

129 views

Skin and Css for RadPanel

I am confused on how to work with the Css for RadPanel. At first I just had a few classes defined for rpText like one example and the control and site set to default skin/theme but the first item in the list is white text on white so you can't see the description. I tried using WebBlue skin on the control but I don't see any difference in how it renders. There is no rpText class defined either. Also the controls in the expanded area are shifted up into the HeaderTemplate area. I am using HeaderTemplate and ItemTemplate.

I just wanted it to be a blue header area with a 3d type background and white text. I would like this header area to stay consistent whether it is expanded or not. Same with the expanded panel area. Maybe a light color of blue. For some reason the first item is white, and the second blue.

Am I missing a main css file ?

Thanks in advance.
Mary

PanelBar

answered on 23 Jul 2012

1 answer

81 views

Trouble creating reusable JavaScript function to gather FullPath of TreeView

I have followed the example I found on the Telerik site on how to create a string representing the full path of the "checked" node in the tree view. This is working fabulously and the function is below:

function clientNodeChecked(sender, eventArgs) {

var node = eventArgs.get_node();

var s = node.get_text();

var currentObject = node.get_parent();

while (currentObject != null) {

if (currentObject != node.get_treeView()) {

s = currentObject.get_text() + " > " + s;

}

else {

break;

}

currentObject = currentObject.get_parent();

}

var tbPath;

tbPath = $get("<%= lblFullPath_InvGroupOwner.ClientID %>");

tbPath.innerHTML = s;

}

Well, I have many RadTreeView controls on my screen and throughout my application and I'm wanting to avoid writing a javascript per tree just so I can name the textbox control that is supposed to contain the Full Path string.

I will admit that I'm learning JavaScript in conjunction with learning the Telerik controls so this may be an obvious answer to a more experienced JavaScript developer, but what do I need to do in order to pass the ClientID to this method for the textbox I'm wanting to store the FullPath?

Sadly, there isn't a client-side version of the control's GetFullPath() method :(

Thanks in advance,
Ray

TreeView