Questions on UI for ASP.NET AJAX Forum

2 answers

197 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

77 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

117 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

228 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

285 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

97 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

83 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

84 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

1 answer

84 views

Column Disappears When Window Is Too Small But Vertical Space is Reserved

I have a RadGrid with widths set for all of the headers except one. The TableLayout is set to auto. When there is enough room, the column without a width fills the remaining space, as intended. If there is not enough room, the column disappears, but the rows are still sized as if the column was there and the content was wrapping. I would prefer to show the auto-sizing column in all cases and have some kind of minimum size for it. If that is not possible, I would at least like the column to completely disappear and not reserve vertical space for its content. Is either of these things possible?

I have attached images showing this behavior. In "column shown", you can see the Viol Description column, which auto-sizes. In "column hidden", I have resized the window and you can no longer see the Viol Description column, but the grid rows are much taller and there is no content in view that requires that height.

Grid

answered on 02 Apr 2013

2 answers

1.3K+ views

Formatting of Phone Numbers

Hello,

I'm binding this data (a phone number):

5555015555

to a radgrid column. I need it to appear as:

(555) 501-5555

But I tried using a format string and it didn't work. Is the only way to format it through code?

Thanks.

Grid

answered on 02 Apr 2013