Questions on UI for ASP.NET AJAX Forum

3 answers

136 views

Currently have a asp:Wizard control performing fine when wrapped in an asp:Panel, however, once wrapped in a RadAjaxPanel it errors out. The UI design requires that the DisplaySideBar="false" so we are not interested in showing tabs, as former posts refer to using the Telerik Wizard demo sample.

Can anyone point out an item we may be overlooking?

The asp:Wizard sits inside a RadAjaxPanel in a WebUserControl.ascx. This WebUserControl.ascx is then part of a webform which sits inside a masterpage. Remember, when wrapped in an asp:Panel the page works just fine.

Below is the stubbed out templates for the asp:Wizard control inside the .ascx file:

<div>

<telerik:RadAjaxPanel ID="panelwInterview" CssClass="panelsASP" Wrap="False" runat="server" Height="350px" Width="100%">

<ol>

<asp:Wizard ID="WizardInterview" runat="server" Height="100%"

Width="100%" ActiveStepIndex="0" BorderStyle="None">

<HeaderTemplate>

<li>

<asp:ValidationSummary ID="ValidationSummaryInterview" runat="server" BorderStyle="None" DisplayMode="SingleParagraph"

HeaderText="Please correct the following:" ShowMessageBox="True" />

</li>

</HeaderTemplate>

<StartNavigationTemplate>

<telerik:RadButton ID="StepNextButton" runat="server" CommandName="MoveNext" Text="Next Question" CausesValidation="False">

</telerik:RadButton>

</StartNavigationTemplate>

<StepNavigationTemplate>

<telerik:RadButton ID="StepPreviousButton" runat="server" CausesValidation="False"

CommandName="MovePrevious" Text="Previous Question">

</telerik:RadButton>

<telerik:RadButton ID="StepNextButton" runat="server" CommandName="MoveNext" Text="Next Question">

</telerik:RadButton>

</StepNavigationTemplate>

<FinishNavigationTemplate>

<telerik:RadButton ID="FinishPreviousButton" CausesValidation="False"

CommandName="MovePrevious" Text="Previous" runat="server">

</telerik:RadButton>

<telerik:RadButton ID="FinishButton" CommandName="MoveComplete"

Text="Finish" runat="server">

</telerik:RadButton>

</FinishNavigationTemplate>

<WizardSteps>...

Much Thanks.

TabStrip

answered on 17 Mar 2011

5 answers

192 views

in multi RadAjaxLoadingPanel, image hidden on async postback


Hi, I have a problem with the control RadAjaxLoadingPanel. My version of Telerik controls is 2009.3.1314.35.
When I expand all the panels by server call,  the loader is showed correctly on each panel, but when one of the panels ends the loader panel stop loader image and then, when the async post back was end, show the correct result.  Where am I wrong? 
Can I use only 1 PanelLoad for each Panel? In this exemple I have use 3 different Load, but the result is the same if I use 1 loader for all panel, is it wrong? Is it correct to use 1 panel Load for all Panel or must I use different loader panel?
 
If I use the DefaultLoadingPanelID of RadAjaxManager and clear the LoadingPanelID of RadAjaxPanel control the loader are not show, is wrong this operation?
I have also this problems
-          I want to custom the style of panel header, what should I do? Does a specific css property exists for this? The css property of panelbar is for body not header.
-          The distance of panel was set in panelBoxOut css class, in the attached sample is 90px. The loader are draw under the panel header corectly. If I set the property to 10 px the loader are draw in header panel. I want that the space from 2 panel are 10px but the loader are draw under loader and the distance is in css property class (90px), is it possible?
-          I would like to call expand funtion by server side, but collapse the panel invoking a client function, I don’t want the postback for collapse, is it possible?
 
Here enclosed you will find a solution that summarize all the issue written in this post.
Thanks in advance for your prompt reply.
Best Regards.




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

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

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

<style type="text/css">

.panelBoxOut

{

min-height: 90px;

}

.panelBoxIn

{

min-height: 35px;

}

</style>

</head>

<body>

