Questions on UI for ASP.NET AJAX Forum

4 answers

304 views

Is there any easy way to center (both horizontally and vertically) a NoRecordsTemplate within the body of the RadGrid when using:

<ClientSettings EnableRowHoverStyle="true">

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

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

</ClientSettings>

on a RadGrid that has a height of 100%?

Grid

answered on 02 Apr 2013

1 answer

146 views

RadGrid in PanelBar

Hi

This is my first use of thiscontrol and this is my second problem with it breaking I have another un resolve post.

I have a panel with a Radgrid. If I have the following ClientSetting on the grid, the panels stop working.

Any Ideas
<ClientSettings>

</ClientSettings>

Andy

PanelBar

answered on 02 Apr 2013

2 answers

204 views

[Solved] Why Does RadWindow Need an UpdatePanel When Parent Page Has an UpdatePanel?

I've constructed a simple AJAX-enabled web page with this code:

<%@ Page Language="C#" MasterPageFile="~/main.master" AutoEventWireup="true" Inherits="taskChecker" Codebehind="taskChecker.aspx.cs" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<script type="text/javascript">

function contentPageLoad(sender, e) {

}

</script>

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

<div class="contentHeader">

Task Checker

</div>

<div class="content1">

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<div style="font-size:14px; font-weight:bold; margin-left:-100px; margin-top:-30px">

<asp:RadioButtonList ID="radioButtonMode" runat="server" RepeatDirection="Horizontal" AutoPostBack="true" OnSelectedIndexChanged="radioButtonMode_IndexChanged" CellSpacing="30">

<asp:ListItem Text="Display Task" Value="Display" />

<asp:ListItem Text="Compare Tasks" Value="Compare" />

</asp:RadioButtonList>

</div>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" Visible="true">

<ProgressTemplate>

<div id="progress" class="progress3">

<img src="../Images/Progress/indicator_big.gif" />

<br /><br />

Please Wait

</div>

</ProgressTemplate>

</asp:UpdateProgress>

<asp:Panel ID="panelMain" runat="server" Visible="false" style="margin-left:-50px; margin-bottom:30px">

<div class="titleBlack" style="padding-bottom:10px">

<asp:Label ID="labelInstructions" runat="server" />

</div>

<div id="divTaskListGrid1" style="overflow-x:hidden; overflow-y:auto; width:705px; max-height:200px; border:1px solid black">

<telerik:RadGrid ID="radGridTaskList" runat="server" AutoGenerateColumns="false" AllowSorting="true" Width="687px"

BorderColor="#E7E7FF" BorderStyle="Solid" BorderWidth="1" CellPadding="0" GridLines="Both" OnSelectedIndexChanged="radGridTaskList_SelectedIndexChanged">

<HeaderStyle Font-Bold="true" ForeColor="#031d5b" VerticalAlign="Middle" Height="20" CssClass="pointerOnly headerGrid" />

<ItemStyle CssClass="radGridItem" />

<AlternatingItemStyle CssClass="radGridAltItem" />

<ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true" Selecting-AllowRowSelect="true" />

<MasterTableView BorderWidth="0" DataKeyNames="TaskID,TaskLevel">

<Columns>

<telerik:GridBoundColumn DataField="TaskId" HeaderText="Task Id" SortExpression="TaskId" ItemStyle-HorizontalAlign="Center">

<HeaderStyle Width="55px" HorizontalAlign="Center" />

<ItemStyle HorizontalAlign="Center" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="TaskNumber" HeaderText="Task #" SortExpression="TaskNumber" ItemStyle-HorizontalAlign="Center">

<HeaderStyle Width="40px" HorizontalAlign="Center" />

<ItemStyle HorizontalAlign="Right" CssClass="indentRight20" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="TaskDate" HeaderText="Date" SortExpression="TaskDate" DataFormatString="{0:MMM yyyy}">

<HeaderStyle HorizontalAlign="Center" Width="60px" />

<ItemStyle HorizontalAlign="Center" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Mine">

<HeaderStyle HorizontalAlign="Center" Width="50px" />

<ItemStyle HorizontalAlign="Center" />

<ItemTemplate>

<%# GetMine(Convert.ToInt32(Eval("TaskLevel"))) %>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Contract">

<HeaderStyle HorizontalAlign="Center" Width="60px" />

<ItemStyle HorizontalAlign="Center" />

<ItemTemplate>

