Questions on UI for ASP.NET AJAX Forum

3 answers

155 views

Virtual Scrolling Duplicates Data loaded on demand

Hello,

I have a radcombobox that is loading data using a webservice, and the data all appears the way it should. However with virtual scrolling enabled when I scroll the data in the list is duplicated repeatedly, ad infinitum.

Disabling virtual scrolling solves this issue but that seems like the wrong solution in our particular case.

Any input would be greatly appreciated.

Thanks!

ComboBox

answered on 10 Aug 2010

1 answer

93 views

Multirecord per row in RadGrid

hello to all
I want a Grid with four record in per row.
same image attach .
can i ?

Grid

answered on 10 Aug 2010

2 answers

169 views

GridButtonColumn buttons not working after .NET 4.0 upgrade

I have a RadGrid (along with a RadAjaxManager and RadAjaxLoadingPanel). The version is 2010.1.309.

The grid contains two GridButtonColumns (for edit and delete). Everything was working fine until I upgraded the website from .NET 3.5 to 4.0. Now when I click on a button, the loading panel shows up for a second, but nothing happens. I can see the code is running on my button event handlers (edit command does a Response.Redirect and the delete command deletes the object). In fact, the object is actually deleted, but I need to refresh the page to see it. If I remove the RadAjaxLoadingPanel, it seems to work ok (but I get another error when trying to page). Any thoughts on this? I don't have access to a newer version, so hopefully there a fix for this version?

Solomon

<asp:panel id="pnlList" runat="server">

<telerik:radajaxmanager id="radAjaxManager" runat="server">

<ajaxsettings>

<telerik:ajaxsetting ajaxcontrolid="radItem">

<updatedcontrols>

<telerik:ajaxupdatedcontrol loadingpanelid="radLoadingPanel" controlid="radItem" />

</updatedcontrols>

</telerik:ajaxsetting>

</ajaxsettings>

</telerik:radajaxmanager>

<telerik:radajaxloadingpanel id="radLoadingPanel" runat="server" height="100" width="100" transparency="1">

</telerik:radajaxloadingpanel>

<telerik:radgrid width="700px" id="radItem" pagesize="15" runat="server" allowpaging="True" allowsorting="True" gridlines="None" skin="Telerik" autogeneratecolumns="False" onitemcommand="radItem_Command">

<pagerstyle mode="NextPrevAndNumeric" />

<mastertableview datakeynames="PersonId">

<columns>

<telerik:gridbuttoncolumn text="Edit" commandname="Edit">

<itemstyle width="37px" horizontalalign="Center" />

</telerik:gridbuttoncolumn>

<telerik:gridbuttoncolumn text="Delete" confirmtext="Are you sure you want to delete this person?" commandname="Delete">

<itemstyle width="45px" horizontalalign="Center" />

</telerik:gridbuttoncolumn>

<telerik:gridboundcolumn uniquename="column" headertext="Name" datafield="Name">

</telerik:gridboundcolumn>

<telerik:gridboundcolumn uniquename="column" headertext="Title" datafield="Name">

</telerik:gridboundcolumn>

<telerik:gridboundcolumn uniquename="column" headertext="Date" datafield="Date">

</telerik:gridboundcolumn>

</columns>

</mastertableview>

</telerik:radgrid>

<p>

<asp:linkbutton id="lnkExportToExcel" runat="server" onclick="lnkExportToExcel_Click">Export List To Excel</asp:linkbutton><br />

<asp:linkbutton id="lnkExportToWord" runat="server" onclick="lnkExportToWord_Click">Export List To Word</asp:linkbutton>

</p>

</asp:panel>

protected void radItem_Command(object source, GridCommandEventArgs e)

