Questions on UI for ASP.NET AJAX Forum

3 answers

127 views

Recurrence Exceptions Not Resetting in Code Behind

Hello,
I am doing all my data handling in the code behind. If I create a daily recurring appointment the parent RecurrenceRule gets updated correctly and I end up with, for example: DTSTART:20110606T073000Z\n\rDTEND:20110606T083000Z\n\rRRULE:FREQ=DAILY;INTERVAL=1;BYDAY=MO,TU,WE,TH,FR\n\rEXDATE:20110609T073000Z

I can edit everything about the series except removing the the exceptions.

I notice that in the examples resetting exceptions reflects immediately in the UI, before clicking save. For me, this does not happen. It says Working... Then it says Done.. But the deleted day does not return. And when I click Save, in the code behind, the AppointmentUpdate event, e.ModifiedAppointment.RecurrenceRule shows the exceptions I was trying to remove.

Is there an event server or client side that I need to be handling?

Here is my aspx and codebehind:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="CRMScheduler.ascx.vb" Inherits="CRM_TestClient.CRMScheduler" %>

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

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

<AjaxSettings>

<rad:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<rad:AjaxUpdatedControl ControlID="RadAjaxManager1" />

</UpdatedControls>

</rad:AjaxSetting>

<rad:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<rad:AjaxUpdatedControl ControlID="Scheduler" />

</UpdatedControls>

</rad:AjaxSetting>

<rad:AjaxSetting AjaxControlID="Scheduler">

<UpdatedControls>

<rad:AjaxUpdatedControl ControlID="Scheduler" />

</UpdatedControls>

</rad:AjaxSetting>

</AjaxSettings>

</rad:RadAjaxManager>

<rad:RadScheduler runat="server" ID="Scheduler" Width="753px" Height="600px" Skin="Vista"

EnableExactTimeRendering="true" StartEditingInAdvancedForm="true" StartInsertingInAdvancedForm="true"

DataKeyField="Schedule_id" DataStartField="Start" DataEndField="End" DataSubjectField="Subject" DataDescriptionField="Description" DataRecurrenceField="RecurrenceRule"

DataReminderField="Reminder" DataRecurrenceParentKeyField="RecurrenceParentSchedule_id" AppointmentContextMenuSettings-EnableDefault="false" TimeSlotContextMenuSettings-EnableDefault="false" TimelineView-UserSelectable="false" >

<AdvancedForm Modal="true" />

</rad:RadScheduler>

Imports System

Imports System.Web.UI

Imports System.Web.UI.WebControls

Imports Telerik.Web.UI

Public Class CRMScheduler

Inherits System.Web.UI.UserControl

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not IsPostBack Then

' 2011-06-03 10:00:00

Scheduler.SelectedDate = Now()

Scheduler.SelectedView = SchedulerViewType.WeekView

Scheduler.DayStartTime = New TimeSpan(7, 0, 0)

Scheduler.DayEndTime = New TimeSpan(20, 0, 0)

Scheduler.WorkDayStartTime = New TimeSpan(8, 0, 0)

Scheduler.WorkDayEndTime = New TimeSpan(18, 0, 0)

Scheduler.FirstDayOfWeek = DayOfWeek.Monday

Scheduler.LastDayOfWeek = DayOfWeek.Saturday

BindSchedule()

End If

End Sub

Private Sub BindSchedule()

Dim ds As List(Of objCRM.Schedule) = objCRM.Schedule.SelectScheduleByDealer(Session("Dealer_id"))

For i As Int32 = 0 To ds.Count - 1

If ds(i).RecurrenceRule = "" Then

ds(i).RecurrenceRule = Nothing

End If

Next

Scheduler.DataSource = ds

Scheduler.DataBind()

End Sub

Private Sub Scheduler_AppointmentDataBound(sender As Object, e As Telerik.Web.UI.SchedulerEventArgs) Handles Scheduler.AppointmentDataBound

Dim RecurrenceRule As String = e.Appointment.RecurrenceRule

If e.Appointment.RecurrenceParentID = -1 Then

e.Appointment.RecurrenceParentID = Nothing

End If

End Sub

Private Sub Scheduler_AppointmentDelete(sender As Object, e As Telerik.Web.UI.AppointmentDeleteEventArgs) Handles Scheduler.AppointmentDelete

objCRM.Schedule.DeleteSchedule(e.Appointment.ID)

BindSchedule()

End Sub

Private Sub Scheduler_AppointmentInsert(sender As Object, e As Telerik.Web.UI.AppointmentInsertEventArgs) Handles Scheduler.AppointmentInsert

Dim User_id As Int32 = -1

Dim Subject As String = e.Appointment.Subject