<script type="text/javascript">

function OnExpand(sender, eventArgs) {

//logEvent("On expand: " + eventArgs.get_item().get_text());

}

function OnCollapse(sender, eventArgs) {

//logEvent("On collapse: " + eventArgs.get_item().get_text());

//how to Stop postback???

return false;

}

</script>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" RequestQueueSize="10">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxPanelFatture">

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadAjaxPanelContratti">

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

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

</telerik:RadAjaxLoadingPanel>

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

</telerik:RadAjaxLoadingPanel>

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

</telerik:RadAjaxLoadingPanel>

<div>

<telerik:RadAjaxPanel ID="RadAjaxPanel1Contratti" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">

<telerik:RadPanelBar runat="server" ID="RadPanelBarContratti" AllowCollapseAllItems="True"

Width="100%" CssClass="panelBoxOut" OnClientItemExpand="OnExpand" OnClientItemCollapse="OnCollapse"

OnItemClick="RadPanelBarContratti_ItemClick">

<Items>

<telerik:RadPanelItem Text="1) Contratti" Value="pnlDataAnagafica">

<Items>

<telerik:RadPanelItem Value="Grid">

<ItemTemplate>

<div class="panelBoxIn">

<%--<telerik:RadGrid ID="grdContratti" runat="server" DataSourceID="ObjectDataSourceContratti"

GridLines="None" Visible="False" AutoGenerateColumns="False">

<MasterTableView>

</MasterTableView>

</telerik:RadGrid>--%>

<asp:Label ID="Label1" runat="server" Text=""></asp:Label>

</div>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</telerik:RadAjaxPanel>

</div>

<div>

<telerik:RadAjaxPanel ID="RadAjaxPanelFatture" runat="server" LoadingPanelID="RadAjaxLoadingPanel2">

<telerik:RadPanelBar runat="server" ID="RadPanelBarFatture" CssClass="panelBoxOut"

AllowCollapseAllItems="false" Width="100%" OnClientItemExpand="OnExpand" OnClientItemCollapse="OnCollapse"

OnItemClick="RadPanelBarFatture_ItemClick">

<Items>

<telerik:RadPanelItem Text="2) Fatture" Value="pnlDataAnagafica">

<Items>

<telerik:RadPanelItem Value="Grid">

<ItemTemplate>

<div class="panelBoxIn">

<%-- <telerik:RadGrid ID="grdFatture" runat="server" DataSourceID="ObjectDataSourceFatture"

GridLines="None" Visible="False" AutoGenerateColumns="False" OnGridCreated="OnGridCreated"

AllowPaging="True" PageSize="15">

<MasterTableView>

</MasterTableView>

</telerik:RadGrid>--%>

<asp:Label ID="Label1" runat="server" Text=""></asp:Label>

</div>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</telerik:RadAjaxPanel>

</div>

<div>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel3">

<telerik:RadPanelBar runat="server" ID="RadPanelBarBarAnagrafe" CssClass="panelBoxOut"

AllowCollapseAllItems="false" Width="100%" OnClientItemExpand="OnExpand" OnClientItemCollapse="OnCollapse"

OnItemClick="RadPanelBarAnagrafe_ItemClick">

<Items>

<telerik:RadPanelItem Text="3) Fatture" Value="pnlDataAnagafica">

<Items>

<telerik:RadPanelItem Value="Grid">

<ItemTemplate>

<div class="panelBoxIn">

<%-- <telerik:RadGrid ID="grdFatture" runat="server" DataSourceID="ObjectDataSourceFatture"

GridLines="None" Visible="False" AutoGenerateColumns="False" OnGridCreated="OnGridCreated"

AllowPaging="True" PageSize="15">

<MasterTableView>

</MasterTableView>

</telerik:RadGrid>--%>

<asp:Label ID="Label1" runat="server" Text=""></asp:Label>

</div>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</telerik:RadAjaxPanel>

</div>

</form>

</body>

</html>

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Web.Security;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

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

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void RadPanelBarContratti_ItemClick(object sender, RadPanelBarEventArgs e)