{

if (!(e.Item is GridDataItem)) return;

var dataItem = (GridDataItem) e.Item;

string id = dataItem.GetDataKeyValue("PersonId").ToString();

if (e.CommandName == "Edit")

{

Response.Redirect(string.Format("person.aspx?id={0}", id));

}

if (e.CommandName == "Delete")

{

_personHelper.Delete(_sessionHelper.GetPersonById(Convert.ToInt32(id)));

Response.Redirect("person.aspx");

}

Grid

answered on 10 Aug 2010

2 answers

102 views

telerik:RadDatePicker Hides

Hi all

I have telerik:RadDatePicker on my .aspx page on which I am using it as input for my Chart Generation. The Chart I am using is Fusion Charts. My query is when I select Calendar, my calender hides beneath the Chart control to bring it front of chart so that user selects the date and then it hides. And even tell how to set MinDate 1/1/2010 and MaxDate is 12/31/2010. User should not select any date else this. rest all date,month,year should be disable

Regards

Asif

General Discussions

answered on 10 Aug 2010

2 answers

169 views

RadDataPager always uses zero StartRowIndex

I am trying to implement pageable charts by implementing the IRadPageableItemContainer in a class extending MS' System.Web.DataVisualization chart components.

When I add a RadDataPager to the page, and associate it with the chart control, the RadDataPager always sets the StartRowIndex (in SetPageProperties) to zero. It never advances the position (with any of the buttons or fields), or allows me to select a different number of results per page.

Using Win XP SP3, FireFox 3.6 and IE 7/8, VS2008/.Net 3.5, with the RadControls for ASP.NET Ajax Q1 2010.

Here's my markup:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DougRadDataPagerTest1.aspx.cs" Inherits="KMI.IntelliDrive.Appl.Web.UI.test.DougRadDataPagerTest1" %>

<%@ Register Assembly="IntelliDriveChartControls" Namespace="IntelliDrive.Charting" TagPrefix="cc1" %>

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

<!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 runat="server"></telerik:RadScriptManager>

<asp:Button ID="Button1" runat="server" Text="Clear Data"

onclick="Button1_Click" />

<div>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" EnableAJAX="true" >

<cc1:PageableChart ID="newChart" runat="server" ImageStorageMode="UseHttpHandler" PagingEnabled="true" EnableViewState="True">

<Titles>

<asp:Title Text="Title"></asp:Title>

</Titles>

<ChartAreas>

<asp:ChartArea Name="ChartArea1">

<AxisY >

<LabelStyle Format="{$#,##0;($#,##0)}" />

</AxisY>

</asp:ChartArea>

</ChartAreas>

</cc1:PageableChart>

<telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="newChart" Enabled="true" BorderStyle="Ridge" Visible="true">

<Fields>

<telerik:RadDataPagerButtonField FieldType="FirstPrev" />

<telerik:RadDataPagerButtonField FieldType="Numeric" />

<telerik:RadDataPagerButtonField FieldType="NextLast" />

<telerik:RadDataPagerPageSizeField PageSizeText="Page size: " />

<telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go" TextBoxWidth="15" />

<telerik:RadDataPagerTemplatePageField>

<PagerTemplate>

<div >

<b>Items

<asp:Label runat="server" ID="Label1" Text="<%# Container.Owner.StartRowIndex+1%>" />

to

<asp:Label runat="server" ID="Label2" Text="<%# Container.Owner.StartRowIndex+Container.Owner.PageSize %>" />

of

<asp:Label runat="server" ID="Label3" Text="<%# Container.Owner.TotalRowCount%>" />

<br />

</b>

</div>

</PagerTemplate>

</telerik:RadDataPagerTemplatePageField>

</Fields>

</telerik:RadDataPager>

</telerik:RadAjaxPanel>

</div>

</form>

</body>

</html>

Here's my 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.Web.UI.DataVisualization.Charting;

using Telerik.Web.UI;

namespace KMI.IntelliDrive.Appl.Web.UI.test

{

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

{

//protected void Page_Load(object sender, EventArgs e)

//{

//}

protected override void OnPreRender(EventArgs e)

{

base.OnPreRender(e);

if (Session["DUMMYDATA"] == null)

{

Dictionary<String, Int32> dummy = new Dictionary<string, int>();

dummy.Add("one", 1);

dummy.Add("two", 2);

dummy.Add("three", 3);

dummy.Add("seven", 7);

dummy.Add("fortytwo", 42);

dummy.Add("five", 5);

dummy.Add("elevensies", 11);

dummy.Add("mastodon", 10);

dummy.Add("rock", 2);

dummy.Add("splunge", 14);

dummy.Add("parrot", 15);

dummy.Add("defenestrate", 16);

dummy.Add("cat", 17);

dummy.Add("window", 18);

Session["DUMMYDATA"] = dummy;

}

SetCommonControls();

newChart.DataSource = Session["DUMMYDATA"] as Dictionary<String, Int32>;

newChart.DataBind();

}

private void SetCommonControls()

{

string myEntityTitle = "Doug Test";

newChart.Series.Clear();

Series ser = new Series(myEntityTitle + " Change in Dollars");

ser.Name = myEntityTitle;

ser.ChartType = SeriesChartType.Bar;

ser.XValueMember = "key";

ser.YValueMembers = "value";

// Add the series to the chart.

newChart.Series.Add(ser);

// DCB FIXME trying paging

//_chart.PagingEnabled = true;

newChart.Titles[0].Text = myEntityTitle;

//Set up click event properties

//newChart.Series[0].PostBackValue = "#SERIESNAME;#AXISLABEL;#VALY;#INDEX";

}

protected void Button1_Click(object sender, EventArgs e)

{

Session.Remove("DUMMYDATA");

}

And here's the extended chart class (though the problem does not seem to be related to this class):

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI.DataVisualization.Charting;

using Telerik.Web.UI;

using System.Collections;

namespace IntelliDrive.Charting

{

public class PageableChart : Chart, IRadPageableItemContainer

{

public Boolean PagingEnabled;

private Dictionary<String, Int32> _pagedDataSource;

public override void DataBind()

{

int startRowIndex = ViewState["_startRowIndex"] != null ? (int)ViewState["_startRowIndex"] : 0;

int rowsPerPage = ViewState["_rowsPerPage"] != null ? (int)ViewState["_rowsPerPage"] : 10;

//// intercept the original data source, and databind to the proper range

//// by interpreting the paging information if paging is enabled.

int totalRows = 0;

if (PagingEnabled)

{

// calculate the range based on paging member variables.

if ((DataSource as Dictionary<String, Int32>) != null)

{

Dictionary<String,Int32> ds = DataSource as Dictionary<String,Int32>;

// This section pulls the selected "page" of data out of the full datasource.

totalRows = ds.Count;

int rowIndex = 0;

_pagedDataSource = new Dictionary<string,int>();

foreach (String s in ds.Keys)

{

if (rowIndex >= startRowIndex && rowIndex < startRowIndex + rowsPerPage)

{

_pagedDataSource[s] = ds[s];

}

rowIndex++;

}

this.DataSource = _pagedDataSource;

}

else

{

throw new ApplicationException("DCB FIXME - Can't cast the DataSource to Dictionary<String,Int32>, or DataSource isn't set by DataBind().");

}

base.DataBind();

// fire this event AFTER the databind? FIXME could this be placed up in the prior PagingEnabled block for cleanness?

if (PagingEnabled)

{

OnTotalRowCountAvailable(new RadDataPagerPageEventArgs(startRowIndex, rowsPerPage, totalRows));

}

#region IRadPageableItemContainer Members

public int MaximumRows

{

get { return ViewState["_rowsPerPage"] != null ? (int)ViewState["_rowsPerPage"] : 7; }

}

// Why does "startRowIndex" always show up as 0? The pager never changes it...

public void SetPageProperties(int startRowIndex, int maximumRows, bool databind)

{

this.ViewState["_startRowIndex"] = startRowIndex;

this.ViewState["_rowsPerPage"] = maximumRows;

// it's got to re-bind since we bind manually to the paged data.

RequiresDataBinding = true;

}

public int StartRowIndex

{

get { return (ViewState["_startRowIndex"] != null ? (int)ViewState["_startRowIndex"] : 0); }

}

public event EventHandler<RadDataPagerPageEventArgs> TotalRowCountAvailable;

#endregion

protected virtual void OnTotalRowCountAvailable(RadDataPagerPageEventArgs e)

{

if (TotalRowCountAvailable != null)

TotalRowCountAvailable(this, e);

}

Thanks,
Doug

Ajax

answered on 10 Aug 2010

12 answers

383 views

[Solved] Position RadAjaxLoadingPanel

I have a master page with a table. The table contains four cells. The top left cell contains a RadPanelBar, the top right cell contains the content, the bottem left cell is empty, and the bottom right cell contains navigation buttons. I have an update panel and a loading panel on the master form. I'm trying to get the loading panel to be semi transparent over the bottom right cell only. The transparency is working, but it covers the entire page. I've attached the master page, and the css for the loading grid.

    
            <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Main.master.vb" Inherits="MassMemberMoveUI.Main" %> 
        
            <%@ 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>  
        
                <asp:ContentPlaceHolder ID="head" runat="server">  
        
                </asp:ContentPlaceHolder> 
        
                <link href="Main.css" rel="stylesheet" type="text/css" /> 
        
                <link href="MySkin/ComboBox.MySkin.css" rel="stylesheet" type="text/css" /> 
        
                <link href="MySkin/Grid.MySkin.css" rel="Stylesheet" type="text/css" /> 
        
                <link href="MySkin/Ajax.MySkin.css" rel="Stylesheet" type="text/css" /> 
        
                <style type="text/css">  
        
                    .style1  
        
                    {  
        
                        width: 173px;  
        
                    }  
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="MasterForm" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                </telerik:RadScriptManager> 
        
                <div id="container">  
        
                    <div id="header">  
        
                        <h1> 
        
                            Mass Member Move</h1> 
        
                    </div> 
        
                    <div id="sub_header">  
        
                        ... QNXT Eligibility Transfers</div> 
        
                    <div id="main_content_top">  
        
                    </div> 
        
                    <div id="main_content">  
        
                        <div class="content">  
        
                            <telerik:RadAjaxPanel runat="server" ID="MainAjaxPanel" LoadingPanelID="MainLoadingPanel">  
        
                                <table width="700px">  
        
                                    <tr> 
        
                                        <td class="style1">  
        
                                            <div style="position: absolute; width: 162px; height: 400px; z-index: 101; background-color: White;  
        
                                                filter: alpha(opacity=0); -moz-opacity: 0.0; opacity: 0.0;"> 
        
                                            </div> 
        
                                            <telerik:RadPanelBar ID="ProgressPanelBar" runat="server" Width="162px" Height="400px" 
        
                                                DataSourceID="SiteMapDataSource1">  
        
                                            </telerik:RadPanelBar> 
        
                                            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /> 
        
                                        </td> 
        
                                        <td> 
        
                                            <div style="height: 400px; border: solid 1px black;">  
        
                                                <asp:ContentPlaceHolder ID="contentplaceholder1" runat="server">  
        
                                                </asp:ContentPlaceHolder> 
        
                                            </div> 
        
                                        </td> 
        
                                    </tr> 
        
                                    <tr> 
        
                                        <td class="style1">  
        
                                        </td> 
        
                                        <td> 
        
                                            <telerik:RadAjaxLoadingPanel ID="MainLoadingPanel" runat="server" IsSticky="true" 
        
                                                EnableEmbeddedSkins="false" Skin="MySkin">  
        
                                            </telerik:RadAjaxLoadingPanel> 
        
                                            <center> 
        
                                                <div style="height: 100px">  
        
                                                    <asp:ImageButton ID="PrevButton" runat="server" ImageUrl="~/Images/LeftArrow.bmp" 
        
                                                        ToolTip="Previous Page" />&nbsp;  
        
                                                    <asp:ImageButton ID="NextButton" runat="server" ImageUrl="~/Images/RightArrow.bmp" 
        
                                                        ToolTip="Next Page" /> 
        
                                                    <p /> 
        
                                                    <asp:Label ID="ErrorLabel" runat="server" Visible="false" ForeColor="Red"></asp:Label> 
        
                                                </div> 
        
                                            </center> 
        
                                        </td> 
        
                                    </tr> 
        
                                </table> 
        
                            </telerik:RadAjaxPanel> 
        
                        </div> 
        
                    </div> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

    
            /* Telerik RadAjaxLoadingPanel Default Skin */ 
        
            /* 
        
                         <div style="position: absolute; left: 173px; top: 400px; width: 538px; height: 100px; 
        
                                    background-color: Gray; filter: alpha(opacity=60); -moz-opacity: 0.6; 
        
                                    opacity: 0.6;"> 
        
                                </div> 
        
            */ 
        
            .RadAjax_MySkin .raDiv  
        
            {  
        
                /*background-image:url('Common/loading.gif');*/ 
        
                position: absolute;  
        
                left: 173px;  
        
                top: 400px;  
        
                width: 538px;  
        
                height: 100px;  
        
            }  
        
            .RadAjax_MySkin .raColor  
        
            {  
        
                background-color:#fff;  
        
            }  
        
            .RadAjax_MySkin .raTransp  
        
            {  
        
                opacity:0.6;  
        
                -moz-opacity:0.6;  
        
                filter:alpha(opacity=60);  
        
            }

Ajax

answered on 09 Aug 2010

0 answers

86 views

2009.3.1503.35 to 2010.2.722.35 behavior difference

I noticed on a cbo dropdown with autopostback was not re-positioning the screen (as if Ajax is not taking place) to its vertical location and when I referenced 2009.3.1503.35 version the problem went away.

Update: Behavior is back to normal with 2010.2.809.35.

VS2008 IE8.

Ajax

asked on 09 Aug 2010

1 answer

191 views

Using RadProgressArea for custom monitoring

Here's the general synopsis.

I'm generating a report on the server end.
1. The user goes to the page and clicks 'Generate Report' which calls server side generation
2. The RadProgressArea shows up and updates it's details correctly
3. After the report has been generated, it is saved on the server side
Where I have a problem is step 4:
4. Using either Response.TransmitFile or Response.WriteFile, send the newly generated report to the user.
I need to do some server side code, which is why I just can't do a window.location to the filename and this is where I'm running into issues.

When I change the response object to send the file, I lose the ability to:
1. Make the ProgressArea disappear (normally it automatically does on the postback with an unchanged response object)
2. Allow the user to click generate report again and repopulate the progressarea (the report still will generate fine, but the progress area remains static and doesn't reset.

My idea solution would be:
1. Click Generate Report
2. RadProgressArea appears
3. Once the report has finished generating, reset/hide/nullify the ProgressArea
4. Call server side function to send file to user.

I thought I could find a solution by registering a startup script to simply call the server side function to send the file, but then I read that AJAX doesn't have that functionality.

I hope you understand the theory behind this, and I can provide some code if needed.

Upload (Obsolete)

answered on 09 Aug 2010

1 answer

535 views

Phone number column formatting(phone number as string)

Hi,

What is the best way to format the phone number as {0:(###)###-####) for the phone numbers that are string in database.
I cannot use dataformatstring or telerik:maskeditcolumn as both expects the phone number as integer.

I also tried template column and have label's text as format string above but it still displays the plain text.
I want to display the column as ready only and should support sorting.

Any help is appreciated.

Regards

Grid

answered on 09 Aug 2010

0 answers

95 views

hierarchical panel bar and load on demand

I am binding a Panel bar to hierarchical data following way. I do get panel bar populated with hierarchy.

.DataSource = CategoryCollection.ToList

.DataTextField = "Name"

.DataNavigateUrlField = ""

.DataFieldID = "Id"

.DataFieldParentID = "ParentId"

.DataBind()

In Item click event I want to know the value of Id and parentId of clicked item. I was trying to do following way but I am getting value nothing.

e.Item.Attributes("Id").ToString. I need to know if selected item is a parent Item or a child item. If it's child item then load user control.

What I am trying to do is when user click on a panel item show a user control with data populated for selected panel item. I do need to pass Id and a parentId on item click to pass to this user control.

I am trying to load user control on item click event. Is this a good approach? I don’t want to load user controls for all the panel items.

PanelBar

asked on 09 Aug 2010