This is a migrated thread and some comments may be shown as answers.

Problem with RadGrid, Static Headers and Javascript

1 Answer 110 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Leo asked on 11 Jul 2011, 02:20 PM

GridWithoutStaticHeader.png

GridWithStaticHeaders.png

Hi,

I've a little issue with RadGrid, Static Headers and some custom Javascript.

I have a grid, with some GridTemplateColumn, that contains an asp:textbox.
If I right-click on the textbox, a div appears near the textbox. It works great with RadGrid.

but when I made RadGrid works with Static Headers, the div hides behing the grid.

How can I solve this problem?

I attach my code, to show the functionality (you have to comment/uncomment the ClientSetting section about Scrolling and static headers), and also the screenshot.
I'm working with IE9, in Browser Mode:IE8.

Thanks in advance

Leo

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"

CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<%@ Register Assembly="Telerik.Web.UI, Version=2010.2.713.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4"

Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

<script type="text/javascript">

var arrInizialiAttivita = ["B", "F", "M", "P", "T", "V"];

var inizialiAttivita = arrInizialiAttivita.join("");

var currentTextBox = null;

var zParent = 0;

function check(obj) {

if (obj.value.length > 0) {

return false;

}

currentTextBox = obj;

var key = window.event.keyCode;

if (key == 8) {//backspace

return true;

}

if (key == 13) {//invio

return false;

}

if (key == 27) {//esc

return false;

}

var keyCharUpperCase = String.fromCharCode(key).toUpperCase();

var keyCodeUpperCase = keyCharUpperCase.charCodeAt(0);

window.event.keyCode = keyCodeUpperCase;

if (inizialiAttivita.indexOf(keyCharUpperCase) != -1) {

closeHelp();

return true;

}

else {

openHelp(obj, "error");

return false;

}

function openContext(obj) {

if (window.event.button == 2) {

currentTextBox = obj;

openHelp(obj, "context");

}

return false;

}

function openHelp(obj, mode) {

if (mode == "error") {

document.getElementById("spanText").style.display = "block";

}

else {

document.getElementById("spanText").style.display = "none";

}

var helpNode = document.getElementById("divHelp").removeNode(true);

helpNode = obj.offsetParent.appendChild(helpNode);

helpNode.style.display = "block";

zParent = zParent + 1;

obj.offsetParent.style.zIndex = zParent;

}

function closeHelp() {

document.getElementById("divHelp").style.display = "none";

currentTextBox = null;

}

function setTextBoxValue(val) {

currentTextBox.value = val;

document.getElementById("divHelp").style.display = "none";

currentTextBox = null;

}

document.onclick = closeHelp;

</script>

<style type="text/css">

#divHelp

{

border: 1px solid black;

padding: 3px;

background-color: #FFFFCC;

font-family: Tahoma;

font-size: 11px;

display: none;

top: 2px;

left: 22px;

position: absolute;

}

#spanTblHelp

{

white-space: nowrap;

}

#spanText

{

white-space: nowrap;

}

#divHelp a:link, #divHelp a:visited, #divHelp a:active, #divHelp a:hover

{

text-decoration: none;

color: #0000ff;

}

.spanContainer

{

position: relative;

}

.txtBox

{

width: 16px;

height: 16px;

border: 1px solid #cccccc;

font-family: Tahoma;

font-size: 11px;

text-align: center;

}

</style>

<script type="text/javascript">

function CheckAll(checkAllBox, ColumnName) {

var actVar = checkAllBox.checked;

for (i = 0; i < theForm.length; i++) {

e = theForm.elements[i];

if (e.type == 'checkbox' && e.name.indexOf(ColumnName) != -1)

e.checked = actVar;

}

function OnClientDropDownClosing_UpdateText(sender, eventArgs) {

var items = sender.get_items();

var itemsCount = items.get_count();

var ultimoCheck;

var label = "";

var count = 0;

for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++) {

var item = items.getItem(itemIndex);

var checkbox = getItemCheckBox(item);

if (checkbox) {

if (checkbox.checked) {

count++;

if (label == "") {

label = items.getItem(itemIndex).get_text();

} else {

label = label + ', ' + items.getItem(itemIndex).get_text();

}

// if (count > 1) {

// label = count + " selected";

// }

sender.set_text(label);

}

function getItemCheckBox(item) {

//Get the 'div' representing the current RadComboBox Item.

var itemDiv = item.get_element();

//Get the collection of all 'input' elements in the 'div' (which are contained in the Item).

var inputs = itemDiv.getElementsByTagName("input");

for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) {

var input = inputs[inputIndex];

//Check the type of the current 'input' element.

if (input.type == "checkbox") {

return input;

}

// function OnClientDropDownClosing(combobox)

// {

// var i;

// for (i = 0; i < combobox.Items.length; i++)

// {

// if(combo.Items[i].Checked)

// alert(combo.Items[i].Text);

// }

//

// }

</script>

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<div id="divHelp" oncontextmenu="return false">

<span id="spanText">Valore non consentito.<br />

I valori ammessi sono:</span> <span id="spanTblHelp"><a href="#" onclick="setTextBoxValue('B')">

B: Blitz</a><br />

<a href="#" onclick="setTextBoxValue('F')">F: XXX</a><br />

<a href="#" onclick="setTextBoxValue('M')">M: Mail</a><br />

<a href="#" onclick="setTextBoxValue('P')">P: PPP</a><br />

<a href="#" onclick="setTextBoxValue('T')">T: Telefonata</a><br />

<a href="#" onclick="setTextBoxValue('V')">V: Visita</a><br />

<a href="#" onclick="setTextBoxValue('')">(nessun valore)</a> </span>

</div>

<asp:ScriptManager ID="MasterScriptManager" runat="server" AsyncPostBackTimeout="300"

ScriptMode="Release">

</asp:ScriptManager>

<telerik:RadGrid ID="PCG" runat="server" AllowSorting="true" AutoGenerateColumns="False"

ShowFooter="true" AllowPaging="True" EnableEmbeddedSkins="false" EnableViewState="true"

ViewStateMode="Enabled" PageSize="100">

<PagerStyle HorizontalAlign="Left" Mode="NumericPages" ShowPagerText="false" />

<FooterStyle VerticalAlign="Top" />

<ClientSettings>

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

</ClientSettings>

<MasterTableView DataKeyNames="IdCliente,Email" runat="server" PageSize="100" TableLayout="Auto"

AllowSorting="true" ShowFooter="true" EnableViewState="true" ViewStateMode="Enabled">

<PagerStyle CssClass="GridPager" Mode="NumericPages" ShowPagerText="false" />

<Columns>

<telerik:GridTemplateColumn SortExpression="RagioneSociale" UniqueName="RagioneSociale">

<HeaderStyle Width="250px" />

<FooterStyle Wrap="false" />

<ItemTemplate>

<asp:LinkButton runat="server" CssClass="LabelNoWrapStyle" CommandName="DettagliaLink"

ID="lblRagioneSociale" Text="AAAA"></asp:LinkButton>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn>

<HeaderStyle Width="80px" />

<FooterStyle Wrap="false" />

<ItemStyle HorizontalAlign="Right" />

<ItemTemplate>

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

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn>

<HeaderStyle Width="80px" />

<FooterStyle Wrap="false" />

<ItemStyle HorizontalAlign="Right" />

<ItemTemplate>

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

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="C1" DataField="1" DataType="System.Int32">

<FooterStyle Width="10px" HorizontalAlign="Center" />

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

<ItemStyle HorizontalAlign="Center" />

<HeaderTemplate>

<a id="btnGiornaliero1" runat="server">1</a>

</HeaderTemplate>

<ItemTemplate>

<span class="spanContainer">

<asp:TextBox runat="server" ID="txtC1" MaxLength="1" onKeyPress="event.returnValue=check(this);"

onContextMenu="return false" onMouseDown="openContext(this)" CssClass="txtBox"></asp:TextBox>

</span>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="C2" DataField="2" DataType="System.Int32">

<FooterStyle Width="10px" HorizontalAlign="Center" />

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

<ItemStyle HorizontalAlign="Center" />

<HeaderTemplate>

<a id="btnGiornaliero2" runat="server">2</a>

</HeaderTemplate>

<ItemTemplate>

<span class="spanContainer">

<asp:TextBox runat="server" ID="txtC2" MaxLength="1" onKeyPress="event.returnValue=check(this);"

onContextMenu="return false" onMouseDown="openContext(this)" CssClass="txtBox"></asp:TextBox>

</span>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="C3" DataField="3" DataType="System.Int32">

<FooterStyle Width="10px" HorizontalAlign="Center" />

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

<ItemStyle HorizontalAlign="Center" />

<HeaderTemplate>

<a id="btnGiornaliero3" runat="server">3</a>

</HeaderTemplate>

<ItemTemplate>

<span class="spanContainer">

<asp:TextBox runat="server" ID="txtC3" MaxLength="1" onKeyPress="event.returnValue=check(this);"

onContextMenu="return false" onMouseDown="openContext(this)" CssClass="txtBox"></asp:TextBox>

</span>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="C4" DataField="4" DataType="System.Int32">

<FooterStyle Width="10px" HorizontalAlign="Center" />

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

<ItemStyle HorizontalAlign="Center" />

<HeaderTemplate>

<a id="btnGiornaliero4" runat="server">4</a>

</HeaderTemplate>

<ItemTemplate>

<span class="spanContainer">

<asp:TextBox runat="server" ID="txtC4" MaxLength="1" onKeyPress="event.returnValue=check(this);"

onContextMenu="return false" onMouseDown="openContext(this)" CssClass="txtBox"></asp:TextBox>

</span>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="C5" DataField="5" DataType="System.Int32">

<FooterStyle Width="10px" HorizontalAlign="Center" />

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

<ItemStyle HorizontalAlign="Center" />

<HeaderTemplate>

<a id="btnGiornaliero5" runat="server">5</a>

</HeaderTemplate>

<ItemTemplate>

<span class="spanContainer">

<asp:TextBox runat="server" ID="txtC5" MaxLength="1" onKeyPress="event.returnValue=check(this);"

onContextMenu="return false" onMouseDown="openContext(this)" CssClass="txtBox"></asp:TextBox>

</span>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="C6" DataField="6" DataType="System.Int32">

<FooterStyle Width="10px" HorizontalAlign="Center" />

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

<ItemStyle HorizontalAlign="Center" />

<HeaderTemplate>

<a id="btnGiornaliero6" runat="server">6</a>

</HeaderTemplate>

<ItemTemplate>

<span class="spanContainer">

<asp:TextBox runat="server" ID="txtC6" MaxLength="1" onKeyPress="event.returnValue=check(this);"

onContextMenu="return false" onMouseDown="openContext(this)" CssClass="txtBox"></asp:TextBox>

</span>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="C7" DataField="7" DataType="System.Int32">

<FooterStyle Width="10px" HorizontalAlign="Center" />

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

<ItemStyle HorizontalAlign="Center" />

<HeaderTemplate>

<a id="btnGiornaliero7" runat="server">7</a>

</HeaderTemplate>

<ItemTemplate>

<span class="spanContainer">

<asp:TextBox runat="server" ID="txtC7" MaxLength="1" onKeyPress="event.returnValue=check(this);"

onContextMenu="return false" onMouseDown="openContext(this)" CssClass="txtBox"></asp:TextBox>

</span>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="C8" DataField="8" DataType="System.Int32">

<FooterStyle Width="10px" HorizontalAlign="Center" />

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

<ItemStyle HorizontalAlign="Center" />

<HeaderTemplate>

<a id="btnGiornaliero8" runat="server">8</a>

</HeaderTemplate>

<ItemTemplate>

<span class="spanContainer">

<asp:TextBox runat="server" ID="txtC8" MaxLength="1" onKeyPress="event.returnValue=check(this);"

onContextMenu="return false" onMouseDown="openContext(this)" CssClass="txtBox"></asp:TextBox>

</span>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="C9" DataField="9" DataType="System.Int32">

<FooterStyle Width="10px" HorizontalAlign="Center" />

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

<ItemStyle HorizontalAlign="Center" />

<HeaderTemplate>

<a id="btnGiornaliero9" runat="server">9</a>

</HeaderTemplate>

<ItemTemplate>

<span class="spanContainer">

<asp:TextBox runat="server" ID="txtC9" MaxLength="1" onKeyPress="event.returnValue=check(this);"

onContextMenu="return false" onMouseDown="openContext(this)" CssClass="txtBox"></asp:TextBox>

</span>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="C10" DataField="10" DataType="System.Int32">

<FooterStyle Width="10px" HorizontalAlign="Center" />

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

<ItemStyle HorizontalAlign="Center" />

<HeaderTemplate>

<a id="btnGiornaliero10" runat="server">10</a>

</HeaderTemplate>

<ItemTemplate>

<span class="spanContainer">

<asp:TextBox runat="server" ID="txtC10" MaxLength="1" onKeyPress="event.returnValue=check(this);"

onContextMenu="return false" onMouseDown="openContext(this)" CssClass="txtBox"></asp:TextBox>

</span>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="C11" DataField="11" DataType="System.Int32">

<FooterStyle Width="10px" HorizontalAlign="Center" />

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

<ItemStyle HorizontalAlign="Center" />

<HeaderTemplate>

<a id="btnGiornaliero11" runat="server">11</a>

</HeaderTemplate>

<ItemTemplate>

<span class="spanContainer">

<asp:TextBox runat="server" ID="txtC11" MaxLength="1" onKeyPress="event.returnValue=check(this);"

onContextMenu="return false" onMouseDown="openContext(this)" CssClass="txtBox"></asp:TextBox>

</span>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="C12" DataField="12" DataType="System.Int32">

<FooterStyle Width="10px" HorizontalAlign="Center" />

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

<ItemStyle HorizontalAlign="Center" />

<HeaderTemplate>

<a id="btnGiornaliero12" runat="server">12</a>

</HeaderTemplate>

<ItemTemplate>

<span class="spanContainer">

<asp:TextBox runat="server" ID="txtC12" MaxLength="1" onKeyPress="event.returnValue=check(this);"

onContextMenu="return false" onMouseDown="openContext(this)" CssClass="txtBox"></asp:TextBox>

</span>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</asp:Content>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace WebApplication1

{

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

List<Item> items = new List<Item>();

items.Add(new Item() { IdCliente = 1, Email = "Mark" });

items.Add(new Item() { IdCliente = 2, Email = "Jon" });

items.Add(new Item() { IdCliente = 3, Email = "Frank" });

items.Add(new Item() { IdCliente = 4, Email = "Mark" });

items.Add(new Item() { IdCliente = 5, Email = "Jon" });

items.Add(new Item() { IdCliente = 6, Email = "Frank" });

items.Add(new Item() { IdCliente = 7, Email = "Mark" });

items.Add(new Item() { IdCliente = 8, Email = "Jon" });

items.Add(new Item() { IdCliente = 9, Email = "Frank" });

items.Add(new Item() { IdCliente = 10, Email = "Mark" });

items.Add(new Item() { IdCliente = 20, Email = "Jon" });

items.Add(new Item() { IdCliente = 30, Email = "Frank" });

items.Add(new Item() { IdCliente = 11, Email = "Mark" });

items.Add(new Item() { IdCliente = 21, Email = "Jon" });

items.Add(new Item() { IdCliente = 31, Email = "Frank" });

items.Add(new Item() { IdCliente = 12, Email = "Mark" });

items.Add(new Item() { IdCliente = 22, Email = "Jon" });

items.Add(new Item() { IdCliente = 32, Email = "Frank" });

items.Add(new Item() { IdCliente = 13, Email = "Mark" });

items.Add(new Item() { IdCliente = 23, Email = "Jon" });

items.Add(new Item() { IdCliente = 33, Email = "Frank" });

items.Add(new Item() { IdCliente = 14, Email = "Mark" });

items.Add(new Item() { IdCliente = 24, Email = "Jon" });

items.Add(new Item() { IdCliente = 34, Email = "Frank" });

items.Add(new Item() { IdCliente = 15, Email = "Mark" });

items.Add(new Item() { IdCliente = 25, Email = "Jon" });

items.Add(new Item() { IdCliente = 15, Email = "Mark" });

//items.Add(new Item() { IdCliente = 26, Email = "Jon" });

//items.Add(new Item() { IdCliente = 16, Email = "Mark" });

//items.Add(new Item() { IdCliente = 26, Email = "Jon" });

//items.Add(new Item() { IdCliente = 3, Email = "Frank" });

//items.Add(new Item() { IdCliente = 1, Email = "Mark" });

//items.Add(new Item() { IdCliente = 2, Email = "Jon" });

//items.Add(new Item() { IdCliente = 3, Email = "Frank" });

//items.Add(new Item() { IdCliente = 1, Email = "Mark" });

//items.Add(new Item() { IdCliente = 2, Email = "Jon" });

//items.Add(new Item() { IdCliente = 3, Email = "Frank" });

//items.Add(new Item() { IdCliente = 1, Email = "Mark" });

//items.Add(new Item() { IdCliente = 2, Email = "Jon" });

//items.Add(new Item() { IdCliente = 3, Email = "Frank" });

//items.Add(new Item() { IdCliente = 1, Email = "Mark" });

//items.Add(new Item() { IdCliente = 2, Email = "Jon" });

//items.Add(new Item() { IdCliente = 3, Email = "Frank" });

PCG.DataSource = items;

}

public class Item

{

private int id;

public int IdCliente

{

get { return id; }

set { id = value; }

}

private string name;

public string Email

{

get { return name; }

set { name = value; }

}

Problem with RadGrid, Static Headers and Javascript

1 Answer, 1 is accepted