Questions on UI for ASP.NET AJAX Forum

1 answer

182 views

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

187 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

218 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

187 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>

<asp:ControlParameter ControlID="hideme" Name="WallUserId" PropertyName="Value" Type="String" />

</SelectParameters>

</asp:SqlDataSource>

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

PanelBar

answered on 31 May 2012

3 answers

323 views

RadGrid fixed witdh with column resizing enabled

Hi,

Is there anyway to have a radgrid to keep the same width even if I resize its columns. For example when resizing a specific column automatically resize the other columns to maintain the table width?

Thanks in advance

Grid

answered on 31 May 2012

1 answer

83 views

Issue in diesplaying user control

I am very new to Telerick and having issue in displaying a user control. The element that is being cut off 'Legend' of fieldset. The page gets rendered fine in Firefox or Chrome. But the problem is there with IE.Here with i am attaching four docs. (part of .aspx page, images showing proper , in-correct rendering and part of user control .aspx file. Any help is greatly appreciated

Splitter

answered on 31 May 2012

2 answers

124 views

RadNumericTextBox in RadListView

I am trying to get the value of one of RadNumericTextBoxes in a RadListView via javascript and am having issues. I have had to hardcode the value in the javascript and am looking for a better solution.. Here is the relevant code:
This is the RadListView. There are repeating text boxes, then there is a total text box. I have a javascript function that gets the values of the updated text box, then updates the total.

<telerik:RadListView ID="rlvApproval" runat="server">

<LayoutTemplate>

<table>

<tr>

<td style="width: 250px;">

</td>

<td style="width: 200px; font-weight: bold;">

</td>

</tr>

</table>

<asp:PlaceHolder ID="itemplaceholder" runat="server" />

<table>

<tr>

<td style="width: 250px;">

<asp:Label ID="lblName" runat="server" Text="Total" Font-Bold="true" />

</td>

<td style="width: 200px; font-weight: bold;">

<telerik:RadNumericTextBox ID="txtTotalValue" runat="server" ReadOnly="true" DataType="System.Decimal"

Skin="Web20">

<NumberFormat DecimalDigits="0" />

</telerik:RadNumericTextBox>

</td>

</tr>

</table>

</LayoutTemplate>

<ItemTemplate>

<table>

<tr>

<td style="width: 250px;">

<asp:Label ID="lblName" runat="server" Text='<%# Eval("name") %>' />

</td>

<td style="width: 250px;">

<%-- <telerik:RadNumericTextBox ID="txtValue" runat="server" DataType="System.Decimal"

Skin="Web20" DbValue='<%# DataBinder.Eval(Container.DataItem, "value") %>' MaxValue="100"

MinValue="0" AutoPostBack="false">

<NumberFormat DecimalDigits="0" />

</telerik:RadNumericTextBox>--%>

<telerik:RadNumericTextBox ID="txtValue" runat="server" DataType="System.Decimal"

Skin="Web20" DbValue='<%# DataBinder.Eval(Container.DataItem, "value") %>' MaxValue="100"

MinValue="0" AutoPostBack="false" >

<NumberFormat DecimalDigits="0" />

<ClientEvents OnValueChanged="ValidateWeighting" />

</telerik:RadNumericTextBox>

</td>

</tr>

</table>

</ItemTemplate>

<EmptyDataTemplate>

<div class="message">

<asp:Label ID="lblEmptyMessage" runat="server" SkinID="messageBig" Text="Error loading approval information..." />

</div>

</EmptyDataTemplate>

</telerik:RadListView>

The javascript function is:

function ValidateWeighting(sender, eventArgs) {

var object = document.getElementById('ctl00_ContentPlaceHolder1_Weighting1_rlvApproval_txtTotalValue');

//var object = $find(sender.get_id().replace("txtValue", "txtTotalValue"));

var object2 = document.getElementById('<%= rlvApproval.ClientID %>');

var current = eval(object.value);

var old = eventArgs.get_oldValue();

var newval = eventArgs.get_newValue();

var tmp = current + (newval - old);

if (tmp == 100) {

document.getElementById('<%= btnSave.ClientID %>').disabled = false;

}

else {

document.getElementById('<%= btnSave.ClientID %>').disabled = true;

}

object.value = tmp;

}

How do I get the value of txtTotalValue. I have tried the solution I have seen elsewhere, but am getting errors. Any idea?

Input

answered on 31 May 2012

29 answers

1.1K+ views

Failed to load view state error when moving dynamically created widgets around the raddocklayout

Dock

answered on 31 May 2012

0 answers

101 views

RadCalendar display issue

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

436 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