Questions on UI for ASP.NET AJAX Forum

1 answer

314 views

how to the tree list expand on click of checkbox column

Hi Every one,

I am trying to expand the list of the rows on click of the checkbox which is in the TreelistTempelatecolumn.I am not able to maintain the state of the variables.Can anyone help me please.

This is what I am doing
<telerik:RadPanelItem Value="CandidateInformation" runat="server">
                        <ItemTemplate>
                            <telerik:RadTreeList ID="rtlSpecsGroup" Width="40%" runat="server" DataSourceID="sdsTreeView"
                                    ParentDataKeyNames="PARENTID" AllowSorting="true" DataKeyNames="CATGROUPID" AllowMultiItemSelection="false"
                                 AutoGenerateColumns="false" OnItemDataBound="OnItemDataBound_rtlSpecsGroup" >
                                <Columns>

                                    <telerik:TreeListTemplateColumn UniqueName="chkTempelatecolumn" DataField="CATGROUPID" ItemStyle-Width="30px" HeaderStyle-Width="30px">
                                        <ItemTemplate>
                                            <asp:CheckBox ID="chkGroups" runat="server" AutoPostBack="True" OnCheckedChanged="OnCheckedChanged_chkGroups"/>
                                        </ItemTemplate>
                                    </telerik:TreeListTemplateColumn>

                                    <telerik:TreeListBoundColumn UniqueName="NAME" HeaderText="Experience" DataField="NAME" ReadOnly="true"></telerik:TreeListBoundColumn>
                                    <telerik:TreeListTemplateColumn UniqueName="rblTempelatecolumn" HeaderText="YearsOfExperience">
                                        <ItemTemplate>
                                            <asp:RadioButtonList ID="rblYearsOfExp" runat="server" Enabled="false" RepeatDirection="Horizontal" RepeatLayout="Flow">
                                                <asp:ListItem Text="0-5" Value="1"></asp:ListItem>
                                                <asp:ListItem Text="6-10" Value="2"></asp:ListItem>
                                                <asp:ListItem Text="11-15" Value="3"></asp:ListItem>
                                                <asp:ListItem Text="16-20" Value="4"></asp:ListItem>
                                                <asp:ListItem Text="20+" Value="5"></asp:ListItem>
                                            </asp:RadioButtonList>
                                        </ItemTemplate>
                                    </telerik:TreeListTemplateColumn>
                                    <telerik:TreeListBoundColumn UniqueName="CATGROUPID" DataField="CATGROUPID" Visible="false" ReadOnly="true"></telerik:TreeListBoundColumn>
                                </Columns>
                            </telerik:RadTreeList>
                            <telerik:RadButton ID="rbtnCINext" runat="server" Text="Next>>" OnClick="rbtnCINext_OnClick">
                            </telerik:RadButton>

                        </ItemTemplate>
                    </telerik:RadPanelItem>
on the code side this is what i am doing

    protected void OnCheckedChanged_chkGroups(object sender, EventArgs e)
    {
        RadPanelItem CandidateInformation = rpbMainInfo.FindItemByValue("CandidateInformation");
        RadTreeList rtlSpecsGroup = (RadTreeList)CandidateInformation.FindControl("rtlSpecsGroup");
        ((sender as CheckBox).NamingContainer as TreeListDataItem).Selected = (sender as CheckBox).Checked;
            foreach (TreeListDataItem tlTreeName in rtlSpecsGroup.Items)
            {
                string ParentId = tlTreeName["CATGROUPID"].Text;
                RadioButtonList rbtnlist = (RadioButtonList)tlTreeName.FindControl("rblYearsOfExp");
                if ((sender as CheckBox).Checked == true)
                {
                    if (tlTreeName.Selected == true)
                    {
                        if (ParentId == "1" || ParentId == "2" || ParentId == "3" || ParentId == "4")
                        {
                            tlTreeName.Expanded = true;

                        }

                    }

                }

            }

    }
what I am doing is On click of the check box I am trying to expand the parent item and also make the row selected.this part is working but the checkbox which I checked doesn't maintain.It returns the selected column with unchecked check box column.Itried with different styles but did not work out for me .Please let me know the best solution for the above problem

Thanks InAdvance,
Sravz

TreeList

answered on 01 Sep 2011

3 answers

229 views

Can't reference radbutton in javascript from server side

Hi all,

This does not work when I call this from my server side code.

I get an error :'null is null or not an object.'

It seems that the documentation rarely mentions how to reference jscript from server side code and there are not enough examples to demonstrate this.