Dim Description As String = e.Appointment.Description

Dim Start As String = e.Appointment.Start.ToString

Dim [End] As String = e.Appointment.End.ToString

Dim RecurrenceRule As String = e.Appointment.RecurrenceRule.ToString

Dim RecurrenceParentSchedule_id As String = IIf(e.Appointment.RecurrenceParentID Is Nothing, -1, CInt(e.Appointment.RecurrenceParentID))

Dim Reminder As String = e.Appointment.Reminders.ToString

Dim s As objCRM.Schedule = New objCRM.Schedule(Session("Dealer_id"), User_id, Subject, Description, Start, [End], RecurrenceRule, RecurrenceParentSchedule_id, Reminder)

BindSchedule()

End Sub

Private Sub Scheduler_AppointmentUpdate(sender As Object, e As Telerik.Web.UI.AppointmentUpdateEventArgs) Handles Scheduler.AppointmentUpdate

Dim s As objCRM.Schedule = New objCRM.Schedule(e.Appointment.ID)

' Dim User_id As Int32 = -1

s.Subject = e.ModifiedAppointment.Subject

s.Description = e.ModifiedAppointment.Description

s.Start = e.ModifiedAppointment.Start.ToString

s.[End] = e.ModifiedAppointment.End.ToString

s.RecurrenceRule = e.ModifiedAppointment.RecurrenceRule.ToString

s.RecurrenceParentSchedule_id = IIf(e.ModifiedAppointment.RecurrenceParentID Is Nothing, -1, CInt(e.ModifiedAppointment.RecurrenceParentID))

s.Reminder = e.ModifiedAppointment.Reminders.ToString

s.Update()

BindSchedule()

End Sub

Private Sub Scheduler_NavigationCommand(sender As Object, e As Telerik.Web.UI.SchedulerNavigationCommandEventArgs) Handles Scheduler.NavigationCommand

BindSchedule()

End Sub

End Class

Scheduler

answered on 09 Jun 2011

1 answer

94 views

Professional and Client appointments

Hi,

I have a scenario where professional log in into the site and he adds his available time slots during the day. The client will log in to the site and he sees the professional available slots and client books an appointment with the professional based on available slot. Is it possible to achieve this scenario using telerik RadScheduler. We are looking for two way i.e. professional adds the available slot timings and client sees the professional availability and books the appointment.

Can you please advice this scenario is possible to implement by using telerik RadScheduler. If you have any samples or demos please provide.

Regards,
Sarath

Scheduler

answered on 09 Jun 2011

3 answers

184 views

RadGrid with multiple GridDropDownColumn and RadComboBox

I'm having a problem getting the SelectedIndexChangedto fire on my GridDropDownColumn. I have a top RadComboBox that gives me different groups and the grid changes according to its selected value. Each row has 2 columns, the second GridDropDownColumn will get the available dates for the selected provider in the first GridDropDownColumn. I was also trying to have the all selected by default on load. Here is the code i'm using.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucCitasMasivas.ascx.cs" Inherits="Schedules.Controls.ucCitasMasivas" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<style type="text/css">

.style1

{

width: 372px;

}

</style>

<div style="height: 100%; width:100%">

<table>

<tr>

<td class="style1">

<asp:Label ID="lblTipoCitas" runat="server" Text="Tipo de Citas Masivas: "></asp:Label>

<telerik:RadComboBox ID="cmbTipoCitas" Runat="server" AutoPostback="true"

Font-Bold="true" onselectedindexchanged="cmbTipoCitas_SelectedIndexChanged">

</telerik:RadComboBox>

</td>

</tr>

</table>

<telerik:RadGrid ID="grdCitasMasivas" runat="server" Skin="Office2007"

PageSize="50" GridLines="None" AllowMultiRowEdit="True" onprerender="grdCitasMasivas_PreRender"

AllowRowSelect="True" AllowMultiRowSelection="True"

OnColumnCreated="grdCitasMasivas_ColumnCreated" onitemdatabound="grdCitasMasivas_ItemDataBound"

onGridCreated="grdCitasMasivas_ItemCreated" >

<MasterTableView EditMode="InPlace">

<RowIndicatorColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridClientSelectColumn UniqueName="Selected"/>

<telerik:GridDropDownColumn UniqueName="gddProveedor" HeaderText="Proveedor" DropDownControlType="RadComboBox" />

<telerik:GridDropDownColumn UniqueName="gddSelectFecha" HeaderText="Fecha" DropDownControlType="RadComboBox" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

C#:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.Common;

using Telerik.Web.UI;

using CFSE_Data;

using Scheduler_Objects;

namespace Schedules.Controls

