Questions on UI for ASP.NET AJAX Forum

3 answers

362 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

428 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

68 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

64 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

126 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

88 views

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

233 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

1 answer

97 views

arrow keys causing "Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus." javascript error

Getting a wierd error with radinput controls with previosuly tested code. radtextbox and radmaskedtextbox are throwing the error: Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus." when I use the right or left arrow key to position the cursor within the textbox. the textbox accepts input and I can type, but if I try to go back and correct it I get that error. Seems to have only just appeared. I'm using one version back from the current radcontrols dues to an error in the current version that I don't recall that had a solution only available in a hotfix. 2010.3.1109

Any Ideas?

Thanks
Jonathan

Input

answered on 28 Feb 2011

1 answer

157 views

Hide/show new record, edit and delete buttons

Hi,
I have a RadGrid that is bound to a SqlDataSource. I want to show or hide the new record button in the CommandItem area as well as the edit and delete buttons based on a value from the SqlDataSource.
Ive been looking at this for a bit and it does not seem like there is a simple way to do it.
Any help would be greatly appreciated.
Thanks
Alex

Grid

answered on 28 Feb 2011

3 answers

51 views

RadDateTimePicker Q3 2010 error

Hello,

we have recently upgraded to Q3 2010, and are experiencing a problem with the rendering of our RadDateTimePickers. They render correctly under firefox 3.6.12 but under IE 8.0.6001.18702 they throw to the bottom of the page and become unuseable.

I have tried to replace the calendar.css and associated sprites with some from one of the new sample skins but that created a whole new raft of issues.

Could you please advise as to what we might do?

Calendar

answered on 28 Feb 2011