Questions on UI for ASP.NET AJAX Forum

1 answer

91 views

GridGridboundclomns alignment issue while in edit mode

I am using edit form template (EditFormType="Template") to edit rows of my grid. My issue is, if I am editing row 7, rows 1 to 6 look fine but the rows 8,9,etc are not aligned properly. they look like one long string instead of individual columns (see image below). I have implemented this following below article

http://demos.telerik.com/aspnet-classic/grid/examples/DataEditing/TemplateFormUpdate/DefaultCS.aspx

the only difference is I am binding the datasource in needdatasource event instead of from sqldatasource control.
this is how my page looks like. even the Add new Record is above the rows 4,5.

Please let me know if any one has any solution for this.

Thanks.

Grid

answered on 31 May 2012

1 answer

77 views

RadWindow & outputcache in control

I followed the instructions for embeding script and skin in a control when outcache is present on a page and I still can't get my code to work.

On my master page I have the following code

<head runat="server">

<title></title>

<link id="Link1" runat="server" href="~/Skins/Menu.css" rel="stylesheet" type="text/css" />

<link id="Link2" runat="server" href="~/Skins/Default/Menu.Default.css" rel="stylesheet" type="text/css" />

<link id="Link3" runat="server" href="~/Skins/SiteMap.css" rel="stylesheet" type="text/css" />

<link id="Link4" runat="server" href="~/Skins/Default/SiteMap.Default.css" rel="stylesheet" type="text/css" />

<link id="Link5" runat="server" href="~/Skins/Tooltip.css" rel="stylesheet" type="text/css" />

<link id="Link6" runat="server" href="~/Skins/Window.css" rel="stylesheet" type="text/css" />

<link id="Link7" runat="server" href="~/Skins/Default/ToolTip.Default.css" rel="stylesheet" type="text/css" />

<link id="Link8" runat="server" href="~/Skins/Default/Window.Default.css" rel="stylesheet" type="text/css" />

<link id="Link9" runat="server" href="~/Skins/Telerik/ToolTip.Telerik.css" rel="stylesheet" type="text/css" />

<link id="LinkA" runat="server" href="~/Skins/Telerik/Window.Telerik.css" rel="stylesheet" type="text/css" />

</head>

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

<Scripts>

<asp:ScriptReference Path="~/Scripts/Common/Core.js" />

<asp:ScriptReference Path="~/Scripts/Common/jQuery.js" />

<asp:ScriptReference Path="~/Scripts/Common/jQueryPlugins.js" />

<asp:ScriptReference Path="~/Scripts/Common/PopUp/PopUpScripts.js" />

<asp:ScriptReference Path="~/Scripts/Common/Animation/AnimationScripts.js" />

<asp:ScriptReference Path="~/Scripts/Common/Navigation/NavigationScripts.js" />

<asp:ScriptReference Path="~/Scripts/Menu/RadMenuScripts.js" />

<asp:ScriptReference Path="~/Scripts/SiteMap/RadSiteMap.js" />

<asp:ScriptReference Path="~/Scripts/Window/RadWindowScripts.js" />

<asp:ScriptReference Path="~/Scripts/Window/RadWindowManager.js" />

<asp:ScriptReference Path="~/Scripts/ToolTip/RadToolTip.js" />

<asp:ScriptReference Path="~/Scripts/ToolTip/RadToolTipManager.js" />

<asp:ScriptReference Path="~/Scripts/Common/TouchScrollExtender.js" />

</Scripts>

</telerik:RadScriptManager>

In my usercontrol I have the following declarations

<telerik:RadToolTipManager runat="server" AnimationDuration="300"

ShowDelay="200" HideDelay="10" ID="RadToolTipManager1" Width="480px"

RelativeTo="BrowserWindow" Animation="Slide" Position="TopCenter"

OnAjaxUpdate="OnAjaxUpdate" Skin="Telerik" OffsetY="150" ShowEvent="OnClick" EnableEmbeddedScripts="false" EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" />

<telerik:RadWindowManager ID="Singleton" Skin="Telerik" Width="400" Height="630"

VisibleStatusbar="false" Behaviors="Close,Move, Resize" runat="server"

EnableShadow="true" OnClientClose="OnClientClose" Animation="Fade"

AutoSize="false" AutoSizeBehaviors="Default" DestroyOnClose="False" VisibleOnPageLoad="true"

ShowContentDuringLoad="False" EnableEmbeddedScripts="false" EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false">