{

public partial class ucCitasMasivas : System.Web.UI.UserControl

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

grdCitasMasivas.ClientSettings.Selecting.AllowRowSelect = true;

DataSets.dsAppGroupType.spGetAppGroupType1DataTable dtAppGroups = new Schedules.DataSets.dsAppGroupType.spGetAppGroupType1DataTable();

DataSets.dsAppGroupTypeTableAdapters.spGetAppGroupType1TableAdapter GroupAdapter = new Schedules.DataSets.dsAppGroupTypeTableAdapters.spGetAppGroupType1TableAdapter();

GroupAdapter.Fill(dtAppGroups);

foreach (System.Data.DataRow r in dtAppGroups.Rows)

{

cmbTipoCitas.Items.Add(new Telerik.Web.UI.RadComboBoxItem(r[1].ToString(), r[0].ToString()));

}

setGridView();

}

protected void grdCitasMasivas_PreRender(object sender, EventArgs e)

{

if (!IsPostBack)

{

foreach (GridItem i in grdCitasMasivas.MasterTableView.Items)

{

GridEditableItem edit = i as GridDataItem;

edit.Edit = true;

}

foreach (GridDataItem item in grdCitasMasivas.Items)

{

item.Selected = true;

}

grdCitasMasivas.Rebind();

}

protected void cmbTipoCitas_SelectedIndexChanged(object sender, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)

{

setGridView();

}

public static DataTable GetAppGroup(int GroupCode)

{

DataTable dtable = null;

DBManager db = new DBManager();

DbParameter p = null;

db.CommandName = "Schedule.spGetAppgroupbyGrpid";

p = db.Provider.CreateParameter();

p.ParameterName = "@P_Group_Code";

p.DbType = DbType.Int32;

p.Value = GroupCode;

db.CommandParameters.Add(p);

try

{

dtable = db.ExecuteQuery(false);

}

catch (Exception ex)

{

dtable = null;

throw new Exception("Error en lectura de la base de datos. [" + ex.Message + "]");

}

finally

{

db = null;

}

return dtable;

}

public static DataTable GetProviders(string Taxonomy,int City_Id,int AppType)

{

DataTable dtable = null;

DBManager db = new DBManager();

db.CommandName = "Schedule.uspGetProviderByTaxAndAvlMasiva";

DbParameter p = db.Provider.CreateParameter();

p.ParameterName = "@Taxonomy";

p.DbType = DbType.String;

p.Value = Taxonomy;

DbParameter p2 = db.Provider.CreateParameter();

p2.ParameterName = "@City_Id";

p2.DbType = DbType.Int32;

p2.Value = City_Id;

DbParameter p3 = db.Provider.CreateParameter();

p3.ParameterName = "@AppType";

p3.DbType = DbType.Int32;

p3.Value = AppType;

db.CommandParameters.Add(p);

db.CommandParameters.Add(p2);

db.CommandParameters.Add(p3);

try

{

dtable = db.ExecuteQuery(false);

}

catch (Exception ex)

{

dtable = null;

throw new Exception("Error en lectura de la base de datos. [" + ex.Message + "]");

}

finally

{

db = null;

}

return dtable;

}

public static String GetFechas(int Provider, int AppType)

{

String fechas = ProviderSites.GetAvailableDays("233", DateTime.Today.Year.ToString(), DateTime.Today.Month.ToString(), "2");//TODOL: set provider id

return fechas;

}

protected void setGridView()

{

int Groupid = Int32.Parse(cmbTipoCitas.SelectedValue.ToString());

grdCitasMasivas.DataSource = GetAppGroup(Groupid);

grdCitasMasivas.Rebind();

}

protected void grdCitasMasivas_ColumnCreated(object sender, GridColumnCreatedEventArgs e)

{

if (e.Column.UniqueName == "Group_Code" || e.Column.UniqueName == "Order_Group_ID" || e.Column.UniqueName == "APP_TYPE_ID" || e.Column.UniqueName == "REPEAT_NUMBER")

{

e.Column.Display = false;

}

//columna descripcion es read only

if (e.Column.UniqueName == "APP_TYPE_DESC")

{

GridBoundColumn col = (GridBoundColumn)e.Column;

col.ReadOnly = true;

}

protected void grdCitasMasivas_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridHeaderItem)

{

GridHeaderItem headerItem = (GridHeaderItem)e.Item;

headerItem.Cells[8].Text = "Descripción ";

}

if (e.Item is GridEditableItem && e.Item.IsInEditMode)

{

GridEditableItem editedItem = e.Item as GridEditableItem;

GridEditManager editMan = editedItem.EditManager;

GridDropDownColumnEditor editor = editMan.GetColumnEditor("gddProveedor") as GridDropDownColumnEditor;

RadComboBox rcmb = editedItem["gddProveedor"].Controls[0] as RadComboBox;

TextBox txtbx = (TextBox)editedItem.Controls[7].Controls[0];

int AppType = Convert.ToInt32(txtbx.Text.ToString());

DataTable table = GetProviders("79", 65, AppType); //TODO: Set tax and city id from viewstate

editor.DataSource = table;

editor.DataTextField = "Site_Name";

editor.DataValueField = "Site_ID";

editor.DataBind();

}

protected void grdCitasMasivas_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item is GridEditableItem && e.Item.IsInEditMode)