{

/*

RadGrid grdContratti = (RadGrid)RadPanelBarContratti.FindItemByValue("Grid").FindControl("grdContratti");

if (!grdContratti.Visible)

{

grdContratti.Visible = true;

base.ConfigGrid(ref grdContratti);

//grdContratti.DataBind();

}

*/

//Simulate grid bind time with thread

System.Threading.Thread.Sleep(15000);

Label lblContratti = (Label)RadPanelBarContratti.FindItemByValue("Grid").FindControl("Label1");

lblContratti.Text = "Bind Finish!";

}

protected void RadPanelBarFatture_ItemClick(object sender, RadPanelBarEventArgs e)

{

/*

RadGrid grdFatture = (RadGrid)RadPanelBarFatture.FindItemByValue("Grid").FindControl("grdFatture");

if (!grdFatture.Visible)

{

grdFatture.Visible = true;

base.ConfigGrid(ref grdFatture);

//grdFatture.DataBind();

}

*/

//Simulate grid bind time with thread

System.Threading.Thread.Sleep(10000);

Label lblContratti = (Label)RadPanelBarFatture.FindItemByValue("Grid").FindControl("Label1");

lblContratti.Text = "Bind Finish!";

}

protected void RadPanelBarAnagrafe_ItemClick(object sender, RadPanelBarEventArgs e)

{

/*

RadGrid grdFatture = (RadGrid)RadPanelBarFatture.FindItemByValue("Grid").FindControl("grdFatture");

if (!grdFatture.Visible)

{

grdFatture.Visible = true;

base.ConfigGrid(ref grdFatture);

//grdFatture.DataBind();

}

*/

//Simulate grid bind time with thread

System.Threading.Thread.Sleep(5000);

Label lblContratti = (Label)RadPanelBarBarAnagrafe.FindItemByValue("Grid").FindControl("Label1");

lblContratti.Text = "Bind Finish!";

}

Ajax

answered on 17 Mar 2011

2 answers

63 views

FormDecorator not working after upgrade to Windows 7/IE9

I recently upgraded my laptop to Windows 7, and also upgraded my browser to IE9.

After installing Visual Studio (2008) I installed the RadControls (Q1 2010). Everything worked fine until I ran my application, and noticed that the FormDecorator was no longer working for buttons. More specifically, the FormDecorator does not work when a form contains multiple buttons. If there's only one button it works, but with multiple buttons nothing happens. The decorator works fine for other controls, like CheckBoxes and RadioButtons. I did turn on compatibility view to see if it was a browser issue, but that didn't make any difference.

Considering that the site uses a variation of the Sunset theme (Red, orange, brown, etc.), gray/blue buttons stick out like a sore thumb.

What can I do to fix this problem? I've included a picture to illustrate the problem, and also some code to show how I'm creating the decorators in HTML.

Thanks.

<telerik:RadFormDecorator ID="ButtonDecorator" DecoratedControls="Buttons" Skin="Sunset" RegisterWithScriptManager="true" EnableRoundedCorners="false" runat="server" />

<telerik:RadFormDecorator ID="CheckBoxDecorator" runat="server" Skin="Sunset" DecoratedControls="CheckBoxes" EnableRoundedCorners="false" />

<telerik:RadAjaxLoadingPanel ID="DefaultLoadingPanel" runat="server" Skin="Sunset"></telerik:RadAjaxLoadingPanel>

FormDecorator

answered on 17 Mar 2011

1 answer

29 views

Pie Chart creates weird borders in IE7

I am creating a pop up with the ActiveRegions for the PieChart, and when I click on the pie chart it creates a weird border around the chart. Please help.

this is the map
<area shape="poly" coords="100,100,174,99,174,141,141,174,100,174,58,175,25,141,24,100,24,58,58,24,99,25,141,24,174,58,174,99" alt="Open: 408" title="Open: 408" border=0 onclick="radopen('/popups/Dashboard.aspx', null);" />

Chart (Obsolete)

answered on 17 Mar 2011

