Questions on UI for ASP.NET AJAX Forum

3 answers

145 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

134 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

184 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

106 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

159 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

answered on 23 Nov 2011

7 answers

267 views

[Solved] Multiple Context Menus

I have a treeview, that depending on if a check box is check will display either only nodes that are flagged as "Enabled" in the database, or all nodes. Depending on if a node is set as enabled I would like to attach one of two context menu's to it.

This is the error message I'm getting:
"Multiple controls with the same ID 'contextMenu1' were found. FindControl requires that controls have unique IDs."

This error occurs when I toggle the check box a couple times.

Below is my code:

<span>Show All Locations:</span>

<asp:CheckBox ID="LocationsTreeView_ChkBox" runat="server" AutoPostBack="true" OnCheckedChanged="LocationsTreeView_CheckedChanged" Checked="false" />

<telerik:RadTreeView ID="LocationsTreeView" runat="server" EnableDragAndDrop="true" MultipleSelect="true" EnableDragAndDropBetweenNodes="true"

AllowNodeEditing="true" OnContextMenuItemClick="LocationsTreeView_ContextMenuItemClick" OnClientContextMenuItemClicking="onClientContextMenuItemClicking"

OnClientContextMenuShowing="onClientContextMenuShowing" OnNodeEdit="LocationsTreeView_NodeEdit"

OnNodeDrop="LocationsTreeView_NodeDrop" OnClientNodeDropping="onNodeDropping" OnClientNodeDragging="onNodeDragging" >

</telerik:RadTreeView>

protected void LocationsTreeView_CheckedChanged(object sender, EventArgs e)

{

CheckBox cb = (CheckBox)sender;

if (cb.Checked == true)

LocationTreeAll();

else if (cb.Checked == false)

LocationTree();

}

public void LocationTreeContextMenu()

{

// Define Context Menu 1 ## Enable Menu Item

// Define Context Menu 2 ## Disable Menu Item

RadTreeViewContextMenu contextMenu1 = new RadTreeViewContextMenu();

RadTreeViewContextMenu contextMenu2 = new RadTreeViewContextMenu();

contextMenu1.ID = "contextMenu1";

contextMenu2.ID = "contextMenu2";

// Build Menu's

RadMenuItem menuItem1 = new RadMenuItem();

menuItem1.Value = "Rename";

menuItem1.Text = "Rename ...";

menuItem1.Enabled = true;

menuItem1.ImageUrl="images/icons/edit_48.png";

contextMenu1.Items.Add(menuItem1);

contextMenu2.Items.Add(menuItem1);

RadMenuItem menuItem2 = new RadMenuItem();

menuItem2.IsSeparator = true;

contextMenu1.Items.Add(menuItem2);

contextMenu2.Items.Add(menuItem2);

RadMenuItem menuItem3 = new RadMenuItem();

menuItem3.Value = "addLocation";

menuItem3.Text = "Add Location";

menuItem3.Enabled = true;

menuItem3.ImageUrl = "images/icons/add_16.png";

contextMenu1.Items.Add(menuItem3);

contextMenu2.Items.Add(menuItem3);

RadMenuItem menuItem4 = new RadMenuItem();

menuItem4.Value = "enableLocation";

menuItem4.Text = "Enable Location";

menuItem4.Enabled = true;

contextMenu1.Items.Add(menuItem4);

RadMenuItem menuItem5 = new RadMenuItem();

menuItem5.Value = "disableLocation";

menuItem5.Text = "Disable Location";

menuItem5.Enabled = true;

contextMenu2.Items.Add(menuItem5);

RadMenuItem menuItem6 = new RadMenuItem();

menuItem6.Value = "editDetails";

menuItem6.Text = "Edit Details";

menuItem6.Enabled = true;

menuItem6.PostBack = true;

contextMenu1.Items.Add(menuItem6);

contextMenu2.Items.Add(menuItem6);

// Add The context menu to the tree

LocationsTreeView.ContextMenus.Add(contextMenu1);

LocationsTreeView.ContextMenus.Add(contextMenu2);

// Check to see which node gets which context menu

foreach (RadTreeNode node in LocationsTreeView.GetAllNodes())

{

string check = "";

string getStatus = "SELECT Enabled FROM dbo.Locations WHERE ID='" + node.Value.ToString() + "'";

SqlCommand cmd = new SqlCommand(getStatus,connection);

connection.Open();

check = cmd.ExecuteScalar().ToString();

connection.Close();

cmd.Dispose();

if (check == "True")

{

node.ContextMenuID = "contextMenu2";

}

else if (check == "False")

{

node.ContextMenuID = "contextMenu1";

}

TreeView

answered on 23 Nov 2011

5 answers

1.5K+ views

setting default date on datepicker pop up only

Hi,

I was wondering if there was a way to set the default date on the pop up calendar of a date picker without entering the date in the input box?

Regards
Roger

Calendar

answered on 23 Nov 2011

1 answer

76 views

Interacting with custom controls in AppointmentTemplate

I have customized my AppointmentTemplate by adding some controls (Labels and ImageButtons).
I need to access those controls to change values based on info I have in my Appointment object.
My first approach was just using Eval() to toggle the visibility of a LinkButton in the markup based on a custom attribute like this:
            <AppointmentTemplate>
                <p>
                    <h2><%# Eval("Subject") %></h2><br />
                </p>
                <p>
                    <h3><%# string.IsNullOrEmpty(Eval("Attributes['gst_name']").ToString().Trim()) ? "" : "with: " + Eval("Attributes['gst_name']") %></h3>
                </p>
                <p>
                     <asp:ImageButton id= "ibNotes" ImageUrl="~/Images/note.png" runat="server" CommandName="GetNote" Visible = "<%# Eval("Attributes['notelength']") = "0" ? "false" : "true" %>"/>

                </p>
                <p>
                    <h3>AppointmentTemplate<%# Eval("Attributes['modifiers']") %></h3>
                </p>
            </AppointmentTemplate>

But I can't build with it this way. I get an error: "The server tag is not well formed." Referring to my ImageButton location.

So I tried another approach, to get to it in codebehind, but I can't get anything working there either.
What server side event should I use? I'm thinking I'd need to use FindControl() but can't find anything in Intellisense.

Anyone got an example?

Thanks!

Matt

Scheduler

answered on 23 Nov 2011

5 answers

127 views

Setting the row height

hi,

I have a scheduler on an MVC page, doing web-services mode.

In my case the week view and the month view need a different row height. The days have a row corresponding to 5 minutes, which works well with a small row height. This results in the month view looking awful.

I want to change the row height when switching view. There is an event on switching view, this is a server-side. My scheduler is running client-side (no choice doing mvc). I'm looking for a way to hook into the view-change client side.

Any help appreciated

Peter

Scheduler

answered on 23 Nov 2011

3 answers

242 views

[Solved] How to remove vertical scroll bar for RadToolBarSplitButton

Hi,
I have a RadToolBarSplitButton where I set buttons in runtime.
I calcule the dropdown height from the number of  button.

But everyime the vertical scroll bar are visible.

How do you remove this scroll bar ?

int dropDownHeight = (int)(Annees.Buttons.Count * 25);
if (dropDownHeight > 250)
{
   dropDownHeight = 250;
   //show vertical scroll bar
}
else
{
  //not show vertical scroll bar
}
                         
Annees.DropDownHeight = Unit.Pixel(dropDownHeight);

ToolBar

answered on 23 Nov 2011