{

GridDropDownListColumnEditor gddProviders = (e.Item as GridEditFormItem).EditManager.GetColumnEditor("gddSelectFecha") as GridDropDownListColumnEditor;

gddProviders.ComboBoxControl.AutoPostBack = true;

gddProviders.ComboBoxControl.SelectedIndexChanged += new RadComboBoxSelectedIndexChangedEventHandler(this.gddProviders_SelectedIndexChanged);

}

private void gddProviders_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)

{

GridEditableItem editedItem = (sender as RadComboBox).NamingContainer as GridEditableItem;

GridDropDownListColumnEditor gddFechas = editedItem.EditManager.GetColumnEditor("gddSelectFecha") as GridDropDownListColumnEditor;

DataTable ddFecha = new DataTable();

ddFecha.Columns.Add("Fechas");

ddFecha.Rows.Add(GetFechas(233,2));

gddFechas.DataSource = ddFecha;

gddFechas.DataBind();

gddFechas.ComboBoxControl.DataBind();

/*

RadComboBox gddFecha = editedItem["gddSelectFecha"].Controls[0] as RadComboBox;

*/

}

Any advice will be apreciated!

Grid

answered on 09 Jun 2011

1 answer

74 views

loadingpanel issue in certain browsers

I have a loading panel with declaration:

<telerik:RadAjaxLoadingPanel id="lpBDC" Runat="server" Transparency="18" CssClass="AjaxLoadingProgress"></telerik:RadAjaxLoadingPanel>

and style:

div.AjaxLoadingProgress

{

background: #DFE9F5 url(../images/loading_small.gif) no-repeat center center;

}

I've gotten inconsistant behavior in various browsers:

In IE8: It works fine
In Opera 11: It works fine
In FF4: I don't see any loading panel
In Chrome 11: I don't see any loading panel
In Safari 5: I see the loading panel background color, but no loading image

if I change the loading panel declaration to:

<telerik:RadAjaxLoadingPanel id="lpBDC" Runat="server" Transparency="18" BackColor="Red"></telerik:RadAjaxLoadingPanel>

I do see it in FF and Chrome, so I know it is being displayed. Its just the style and loading image are not. Any idea what is going on?

Ajax

answered on 09 Jun 2011

1 answer

40 views

Populate items in Radcombo, when Radcombo is added runtime

Hello,

I have a Radgrid in which one column is populated with Combobox is each cell, Runtime.
Now, i need to add items to each of these combos. There will be only 2-3 items in each combo.
Can somebody please help.

Thanks,
Shweta

ComboBox

answered on 09 Jun 2011

2 answers

146 views

find control in card view

Hello,

I am using the grid in card view and have data loading in the item template. I also have two link buttons in the template. Everything loads fine and pages OK. However I am trying to get to the click event of the link buttons so that when the user clicks on one of the link buttons I get a hidden field value which I use as a querystring parameter to take the user to a more detailed page.

I got it working on the first page but when I try to go to the next page in the grid. I get an error.

I am created a command name for the link butotns and have them in the grids Item_Command event. I am not sure if I am going about this the right way.

What am I doing wrong here?

<div style="margin-left: auto; margin-right: auto; margin-top: 50px; width: 800px">

<telerik:RadGrid ID="RadGrid1" ShowGroupPanel="True" DataSourceID="SqlDataSource1"

AllowPaging="True" runat="server" Width="800px" Height="800px" GridLines="None"

PageSize="5" ShowHeader="false" BackColor="AliceBlue" BorderColor="Red" EnableEmbeddedSkins="true"

Skin="Sitefinity">

<HeaderContextMenu>

</HeaderContextMenu>

<MasterTableView TableLayout="Fixed">

<ItemTemplate>

<div style="float: left; margin-left: 10px; margin-top: 15px; width: 750px">

<div style="float: left; margin-bottom: 5px; font-size: 1.0em; font-weight: bold;

width: 700px">

<asp:LinkButton ID="lnkTitle" runat="server" ForeColor="Blue" CommandName="Title"

Font-Size="1.4em" Text='<%# Eval("Title")%>'>

