Questions on UI for ASP.NET AJAX Forum

3 answers

68 views

I'm loading about 2000 child nodes under a single parent. It works fine with Firefox 3.6 and with Chrome 9, but IE 8 is incredibly slow... not only loading the child nodes, but after the child nodes are loaded the whole interface slows down and turns unresponsive.

I'm using Q1 2010. Any tips to solve this performance issue with IE 8? Should I try to upgrade to Q3 2010?

Thanks,
Santiago.

TreeView

answered on 28 Feb 2011

3 answers

620 views

displaying rad message box in asp.net

Hi,
I am Yogesh. I am new to asp.net with c#. I am working with asp.net ajax rad controls.... I want display a rad message box. also for confirm and alert.
Could anyone help me to get through this plz.....

Ajax

answered on 28 Feb 2011

3 answers

76 views

Grid row won't go into edit mode if combo selectedvalue not found

Hi there.

I have a RadComboBox in an EditItemTemplate in a radgrid with SelectedValue='<%# Bind("OrgClassification3") %>'. If the value of OrgClassification3 is empty or matches a value in the combo then everything works fine and I can edit the row and save changes. If the value of OrgClassification3 does not match any of the values in the combo the grid row will not even go into edit mode.

Please help. Thanks.

Grid

answered on 28 Feb 2011

3 answers

374 views

RadPageView set_contentUrl client side issue.

We have a RadTabStrip + RadMultiPage on our main page. The menu system is loaded once and the menu items create the tabs + corresponding pageview in javascript (i.e. completely client-side). The pages being loaded are full .aspx pages, i.e. the multipage is being used as a tabbed MDI.

However we're having major issues with the client-side pageview function set_contentUrl.

// add the tab

var tab = new Telerik.Web.UI.RadTab();

tab.set_text(name);

mainTabStrip.trackChanges();

mainTabStrip.get_tabs().add(tab);

mainTabStrip.commitChanges();

// add the multiview

var pageView = new Telerik.Web.UI.RadPageView();

pageView.set_contentUrl(url);

mainMultiPage.trackChanges();

mainMultiPage.get_pageViews().add(pageView);

pageView.get_element().id = ("PageView_" + pvCnt);

pvCnt += 1

mainMultiPage.commitChanges();

It does not appear to function well at all. No content is displayed in the pageview at all. However I do believe it is trying to load the page. If I change the url to a secure website with an invalid certificate I can the security warning in IE that the content is being blocked.

If I ignore the set_contentUrl and build the iframe myself (as below), it works perfectly.

var tab = new Telerik.Web.UI.RadTab();

tab.set_text(name);

mainTabStrip.trackChanges();

mainTabStrip.get_tabs().add(tab);

mainTabStrip.commitChanges();

// add the multiview

var pageView = new Telerik.Web.UI.RadPageView();

mainMultiPage.trackChanges();

mainMultiPage.get_pageViews().add(pageView);

pageView.get_element().id = ("PageView_" + pvCnt);

pvCnt += 1

pageView.get_element().innerHTML = "<iframe src=\""+ url + "\" frameBorder=\"0\" style=\"width: 100%; height: 100%;\"></iframe>";

mainMultiPage.commitChanges();

Is there something I'm missing in the first example, or can't I do that at client-side with the pageview.

TabStrip

answered on 28 Feb 2011

1 answer

439 views

RadGrid Background row coloring

I'm attempting to utilize the client side functions of the RadGrid to indicate to users viewing a grid of items they currently "have" (pre-selected when databinding on the server side), and items they are attempting to "add". To do this my idea was to have the grid show all possible items and have a checkbox column for selecting rows. The items that the user already has are pre-selected (the checkbox is checked and the row is highlighted in the default rowSelected style). All of that works so far. What I want to happen is have any additional rows that are selected to have a different highlight color. I've hooked up the RowSelected function and tried using jQuery to add a class to the newly selected row, but that doesn't seem to do much. Using the IE Developer toolbar or Firebug, I can see that the new css class gets added to the selected row but the background color doesn't change. In other words what I want to do is have one style for "pre-selected" rows and another style for rows selected by the user. Is there a way to do this? I've attached a screenshot with a visual explanation of what I'm attempting. Here is my code so far:
ASPX:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridRowColors.aspx.cs" Inherits="TestTelerik.GridRowColors" %>