According to your documents I used:

var button = $find("<%= RadbuttonID.ClientID %>");

My code from the server is called onindexchanged of my combobox:

public void RadComboBox4_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)

{

ScriptManager.RegisterStartupScript(this, this.GetType(), "fireClientEvent", "changeButtonState()", true);

}

My javascript and ASPX code is:

function changeButtonState()

{

//alert('test popup');

var button = $find("<%= btnSelectDeal.ClientID %>");

alert(button.get_text());

}

<telerik:RadButton runat="server" Text="Select" ID="btnSelectDeal"

UseSubmitBehavior="False" Skin="Telerik"

OnClick="btnSelectDeal_Click" onclientclicked="OnClientClicked" >

</telerik:RadButton>

I can get the first alert in my jscript to fire but not the second one. Any ideas? I have this script in my code in my RadScriptBlock.

Thanks

Button

answered on 01 Sep 2011

1 answer

195 views

RadGrid Selecting a Row

Hi Telerik Team,

I have RadGrid with ten rows in it and i have created two buttons, namely "Previous" and "Next", by default the first of the rad grid will be selected and On clicking the Next button the next row of the rad grid should be selected and if user clicks the Previous button the previous row should be selected.
I have seen some help files and had a try on them, but none of them worked to me.

Please refer the image "Defaultview.JPG" how the rad grid appears when the page is loaded first time.

Please refer the image "Next.JPG" when the user clicks the Next button the rad grid appears like that.

Please refer the image "Previous.JPG" when the user clicks the Previous button the rad grid appears like that.

Please help me i am in big need of it.

I want to implement the above functionality using "Java Script"

Thanks & Regards
N A Chary.

Grid

answered on 01 Sep 2011

1 answer

537 views

DataItem is null

DataItem is always null when I activate the SelectedIndexChanged event. What am I doing wrong? using version 2011.2.712.35

<telerik:RadGrid ID="grdPolicyCoverage" runat="server" CellSpacing="0" GridLines="None">

<headercontextmenu cssclass="GridContextMenu GridContextMenu_Default">

</headercontextmenu>

<mastertableview tablelayout="Auto" width="95%">

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

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

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

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

</ExpandCollapseColumn>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</mastertableview>

<clientsettings EnablePostBackOnRowClick="true" Selecting-AllowRowSelect="true">

</clientsettings>

<filtermenu enableimagesprites="False">

</filtermenu>

</telerik:RadGrid>

protected override void OnInit(EventArgs e)

{

base.OnInit(e);

this.grdPolicyCoverage.SelectedIndexChanged += new EventHandler(grdPolicyCoverage_SelectedIndexChanged);

this.grdPolicyCoverage.NeedDataSource += new GridNeedDataSourceEventHandler(grdPolicyCoverage_NeedDataSource);

}

private void grdPolicyCoverage_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

PolicyCoverageList _policyCoverageList = GetPolicyCoverage();

this.grdPolicyCoverage.DataSource = _policyCoverageList;

}

private void grdPolicyCoverage_SelectedIndexChanged(object sender, System.EventArgs e)