<%# GetContract(Convert.ToInt32(Eval("TaskLevel"))) %>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="TaskDescription" HeaderText="Description" SortExpression="TaskDescription" ReadOnly="True">

<HeaderStyle HorizontalAlign="Left" />

<ItemStyle Wrap="true" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="TaskStdHours" HeaderText="Std Hrs" SortExpression="TaskStdHours" ItemStyle-HorizontalAlign="Center">

<HeaderStyle Width="60px" HorizontalAlign="Center" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderStyle-Width="60px" HeaderText="Completed" ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<asp:Label ID="labelCompleted" runat="server" Text='<%# Convert.ToBoolean(Eval("TaskStatus")) ? "Yes" : "No" %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

<div id="divTaskListGrid2" runat="server" style="overflow-x:hidden; overflow-y:auto; width:705px; max-height:200px; border:1px solid black; margin-top:25px">

<telerik:RadGrid ID="radGridTaskList2" runat="server" AutoGenerateColumns="false" AllowSorting="true" Width="687px"

BorderColor="#E7E7FF" BorderStyle="Solid" BorderWidth="1" CellPadding="0" GridLines="Both" OnSelectedIndexChanged="radGridTaskList2_SelectedIndexChanged">

<HeaderStyle Font-Bold="true" ForeColor="#031d5b" VerticalAlign="Middle" Height="20" CssClass="pointerOnly headerGrid2" />

<ItemStyle CssClass="radGridItem" />

<AlternatingItemStyle CssClass="radGridAltItem" />

<ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true" Selecting-AllowRowSelect="true" />

<MasterTableView BorderWidth="0" DataKeyNames="TaskID,TaskLevel">

<Columns>

<telerik:GridBoundColumn DataField="TaskId" HeaderText="Task Id" SortExpression="TaskId" ItemStyle-HorizontalAlign="Center">

<HeaderStyle Width="55px" HorizontalAlign="Center" />

<ItemStyle HorizontalAlign="Center" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="TaskNumber" HeaderText="Task #" SortExpression="TaskNumber" ItemStyle-HorizontalAlign="Center">

<HeaderStyle Width="40px" HorizontalAlign="Center" />

<ItemStyle HorizontalAlign="Right" CssClass="indentRight20" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="TaskDate" HeaderText="Date" SortExpression="TaskDate" DataFormatString="{0:MMM yyyy}">

<HeaderStyle HorizontalAlign="Center" Width="60px" />

<ItemStyle HorizontalAlign="Center" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Mine">

<HeaderStyle HorizontalAlign="Center" Width="50px" />

<ItemStyle HorizontalAlign="Center" />

<ItemTemplate>

<%# GetMine(Convert.ToInt32(Eval("TaskLevel"))) %>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Contract">

<HeaderStyle HorizontalAlign="Center" Width="60px" />

<ItemStyle HorizontalAlign="Center" />

<ItemTemplate>

<%# GetContract(Convert.ToInt32(Eval("TaskLevel"))) %>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="TaskDescription" HeaderText="Description" SortExpression="TaskDescription" ReadOnly="True">

<HeaderStyle HorizontalAlign="Left" />

<ItemStyle Wrap="true" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="TaskStdHours" HeaderText="Std Hrs" SortExpression="TaskStdHours" ItemStyle-HorizontalAlign="Center">

<HeaderStyle Width="60px" HorizontalAlign="Center" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderStyle-Width="60px" HeaderText="Completed" ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<asp:Label ID="labelCompleted" runat="server" Text='<%# Convert.ToBoolean(Eval("TaskStatus")) ? "Yes" : "No" %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

<div style="padding-top:20px">

<asp:Button ID="buttonSubmit" runat="server" OnClick="buttonSubmit_Click" />

</div>

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

<telerik:RadWindow ID="rwResults" runat="server" Behaviors="Close,Move" EnableShadow="true" VisibleStatusbar="false" VisibleTitlebar="true" AutoSize="true" Modal="true" >

<ContentTemplate>

<asp:UpdatePanel ID="UpdatePanel2" runat="server">

<ContentTemplate>

<telerik:RadGrid ID="radGridResults" runat="server" AutoGenerateColumns="false" AllowSorting="true" Width="600" Height="400"

BorderColor="#E7E7FF" BorderStyle="Solid" BorderWidth="1" CellPadding="0" GridLines="Both">