<!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>
    <style type="text/css">
        .rgSelectedRow, .rgSelectedRow td
        {
            background-color: #c5c5c5;
            background-image: none;
        }
        .add {
            background-color: green;
        }
    </style>
    <script type="text/javascript">
        function RowDeselected(sender, eventArgs) {
            var row = eventArgs.get_gridDataItem();
            $(row.get_element()).removeClass("add");
        }
        function RowSelected(sender, eventArgs) {
            var row = eventArgs.get_gridDataItem();
            $(row.get_element()).addClass("add");
        }
        function RowCreated(sender, eventArgs) {
        }
        function pageLoad() {
            //colorRows();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <div>
        <telerik:RadGrid ID="RadGrid1" AllowMultiRowSelection="true" Width="700px" Skin="Outlook"
            runat="server" AllowSorting="false" GridLines="None" AutoGenerateColumns="false" ShowGroupPanel="true">

            <MasterTableView>
                <Columns>
                    <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" ItemStyle-Width="20px" />
                    <telerik:GridBoundColumn DataField="DataId" HeaderText="ID" ItemStyle-Width="200px" />
                    <telerik:GridBoundColumn DataField="DataName" HeaderText="Description" />
                </Columns>
            </MasterTableView>
            <ClientSettings EnableRowHoverStyle="false">
                <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
                <ClientEvents OnRowDeselected="RowDeselected" OnRowSelected="RowSelected" OnRowCreated="RowCreated" />
            </ClientSettings>
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>

Code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;

namespace TestTelerik
{
    public partial class GridRowColors : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                ArrayList myDataItems = new ArrayList();
                for (int i = 1; i <= 10; i++)
                {
                    myDataItems.Add(new MyDataItem(i, "Item " + i));
                }
                RadGrid1.DataSource = myDataItems;
                RadGrid1.DataBind();

                // select some default rows - items the user already "has"
                RadGrid1.Items[5].Selected = true;
                RadGrid1.Items[7].Selected = true;
            }
        }
    }

    public class MyDataItem
    {
        public int DataId { get; set; }
        public string DataName { get; set; }

        public MyDataItem(int dataId, string dataName)
        {
            DataId = dataId;
            DataName = dataName;
        }
    }
}

Grid

answered on 28 Feb 2011

1 answer

90 views

CSS to change default font name/size

I would like to apply this to all RadEditor controls on the page without having to assign to each RadEditor explicitly.
What is the CSS syntax for this? Thanks.

Font-Names="Arial" Font-Size="Small"

Editor

answered on 28 Feb 2011

3 answers

71 views

Documentation is not loading in latest browsers

Hai,

I tried to access the documentation of RadCombobox, RadToolTip etc. But it is not loading. It is only showing the heading like 'RadToolTip for ASP.Net AJAX'. One search box also there on the page. Nothing else. I tried in IE 8, Mozilla Firefox 3.6, Opera 10.62, safari, Google Chrome.

Thanks & regards,
Regeesh Joseph

ToolTip

answered on 28 Feb 2011

3 answers

137 views

Radgrid Remove

Hi,
I have a simple radgrid with two records.
Please look at the attached file and see that grid has three lines.
How can i remove the unnecessary third line ?
Thanks,
Gerry

Grid

answered on 28 Feb 2011

2 answers

93 views

[Solved] Events order problem

Hi,

I have an event order problem on my radgrid. The problem is that the OnPageIndexChanged is raised after OnNeedDataSource and the pager index is the old one. (if I press the '2' button from the pagger the value of the ResultRadGrid.CurrentPageIndex is 0 and when I press the '1' button againd the ResultRadGrid.CurrentPageIndex is 1). I need to call the OnPageIndexChanged before OnNeedDataSource for changing the page index value to new page index value.

My code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Page/ResumeAdvisor/MasterPage/ResumeAdvisor.master" ValidateRequest="false"

AutoEventWireup="true" CodeBehind="MyApplicants.aspx.cs" Inherits="w000250.FrontOffice.Page.ResumeAdvisor.Workflow.MyApplicants"

Culture="auto" meta:resourcekey="PageResource1" UICulture="auto" %>

<%@ Register Src="../UserControl/SearchPanel.ascx" TagName="SearchPanel" TagPrefix="uc1" %>

<%@ Register Src="../UserControl/MemorizeSearch.ascx" TagName="MemorizeSearchPanel" TagPrefix="uc" %>

<%@ Register Src="../UserControl/CandidateView.ascx" TagName="CandidateView" TagPrefix="uc2" %>

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

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContentPlaceHolder" runat="server">

<script language="javascript" type="text/javascript">

//<![CDATA[