</telerik:RadWindowManager>

If I take out outputcache from my pages and enable embedded scripts and skins everything works fine. Can someone tell me what I'm doing wrong?

Window

answered on 31 May 2012

2 answers

220 views

Gaussian curve ?

Hello world,

I'm new here. I'm in charge of a project and we have to chose wich tools we will use to create an application.
Telerik is a part of the analysis. In order to make a good decision, we must know if there is some functionnalities that we used to give to our customers. For the chart part, only one question :

Is there any easy way to build a gaussian curve ?
Like this one :

I mean, with areas and the possibility to use an equation.
If it's not, would it be added inside telerik for a next release ?

Many thanks.

Chart (Obsolete)

answered on 31 May 2012

2 answers

151 views

2 - Top and bottom datapager controls,synced

I'm trying to add my datapager on both the top and bottom of the page. I figured it would be just adding a second RadDataPager with a different ID set to the same PageControlID, but I get an error when I test the page. Here is what I have markup wise, this is just one controller.

How would I add that second control in and have it appear at the top of the page?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadDataPager.aspx.cs" Inherits="JJPro.Web.RadDataPager" %>

<!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:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadListView1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadListView1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="0" />

<telerik:RadListView ID="RadListView1" Width="97%" AllowPaging="True" runat="server"

AllowSorting="true" ItemPlaceholderID="ProductsHolder" DataKeyNames="GUID" DataSourceID="TestData"

AllowMultiFieldSorting="True" BorderStyle="None" EnableEmbeddedBaseStylesheet="False">

<LayoutTemplate>

<!-- Set the id of the wrapping container to match the CLIENT ID of the RadListView control to display the ajax loading panel

In case the listview is embedded in another server control, you will need to append the id of that server control -->

<fieldset style="width: 740px;" id="RadListView1">

<legend></legend>

<asp:Panel ID="ProductsHolder" runat="server" />

<table cellpadding="0" cellspacing="0" width="100%">

<tr>

<td>

<telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1"

PageSize="9" AllowSEOPaging="False">

<Fields>

<telerik:RadDataPagerButtonField FieldType="FirstPrev" />

<telerik:RadDataPagerButtonField FieldType="Numeric" />

<telerik:RadDataPagerButtonField FieldType="NextLast" />

<telerik:RadDataPagerPageSizeField PageSizeText="Page size: " PageSizes="3,6,9,12,15"

PageSizeComboWidth="50" />

<telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"

TextBoxWidth="30" />

<telerik:RadDataPagerTemplatePageField>

<PagerTemplate>

<div style="float: right">

<b>Items

<asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>" />

to

<asp:Label runat="server" ID="TotalPagesLabel" Text="<%# Container.Owner.StartRowIndex+Container.Owner.PageSize %>" />

of

<asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />

<br />

</b>

</div>

</PagerTemplate>

</telerik:RadDataPagerTemplatePageField>

</Fields>

</telerik:RadDataPager>

</td>

</tr>

</table>

</fieldset>

</LayoutTemplate>

<ItemTemplate>

<div style="float: left;">

<table cellpadding="0" cellspacing="0" style="width: 230px; height: 100px">

<tr>

<td style="width: 20%;">

</td>

<td style="width: 80%; padding-left: 5px;">

<%--# Eval("GUID") --%>

</td>

</tr>

<tr>

<td>

</td>

<td style="width: 80%; padding-left: 5px;">

<asp:Image ID="ProductImage" OnClick="" runat="server" Width="200" Height="200" ImageUrl='<%# Eval("ImageURL", "Images/MockUp/{0}") %>' />

</td>

</tr>

<tr>

<td>

</td>

<td style="width: 80%; padding-left: 5px; text-align: center; font-weight: bold;">

<%# Eval("ProductText") %>

</td>

</tr>

<tr>

</tr>

<tr>

<td>

<hr />

</td>

<td>

<hr />

</td>

</tr>

</table>

</div>

</ItemTemplate>

</telerik:RadListView>

<asp:SqlDataSource ID="TestData" runat="server" ConnectionString="<%$ ConnectionStrings:dev_gmyersConnectionString %>"

SelectCommand="SELECT * FROM [DataPagerTestData2]"></asp:SqlDataSource>

<br />

</form>

</body>

</html>

DataPager

answered on 31 May 2012

6 answers

262 views

How To Remove White Border Around RadDock

Hi Telerik,