<HeaderStyle Font-Bold="true" ForeColor="#031d5b" VerticalAlign="Middle" Height="20" CssClass="pointerOnly headerGrid" />

<ItemStyle CssClass="radGridItem" />

<AlternatingItemStyle CssClass="radGridAltItem" />

<MasterTableView>

<Columns>

<telerik:GridBoundColumn DataField="TableName" Visible="false" />

<telerik:GridBoundColumn DataField="FieldName" HeaderText="Field" ItemStyle-HorizontalAlign="Left">

<HeaderStyle Width="80px" HorizontalAlign="Left" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Value1">

<HeaderStyle HorizontalAlign="Center" Width="60px" BackColor="#bcd0fe" />

<ItemStyle HorizontalAlign="Center" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Value2">

<HeaderStyle HorizontalAlign="Center" Width="60px" BackColor="#d6bcfe" />

<ItemStyle HorizontalAlign="Center" />

</telerik:GridBoundColumn>

<%-- <telerik:GridImageColumn>

<HeaderStyle HorizontalAlign="Center" Width="30px" />

</telerik:GridImageColumn>--%>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</ContentTemplate>

</asp:UpdatePanel>

</ContentTemplate>

</telerik:RadWindow>

</div>

<div class="subtleMsg">

<div id="msg" />

</div>

</asp:Content>

Attached is a screenshot of one of the two modes of the page. In this simpler mode, the user picks an item from a grid and presses "Display Task". That causes a RadWindow to be opened which contains a summary grid displaying associated data for this item.

I spent several hours trying to get the RadGrid in the RadWindow to display. It would not. Only when I added an UpdatePanel in the RadWindow did it suddenly work.

Two questions:

If the parent page has an UpdatePanel then why does the RadWindow need an UpdatePanel too?
If #1 is always true then shouldn't your documentation include this fact? For example, here it does not.

Sincerely,

Robert W.

Window

answered on 02 Apr 2013

3 answers

86 views

UI effect when cancelling keypress.

Hi

I would like to restrict entries of certain characters into a numeric text box, and I am doing it by handling the clientside Keypress event and cancelling the event in the JS function if the keypressed was one that I do not want to allow. This works great and user cannot type in the disallowed characters. (I am restricting the negative sign and the decimal point sign - see code snippet below).

Question I have is when users press a disallowed character, I would like the numeric text box to display the same visual effect as it does when users type in say an alphabet (which is not allowed on the numeric textbox).
In the case of typing in alphabets, the input box gets a red border and an image of a yellow triangle with an '!' is displayed in the control.
How can I achieve this UI effect when I filter out additional characters using custom javascript.

FYI - here's my JS handler that rejects the negative sign and decimal point.

_allowPositiveIntegersOnly = function (sender, args) {

/* Cancel the keystroke if it is a negativesign or a decimal separator */

var keyCharacter = args.get_keyCharacter();

if (keyCharacter == sender.get_numberFormat().DecimalSeparator ||

keyCharacter == sender.get_numberFormat().NegativeSign) {

args.set_cancel(true);

}

};

Thanks

General Discussions

answered on 02 Apr 2013

13 answers

127 views

OnClientPasteHtml FlashManager

hello,

i have a few questions:
1. my flash file has a resource folder where it is stored.
how i can change the flash object so i will be able to add the "base" param to it
2. i want to add a "allowFullScreen=true" how do i do that?
3. is it possible to make the width and height to be working with percentages?

thank you

Editor

answered on 02 Apr 2013

4 answers

251 views

RadButton radio and Itemtemplate

Is there any way to make this work? I mean I want to use radbutton inside repeater and generate proper radio. But groupname is generated automatically and radio button is just not working. If I cannot use repeter is there any other way to use radbutton as bindable list simillar to radiobuttonlist?

Button

answered on 02 Apr 2013

1 answer

296 views

GroupName issue

Hi

I'm not sure if this is a problem as I cant find anything simialr so it must be me, but here goes-

I have this on my page to create a radio button list from my data, I'n doing it this way because I want to assign javascript to each node on load that I cant seem to do with a radiobuttonlist.

<asp:DataList ID="test" runat="server" RepeatDirection="Vertical">

<ItemTemplate>

<telerik:RadButton ID="RadButton1" runat="server" EnableEmbeddedSkins="false" Skin="Activity" ButtonType="ToggleButton" ToggleType="Radio" GroupName="Refer" Text='<%#Eval("Name") %>'></telerik:RadButton>