function grant_approval(arg) {

if (arg == true) {

$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("GiveLabel");

}

function withdraw_approval(arg) {

if (arg == true) {

$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("RemoveLabel");

}

function removes_approval(arg) {

if (arg == true) {

$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("RemoveFromCandidates");

}

//]]>

</script>

</asp:Content>

<telerik:RadGrid ID="ResultRadGrid" runat="server" AutoGenerateColumns="False" AllowMultiRowSelection="True"

AllowPaging="true" AllowSorting="True" OnPageIndexChanged="ResultRadGrid_PageIndexChanged"

PagerStyle-Mode="NextPrevAndNumeric" PagerStyle-Position="TopAndBottom" PageSize="5"

OnNeedDataSource="ResultRadGrid_OnNeedDataSource" OnItemCommand="ResultRadGrid_OnItemCommand"

AllowCustomPaging="true" VirtualItemCount="10000" PagerStyle-EnableSEOPaging="false"

GridLines="Vertical" PagerStyle-SEOPagingQueryStringKey="page" OnItemCreated="ResultRadGrid_OnItemCreated">

<ItemStyle />

<AlternatingItemStyle />

<MasterTableView CellSpacing="-1" CommandItemDisplay="Bottom">

<PagerStyle Mode="NumericPages" Position="TopAndBottom" AlwaysVisible="true" />

<%-- Pager - Modifier le panel numeric --%>

<PagerTemplate>

<div class="pager">

<span class="pagerPrev">

<asp:Button ID="ButtonFirst" runat="server" OnClientClick="changePage('first'); return false;"

CommandName="Page" CommandArgument="First" Text="" CssClass="PagerButton FirstPage" />

<asp:Button ID="ButtonPrev" runat="server" OnClientClick="changePage('prev'); return false;"

CommandName="Page" CommandArgument="Prev" Text="" CssClass="PagerButton PrevPage" />

</span>

<asp:Panel runat="server" ID="NumericPagerPlaceHolder" CssClass="pagerNumber" />

<span class="pagerNext">

<asp:Button ID="ButtonNext" runat="server" OnClientClick="changePage('next'); return false;"

CommandName="Page" CommandArgument="Next" Text="" CssClass="PagerButton NextPage" />

<asp:Button ID="ButtonLast" runat="server" OnClientClick="changePage('last'); return false;"

CommandName="Page" CommandArgument="Last" Text="" CssClass="PagerButton LastPage" />

</span>

</div>

</PagerTemplate>

<CommandItemTemplate>

<asp:Button ID="NoTrackingButton" runat="server" CssClass="buttonLong" OnClick="NoTrackingButton_Click"

Text="Ne souhaite pas être suivi" meta:resourcekey="NoTrackingButtonResource1" />

<asp:Button ID="RemoveFromCandidatesButton" runat="server" CssClass="buttonLong"

Text='Supprimer de "Mes candidats"' meta:resourcekey="RemoveFromCandidatesButtonResource1"

Visible="true" Enabled="true" />

<asp:Button ID="LabelizeCandidatesButton" runat="server" CssClass="buttonBig" Text="Accorder le label"

meta:resourcekey="LabelizeCandidatesButtonResource1" Visible="true" Enabled="true" />

<asp:Button ID="UnLabelizeCandidatesButton" runat="server" CssClass="buttonBig" Text="Retirer le label"

meta:resourcekey="UnLabelizeCandidatesButtonResource1" Visible="true" Enabled="true" />

<asp:Button ID="ContactButton" runat="server" OnClick="ContactButton_Click" CssClass="buttonBig"

Text="Contacter" meta:resourcekey="ContactButtonResource1" Visible="true" Enabled="true" />

</CommandItemTemplate>

<NoRecordsTemplate>

<asp:Label ID="NoResultLabel" runat="server" Text="Aucun résultat ne correspond à votre recherche"></asp:Label></NoRecordsTemplate>

<RowIndicatorColumn>

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn UniqueName="DataItemTemplateColumn">

<ItemStyle CssClass="dataItem" />

<ItemTemplate>

<uc2:CandidateView ID="CandidateViewUC" runat="server" DataSource="<%# Container.DataItem %>"

EnableProfileLink="true" EnableContactLink="true" IsMyApplicantPage="true" EnableAddToCandidateLink="false"

EnableSeeCompleteFolder="true" EnableRemoveFromCandidatesLink="true" EnableAddOrRemoveLabelLink="true"

ParentUrl="~/Page/ResumeAdvisor/Workflow/MyApplicants.aspx" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn">

<ItemStyle CssClass="clientSelect" HorizontalAlign="Center" VerticalAlign="Middle"

Width="30px" />

<HeaderStyle CssClass="clientSelect" Height="30" Width="30px" HorizontalAlign="Center" />

<HeaderTemplate>

<asp:CheckBox ID="headerChkbox" runat="server" OnCheckedChanged="ToggleSelectedState"

AutoPostBack="True" />

</HeaderTemplate>

<ItemTemplate>

<div class="clientSelectContent">

<asp:CheckBox ID="selecteditem" runat="server" OnCheckedChanged="ToggleRowSelection"

AutoPostBack="true" />

</div>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"

OnAjaxRequest="RadAjaxManager1_AjaxRequest" AsyncPostBackTimeOut="600000">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="ResultRadGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="ResultRadGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="ResultRadGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

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

</telerik:RadAjaxLoadingPanel>

my C# code

protected void ResultRadGrid_OnItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)

{

if (e.Item is GridPagerItem)

{

GridPagerItem gridPager = e.Item as GridPagerItem;

Control numericPagerControl = gridPager.GetNumericPager();

Control placeHolder = gridPager.FindControl("NumericPagerPlaceHolder");

placeHolder.Controls.Add(numericPagerControl);

}

private List<AbgService.Resume> SearchResume()

{

List<AbgService.Resume> resumes = Business.ResumeAdvisor.ResumeAdvisorManagement.FindMyApplicants(MyResumeSearchPanel.ParamSpecialisationId, MyResumeSearchPanel.ParamExperienceLevelId,

MyResumeSearchPanel.ParamQuickSearch, MyResumeSearchPanel.ParamFilterResumeWithLabel, MyResumeSearchPanel.paramEmail,

MyResumeSearchPanel.paramState == ResumeStateEnum.Suspended || MyResumeSearchPanel.paramState == null,

MyResumeSearchPanel.paramState == ResumeStateEnum.Published || MyResumeSearchPanel.paramState == null,

MyResumeSearchPanel.paramState == ResumeStateEnum.Preparation || MyResumeSearchPanel.paramState == null,

MyResumeSearchPanel.paramPromotion, MyResumeSearchPanel.paramDoctorateSchool, MyResumeSearchPanel.paramDiplomaInstitution,

MyResumeSearchPanel.paramCurrentSituation, MyResumeSearchPanel.ParamSite, MyResumeSearchPanel.ParamResumesPerPage, ResultRadGrid.CurrentPageIndex);

if (resumes != null)

{

resumes.Sort(ResumeComparer.GetResumeComparer(MyResumeSearchPanel.ParamSortBy));

int

itemsNumber =Business.ResumeAdvisor.ResumeAdvisorManagement.FindMyApplicantsCount(MyResumeSearchPanel.ParamSpecialisationId, MyResumeSearchPanel.ParamExperienceLevelId,

MyResumeSearchPanel.ParamQuickSearch, MyResumeSearchPanel.ParamFilterResumeWithLabel, MyResumeSearchPanel.paramEmail,

MyResumeSearchPanel.paramState == ResumeStateEnum.Suspended || MyResumeSearchPanel.paramState == null,

MyResumeSearchPanel.paramState == ResumeStateEnum.Published || MyResumeSearchPanel.paramState == null,

MyResumeSearchPanel.paramState == ResumeStateEnum.Preparation || MyResumeSearchPanel.paramState == null,

MyResumeSearchPanel.paramPromotion, MyResumeSearchPanel.paramDoctorateSchool, MyResumeSearchPanel.paramDiplomaInstitution,

MyResumeSearchPanel.paramCurrentSituation, MyResumeSearchPanel.ParamSite, MyResumeSearchPanel.ParamResumesPerPage, ResultRadGrid.CurrentPageIndex);

ResultRadGrid.MasterTableView.VirtualItemCount = itemsNumber;

ResumeNumberValue.Text = itemsNumber.ToString();

if (resumes.Count == 0)

{

DisplayGridResults.Visible = false;

}

else

{

DisplayGridResults.Visible = true;

}

return resumes;

}

protected void ResultRadGrid_OnNeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

List<AbgService.Resume> resumeArrayToDisplay = this.SearchResume();

ResultRadGrid.DataSource = resumeArrayToDisplay;

}

protected void ResultRadGrid_PageIndexChanged(object source, Telerik.Web.UI.GridPageChangedEventArgs e)

{

//a

}

Thanks.

Grid

answered on 28 Feb 2011

1 answer

243 views

How to open a new row in edit mode for RadGrid inline editing

Hi,

I have a requirement wherein I need to open a new row in insert mode in a RadGrid with inline editing. This should be done from my C# code. A button event on my page will cause this new row to be added and a GridBoundColumn whose TextControl is rendered should be prepopulated with some text. I tried doing Grid1.EditIndexes.Add(countOfItems) but to no sucess. I think the EditIndexes property is used to open up an existing record in update mode. I am using a DataTable to bind the DataSource.

Thanks In Advance.

Grid

answered on 28 Feb 2011