Questions on UI for ASP.NET AJAX Forum

110,762 questions

4 answers

143 views

WCAG 2.0 Compliance - Checkboxes and Labels

Hello,

I've been trying to implement a treeview with checkboxes for a SharePoint 2010 custom web part. Just by using the built-in node template, this works without a hitch.

However, a core requirement of this web part is that it is to be fully compliant with the WCAG 2.0 AA standard. Out of the box, the only issue that appears is that the checkboxes do not have a label associated with them; a requirement for WCAG 2.0 A compliance. i've read all over the site that the treeview is WCAG A compliant, but whether that's version 1.0 or 2.0 of the WCAG standard varies based on the source.

I stumbled across a forum post from 2009 which mentions using a custom NodeTemplate to fix the compliancy issue (link is here). The issue is indeed resolved. However, the fix then breaks any client-side checkbox functionality (CheckChildNodes, OnClientNodeCheck, etc). The current solution that I'm using is server-side code; this also has the unfortunate side-effect of causing a postback upon ANY node being selected.

Has anyone been able to find a solution to this problem by using any form of client-side navigation that does not require a postback to function properly?

Thanks

TreeView

answered on 23 Nov 2011

3 answers

731 views

Grid Disappears After Filter Set or Column Sorted

I'm sure the problem I'm having is something I am doing, but I have no idea what it might be. Here's the situation...

I have a web page (.aspx/.aspx.cs) that is essentially a "master/detail" display. The "master" record fields are displayed as labels and the "detail" records are displayed in a grid using a SQLDataSource with a Select Command that is set at run time depending upon the key value of the "master" record.

I have followed one of your grid examples in trying to set this page up, however I did not find one of your examples that uses filters/sorting on the grid and also contains the "master" data fields displayed above.

Here's what happens:
(a) When the page is first displayed everything is fine. The "master" fields are populated corretly and the grid is populated correctly (although I have some minor display issues currently). A screen capture of the resulting page is attached as "Picture 1".