</ItemTemplate>

</asp:DataList>

The radio buttons whilst being rendered dont behave like radio buttons, ie I can select them all. this is what is being rendered:

<td>

<a id="rpbOutcomes_i1_test_ctl05_RadButton1" class="RadButton RadButton_Activity rbToggleButton" href="javascript:void(0)"><span class="rbPrimaryIcon rbToggleRadio"></span><span class="rbText">test244</span><input id="rpbOutcomes_i1_test_ctl05_RadButton1_ClientState" name="rpbOutcomes_i1_test_ctl05_RadButton1_ClientState" type="hidden" /></a>

</td>

the groupname isn't being written out.

Now this control is inside a RadPanelBar which is causing me other problems, but should this work or have I midssed something?

Andy

Button

answered on 02 Apr 2013

3 answers

102 views

Grid Borders in IE9

Hi Guys,

I have this CSS set on a Metro Skinned Grid to stop the alternating item bottom border as well as the pager border - all works well in every browser except IE (9 at least)

div.RadGrid_Metro .rgRow td,

div.RadGrid_Metro .rgAltRow td

{

border-bottom:0 !important;

}

.RadGrid_Metro td.rgPagerCell

{

border-color:#ffffff !important;

}

All help most appreciated.
Cheers,
Jon

Grid

answered on 02 Apr 2013

1 answer

87 views

RadAjaxManager as unselective initiator

Hello

Is the following a limitation of RadAjaxManager, or is there a better way of configuring the manager control?

When the manager's 'ajaxRequest' function is called from Javascript, it says in the documentation that the radajaxmanager control always acts as the initiator, and so the ajaxsettings on the server-side configuration need to be set to use the id of the manager itself as the 'ajaxified' AjaxControlID.

The problem is that I assume this means that the update of all the Updated controls on the page must be very 'unselective'. Elsewhere in the documentation it says that all Updated controls linked with ajaxsettings to an initiator will be updated when any ajaxsetting for that Ajaxified control is used. Because all the ajaxsettings use the same initiator, does this not mean that it is not possible to selectively update just a single Updated control on the page?

i.e.
with three ajaxsettings:
manager -> panel1
manager -> panel2
manager -> panel3

... all three panels would be updated even if a button inside just one of them triggered the ajaxRequest event.

If this is wrong, can a better way be explained, as this seems like a big limitation to me.

Thanks

Ajax

answered on 02 Apr 2013

1 answer

99 views

hierarchical grid Collaps/Expand Button not visible

I have created hierarchical grid and added a custom skin from telerik site name is

.RadGrid_MyCustomSkin . After that the collaps/expand button is not visible..The css file attached below
Please see the attached image also . How can we resolve this issue.Its very urgent

.RadGrid_MyCustomSkin

{

color: #333;

border-top-color: #828282;

border-right-color: #828282;

border-bottom-color: #828282;

border-left-color: #828282;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

background-image: none;

background-attachment: scroll;

background-repeat: repeat;

background-position-x: 0%;

background-position-y: 0%;

background-size: auto;

background-origin: padding-box;

background-clip: border-box;

background-color: rgb(245, 245, 220);

}

.RadGrid_MyCustomSkin, .RadGrid_MyCustomSkin .rgMasterTable, .RadGrid_MyCustomSkin .rgDetailTable, .RadGrid_MyCustomSkin .rgGroupPanel table, .RadGrid_MyCustomSkin .rgCommandRow table, .RadGrid_MyCustomSkin .rgEditForm table, .GridToolTip_MyCustomSkin

{

line-height: 16px;

font-family: "segoe ui", arial, sans-serif;

font-size: 12px;

font-style: normal;

font-variant: normal;

font-weight: normal;

font-size-adjust: none;

font-stretch: normal;

}

.RadGrid_MyCustomSkin .rgMasterTable, .RadGrid_MyCustomSkin .rgDetailTable

{

border-collapse: separate !important;

}

.RadGrid_MyCustomSkin .rgRow, .RadGrid_MyCustomSkin .rgAltRow, .RadGrid_MyCustomSkin .rgHeader, .RadGrid_MyCustomSkin .rgResizeCol, .RadGrid_MyCustomSkin .rgPager, .RadGrid_MyCustomSkin .rgGroupPanel