{

foreach (PolicyCoverage _selectedPolicy in this.grdPolicyCoverage.MasterTableView

.Items.Cast<GridDataItem>().Where(item => item.Selected)

.Select(item => item.DataItem as PolicyCoverage))

{

Session[SelectedPolicy] = _selectedPolicy;

}

Grid

answered on 01 Sep 2011

7 answers

143 views

COLOR: #000000 being changed to color: rgb(0, 0, 0)

Hi,

We are using RadEditor in our application. if we set the style as "COLOR: #000000" then it automatically convert in to "color: rgb(0, 0, 0)" and this happens while we switch from HTML mode to Design or Preview mode.

The issue is, our application sends mails and email client such Outlook etc.. are not understanding the "rgb" attribute. It will be great if you can give the solution as soon as possible since application is live.

Thanks
Anand

Editor

answered on 01 Sep 2011

1 answer

129 views

only allow second and fourth Tuesdays of a month to be selectable

Hello,

I would like to limit the selectable dates in a calendar to only be the 2nd and 4th tuesdays of each month. I was able to set this in the server side ondayrender event by using the code below, however I am still able to select days that I added to the special days collection. The other issue is recreating this functionality in the client side ondayrender event. If there is a better way to go about doing this I am all ears.

Thanks,

Kirk

protected void Calendar_OnDayRender(object sender, Telerik.Web.UI.Calendar.DayRenderEventArgs e)

{

DateTime dt = new DateTime();

dt = e.Day.Date;

string month = RadCalendar1.CalendarView.TitleContent;

month = month.Substring(0, month.Length - 5);

System.Globalization.DateTimeFormatInfo info = new System.Globalization.DateTimeFormatInfo();

string[] monthNames;

monthNames = info.MonthNames;

if (dt.DayOfWeek == DayOfWeek.Monday && monthNames[dt.Month - 1] == month)

{

dayCount = dayCount + 1;

if (dayCount != 2 && dayCount != 4)

{

RadCalendarDay calendarDay = new RadCalendarDay();

calendarDay.Date = e.Day.Date;

calendarDay.IsSelectable = false;

calendarDay.IsDisabled = true;

RadDatePicker1.Calendar.SpecialDays.Add(calendarDay);

e.Cell.BackColor = System.Drawing.Color.Gray;

e.Cell.Text = "<span>" + e.Day.Date.Day + "</span>";

e.Cell.ID = "";

e.Cell.ControlStyle.CssClass = "disabledDay";

}

else

{

RadCalendarDay calendarDay = new RadCalendarDay();

calendarDay.Date = e.Day.Date;

calendarDay.IsSelectable = false;

calendarDay.IsDisabled = true;

RadDatePicker1.Calendar.SpecialDays.Add(calendarDay);

e.Cell.BackColor = System.Drawing.Color.Gray;

e.Cell.Text = "<span>" + e.Day.Date.Day + "</span>";

e.Cell.ID = "";

e.Cell.ControlStyle.CssClass = "disabledDay";

}

Calendar

answered on 01 Sep 2011

1 answer

107 views

Radtooltip manager shows blank tool tip after postback.

Hi All,

Radtooltip manager shows blank tool tip after postback. I turned off Ajax to no avail. When i view the source i can see that img tag has a title property with the right text.

I add the target controls dynamically.

Thanks,

PS

ToolTip

answered on 01 Sep 2011

1 answer

173 views

clearSelection() not surviving postback

Hi,

I have a RadListbox (single select mode) and a button which deselects all items in the RadListbox using clearSelection() in javascript. This appears to work, until there is a postback at which point the item is selected again.

Here is some example code which exhibits this problem (p_Postback_Click is just an empty event handler to cause a postback):

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestClearSelection.aspx.cs" Inherits="TestClearSelection" %>

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

<!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">

<script type="text/javascript">

function ClearListbox() {

lb = $find("RadListBox1");

lb.clearSelection();

}

</script>

<ajax:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></ajax:ScriptManager>

<div>

<telerik:RadListBox ID="RadListBox1" runat="server">

<Items>

<telerik:RadListBoxItem Text="Item 1" />

<telerik:RadListBoxItem Text="Item 2" />

<telerik:RadListBoxItem Text="Item 3" />

</Items>

</telerik:RadListBox>

<asp:Button ID="b_ClearSelection" runat="server" Text="Clear Selection" onclientclick="ClearListbox(); return false;" />

<asp:Button ID="b_PostBack" runat="server" Text="Postback"

onclick="b_PostBack_Click" />

</div>

</form>

</body>

</html>

Is this a bug, or am I just missing something else that I need to do? I've seen trackChanges and commitChanges in the documentation but these seem to be needed only when adding or deleting ListItems clientside.

Thanks
Andy

ListBox

answered on 01 Sep 2011

1 answer

88 views

RadSpell sometimes does not update asp:TextBox after spellcheck

Hi,
I have a multi-line ASP.NET TextBox control that I want to spell check using the Telerik SpellCheck control via JS envoked form an image button located beside the TextBox. The textbox is located on a page with many other ASP input controls and multiple TextBoxes with SpellCheck controls.

The click event handler on my web page is a follows:
var radSpellCheck = $find('MyRadSpellCheckCtrlID');
if (radSpellCheck != null) {
radSpellCheck.startSpellCheck();
}

A second imagebutton beside the TextBox is used to resize it (and change the Z-index) allowing the TextBox to take over the entire size of the page to facilitate editing large notes.

When the TextBox is in it's normal layout and size (300px x 150px) and the "startSpellCheck()" is called the spell checker is displayed but none of the changes are reflected back into the TextBox.
However when it's size is maximized the "startSpellCheck()" works, updating the contents of the same TextBox. What is strange, that the keyboard shortcut I have implemented to trigger the same spellcheck code is used, it works in both situations.

Between expanded and normal display mode I all I am doing is changing the height, width, and z-index of the rendered <TextArea/> tag. I don't see why it would work in one instance and no another. Note: My event handler returns FALSE to prevent a post-back.

Spell

answered on 01 Sep 2011

1 answer

251 views

RadAjaxLoadingPanel in UserControl - Displays only first time in one page, not at all on a different page

I have a RadAjaxLoadingPanel and a RadGrid inside a User Control.
This UserControl appears on two pages.

On one of the pages, the first time I sort the RadGrid, the RadAjaxLoadingPanel displays exactly as it should. But then when I sort it a second time, it does not. Not until I perform a full postback action or refresh the page does the RadAjaxLoadingPanel work again, and again it only works once.

On the other one of the pages, the RadAjaxLoadingPanel just doesn't display at all.

I'm using this RadAjaxLoadingPanel one a different grid in a third page, and it works fine.

How do I go about solving this? I'm assuming that there is something else on the page which is intefering with the RadAjaxLoadingPanel.

I've enclosed the usercontrol markup and code-behind. (Note that I'm registering with the RadAjaxManager in the code, not the markup.)

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TransferItemGrid.ascx.cs" Inherits="Viewers_TransferItemGrid" %>

<telerik:RadAjaxLoadingPanel

ID="loadPanelQueuedFiles"

runat="server"

Height="75px"

Width="75px"

Transparency="5">

<img

alt="Loading..."

src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'

style="border: 0;"

/>

</telerik:RadAjaxLoadingPanel>

<telerik:RadGrid

ID="radGridFileTransfers"

runat="server"

Skin="Windows7"

OnNeedDataSource="OnGridNeedDataSource"

Width="95%"

EnableViewState="true">

<MasterTableView TableLayout="Auto" AutoGenerateColumns="false" AllowSorting="true" AllowPaging="true">

<Columns>

<telerik:GridHyperLinkColumn

DataTextField="PlayerName"

HeaderText="Player"

DataNavigateUrlFields="PlayerId"

DataNavigateUrlFormatString="~/Admin/PlayerDiagnostics.aspx?playerid={0}"

SortExpression="PlayerName"

/>

<telerik:GridBoundColumn

DataField="Name"

HeaderText="File"

SortExpression="Name"

/>

<telerik:GridBoundColumn DataField="TransferType" HeaderText="Transfer Type" />

<telerik:GridBoundColumn DataField="Status" HeaderText="Status" />

<telerik:GridBoundColumn DataField="PercentageDownloaded" HeaderText="Downloaded %" />

<telerik:GridBoundColumn DataField="FileSize" HeaderText="Size" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

And the code-behind:

using System;

using System.Collections.Generic;

using WebsitePresentationLayer;

using Telerik.Web.UI;

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

{

public Viewers_TransferItemGrid()

{

this.IsPlayerColumnVisible = true;

}

protected override void OnLoad(EventArgs e)

{

base.OnLoad(e);

}

protected override void OnInit(EventArgs e)

{

base.OnInit(e);

SetupAjax();

}

private void SetupAjax()

{

CmsPage cmsPage = (CmsPage)(this.Page);

var ajaxSetting = new AjaxSetting(this.radGridFileTransfers.ID);

ajaxSetting.UpdatedControls.Add(new AjaxUpdatedControl(this.radGridFileTransfers.ID, this.loadPanelQueuedFiles.ID));

cmsPage.RadAjaxManager.AjaxSettings.Add(ajaxSetting);

}

protected void Page_Load(object sender, EventArgs e)

{

}

private IEnumerable<TransferTableRow> _transferTableRows;

public IEnumerable<TransferTableRow> TransferTableRows

{

get

{

return _transferTableRows;

}

set

{

// There was a problem that the grid would become blank in the playerdiagnostics page

// when the Refresh button was pressed

_transferTableRows = value;

this.radGridFileTransfers.DataSource = _transferTableRows;

this.radGridFileTransfers.DataBind();

}

public bool IsPlayerColumnVisible

{

get;

set;

}

public const int PLAYER_COLUMN_INDEX = 0;

protected override void OnPreRender(EventArgs e)

{

var playerColumn = this.radGridFileTransfers.Columns[PLAYER_COLUMN_INDEX];

playerColumn.Visible = this.IsPlayerColumnVisible;

}

protected virtual void OnGridNeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

this.radGridFileTransfers.DataSource = this.TransferTableRows;

}

Ajax

answered on 01 Sep 2011