I have RadDocks that I fill with controls and I would like to remove the White Border that shows up (see attached image) so the control fills up the whole area of the RadDock.

Thanks!

Dock

answered on 31 May 2012

3 answers

284 views

JavaScript Intellisense

Dear Support,

how can I get intellisense for javascripts in seperated javascript files. For example If I create a test.js script file and add this to a page I can use all function blocks, but I have no intellisense in the file. ANy Idea why and how I can resolve this issue?

If I create a function directly in the page intelisense is working fine.

Thanks for help.

Christian

General Discussions

answered on 31 May 2012

1 answer

155 views

RadMenu - z index issue

Hi,

I have a RadMenu as part of RadGrid template column - the user can hover over an image (a cog in this case), which expands a menu. I have a problem however, the menu is hidden behind the 'detail' table of the RadGrid. Please see attached screenshot for some more info.

I have tried the following

Creating a class which sets the z-index to a high number such as 99999 (also using the !important tag to override), and assigning the menu and/or menu items to this class
As above but adding 'position: absolute;' to it - this seems to work, however the RadGrid I have allows scrolling - when the RadGrid scrolls, the images (being absolutely positioned) 'stick' in their positions when scrolling

Here's my markup:

<telerik:RadGrid ID="gv1" runat="server" CssClass="MyExpandCol" Height="100%" Width="100%" ItemStyle-CssClass="TripRow" AlternatingItemStyle-CssClass="TripRow" OnRowDrop="gv_RowDrop" OnItemDataBound="gv_ItemDataBound" DataSourceID="dsDay1" AllowMultiRowSelection="true" AutoGenerateColumns="false" Font-Size="9px" GridLines="None">

<MasterTableView AllowPaging="false" AllowSorting="true" ClientDataKeyNames="ID" TableLayout="Fixed" ExpandCollapseColumn-HeaderStyle-Width="10px" ExpandCollapseColumn-CollapseImageUrl="Content/Images/collapse.png" ExpandCollapseColumn-ExpandImageUrl="Content/Images/expand.png" PageSize="50" ShowHeader="false" AllowCustomPaging="false" DataKeyNames="ID" Name="Master" HierarchyDefaultExpanded="true" ShowHeadersWhenNoRecords="false" Font-Size="9px" ItemStyle-CssClass="TripHeaderRow" AlternatingItemStyle-CssClass="TripHeaderRow">

<DetailTables>

<telerik:GridTableView Name="Detail" ClientDataKeyNames="ID" TableLayout="Fixed" ShowHeader="false" DataKeyNames="ID" DataSourceID="dsTripDetails" Width="100%" Font-Size="9px" CssClass="DetailGrid">

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="TripHeaderID" MasterKeyField="ID" />

</ParentTableRelation>

<NoRecordsTemplate><br />

</NoRecordsTemplate>

<Columns>

<telerik:GridBoundColumn DataField="DeliveryNoteNo" HeaderText="Ref" SortExpression="DeliveryNoteNo" ItemStyle-Wrap="false" HeaderStyle-Width="22%"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="PromiseDate" HeaderText="By" SortExpression="PromiseDate" ItemStyle-Wrap="false" HeaderStyle-Width="15%" DataFormatString="{0:dd MMM}"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="TrailerDepot" HeaderText="Dep" SortExpression="TrailerDepot" ItemStyle-Wrap="false" HeaderStyle-Width="8%"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CustomerName" HeaderText="Customer" SortExpression="CustomerName" ItemStyle-Wrap="false" HeaderStyle-Width="15%"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CustomerPostcode" HeaderText="Postcode" SortExpression="CustomerPostcode" ItemStyle-Wrap="false" HeaderStyle-Width="10%"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="DeliveryWeight" HeaderText="Weight" SortExpression="DeliveryWeight" ItemStyle-Wrap="false" HeaderStyle-Width="13%"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="PalletsPlanned" HeaderText="Plan" SortExpression="PalletsPlanned" ItemStyle-Wrap="false" HeaderStyle-Width="5%"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="PalletsPicked" HeaderText="Plan" SortExpression="PalletsPlanned" ItemStyle-Wrap="false" HeaderStyle-Width="5%"></telerik:GridBoundColumn>

</Columns>

</telerik:GridTableView>

</DetailTables>

<Columns>

<telerik:GridTemplateColumn DataField="ID">

<ItemTemplate>