(b) When I enter a filter (doesn't matter which column or what type of filter), the page is re-displayed and the grid is totally gone from the page. A screen capture of the resulting page is attached as "Picture 2".

(c) I have taken all of the grid-related code out of the .aspx and put in another page without the "master" data, applied a filter, and it works just fine. A screen capture of the resulting page is attached as "Picture 3".

Obviously the problem has something to do with the display of the "master" data. But I just have no idea what it might be. The code for the .aspx file only for the "Grid Only" page (used to produce "Picture 3") is attached next. There is no code in the code behind page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Z_GridTest.aspx.cs" Inherits="Z_GridTest" %>

<!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="SignersGrid">

<UpdatedControls>

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

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

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

<div>

<telerik:RadGrid AutoGenerateColumns="false" ID="SignersGrid" runat="server" Width="99.7%"

AllowSorting="true" AllowFilteringByColumn="true" EnableLinqExpressions="false"

AllowPaging="false" PageSize="15"

BorderWidth="1px" BorderColor="#999999" EnableEmbeddedSkins="true" Skin="Default"

DataSourceID="SQLDataSource1"

ShowFooter="True" GridLines="None" >

<PagerStyle Mode="NextPrevAndNumeric" />

<GroupingSettings CaseSensitive="false" />

<MasterTableView AutoGenerateColumns="false" EditMode="InPlace" AllowFilteringByColumn="True"

ShowFooter="True" TableLayout="Auto">

<Columns>

<telerik:GridBoundColumn FilterControlWidth="50px" HeaderText="FirstName" UniqueName="FirstName"

DataField="FirstName" SortExpression="FirstName" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="LastName" Visible="true" DataField="LastName" SortExpression="LastName" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="VoterAddress" HeaderText="Address" DataField="Address" SortExpression="Address" >

</telerik:GridBoundColumn >

<telerik:GridBoundColumn UniqueName="RemoveSignature" HeaderText="Remove" DataField="CountyId" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="MiddleName" Visible="false" DataField="MiddleName" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="NameSuffix" Visible="false" DataField="NameSuffix" >

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings>

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

</ClientSettings>

</telerik:RadGrid>

<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:ElectronicPetitionSystemConnectionString %>"

SelectCommand="SELECT VoterSignatureId, PetitionId, LastName, FirstName, MiddleName, NameSuffix, [Address], CountyId, Email, SignatureImage, CountyVoterId, MvdSerialNumber, DateSigned, ClientIpAddress, VoterSignatureStatusId, CreatedDate, ModifiedDate FROM VoterSignatures WHERE PetitionId = 1001"

ProviderName="System.Data.SqlClient" runat="server">

</asp:SqlDataSource>

</div>

</form>

</body>

</html>

The code below is the "full version" including the display of the "master" fields. This page does contain one statement in the Page_Init event (not a postback only) which sets the value of the Select Command based on the value of a request qeury string member.

<%@ Page Title="" Language="C#" MasterPageFile="~/Masters/EPSDev3.master" AutoEventWireup="true" CodeFile="PetitionInfo.aspx.cs" Inherits="PetitionInfo" %>

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

<style type="text/css">

.VerticalAlign1

{

padding-top: 6px;

}

</style>

</asp:Content>

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

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

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="SignersGrid">

<UpdatedControls>

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

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

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

<div style="width: 800px;">

<div style="float: left; background-color: White; width: 100%; padding: 0px;">

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

<tr>

<td colspan="5" align="center" >

<h2>

<asp:Label ID="VoterAuthenticationLabel" runat="server" Text="<%$ Resources:Resource, PetitionInformationLabel %>"></asp:Label>

</h2>

</td>

</tr>

<tr>

<td width="2%">

</td>

<td width="47%" valign="top">

<table width="100%">

<tr>

<td colspan="2" align="left" style="font-weight: normal; height: 12px;">

<asp:Label ID="Label6" runat="server" Font-Bold="true" Text="<%$ Resources:Resource, CandidateInformationLabel%>"></asp:Label>

</td>

</tr>

<tr>

<td align="left">

<asp:Label ID="CycleLabel" runat="server" Text="<%$ Resources:Resource, CycleLabel %>"></asp:Label>

</td>

<td align="left">

<asp:Label ID="ElectionCycleList" runat="server" Text=""></asp:Label>

</td>

</tr>

<tr>

<td align="left">

<asp:Label ID="Label1" runat="server" Text="<%$ Resources:Resource, RaceLabel %>"></asp:Label>

</td>

<td align="left">

<asp:Label ID="PoliticalRaceList" runat="server" Text=""></asp:Label>

</td>

</tr>

<tr>

<td align="left">

<asp:Label ID="Label2" runat="server" Text="<%$ Resources:Resource, NameLabel %>"></asp:Label>

</td>

<td align="left">

<asp:Label ID="CandidateName" runat="server" Text=""></asp:Label>

</td>

</tr>

<tr>

<td align="left">

<asp:Label ID="Label3" runat="server" Text="<%$ Resources:Resource, AddressLabel %>"></asp:Label>

</td>

<td align="left">

<asp:Label ID="CandidateAddress" runat="server" Text=""></asp:Label>

</td>

</tr>

<tr>

<td align="left">

<asp:Label ID="Label4" runat="server" Text="<%$ Resources:Resource, CityStZipLabel %>"></asp:Label>

</td>

<td align="left">

<asp:Label ID="CandidateCity" runat="server" Text=""></asp:Label>

<asp:Label ID="CandidateState" runat="server" Text=""></asp:Label>

<asp:Label ID="CandidateZipCode" runat="server" Text=""></asp:Label>

</td>

</tr>

<tr>

<td align="left">

<asp:Label ID="Label5" runat="server" Text="<%$ Resources:Resource, CountyLabel %>"></asp:Label>

</td>

<td align="left">

<asp:Label ID="CandidateCountyList" runat="server" Text=""></asp:Label>

</td>

</tr>

</table>

</td>

<td width="2%">

</td>

<td width="47%" valign="top">

<table width="100%">

<tr>

<td colspan="2" align="left" style="font-weight: normal; height: 12px;">

<asp:Label ID="Label7" runat="server" Font-Bold="true" Text="<%$ Resources:Resource, ContactInformationLabel%>"></asp:Label>

</td>

</tr>

<tr>

<td align="left">

<asp:Label ID="Label8" runat="server" Text="<%$ Resources:Resource, NameLabel %>"></asp:Label>

</td>

<td align="left">

<asp:Label ID="ContactName" runat="server" Text=""></asp:Label>

</td>

</tr>

<tr>

<td align="left">

<asp:Label ID="Label9" runat="server" Text="<%$ Resources:Resource, PhoneLabel %>"></asp:Label>

</td>

<td align="left">

<asp:Label ID="ContactPhone" runat="server" Text=""></asp:Label>

</td>

</tr>

<tr>

<td align="left">

<asp:Label ID="Label10" runat="server" Text="<%$ Resources:Resource, EmailLabel %>"></asp:Label>

</td>

<td align="left">

<asp:Label ID="ContactEmailAddress" runat="server" Text=""></asp:Label>

</td>

</tr>

<tr>

<td align="left">

<asp:Label ID="Label11" runat="server" Text="<%$ Resources:Resource, WebSiteLabel %>"></asp:Label>

</td>

<td align="left">

<asp:Label ID="ContactWebSiteURL" runat="server" Text=""></asp:Label>

</td>

</tr>

<tr>

<td align="left">

<asp:Label ID="Label16" runat="server" Text="<%$ Resources:Resource, LinkToLabel %>"></asp:Label>

</td>

<td align="left">

<asp:Label ID="LinkToURL" runat="server" Text=""></asp:Label>

</td>

</tr>

</table>

</td>

<td width="2%">

</td>

</tr>

<tr>

<td colspan="5">

</td>

</tr>

<tr >

<td>

</td>

<td align="center" valign="middle" colspan="3" >

<asp:Label CssClass="VerticalAlign1" ID="PetitionsListTitle" Font-Size="16px" Width="100%" BackColor="#565A43" Height="24px" ForeColor="#ffffff" Font-Bold="true" runat="server" Text="<%$ Resources:Resource, PetitionSignersLabel %>"></asp:Label>

</td>

<td>

</td>

</tr>

<tr>

<td width="2%">

</td>

<td colspan="3" valign="middle">

<telerik:RadGrid AutoGenerateColumns="false" ID="SignersGrid" runat="server" Width="99.7%"

AllowSorting="true" AllowFilteringByColumn="true" EnableLinqExpressions="false"

AllowPaging="false" PageSize="15"

BorderWidth="1px" BorderColor="#999999" EnableEmbeddedSkins="true" Skin="Default"

DataSourceID="SQLDataSource1"

ShowFooter="True" GridLines="None" >

<PagerStyle Mode="NextPrevAndNumeric" />

<GroupingSettings CaseSensitive="false" />

<MasterTableView AutoGenerateColumns="false" EditMode="InPlace" AllowFilteringByColumn="True"

ShowFooter="True" TableLayout="Auto">

<Columns>

<telerik:GridBoundColumn FilterControlWidth="50px" HeaderText="FirstName" UniqueName="FirstName"

DataField="FirstName" SortExpression="FirstName" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="LastName" Visible="true" DataField="LastName" SortExpression="LastName" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="VoterAddress" HeaderText="Address" DataField="Address" SortExpression="Address" >

</telerik:GridBoundColumn >

<telerik:GridBoundColumn UniqueName="RemoveSignature" HeaderText="Remove" DataField="CountyId" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="MiddleName" Visible="false" DataField="MiddleName" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="NameSuffix" Visible="false" DataField="NameSuffix" >

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings>

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

</ClientSettings>

</telerik:RadGrid>

</td>

<td width="2%">

</td>

</tr>

<tr>

<td colspan="5" align="center" >

<asp:Label ID="Label17" runat="server" Text=""></asp:Label>

</td>

</tr>

<tr>

<td colspan="5" align="center" >

<asp:Label ID="SignatureCountMessage" runat="server" Text=""></asp:Label>

</td>

</tr>

<tr>

<td colspan="5" align="center" >

<asp:Label ID="Label18" runat="server" Text=""></asp:Label>

</td>

</tr>

<tr>

<td colspan="5" align="center" >

</td>

</tr>

<tr>

<td colspan="5" align="center" >

</td>

</tr>

<tr>

<td colspan="5" align="center" >

</td>

</tr>

<tr >

<td>

</td>

<td align="center" valign="middle" colspan="3" >

<asp:Label CssClass="VerticalAlign1" ID="Label12" Font-Size="16px" Width="100%" BackColor="#565A43" Height="24px" ForeColor="#ffffff" Font-Bold="true" runat="server" Text="<%$ Resources:Resource, SearchPetitionSignersLabel %>"></asp:Label>

</td>

<td>

</td>

</tr>

<tr>

<td colspan="5" align="center" >

</td>

</tr>

<tr>

<td width="2%">

</td>

<td width="47%" valign="top">

<table width="100%">

<tr>

<td align="left">

<asp:Label ID="Label15" runat="server" Text="<%$ Resources:Resource, FirstLastNameLabel %>"></asp:Label>

</td>

<td align="left">

<asp:TextBox ID="SearchFirstName" Width="80px" runat="server" TabIndex="1"></asp:TextBox>

<asp:TextBox ID="SearchLastName" Width="80px" runat="server" TabIndex="2"></asp:TextBox>

</td>

</tr>

</table>

</td>

<td width="2%">

</td>

<td width="47%" valign="top">

<table width="100%">

<tr>

<td align="left">

<asp:Label ID="Label13" runat="server" Text="<%$ Resources:Resource, AddressLabel %>"></asp:Label>

</td>

<td align="left">

<asp:TextBox ID="SearchAddress" runat="server" TabIndex="3"></asp:TextBox>

</td>

</tr>

</table>

</td>

<td width="2%">

</td>

</tr>

<tr>

<td colspan="5" align="center" >

<asp:RadioButtonList ID="TypeOfCompare" runat="server" CellSpacing="10" RepeatDirection="Horizontal" >

<asp:ListItem Enabled="True" Selected="True" Text="Contains the value anywhere" Value="1" />

<asp:ListItem Enabled="True" Selected="False" Text="Only check the beginning of the entry" Value="2" />

</asp:RadioButtonList>

<br />

<asp:Label ID="SearchInstructions" runat="server" Text="<%$ Resources:Resource, SearchInstructionsLabel %>"></asp:Label>

</td>

</tr>

<tr>

<td colspan="5" align="center" >

</td>

</tr>

<tr>

<td colspan="5" align="center" >

</td>

</tr>

<tr >

<td>

</td>

<td align="center" valign="middle" colspan="3" >

<asp:Label CssClass="VerticalAlign1" ID="Label14" Font-Size="16px" Width="100%" BackColor="#565A43" Height="24px" ForeColor="#ffffff" Font-Bold="true" runat="server" Text="<%$ Resources:Resource, CloseAndPrintLabel %>"></asp:Label>

</td>

<td>

</td>

</tr>

<tr>

<td colspan="5" align="center" >

</td>

</tr>

<tr>

<td colspan="5" align="center" >

<asp:Button ID="ClosePetitionButton" TabIndex="6" runat="server" Text="<%$ Resources:Resource, ClosePetitionBtn %>" />

<asp:Button ID="PrintListButton" TabIndex="7" runat="server" Text="<%$ Resources:Resource, PrintListBtn %>" />

<asp:Button ID="PrintForFilingButton" TabIndex="8" runat="server" Text="<%$ Resources:Resource, PrintForFilingBtn %>" />

</td>

</tr>

<tr>

<td colspan="5" align="center" >

</td>

</tr>

</table>

</div>

<div class="clear">

</div>

<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:ElectronicPetitionSystemConnectionString %>"

ProviderName="System.Data.SqlClient" runat="server">

</asp:SqlDataSource>

</asp:Content>

Can anyone tell me why the display of the "master" data messes with the display/re-display of the grid on the page?

Many thanks in advance for your efforts!

Lynn

Grid

answered on 23 Nov 2011

1 answer

129 views

Accessing the Cancel button in GridEditCommandColumn via enter key - part of a larger problem

We have a complex use case with a RadGrid inside a panel on a page with a master page, multiple user controls, vaildators, a defaultbutton &c.
The problem is that with all this going on, accessing the RadGrid via tab and enter keys has become problematic.

Tabbing through the page and getting to the [+] Add New Record buttons (the InitInsert buttons?) on the page, and then hitting enter in the default scenario causes our default button for the page to fire which is not what we want. We'd like the same thing to happen as if we clicked on it - a new row to be added to the grid.

As a work around, I have enabled keyboard validation, and set the OnKeyPress event in the client events to call javascript where I evaluate the key, see if it's the enter key, and then if so, examine the innerHTML to see what sent it to the JS.

This is bad enough and a poor solution for obvious reasons. However, for the cancel button that is part of the GridEditCommandColumn, the validators on the page are firing which is not what happens when you just click on the Cancel link button in the grid.

I figure there has to be a better built in way of accessing the grid fully via the keyboard with standard tab and enter keys, rather than the non standard keyboard shortcuts, or if I have to do it htis way for all the buttons in the control to be properly caught and handled through javascript.

Any advice would be appreciated.

function OnKeyPress(key)

{

var e = window.event;

if(e.keyCode==13) {

if (e.srcElement.outerHTML.indexOf("AddNewRecordButton") > -1 || e.srcElement.outerHTML.indexOf("$InitInsertButton") > -1) {

__doPostBack('ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl02$ctl00$InitInsertButton', '');

return false;

}

if (e.srcElement.outerHTML.indexOf("ctl02_CancelButton") > -1) {

__doPostBack('ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl02$ctl02$CancelButton', '');

return false;

}

if (e.srcElement.outerHTML.indexOf("ctl04_CancelButton") > -1) {

//__doPostBack('ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl04$CancelButton', '');

WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl04$CancelButton", "", true, "StateAllocationValidation", "", false, true));

return false;

}

if (e.srcElement.outerHTML.indexOf("$PerformInsertButton") > -1) {

WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl02$ctl02$PerformInsertButton", "", true, "", "", false, true));

return false;

}

if (e.srcElement.outerHTML.indexOf("$EditButton") > -1) {

__doPostBack('ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl04$EditButton', '');

return false;

}

if (e.srcElement.outerHTML.indexOf("Delete") > -1) {

__doPostBack('ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl04$ctl00', '');

return false;

}

if (e.srcElement.outerHTML.indexOf("UpdateButton") > -1) {

WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$RadGrid1$ctl00$ctl04$UpdateButton", "", true, "StateAllocationValidation", "", false, true));

return false;

}

Ajax

answered on 23 Nov 2011

8 answers

154 views

telerik:RadMaskedTextBox acting funky without Compatibility View

I have a web site that uses the telerik:RadMaskedTextBox for the input of telephone numbers and social security numbers. I recently upgraded my machine to IE9 and started observing some odd behavior. FYI I can reproduce the issue on your Demo site as well. Here's what I observed. With the IE broswer not in Compatibility View mode, go to the Input: RadMaskedTextBox: First Look section of your Demo site. Change the "Select Mask" to SSN. Set focus to the Input Box. Start typing a number. The number will show up then when you type the next number the box will reset and start typing in the 2nd character location totally losing the 1st number that was typed. Change the browser to Compatibility View and the InputBox works as expected.

I hope I explained this properly so you can reproduce and fix. If not, let me know and I will try and do some kind of a screen capture video thing to try showcase this issue.

Thanks
Steve

Input

answered on 23 Nov 2011

1 answer

640 views

Injecting one more style attribute into GridBoundColumn

I need to inject one more attribute text-align:right into a particular gridboundcolumn. It is already getting page inherited styles. .Itemstyle.Horizontalalign does not have any effect but when I inject text-align:right into the same it works (Verified as in Firebug).

Can you guide me how to inject this attribute to already existing style tag of gridboundcolumn?

Grid

answered on 23 Nov 2011

2 answers

119 views

cannot call method get_selectedItem of null

Hi,

I'm having a problem ... and it may be related to the ID of the combo was renamed dynamically due to a partial post back.
I have a Page which has a Combo Box A showing my provinces, In this page I call a dynamic user control which is refreshed everytime Combo Box A is changed.

In my UC, I have another Combo Box B ( the problematic Combo) and on this UC ( Page_Init) I inject a JS in which i have the following snippet

string jsFunction =

@"

//Search TAB

//cmbSearchType - shows relevant input fields

function DefineView(sender, eventArgs) {

var comboSearch = $find('%%cmbSearchType%%');

//cmbSearch Section

switch (comboSearch.get_selectedItem().get_value()) {

[[MY CODE HERE]

}

function onPageLoad(){

$(document).ready(function(){

DefineView();

});

}";

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "SearchVisibilityPPSA",jsFunction.Replace("%%cmbSearchType%%", cmbSearchType.ClientID),true);



string onLoadScript = @"Sys.Application.add_load(function(){ onPageLoad();})

";



ScriptManager.RegisterStartupScript(this, this.GetType(), "onLoadScript", onLoadScript, true);

As you can see, I replace the ClientID, and on first load of the page, this is resolved correctly like ctl00_PrincipalPlaceHolder_ctl00_cmbSearchType but when I change Combo A, it reload the user control, which in turn reload the script above. In the rendered HTML, The COmbo ID is renamed to ctl00_PrincipalPlaceHolder_ctl01_cmbSearchType (Note the subtle change in name from ct00 to ct01 ) In my debug, I saw this ClientID contain the new ID but somehow it is not replaced regenrated on the rendered html.

I guess my question is how do i force the JS to be re-rendered every time this UC is called? For some reason, it is always using the original rendered JS ( which is why it is working the first time)

Thanks

ComboBox

answered on 23 Nov 2011

5 answers

299 views

Problem with localization of some windows

Hi guys,

In some cases tooltip for close button in rad windows is not localized. For example it can be reproduced when opening RadFileUpload window and also when creating new folder in RadFileExplorer.

Steps to reproduce:

Culture used is: de-DE (Deutch)
All resource files from Resources folder (Telerik.Web.UI project) are included into App_GlobalResources folder of our web application.
Telerik version used is 2011.02.0915.20

We also found in RadWindowLocalization class of Telerik.Web.UI project properties which are marked with Localize attribute. But for some reason it is not working.

Any ideas how to localize this tooltip? We think the problem is related to RadWindow localization.

Probably some additional resource file or new resource line should be added to App_GlobalResources for RadWindow localization?

On this screenshot you can see a problem. (tooltip on 'close' button)

Thanks in advance,
Ernesto.

Window

answered on 23 Nov 2011

3 answers

99 views

Expanded property has no effect when using HeaderTemplate

I have added a checkbox to some of my RadPanelItems using the HeaderTemplate and css. If I set the property Expanded="true" on an Item it doesn't expand. It also doesn't expand if I set the property in my codebehind with for example:
RadPanelBar1.Items(1).Expanded = True

Here is my aspx:

<style type="text/css">

.rpItem .customHeaderItem:hover{

background-position: 0 -200px !important;

cursor: pointer;

}

.rpFirst .customHeaderItem:hover{

background-position: 0 -201px !important;

cursor: pointer;

}

.ItemCheckbox{

float: right;

padding-right: 10px;

}

label{

font-style:normal;

font-weight:normal;

}

</style>

<telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="100%" Skin="Default" ExpandMode="MultipleExpandedItems">

<Items>

<telerik:RadPanelItem CssClass="customHeaderItem" Expanded="true">

<HeaderTemplate>

<span class="rpOut">

<span class="rpExpandHandle"></span>

<asp:CheckBox runat="server" ID="chkIncludeItem1" Text="Include" Checked="true" CssClass="ItemCheckbox" />

<span class="rpText">Panel Item 1</span>

</span>

</HeaderTemplate>

<ContentTemplate>

<p>Content....</p>

</ContentTemplate>

</telerik:RadPanelItem>

<telerik:RadPanelItem CssClass="customHeaderItem">

<HeaderTemplate>

<span class="rpOut">

<span class="rpExpandHandle"></span>

<asp:CheckBox runat="server" ID="chkIncludeItem2" Text="Include" Checked="true" CssClass="ItemCheckbox" />

<span class="rpText">Panel Item 2</span>

</span>

</HeaderTemplate>

<ContentTemplate>

<p>Content....</p>

</ContentTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

Without a HeaderTemplate it works as expected:

<telerik:RadPanelBar runat="server" ID="RadPanelBar2" Width="50%" SkinID="Default" ExpandMode="MultipleExpandedItems">

<Items>

<telerik:RadPanelItem Text="Item 1" Expanded="true">

<ContentTemplate>

<p>Content...</p>

</ContentTemplate>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Item 2">

<ContentTemplate>

<p>Content...</p>

</ContentTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

What am I doing wrong?

Thanks,
Dan

PanelBar

answered on 23 Nov 2011

1 answer

109 views

Div gets unnecessarily vertical scrollbar when it contains AutoScroll Grid

I have a div with a CSS overflow: auto; and a rad grid, and other controls, inside with the grids scroll value set...

This causes the outer div to get a vertical scroll bar unnecessarily as if the grid height had been drawn in full rather than just 325px.

This does not happen in Chrome, only IE (I am specifically using IE9). It doesn't look like a telerik grid bug, but do you know a way to solve this?

Thanks
Russell Mason

Grid

answered on 23 Nov 2011

1 answer

160 views

RadGrid problem with EmulateIE7

Hello,
I use 'RadControls for ASP.NET AJAX Q1 2011 SP2', Windows7 and IE9, I have a problem on the column width of a radgrid.
When I use the document compatibility mode 'EmulateIE7', the width of the columns's header occupies all the grid instead the width of the data items is the value defined. This is a sample to simulate the problem:

<%@ Page EnableEventValidation="false" Language="C#" AutoEventWireup="true" MaintainScrollPositionOnPostback="true"

CodeBehind="Dome1.aspx.cs" Inherits="WebApplication1.Dome1" %>

<%@ Import Namespace="System.Data" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

DataTable dt = new DataTable();

DataRow dr;

int colsNum = 12;

int rowsNum = 10;

string colName = "Column";

for (int j = 1; j <= colsNum; j++)

{

dt.Columns.Add(String.Format("{0}{1}", colName, j));

}

for (int i = 1; i <= rowsNum; i++)

{

dr = dt.NewRow();

for (int k = 1; k <= colsNum; k++)

{

dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);

}

dt.Rows.Add(dr);

}

(sender as RadGrid).DataSource = dt;

}

</script>

<!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 id="Head1" runat="server">

<%-- Comment the following line to remove the problem --%>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>RadGrid problem</title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" OnNeedDataSource="RadGrid_NeedDataSource"

Width="100%">

<MasterTableView TableLayout="fixed">

<Columns>

<telerik:GridBoundColumn DataField="Column1" HeaderText="Header 1" />

<telerik:GridBoundColumn DataField="Column2" HeaderText="Header 2" />

</Columns>

</MasterTableView>

<HeaderStyle Width="200px" />

<ClientSettings>

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

</ClientSettings>

</telerik:RadGrid>

</form>

</body>

</html>

See the attached image:
    - wrong.png with the compatibility mode EmulateIE7
    - correct.png, without the line:
        '<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Why the strange rendering with EmulateIE7 mode?

General Discussions

answered on 23 Nov 2011

Top users last month