{

cursor: default;

}

.RadGrid_MyCustomSkin .rgRow td, .RadGrid_MyCustomSkin .rgAltRow td

{

padding-right: 0px;

padding-left: 0px;

}

.RadGrid_MyCustomSkin .rgAdd, .RadGrid_MyCustomSkin .rgRefresh, .RadGrid_MyCustomSkin .rgEdit, .RadGrid_MyCustomSkin .rgDel, .RadGrid_MyCustomSkin .rgFilter, .RadGrid_MyCustomSkin .rgPagePrev, .RadGrid_MyCustomSkin .rgPageNext, .RadGrid_MyCustomSkin .rgPageFirst, .RadGrid_MyCustomSkin .rgPageLast, .RadGrid_MyCustomSkin .rgExpand, .RadGrid_MyCustomSkin .rgCollapse, .RadGrid_MyCustomSkin .rgSortAsc, .RadGrid_MyCustomSkin .rgSortDesc, .RadGrid_MyCustomSkin .rgUpdate, .RadGrid_MyCustomSkin .rgCancel

{

width: 16px;

height: 16px;

padding-top: 0px;

padding-right: 0px;

padding-bottom: 0px;

padding-left: 0px;

font-size: 1px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 0px;

vertical-align: middle;

border-top-color: currentColor;

border-right-color: currentColor;

border-bottom-color: currentColor;

border-left-color: currentColor;

border-top-width: 0px;

border-right-width: 0px;

border-bottom-width: 0px;

border-left-width: 0px;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

cursor: pointer;

background-image: url("Grid/sprite.gif");

background-repeat: no-repeat;

background-color: transparent;

}

.RadGrid_MyCustomSkin .rgRow td, .RadGrid_MyCustomSkin .rgAltRow td, .RadGrid_MyCustomSkin .rgEditRow td, .RadGrid_MyCustomSkin .rgFooter td

{

padding-top: 4px;

padding-bottom: 3px;

border-top-color: currentColor;

border-right-color: currentColor;

border-bottom-color: currentColor;

border-left-color: currentColor;

border-top-width: 0px;

border-right-width: 0px;

border-bottom-width: 1px;

border-left-width: 0px;

border-top-style: none;

border-right-style: none;

border-bottom-style: solid;

border-left-style: none;

}

.RadGrid_MyCustomSkin .rgAltRow

{

background-image: none;

background-attachment: scroll;

background-repeat: repeat;

background-position-x: 0%;

background-position-y: 0%;

background-size: auto;

background-origin: padding-box;

background-clip: border-box;

background-color: rgb(242, 242, 242);

}

.RadGrid_MyCustomSkin .rgRow td, .RadGrid_MyCustomSkin .rgAltRow td

{

border-top-color: #fff;

border-right-color: #fff;

border-bottom-color: #fff;

border-left-color: #fff;

}

.RadGrid_MyCustomSkin .rgAltRow

{

background-image: none;

background-attachment: scroll;

background-repeat: repeat;

background-position-x: 0%;

background-position-y: 0%;

background-size: auto;

background-origin: padding-box;

background-clip: border-box;

background-color: rgb(255, 235, 205);

}

.RadGrid_MyCustomSkin .rgMasterTable td.rgGroupCol, .RadGrid_MyCustomSkin .rgMasterTable td.rgExpandCol

{

border-top-color: #d9d9d9;

border-right-color: #d9d9d9;

border-bottom-color: #d9d9d9;

border-left-color: #d9d9d9;

background-image: none;

background-attachment: scroll;

background-repeat: repeat;

background-position-x: 0%;

background-position-y: 0%;

background-size: auto;

background-origin: padding-box;

background-clip: border-box;

background-color: rgb(217, 217, 217);

}

.RadGrid_MyCustomSkin .rgExpand

{

background-position-x: 5px;

background-position-y: -496px;

}

.rfdTextbox.RadForm input, .rfdTextbox.RadForm button, .rfdTextbox.RadForm .RadComboBox input, .rfdTextbox.RadForm .RadComboBox input[type=

'text']

{

border-top-color: currentColor;

border-right-color: currentColor;

border-bottom-color: currentColor;

border-left-color: currentColor;

border-top-width: 0px;

border-right-width: 0px;

border-bottom-width: 0px;

border-left-width: 0px;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

background-color: transparent;

}

Grid

answered on 02 Apr 2013