<table width="100%" cellpadding="0" cellspacing="0" border="1" runat="server" ID="tbl">

<tr><td></td><td>Trip <asp:Label ID="lblID" runat="server" Text='<%# Bind("ID") %>'></asp:Label> <asp:Label ID="lblSubbie" runat="server" Text='<%# Bind("VehicleOrSubbie") %>'></asp:Label> (<asp:Label ID="lblDepot" runat="server" Text='<%# Bind("DepotLetter") %>'></asp:Label>)</td><td>Total:</td><td><asp:Label ID="lblTotalWeight" runat="server" Text='<%# Bind("TotalWeight") %>'></asp:Label></td><td><asp:Label ID="lblTotalPlan" runat="server" Text='<%# Bind("TotalPlan") %>'></asp:Label></td><td><asp:Label ID="lblTotalPick" runat="server" Text='<%# Bind("TotalPick") %>'></asp:Label></td></tr>

<tr><td><telerik:RadMenu ID="mn" CssClass="mn" runat="server" OnItemClick="mn_ItemClick"><Items><telerik:RadMenuItem ImageUrl="~/Content/Images/cog.gif"><Items>

<telerik:RadMenuItem runat="server" Text="Delete Trip" Value="1">

</telerik:RadMenuItem></Items></telerik:RadMenuItem></Items></telerik:RadMenu></td><td><asp:Label ID="lblNotes" runat="server" Text='<%# Bind("TripNotes") %>'></asp:Label></td><td>Remaining:</td><td><asp:Label ID="lblRemainingWeight" OnDataBinding="SetRemainingColour" runat="server" Text='<%# Bind("RemainingWeight") %>'></asp:Label></td><td><asp:Label ID="lblRemainingPlan" OnDataBinding="SetRemainingColour" runat="server" Text='<%# Bind("RemainingPlan") %>'></asp:Label></td><td><asp:Label ID="lblRemainingPick" OnDataBinding="SetRemainingColour" runat="server" Text='<%# Bind("RemainingPick") %>'></asp:Label></td></tr>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings AllowRowsDragDrop="true">

<Scrolling AllowScroll="true" SaveScrollPosition="true" />

<Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />

<ClientEvents OnRowDropped="OnRowDropped" OnRowDropping="OnRowDropping" OnRowContextMenu="RowContextMenu" />

<Scrolling UseStaticHeaders="false" AllowScroll="true" />

<Resizing ClipCellContentOnResize="true" AllowColumnResize="false" />

</ClientSettings>

</telerik:RadGrid>

There's also another problem, as you can see from the screenshot. The background colour of the 'cog' is white, even though I have confirmed the png is transparent. I have tried setting the background-color to be transparent in both CSS and on the BackColor property of the various elements of the menu to no avail.

Thanks!

Menu

answered on 31 May 2012

2 answers

170 views

Select file while click

Thanks in advance....

while i click rad button... i want open Asynradupload file select window or open a select window from jquery instead click asynradupload button...

AsyncUpload

answered on 31 May 2012

3 answers

196 views

Hide\Disable The Loading... Text On ItemsRequested

Hello,

I have a radcombobox which uses load on demand.

On ItemsRequested I check to see how many characters have been typed into the combobox so that it doesn't populate the combobox untill the user has entered at least two characters:

If e.Text.Length > 1 Then
......
End If

The trouble is, even when a user only types one character into the combobox it says 'Loading...', it should only display the loading text when two or more characters have been entered into the combobox, beacuse until two characters have been entered nothing has actually been loaded.

Does anyone have an idea how i can accomplish this?

Thanks for your advice,

Felix

ComboBox

answered on 31 May 2012

1 answer

151 views

Panelbar inside a ListView

I have a DataListView that contains a panelbar and the panelbar contains a textbox and button. I have the ListView bound to a SQL Datasource and the panelbar is not bound to anything. Inside the panel bar I need to set values to these controls using the Eval() command. However, it is returning null. If I move the textbox and button outside of the panelbar they can grab the data no problem. Once inside it's null. I know it's because they're looking for the datasource of the panelbar... is there anyway to override this? I want the textbox and button to get their values from the datasource of the listview.

<telerik:RadListView ID="wall" runat="server" Skin="Metro" AllowPaging="True" PageSize="200"

DataSourceID="WallSource">

<ItemTemplate>

<div class="wallPostPicture">

<telerik:RadBinaryImage ID="imgPosterPic" runat="server" DataValue='<%# Eval("Image") %>'

