Questions on UI for ASP.NET AJAX Forum

3 answers

82 views

Hello,

I have a scenario where I am using a RadGrid to display Terms and Conditions to the user. I have turned off headers and attempted to turn off all grid lines. I am having an issue where there are faint lines appearing and I have not been able to turn them off. The code is included. I believe that with this code, someone should be able to replicate the issue (seems like there is a faint line under every second row). Help would greatly be appreciated.

Designer Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HideGridLines.aspx.cs"

Inherits="Test.HideGridLines" %>

<!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="ScriptManager" runat="server" />

<table width="763" border="0" cellspacing="0" cellpadding="0">

<tr>

<td valign="top">

<asp:UpdatePanel ID="UpdatePanelOptIn" runat="server">

<ContentTemplate>

<telerik:RadGrid ID="RadGridOptIn" runat="server" AutoGenerateColumns="false" ShowHeader="false"

ItemStyle-BackColor="Transparent" AlternatingItemStyle-BackColor="Transparent"

BorderColor="Transparent" OnItemDataBound="RadGridOptIn_ItemDataBound">

<MasterTableView DataKeyNames="OptInTypeId" BackColor="Transparent" BorderColor="Transparent"

GridLines="None">

<Columns>

<telerik:GridTemplateColumn DataField="IsRequired" ItemStyle-HorizontalAlign="Right"

ItemStyle-VerticalAlign="Top">

<ItemTemplate>

<asp:PlaceHolder ID="plhOptInRequired" runat="server" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="IsSelected" ItemStyle-HorizontalAlign="Left"

ItemStyle-VerticalAlign="Top">

<ItemTemplate>

<asp:CheckBox ID="cboIsSelected" runat="server" AutoPostBack="true" OnCheckedChanged="cboIsSelected_CheckedChanged"

TabIndex="30" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="OptInHtml" ItemStyle-HorizontalAlign="Left" ItemStyle-VerticalAlign="Top" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</ContentTemplate>

</asp:UpdatePanel>

</td>

</tr>

</table>

</form>

</body>

</html>

Code Behind Page

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

namespace Test

