Questions on UI for ASP.NET AJAX Forum

1 answer

153 views

[Solved] 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

183 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

666 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

154 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

346 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

137 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

128 views

Div gets unnecessarily vertical scrollbar when it contains AutoScroll Grid

Hi

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

179 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

1 answer

103 views

Disable RadMenu image

I am building a RadMenu client side where some of the menu items will be disabled. The menu item gets disabled correctly. The problem is that the image still appears enabled. Is there a way to disable the image as well?

See screensnot

thanks, Randy

Menu

answered on 23 Nov 2011

2 answers

153 views

[Solved] Get values of custom fields from Javascript?

Is it possible to fetch the values of a custom field from a Javascript in a RadFileExplorer?
I have successfully implemenented a custom content provider, but I need to get the values from the custom fields

I tried the code below, but I get no results.

function OnItemSelected(sender, args) {

var fexplorer = $find("<%=FileExplorer.ClientID %>");

var txtDocumentDescription = $find("<%=TxtActionDocumentDescription.ClientID %>");

// find the description from custom fields to set it

var grid = fexplorer.get_grid();

var gridSelectedItems = grid.get_selectedItems();

var gridSelectedItem = gridSelectedItems[0];

var description = gridSelectedItem.get_dataItem()["Description"];

txtDocumentDescription.set_value(description);

}

FileExplorer