Height="50px" Width="50px" AutoAdjustImageControlSize="false" CssClass="friend" />

<telerik:RadToolTip ID="WallTip" runat="server" Position="MiddleRight" RelativeTo="Element"

Skin="Metro" TargetControlID="imgPosterPic" ShowEvent="OnMouseOver" HideEvent="LeaveTargetAndToolTip"

Animation="Resize" AutoCloseDelay="0" Title='<%# string.Format("{0} {1}", Eval("FirstName").ToString(), Eval("LastName").ToString())%>'>

<div>

<asp:Label ID="lblStatus" runat="server" Text='<%# Eval("Status") %>' /></div>

</div>

</telerik:RadToolTip>

</div>

<div style="float: right; padding-top: 10px;">

<asp:Label ID="lblCounter" runat="server" Text="0" CssClass="CounterText" ForeColor="LightGray" />

</div>

<div class="wallPostTitle">

<%# string.Format("{0} {1}", Eval("FirstName").ToString(), Eval("LastName").ToString())%></div>

<div class="wallPostDate">

<%# Eval("Date").ToString().ToLower() %></div>

<div class="wallPostDate" style="text-decoration: 'underline'">

<asp:LinkButton ID="lbtnRepost" runat="server" Text="repost" /> <b>·</b> <asp:LinkButton

ID="LinkButton1" runat="server" Text="upvote" /></div>

<div class="wallPostValue">

<%# Eval("Value") %></div>

<div class="wallPostComments">

<telerik:RadPanelBar runat="server" ID="RadPanelBar1" ExpandMode="SingleExpandedItem"

AllowCollapseAllItems="true" Skin="Metro" Width="100%" PersistStateInCookie="true">

<Items>

<telerik:RadPanelItem Text='comments' Expanded="False" runat="server">

<ContentTemplate>

<telerik:RadListView runat="server" ID="listComments" Skin="Metro" AllowPaging="true"

PageSize="15" DataSourceID="commentSource">

<ItemTemplate>

<div class="commentBlock">

<div class="wallPostPicture">

<telerik:RadBinaryImage ID="imgPosterPic" runat="server" DataValue='<%# Eval("Image") %>'

Height="40px" Width="40px" AutoAdjustImageControlSize="false" CssClass="friend" />

</div>

<div class="wallPostTitle">

<%# string.Format("{0} {1}", Eval("FirstName").ToString(), Eval("LastName").ToString())%>

</div>

<div class="wallPostDate">

<%# Eval("Date").ToString() %>

</div>

<div class="wallPostValue">

<%# Eval("Value") %>

</div>

</ItemTemplate>

</telerik:RadListView>

<span style="float: right; padding: 0px 10px 0px 0px;">

<asp:Button ID="btnPostComment" runat="server" CssClass="blueButton" Text="post" CommandArgument='<%# Eval("PostId") %>' OnCommand="btnPostComment_Click" /></span>

<div class="boxStatusmng" style="margin: 5px 0px 10px 0px; padding-left: 10px;">

<span class="bannerStatusMngInput">

<asp:TextBox ID="txtCommentIt" runat="server" CssClass="statusbox" Height="35px" Text='<%# Eval("PostId") %>' /></span>

<asp:HiddenField runat="server" ID="hideWallId" Value='<%# Eval("PostId") %>' />

<ajaxToolkit:TextBoxWatermarkExtender ID="wmComment" runat="server" TargetControlID="txtCommentIt"

WatermarkCssClass="statusboxwm" WatermarkText="say something..." />

</div>

</ContentTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</div>

<asp:SqlDataSource runat="server" ID="commentSource" ConnectionString="<%$ ConnectionStrings:MySqlConnection %>"

SelectCommand='<%# string.Format("SELECT * FROM Comments, UserDetails WHERE PostTargetId = {0} AND UserDetails.UserId = Comments.PosterUserId",  Eval("PostId")) %>' />

</ItemTemplate>

</telerik:RadListView>

<asp:SqlDataSource ID="WallSource" runat="server" ConnectionString="<%$ ConnectionStrings:MySqlConnection %>"

SelectCommand="SELECT FirstName, LastName, Status, Image, Poster, Value, Date, WallUserId, PostId FROM UserDetails, Wall WHERE Wall.WallUserId = @WallUserId AND UserDetails.UserId = Wall.Poster ORDER BY Wall.Date DESC">

<SelectParameters>