{

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

{

#region Properties

#region HcpOptIns

private UserProfileOptInList HcpOptIns

{

get

{

if (ViewState["HcpOptIns"] == null)

{

ViewState["HcpOptIns"] = UserProfileOptInList.GetUserProfileOptInList();

}

return (UserProfileOptInList)ViewState["HcpOptIns"];

}

set

{

ViewState["HcpOptIns"] = value;

}

#endregion

#region Events

#region cboIsSelected_CheckedChanged

protected void cboIsSelected_CheckedChanged(object sender, EventArgs e)

{

try

{

CheckBox optIn = (CheckBox)sender;

bool isSelected = optIn.Checked;

GridDataItem item = (GridDataItem)optIn.NamingContainer;

// get UserProfileOptInCollection record by datakey from the grid

long optInTypeID = Convert.ToInt64(item.GetDataKeyValue("OptInTypeId"));

UserProfileOptIn regOptIn = HcpOptIns.ItemByOptInTypeId(optInTypeID);

regOptIn.IsSelected = isSelected;

BindOptIns();

}

catch (Exception ex)

{

string message = ex.Message;

}

#endregion

#region Page_Load

protected void Page_Load(object sender, EventArgs e)

{

BindOptIns();

}

#endregion

#region RadGridOptIn_ItemDataBound

protected void RadGridOptIn_ItemDataBound(object sender, GridItemEventArgs e)

{

try

{

if (e.Item is GridDataItem)

{

if (e.Item.DataItem is UserProfileOptIn)

{

PlaceHolder plhOptInRequired = (PlaceHolder)e.Item.FindControl("plhOptInRequired");

CheckBox chkOptIn = (CheckBox)e.Item.FindControl("cboIsSelected");

UserProfileOptIn optIn = (UserProfileOptIn)e.Item.DataItem;

System.Web.UI.WebControls.Image imgESignature = (System.Web.UI.WebControls.Image)e.Item.FindControl("imgESignature");

if (optIn.IsRequired)

{

AddContentToPlaceHolderControl(@"<span class=""RequiredFieldAsterik""> * </span>", ref plhOptInRequired);

}

else

{

AddContentToPlaceHolderControl(" ", ref plhOptInRequired);

}

if (optIn.IsSelected)

{

chkOptIn.Checked = true;

}

else

{

chkOptIn.Checked = false;

}

catch (Exception ex)

{

string message = ex.Message;

}

#endregion

#region Methods

#region AddContentToPlaceHolderControl

/// <summary>

/// Method to indicate required fields

/// </summary>

/// <param name="controlHTML">HTML Literal Control to be added to the PlaceHolder Control.</param>

/// <param name="inputPlaceHolderControl">PlaceHolder Control that will have literal control added to it.</param>

public static void AddContentToPlaceHolderControl(string controlHTML, ref PlaceHolder inputPlaceHolderControl)

{

Literal htmlForPlaceHolder = new Literal();

htmlForPlaceHolder.Text = controlHTML;

inputPlaceHolderControl.Controls.Add(htmlForPlaceHolder);

}

#endregion

#region BindOptIns

private void BindOptIns()

{

RadGridOptIn.DataSource = HcpOptIns;

RadGridOptIn.DataBind();

}

#endregion

}

UserProfileOptIn Class

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace Test

{

[Serializable]

public class UserProfileOptIn

{

#region Instance Variables

private long _userProfileOptInTypeId;

private long _optInTypeId;

private bool _isRequired;

private bool _isDisplayed;

private bool _isSelected;

private string _optInHtml = string.Empty;

#endregion

#region Properties

public long UserProfileOptInTypeId

{

get { return this._userProfileOptInTypeId; }

set { this._userProfileOptInTypeId = value; }

}

public long OptInTypeId

{

get { return this._optInTypeId; }

set { this._optInTypeId = value; }

}

public bool IsRequired

{

get { return this._isRequired; }

}

public bool IsDisplayed

{

get { return this._isDisplayed; }

set { this._isDisplayed = value; }

}

public bool IsSelected

{

get { return this._isSelected; }

set { this._isSelected = value; }

}

public string OptInHtml

{

get { return this._optInHtml; }

set { this._optInHtml = value; }

}

#endregion

#region Constructor

private UserProfileOptIn(long userProfileOptInTypeId, long optInTypeId, bool isRequired, bool isDisplayed, bool isSelected, string optInHtml)

{

this._userProfileOptInTypeId = userProfileOptInTypeId;

this._optInTypeId = optInTypeId;

this._isRequired = isRequired;

this._isDisplayed = isDisplayed;

this._isSelected = isSelected;

this._optInHtml = optInHtml;

}

#endregion

#region Factory Methods

public static UserProfileOptIn NewUserProfileOptInt(long userProfileOptInTypeId, long optInTypeId, bool isRequired, bool isDisplayed, bool isSelected, string optInHtml)

{

return new UserProfileOptIn(userProfileOptInTypeId, optInTypeId, isRequired, isDisplayed, isSelected, optInHtml);

}

#endregion

}

[Serializable()]

public class UserProfileOptInList : List<UserProfileOptIn>

{

#region Constructor

private UserProfileOptInList(bool getList)

{

if (getList)

{

this.Add(UserProfileOptIn.NewUserProfileOptInt(1, 1, true, true, false, "This is the first condition."));

this.Add(UserProfileOptIn.NewUserProfileOptInt(2, 3, true, true, false, "This is the second condition."));

this.Add(UserProfileOptIn.NewUserProfileOptInt(3, 1, true, true, false, "This is the third condition."));

this.Add(UserProfileOptIn.NewUserProfileOptInt(4, 4, true, true, false, "This is the fourth condition."));

this.Add(UserProfileOptIn.NewUserProfileOptInt(5, 5, true, true, false, "This is the fifth condition."));

this.Add(UserProfileOptIn.NewUserProfileOptInt(6, 6, true, true, false, "This is the sixth condition."));

}

#endregion

#region Factory Methods

public static UserProfileOptInList NewUserProfileOptInList()

{

return new UserProfileOptInList(false);

}

public static UserProfileOptInList GetUserProfileOptInList()

{

return new UserProfileOptInList(true);

}

#endregion

#region Methods

public UserProfileOptIn ItemByOptInTypeId(long optInTypeId)

{

foreach (UserProfileOptIn userProfileOptInItem in this)

{

if (userProfileOptInItem.OptInTypeId == optInTypeId)

{

return userProfileOptInItem;

}

return null;

}

#endregion

}

Thanks,

Grid

answered on 03 Feb 2011

2 answers

65 views

Random record opens in edit mode

Hello,

I have a grid which has around 2000 records in it. When I click on edit to edit the row it opens the random record in the edit mode. I mean if I click on a row with id=5 it opens some other record with different id. I don't know how to solve this issue. I have 2 databases (one for development and one for production) and they both are 100% same. The grid works fine when I use development database but it acts weird when I use the production database. I don't know whether this issue was already there or it is something new.

Any help will be appreciated.

thanks,
Parth

Grid

answered on 03 Feb 2011

2 answers

669 views

TreeView in ComboBox - how to use arrow keys for navigation

I have a RadTreeView inside a RadComboBox and am implementing autocomplete behaviour when the user types into the combobox.
The tree results are being filtered properly but I'm at a loss as to how to enable keyboard navigation.

My needs are pretty basic:

When the user hits the down arrow or tab key while focus is on the combobox, the dropdown will expand (if not already) and focus will move to the first visible leaf node in the tree.
The user can use the up and down arrow keys to navigate between leaf nodes
The user can hit enter to select the currently highlighted/selected leaf node

I have an event handler registered for the KeyUp event on the combobox. When the down arrow is encountered, I'm using this code:

if (key == 40 || key == 9) // down arrow or tab

{

// open combobox if not already

if (!comboBox.get_dropDownVisible()) {

comboBox.showDropDown();

comboBox._childListElementWrapper.style.height = "400px";

}

// focus first visible child node

$(nodes).each(

function (sender, args) {

var node = args;

if (node.get_nodes().get_count() == 0 && // leaf node

!$(node._element).is(':hidden')) // and hasn't been filtered out

{

$(node._contentElement).focus();

node.highlight();

// node.set_selected(true);

return false;

}

);

}

This is working in that the first visible node (I make the node._element <LI> hidden elsewhere) looks selected, but keyboard input isn't changing selected tree items. After fiddling, the focus has either stayed stuck in the textbox, or it focuses the dropdown/treeview and I can scroll the list of items with the keyboard (similar to rolling the mouse scroll wheel).

How can I focus the first tree item and navigate between the visible items with keyboard arrows? I don't think the AccessKey or TabIndex options are appropriate, as this combobox/treeview combo is inside a User Control and there will be several on the page. I do not want the browser's tab key hijacked - I only want to focus the treeview and allow navigation when the user hits the down arrow when the combobox textbox has focus.

If anyone with an understanding of how the treeview object works could point me toward the right approach (narrative or pseudocode is fine) I'd really appreciate it.

Thanks,
Stefan

TreeView

answered on 03 Feb 2011

2 answers

119 views

Using Multiple ExpandCollapse Buttons

I have a row in a RadGrid that contains three buttons:

<asp:Button ID="Button1" CommandName="ExpandCollapse" CommandArgument="1" Text="Button 1" runat="server" />
<asp:Button ID="Button2" CommandName="ExpandCollapse" CommandArgument="2" Text="Button 2" runat="server" />
<asp:Button ID="Button3" CommandName="ExpandCollapse" CommandArgument="3" Text="Button 3" runat="server" />

In my code-behind, I have the following code:

protected void RadGrid_ItemCommand(object sender, GridCommandEventArgs e)
{
   if ((e.CommandName == RadGrid.ExpandCollapseCommandName) && !e.Item.Expanded)
   {
        // Do stuff here...
   }
}

When I click on a button for the first time, I have a NestedViewTemplate that gets shown. How do I keep the NestedViewTemplate open if I click a different button in the same row? For example, I click button 1 to open the NestedViewTemplate and then I click button 2 to keep the NestedViewTemplate open while showing different data.

Grid

answered on 03 Feb 2011

22 answers

205 views

Context menu javascript error

I'm trying to implement an appointment context menu, unfortunately it's giving me an exception here:

Javascript -

l.findItemByValue("CommandEdit").set_enabled(true);

l.findItemByValue("CommandDelete").set_enabled(true);

The scheduler's code is as follows:

<telerik:RadScheduler ID="radScheduler" runat="server" DayEndTime="19:00:00" FirstDayOfWeek="Monday"

LastDayOfWeek="Sunday" OverflowBehavior="Expand" SelectedView="WeekView" ShowAllDayRow="True"

ShowFooter="False" Skin="Windows7" WorkDayEndTime="19:00:00" OnClientAppointmentClick="OnClientAppointmentClick"

OnClientTimeSlotClick="OnClientTimeSlotClick" ShowViewTabs="False" CustomAttributeNames="FileCode, DocketNo"

AdvancedForm-EnableCustomAttributeEditing="true" AllowInsert="False" OnTimeSlotCreated="radScheduler_TimeSlotCreated"

OnFormCreated="radScheduler_FormCreated" StartInsertingInAdvancedForm="false"

EnableDescriptionField="true" EnableCustomAttributeEditing="true" Localization-AdvancedSubject="Code Center"

OnAppointmentContextMenuItemClicked="radScheduler_AppointmentContextMenuItemClicked">

<AdvancedForm Modal="True" />

<Localization AdvancedSubject="Code Center"></Localization>

<TimelineView UserSelectable="False" />

<MonthView UserSelectable="False" />

<AppointmentContextMenus>

<telerik:RadSchedulerContextMenu ID="contextMenu" runat="server">

<Items>

<telerik:RadMenuItem runat="server" Text="Negate Timesheet" Value="NegateCommand">

</telerik:RadMenuItem>

</Items>

</telerik:RadSchedulerContextMenu>

</AppointmentContextMenus>

</telerik:RadScheduler>

The I even tried generating the context menu from telerik's plugin GUI.

Thanks in advance for your help.

Daryl

Scheduler

answered on 03 Feb 2011

2 answers

106 views

Error Passing Parameter To Rad Window

Hi,

I am opening a rad window from code behind on a button click. The rad window is used to display the contents of a multi-line text box. I pass 3 parameters, strErrorId, strFieldName and strFieldValue, to the window and usually it works fine. But ,I get the error ' ...is not a valid virtural path' when one of the parameters passed to the window contains the name of an aspx page or is stored with multiple lines.

Does anyone know how I can pass these type of parameters correctly?

Thank you for your help.

For Example:
If the strFieldValue parameter is http://localhost:54807/WebForm6.aspx then I get the error
~/Modules/Central/WBF CTL Large Field Display.aspx?&ErrorId=216ad1a1-d3b8-4ef0-b70d-c4b1b44fa0d8&FieldName=HTTP Reference&FieldValue=http://localhost:54807/WebForm6.aspx' is not a valid virtual path.

If the strFieldValue parameter is Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.2; .NET4.0C; .NET4.0E) then I do not get the error.

If the strFieldValue parameter is the following I also get the error.
HTTP_CACHE_CONTROL:no-cache
HTTP_CONNECTION:Keep-Alive
HTTP_CONTENT_LENGTH:524812
HTTP_CONTENT_TYPE:application/x-www-form-urlencoded
HTTP_ACCEPT:image/jpeg, image/gif, image/pjpeg, application/x-ms-application, application/xaml+xml, application/x-ms-xbap, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */*
HTTP_ACCEPT_ENCODING:gzip, deflate
HTTP_ACCEPT_LANGUAGE:en-US
HTTP_COOKIE:ASP.NET_SessionId=ipdmwwfq52c0mmit2vqqif55
HTTP_HOST:localhost:54807
HTTP_REFERER:http://localhost:54807/WebForm6.aspx
HTTP_USER_AGENT:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.2; .NET4.0C; .NET4.0E

Below is the code I am using to open the rad widnow

Public Sub ShowFieldDescription(ByVal sender As Object, ByVal e As EventArgs)

Dim ibtDescription As ImageButton = DirectCast(sender, ImageButton)

Dim frvView As FormView = DirectCast(ibtDescription.NamingContainer, FormView)

Dim strFieldName As String = ibtDescription.AlternateText.ToString

Dim strErrorId As String = DirectCast(frvView.FindControl("ErrorId"), Label).Text

Dim txtField As TextBox

Dim strFieldValue As String = ""

Select Case strFieldName

Case "Error Description"

txtField = DirectCast(frvView.FindControl("ErrorDescription"), TextBox)

Case "Error Comments"

txtField = DirectCast(frvView.FindControl("ErrorComments"), TextBox)

Case "HTTP Reference"

txtField = DirectCast(frvView.FindControl("SourceHTTPReference"), TextBox)

Case "Form Data"

txtField = DirectCast(frvView.FindControl("SourceFormData"), TextBox)

Case "All HTTP Headers"

txtField = DirectCast(frvView.FindControl("SourceAllHTTPHeaders"), TextBox)

Case "HTTP User Agent"

txtField = DirectCast(frvView.FindControl("SourceHTTPUserAgent"), TextBox)

End Select

strFieldValue = txtField.Text.ToString

Dim rwdFieldDisplay As New RadWindow

Dim strNavigation As String = "~/Modules/Central/WBF CTL Large Field Display.aspx?&ErrorId=" + strErrorId + "&FieldName=" + strFieldName + "&FieldValue=" + strFieldValue

rwdFieldDisplay.ID = "rwdDisplay"

rwdFieldDisplay.NavigateUrl = strNavigation

rwdFieldDisplay.Skin = "Black"

rwmFieldDescription.Windows.Add(rwdFieldDisplay)

Window

answered on 03 Feb 2011

1 answer

112 views

Scheduler Z-Index

I have a RadScheduler and RadMenu on the same page and if the web browser height is not tall enought when you open any dropdown menu on the page it open upwards and under the RadMenu control. I've tried setting the Z-index on the RadMenu and Scheduler but it doesn't seem to help. How can I make the dropdowns on the adavance edit form always pop up over the remu. Please see the screen shot of the current problem.

Thanks

Scheduler

answered on 03 Feb 2011

5 answers

84 views

Using the AllDay Checkbox script

I have a custom add/edit appointment form and on it I have an All Day checkbox.

I'd like to use the functionality that appears in the more standard forms in that when the checkbox is checked, the time pickers disappear.

Being naturally lazy, I didn't want to have to write the code myself. Is it possible to tie in to the script that the standard forms use?

--
Lazy of Grantham

Scheduler

answered on 03 Feb 2011

2 answers

184 views

ListView Pagination Lost in Cross Page Postback

Hi,
I am post form data from, say, source.aspx to destination.aspx page. The source.aspx page has some checkboxes which are used in a SQL query in the destination.aspx page. For example,

if (Request.Form["color_spice"] != null) { WhereClause += " OR ado_products_fabrics.color = 'spice'"; }

The first time the destination page loads the RadListView shows the pagination fine. However, clicking on the RadDataPager under the RadListView causes a postback where the source.aspx page's Form data are lost. I have tried using PreviousPage.FindControl() method but that too does not resolve in the pagination's postback.

So what can I do? I don't want to use Session variables--there are going to be dozens of controls from the source.aspx page passing values to destination.aspx page. Cookies too will be too much to track then?

Below are the code-fragments for the .aspx and the .cs files.

Thanks!

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

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

</telerik:RadScriptManager>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadListView1">

<UpdatedControls>

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

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div style="width: 880">

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black">

</telerik:RadAjaxLoadingPanel>

<asp:Panel ID="ListViewPanel1" runat="server">

<telerik:RadListView ID="RadListView1" runat="server" DataKeyNames="fabricid" AllowPaging="True">

<LayoutTemplate>

<div class="RadListView RadListViewFloated RadListView_Default">

<div class="rlvFloated">

<div id="itemPlaceholder" runat="server">

</div>

<telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1">

<Fields>

<telerik:RadDataPagerButtonField FieldType="Numeric" />

</Fields>

</telerik:RadDataPager>

</LayoutTemplate>

.....

protected void Page_Load(object sender, EventArgs e)

{

String WhereClause = string.Empty;

//determine which button clicked http://stackoverflow.com/questions/1099020/asp-net-cross-page-posting

if (Request.Form["btnTextGeneric"] != null)

{

// do button 1 stuff

}

else if (Request.Form["btnCBFabrics"] != null)

{

/////COLORS

if (Request.Form["color_spice"] != null) { WhereClause += " OR ado_products_fabrics.color = 'spice'"; }

.....

if (WhereClause != "")

{

RadListView1.DataSource = GetDataTable("SELECT * FROM [ado_products_fabrics] WHERE 0 = 1" + WhereClause);

}

else

{

RadListView1.DataSource = GetDataTable("SELECT * FROM [ado_products_fabrics]");

}

RadListView1.DataBind();

ListView

answered on 03 Feb 2011

0 answers

58 views

onrating not firing

i use from radrating control but i when click on stars not call event
onrating not fired

help me thanks

Rating

asked on 03 Feb 2011