3 answers

135 views

Telerik grid with a JavaScript confirm box to update a column

I have a Telerik grid. For each row there is a details table. The row is of type NominationTypeClass and the rows in the details table is of type Nomination. So what this means for each nomination type there is a list of nominations. The grid's code:

<telerik:RadGrid
   AllowPaging="true"
   AllowSorting="true"
   AutoGenerateColumns="false"
   GridLines="None"
   ID="rgMyNominations"
   OnDetailTableDataBind="rgMyNominations_DetailTableDataBind"
   OnItemDataBound="rgMyNominations_ItemDataBound"
   OnNeedDataSource="rgMyNominations_NeedDataSource"
   OnUpdateCommand="rgMyNominations_UpdateCommand"
   PageSize="5"
   runat="server"
   ShowHeader="false"
   ShowStatusBar="true">
   <MasterTableView DataKeyNames="NominationTypeID" HierarchyDefaultExpanded="true" Width="100%">
      <Columns>
         <telerik:GridTemplateColumn>
            <ItemTemplate>
               <b><asp:Label ID="lblNominationType" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.NominationType") %>' /></b>
            </ItemTemplate>
            <ItemStyle Width="100%" />
         </telerik:GridTemplateColumn>
      </Columns>
      <NoRecordsTemplate>No Nomination Types.</NoRecordsTemplate>
      <DetailTables>
         <telerik:GridTableView PageSize="5" Name="Nominations" GridLines="None" Width="100%" ShowHeader="true" DataKeyNames="NominationID">
            <Columns>
               <telerik:GridTemplateColumn HeaderText="Person / Team">
                  <ItemTemplate>
                     <asp:Label ID="lblName" runat="server" Text='<%# GetName(DataBinder.Eval(Container, "DataItem")) %>' />
                  </ItemTemplate>
                  <ItemStyle VerticalAlign="Top" Width="20%" />
               </telerik:GridTemplateColumn>
               <telerik:GridTemplateColumn HeaderText="Date Nominated">
                  <ItemTemplate>
                     <asp:Label ID="lblNominationDate" runat="server" Text='<%# FormatDate(DataBinder.Eval(Container, "DataItem.NominationDate")) %>' />
                  </ItemTemplate>
                  <ItemStyle VerticalAlign="Top" Width="14%" />
               </telerik:GridTemplateColumn>
               <telerik:GridTemplateColumn HeaderText="Action" UniqueName="Action_Column">
                  <ItemTemplate>
                     <b><asp:HyperLink ID="hlEdit" runat="server" Text="Edit" /></b><br />
                     <b>
                        <asp:LinkButton
                           CausesValidation="false"
                           CommandName="Update"
                           ID="lbWithdrawnStatus"
                           runat="server"
                           Text="Withdraw"
                           OnClientClick="javascript:return ConfirmWithdrawnStatusChange();" />
                     </b>
                  </ItemTemplate>
                  <ItemStyle VerticalAlign="Top" Width="7%" />
               </telerik:GridTemplateColumn>
            </Columns>
            <NoRecordsTemplate>No Nominations.</NoRecordsTemplate>
         </telerik:GridTableView>
      </DetailTables>
   </MasterTableView>
   <ClientSettings AllowExpandCollapse="true"></ClientSettings>
</telerik:RadGrid>

Here is how I populate my rows:

protected void rgMyNominations_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
{
   try
   {
      if (!e.IsFromDetailTable)
      {
         rgMyNominations.DataSource = GetNominationTypes();
      }
   }
   catch (Exception ex)
   {
      // Handle exceptions
   }
}

Here is how I populate my details table:

protected void rgMyNominations_DetailTableDataBind(object source, GridDetailTableDataBindEventArgs e)
{
   try
   {
      GridDataItem gridDataItem = (GridDataItem)e.DetailTableView.ParentItem;
      if (e.DetailTableView.Name == "Nominations")
      {
         int nominationTypeID = int.Parse(gridDataItem.GetDataKeyValue("NominationTypeID").ToString());

List<Nomination> nominations = new List<Nomination>();

         // For each nomination type, add the nomination
         foreach (Nomination n in myNominationsList)
         {
            if (n.NominationType.NominationTypeID == nominationTypeID)
            {
               nominations.Add(n);
            }
         }

         e.DetailTableView.DataSource = nominations;
      }
   }
   catch (Exception ex)
   {
      // Handle exceptions
   }
}

I have an action column that has a link that says Withdrawn. When clicked I have a JavaScript confirm box with a Yes or No option. If yes, then the nomination status is updated to withdrawn. Then I want the grid to be refreshed to show the updated status. I used the grid's update command to to show the show the JavaScript's command box. It updates, but is it the correct way to do it?

protected void rgMyNominations_UpdateCommand(object source, GridCommandEventArgs e)
{
   try
   {
      StatusManager.InsertStatus( /* required parameters */ );

      // Refresh grid
      rgMyNominations.DataSource = GetNominationTypes();
      rgMyNominations.DataBind();
   }
   catch (Exception ex)
   {
      // Handle exceptions
   }
}

The binding of the grid doesn't want to work properly after the status was updated. The grid row is of type NominationTypeClass and the details table is of type Nomination. I debugged, and there where it set the datasource for each it is correct, but when the view is rendered for:

<asp:Label ID="lblNominationDate" runat="server" Text='<%# FormatDate(DataBinder.Eval(Container, "DataItem.NominationDate")) %>' />

...it says that NominationDate is not a property of NominationTypeClass. This is wrong, I don't know why it is taking the type for the row to be the type of the details table? NominationDate is a property of Nomination. It seems like it is overriding the datasources.

Are there any online samples of what I am trying to accomplish? Any advice would be appreciated.

PS: Sorry for not using the code formatter, but it looks horrible, it just shows a whole lot of HTML tags.

Grid

answered on 17 Mar 2011

3 answers

201 views

Center RadProgressArea on screen

Please how to center RadProgressArea on screen with javascript function. Thank you.

AsyncUpload

answered on 17 Mar 2011

9 answers

181 views

IE9 Beta

Hi Guys, I just downloaded IE9 Beta 64bit and was browsing around and ended up on your editor demos page and the rendering is all over the place. Now I know this is a beta which you don't support but I thought I would let you know anyway. What does IE9 do so differently to get the rendering so out of whack!

Editor

answered on 17 Mar 2011

1 answer

77 views

How to Optimistic "Tree List"

Hi

Is there any way to implement custom paging with virtual count in "Tree List"?
In my senario I am having treeview with more than 2,00,000 records, In one case, a child node having approximately 50,000 records.

Or Is there any way to implement paging in Treeview?

TreeList

answered on 17 Mar 2011

8 answers

312 views

Apply RadFilter expression to RadGrid without FilterContainerID

Hi all,
I'm trying to work out a solution to use RadFilter on a RadGrid without FilterContainerID, but setting the FieldEditors manually.

My problem is that my RadGrid must show only some of the fields that I want to be able to filter for. i.e. the Grid shows Name and Surname, but the DataSource (which by the way is an ObjectDataSource) provides also JobPosition, HireDate, and so on.
If I use the FilterContainerID the FieldsEditor are excluded and I can see in the radFilter only the fields "mapped" through a column of the Grid.
To make a long story short I would like to be able to do something similar to the sample reported in http://www.telerik.com/help/aspnet-ajax/listview-filtering-with-radfilter.html but using the RadGrid control instead of the RadListView.

Is it somehow possible ?

Thanks

Lorenzo

Filter

answered on 17 Mar 2011

2 answers

151 views

Menu drop-down does not work on Google Chrome 10

Hi!

I found an issue on the ASP.NET Ajax Menu Drop-Down, it does not work on the newest Google Chrome version 10.

Try this demo and more samples below:
http://demos.telerik.com/aspnet-ajax/menu/examples/megadropdown/defaultcs.aspx

Thanks,
Johnny

Menu

answered on 17 Mar 2011