</asp:LinkButton>

<asp:HiddenField ID="hdfId" runat="server" Value='<%# Eval("Id") %>' />

</div>

<br />

<div style="float: left; width: 98%; color: Green">

<%# Eval("City")%>,

<%# Eval("State")%>. - Posted:

<%# Eval("PostedDate")%></div>

<br />

<div style="float: left">

<%# Eval("Column1")%>

<div>

<asp:LinkButton ID="lnkMoreInfo" runat="server" CommandName="MoreInfo" ForeColor="Blue"

Text="more info..."></asp:LinkButton>

</div>

</ItemTemplate>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

</RowIndicatorColumn>

<EditFormSettings>

</EditFormSettings>

<AlternatingItemStyle BackColor="White" />

<PagerStyle Mode="NextPrev" />

</MasterTableView>

<HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"

Font-Underline="False" Wrap="True" />

<ClientSettings AllowDragToGroup="false">

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

</ClientSettings>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

</telerik:RadGrid>

<br />

<asp:Label ID="lblMsg" runat="server" ForeColor="Red" />

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

SelectCommand="jobs_GridDataDisplay_Select" runat="server" SelectCommandType="StoredProcedure">

</asp:SqlDataSource>

protected void RadGrid1_ItemCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)

{

//Find required controls in the grid.

//Job Id.

HiddenField hdfJobId = e.Item.FindControl("hdfId") as HiddenField;

//Job title link button.

LinkButton lnkTitle = e.Item.FindControl("lnkTitle") as LinkButton;

//More info link button.

LinkButton lnkMoreInfo = e.Item.FindControl("lnkMoreInfo") as LinkButton;

if (lnkTitle.CommandName == "Title")

{

//Redirect to job details page.

RedirectToJobDetails(hdfId.Value.ToString());

}

if (lnkMoreInfo.CommandName == "MoreInfo")

{

//Redirect to job details page.

RedirectToJobDetails(hdfJobId.Value.ToString());

}

private void RedirectToDetailsPage(string Id)

{

//Redirection path.

string url = "~/pages/content/details.aspx?";

//Create the querystring parameter and encrypt.

url += "id=" + Server.UrlEncode(DataEncryption.QueryStringEncrypt(Id));

Response.Redirect(url);

}

Grid

answered on 09 Jun 2011

1 answer

83 views

Detecting dynamic user controls in multipage

Hi,

I have a radstrip and radmultipage on a aspx page with a master page. I also have a "save & Continue" button on the same page. I load my tabs as well as associated ascx control to the Multipage at runtime.

On "save & Continue" , i need to save the values in the ascx page to the database and move on to the next tab. However, i cannot detect the ascx control, as the save button is not inside the ascx but in the main page.

How can i detect the Usercontrol inside the pageview and call the save() method defined in the user control at runtime at the same time persisting the values in the usercontrols ?

<

telerik:RadTabStrip ID="m_applyRadTabStrip" runat="server" Orientation="VerticalLeft"

Expanded="True" MultiPageID="m_applyRadMultiPage" OnTabClick="applyRadTabStrip_TabClick">

</telerik:RadTabStrip>

<

telerik:RadMultiPage ID="m_applyRadMultiPage" runat="server" SelectedIndex="0" CssClass="multiPage" OnPageViewCreated="radMultiPage_PageViewCreated">

</telerik:RadMultiPage>

<

asp:Button ID="m_buttonSaveContinue" runat="server" OnClick="saveContinue_Click" CssClass="button" />

TabStrip

answered on 09 Jun 2011

1 answer

51 views

How to avoid the default insert form to appear

Hi ,

I had a grid which is coded using the following Example.But when I click the Add new record button the Insert form which i designed is appearing and once when I click Insert the Insert operation is successful and the default insert form is being displayed.

http://demos.telerik.com/aspnet-ajax/ajax/examples/manager/dynamicajaxsettings/defaultcs.aspx?product=grid

I am not getting any idea y the default Insert form is being displayed.
Please help me.

Thanks,
In Advance

Sravanthi

Grid

answered on 09 Jun 2011

1 answer

164 views

Display arrow if Menu Item has sub items

My rad menu has various sub level and i want to display a arrow if the menu item has a sub menu item. I have edited the CSS but so far i am not being able to display the arrow . Please advise

.RadMenu_White .rmRootGroup,

.RadMenu_White .rmLink,

.RadMenu_White .rmText,

.RadMenu_White .rmLeftArrow,

.RadMenu_White .rmRightArrow,

.RadMenu_White .rmTopArrow

.RadMenu_White rmVertical rmRootGroup, .RadMenu_White rmHorizontalRootGroup

{}

.submenus

{

padding: 5px 30px 1px 15px;

color: white;

}

.RadMenu_White .rmBottomArrow

{

background-image: url('Menu/rmSprite.png');

background-color: transparent;

}

.RadMenu_White .rmRootGroup

{

border: 0px solid #828282;

background-repeat: repeat-x;

background-position: 0 -408px;

background-color: Transparent;}

/* <Root items> */

.RadMenu_White

{

font: normal 14px/23px Arial, sans-serif;

color: black;

text-decoration: none;

padding-right:15px !important;

padding-bottom:6px !important;

}

.RadMenu_White .rmLink

{

font: normal 14px/23px Arial, sans-serif;

color: black;

text-decoration: none;

padding-right:15px !important;

padding-bottom:6px !important;

border: solid 1px #d1d1d1;

}

.RadMenu_White .rmLink,

.RadMenu_White .rmDisabled,

.RadMenu_White .rmDisabled:hover

{

background-position: 0 -72px;

}

.RadMenu_White .rmText,

.RadMenu_White .rmDisabled .rmText,

.RadMenu_White .rmFirst .rmLink,

.RadMenu_White .rmLast .rmText, rmText,

.RadMenu_White .rmLast .rmLink:hover .rmText,

.RadMenu_White .rmVertical .rmLink,

.RadMenu_White .rmVertical .rmText

{

background-repeat: no-repeat;

background-position: 0 500px;

cursor: pointer;

}

.RadMenu_White .rmFirst .rmLink:hover, .RadMenu_White .rmLink:hover, .rmItem:hover

{

cursor: pointer;

background-color: #12630a;

color: white;

}

.RadMenu_White .rmVertical .rmLink

{

}

.RadMenu_White .rmVertical .rmLink:hover,

.RadMenu_White .rmVertical .rmFocused,

.RadMenu_White .rmVertical .rmExpanded,

.RadMenu_White .rmVertical .rmExpanded:hover

{border-style: solid;

border-color: #131b4c;

border-width: 0px 0;

}

.RadMenu_White .rmVertical .rmFirst .rmLink:hover,

.RadMenu_White .rmVertical .rmFirst .rmFocused,

.RadMenu_White .rmVertical .rmFirst .rmExpanded,

.RadMenu_White .rmVertical .rmFirst .rmExpanded:hover

{border-top-width: 0;

}

.RadMenu_White .rmVertical .rmLast .rmLink:hover,

.RadMenu_White .rmVertical .rmLast .rmFocused,

.RadMenu_White .rmVertical .rmLast .rmExpanded,

.RadMenu_White .rmVertical .rmLast .rmExpanded:hover

{border-bottom-width: 0;

}

.RadMenu_White .rmVertical .rmItem .rmDisabled:hover

{border-width: 0;

}

.RadMenu_White .rmExpanded,

.RadMenu_White .rmExpanded:hover

{

background-color:#12630a;

background-position: 0 -72px;

}

.RadMenu_White .rmExpanded .rmText,

.RadMenu_White .rmExpanded:hover .rmText

{

background-position: 100% -96px;

}

.RadMenu_White .rmLast .rmExpanded .rmText

{

background-position: 0 500px;

background-repeat: no-repeat;

}

.RadMenu_White .rmDisabled,

.RadMenu_White .rmDisabled:hover

{

color: #7d7d7d;

background-color: transparent;

}

/* </Root items> */

/* <Submenu items> */

.RadMenu_White .rmGroup,

.RadMenu_White .rmGroup .rmVertical

{

border: 0px solid #131b4c;

/*background: transparent url('Menu/rmVSprite.png') repeat-y 0 0;*/

}

.RadMenu_White .rmSlide .rmScrollWrap

{

background-image: none;

background: transparent;

}

.RadMenu_White_rtl .rmGroup,

.RadMenu_White_rtl .rmGroup .rmVertical

{

background-position: 100% 0;

background: transparent;

}

.RadMenu_White .rmRootGroup li.rmItem .rmGroup

{}

.RadMenu_White .rmRootGroup .rmHorizontal

{

background-image: none;}

.RadMenu_White .rmScrollWrap .rmVertical

{border: 0;

}

.RadMenu_White .rmGroup .rmItem .rmLink,

.RadMenu_White .rmGroup .rmItem .rmLink:hover,

.RadMenu_White .rmGroup .rmItem .rmFocused,

.RadMenu_White .rmGroup .rmItem .rmExpanded

{border: 0;

}

.RadMenu_White .rmGroup .rmLast .rmLink,

.RadMenu_White .rmGroup .rmLast .rmLink:hover,

.RadMenu_White .rmGroup .rmLast .rmFocused,

.RadMenu_White .rmGroup .rmLast .rmExpanded

{}

.RadMenu_White .rmGroup .rmLink,

.RadMenu_White .rmGroup .rmText,

.RadMenu_White .rmGroup .rmItem .rmDisabled,

.RadMenu_White .rmGroup .rmItem .rmDisabled:hover,

.RadMenu_White .rmGroup .rmItem .rmDisabled .rmText,

.RadMenu_White .rmGroup .rmItem .rmDisabled:hover .rmText

{

background-position: 0 500px;

background-repeat: no-repeat;

/* background-color: transparent;*/

}

.RadMenu_White .rmGroup .rmLink:hover,

.RadMenu_White .rmGroup .rmFocused,

.RadMenu_White .rmGroup .rmExpanded

{

background-position: 0 -168px;

}

.RadMenu_White .rmGroup .rmLink:hover .rmText,

.RadMenu_White .rmGroup .rmFocused .rmText,

.RadMenu_White .rmGroup .rmExpanded .rmText

{

background-position: 100% -192px;

}

/* <expand arrows> */

.RadMenu_White .rmGroup .rmExpandRight,

.RadMenu_White .rmGroup .rmExpandDown,

.RadMenu_White .rmGroup .rmItem .rmDisabled .rmExpandRight,

.RadMenu_White .rmGroup .rmItem .rmDisabled .rmExpandDown,

.RadMenu_White .rmGroup .rmItem .rmDisabled:hover .rmExpandRight,

.RadMenu_White .rmGroup .rmItem .rmDisabled:hover .rmExpandDown

{

background-position: 100% -216px;

}

.RadMenu_White .rmGroup .rmLink:hover .rmExpandRight

{

background-image: url(images/arrow.png) no-repeat topright !important;

}

.RadMenu_White .rmGroup .rmLink:hover .rmExpandRight,

.RadMenu_White .rmGroup .rmFocused .rmExpandRight,

.RadMenu_White .rmGroup .rmExpanded .rmExpandRight,

.RadMenu_White .rmGroup .rmLink:hover .rmExpandDown,

.RadMenu_White .rmGroup .rmFocused .rmExpandDown,

.RadMenu_White .rmGroup .rmExpanded .rmExpandDown

{

background-position: 100% -240px;

}

.RadMenu_White .rmGroup .rmDisabled:hover .rmExpandRight,

.RadMenu_White .rmGroup .rmDisabled:hover .rmExpandDown

{

background-image: url('Menu/rmSprite.png');

background-position: 100% -216px;

}

/* </expand arrows> */

/* <rtl> */

.RadMenu_White_rtl .rmLink

{

background-position: 100% -96px;

}

.RadMenu_White_rtl .rmText

{

background-position: 0 -72px;

}

.RadMenu_White_rtl .rmVertical .rmExpanded .rmText,

.RadMenu_White_rtl .rmVertical .rmExpanded:hover .rmText

{

background-position: 0 500px;

background-repeat: no-repeat;

}

.RadMenu_White_rtl .rmGroup .rmLink:hover,

.RadMenu_White_rtl .rmGroup .rmFocused,

.RadMenu_White_rtl .rmGroup .rmExpanded

{

background-position: 100% -264px;

}

.RadMenu_White_rtl .rmGroup .rmLink:hover .rmText,

.RadMenu_White_rtl .rmGroup .rmFocused .rmText,

.RadMenu_White_rtl .rmGroup .rmExpanded .rmText

{

background-position: 0 -288px;

}

.RadMenu_White_rtl .rmGroup .rmExpandLeft

{

background-position: 0 -312px;

}

.RadMenu_White_rtl .rmGroup .rmLink:hover .rmExpandLeft,

.RadMenu_White_rtl .rmGroup .rmFocused .rmExpandLeft,

.RadMenu_White_rtl .rmGroup .rmExpanded .rmExpandLeft

{

background-position: 0 -336px;

}

/* </rtl> */

/* </Submenu items> */

/* <Submenu offsets (Telerik - specific, overlapping submenus)> */

.RadMenu_White .rmSlide

{

border-style:solid;

border-color:#58b749;

background:#58b749;

border-width:0px;

/*margin: 15px 5px 5px 15px;*/

color:White;

}

.RadMenu_White .rmVertical .rmSlide,

.RadMenu_White .rmSlide .rmSlide,

.RadMenu_White_Context .rmGroup .rmSlide

{

/*margin: 0 0 0 -0x;*/

}

.RadMenu_White_rtl .rmSlide

{

/*margin: 0 0 0 0;*/

}

.RadMenu_White_rtl .rmFirst .rmSlide

{

/*margin-left: 0px;*/

}

.RadMenu_White_rtl .rmVertical .rmSlide,

.RadMenu_White_rtl .rmSlide .rmSlide,

.RadMenu_White_Context_rtl .rmGroup .rmSlide

{

/*margin: 0px 0px 0px 0px;*/

}

/* </Submenu offsets> */

/* <Scrolling arrows> */

.RadMenu_White .rmLeftArrow,

.RadMenu_White .rmRightArrow

{

background-color: #E6E6E6;

}

.RadMenu_White .rmLeftArrow { background-position: -8px -312px; border-right: 1px solid #828282; }

.RadMenu_White .rmRightArrow { background-position: -482px -216px; border-left: 1px solid #828282; }

.RadMenu_White .rmTopArrow,

.RadMenu_White .rmBottomArrow,

.RadMenu_White .rmGroup .rmLeftArrow,

.RadMenu_White .rmGroup .rmRightArrow

{

background-color: #E6E6E6;

}

.RadMenu_White .rmTopArrow { background-position: 50% -367px; border-bottom: 0px solid #828282; }

.RadMenu_White .rmBottomArrow { background-position: 50% -391px; border-top: 0px solid #828282; }

/* </Scrolling arrows> */

/* <Separators> */

.RadMenu_White .rmHorizontal .rmSeparator .rmText,

.RadMenu_White .rmVertical .rmHorizontal .rmSeparator .rmText

{

height: 22px;width: 0px;

background-color: #A8A8A8;

}

.RadMenu_White_Context .rmSeparator .rmText,

.RadMenu_White .rmHorizontal .rmGroup .rmSeparator .rmText,

.RadMenu_White .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText

{

background-color: transparent;

background-position: 0 -406px;}

.RadMenu_White .rmLeftImage, RadMenu RadMenu_White, rmItem rmFirst, rmHorizontal rmRootGroup, rmLink  rmExpanded, .rmLeftImage, .rmLink, .rmText rmExpandDown, .RadMenu .rmLink .rmText

{

margin:0px 0px 0px 0px !Important;

padding: 0px 0px 0px 0px !Important;

float: none;

}

.RadMenu_White .rmItem

{

background:transparent !important;

}

/* </Separators> */

/* </RadMenu / Telerik> */

Menu

answered on 09 Jun 2011

1 answer

73 views

prevent using down and up arrow if combo box text is less than two characters

I am binding a list of names to a combo box, and trying to limit the number of names visible to the user. I have used filter="contains" to narrow the list. I have also written a onkeyup handlers to only show names after at lease two characters are typed. My problem is that if you use the up or down arrow key, it will still show the entire list. I have attempted to write an onkeydown handler and check for e.keycode 38 and 40, but it's still not working correct. my code follows:

function OnClientDropDownOpening(Sender, args) {

//only open if there is moer than 1 characters

if (!open)

args.set_cancel(true);

}

function pageLoad() {

// set up onkeyup and onkey down event

var combo = $find("<%=cboSLPName.ClientID %>");

var input = combo.get_inputDomElement();

input.onkeyup = onKeyUpHandler;

input.onkeydown = onKeyDownHandler;

}

function onKeyDownHandler(e) {

if (!e)

e = window.event;

var combo = $find("<%=cboSLPName.ClientID %>");

var comboText = String(combo.get_text());

if (comboText.length < 2) {

//////////////////////////////

//

// don't do anything if the length is less than two and you press up arrow and down arrow

//

if (e.keyCode == 38 || e.keyCode == 40) {

e.returnValue = false;

if (e.preventDefault) {

e.preventDefault();

}

return false;

}

function onKeyUpHandler(e) {

var combo = $find("<%=cboSLPName.ClientID %>");

var comboText = combo.get_text();

if (comboText.length < 2) {

open = false;

combo.hideDropDown();

}

else {

open = true;

combo.showDropDown();

}

and my server control:

<telerik:RadComboBox runat="server" ID="cboSLPName" Width="250px"

EmptyMessage="Type Name" MarkFirstMatch="true" Filter="Contains" ExpandAnimation-Type="None"

ShowMoreResultsBox="false" ShowWhileLoading="false"

AllowCustomText="true"

ShowToggleImage="false" EnableItemCaching="true" LoadingMessage="Loading..."

HighlightTemplatedItems="true" EnableLoadOnDemand="true" ShowDropDownOnTextboxClick="false"

OnClientDropDownOpening="OnClientDropDownOpening"

onselectedindexchanged="cboSLPName_SelectedIndexChanged"

AutoPostBack="true" />

any suggestions you can give to help would be appreciated. Thanks!

I know my code isn't pretty, so any suggestions you have for a more elegant design is also appreciated!!

ComboBox

answered on 09 Jun 2011