Questions on UI for ASP.NET AJAX Forum

2 answers

115 views

Hi,

I am using Telerik RadControls for ASP.NET AJAX Q2 2011 components in my .NET 4 web application and am trying to show a simple progress bar while executing a long lasting procedure.
I followed instructions in you "Upload / Monitoring Custom Progress" demo, but can't seem to make it work. Progress bar shows normaly, but the updated values don't show on screen (the original values remain till the end of execution).
I searched on forums but was unable to find a suitable solution. I suspect that there is something wrong with my web.config, but can't figure out what.

Here is a part of my web.config:

<

httpModules>

<

add name="RadUploadModule" type="Telerik.Web.UI.RadUploadHttpModule, Telerik.Web.UI, Version=2011.2.712.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>

</

httpModules>

<

httpHandlers>

<

add path="Telerik.Web.UI.DialogHandler.aspx" verb="*" type="Telerik.Web.UI.DialogHandler, Telerik.Web.UI, Version=2011.2.712.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" validate="false"/>

<

add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource, Telerik.Web.UI, Version=2011.2.712.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" verb="*" validate="false"/>

<

add path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler, Telerik.Web.UI, Version=2011.2.712.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" verb="*" validate="false"/>

<

add verb="*" path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler, Telerik.Web.UI, Version=2011.2.712.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" validate="false"/>

</

httpHandlers>

<

modules>

<

add name="RadUploadModule" preCondition="integratedMode" type="Telerik.Web.UI.RadUploadHttpModule, Telerik.Web.UI, Version=2011.2.712.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>

</

modules>

<

handlers>

<

add name="Telerik_Web_UI_WebResource_axd" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" verb="*" type="Telerik.Web.UI.WebResource, Telerik.Web.UI, Version=2011.2.712.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" />

<

add name="Telerik_Web_UI_DialogHandler_aspx" preCondition="integratedMode" path="Telerik.Web.UI.DialogHandler.aspx" verb="*" type="Telerik.Web.UI.DialogHandler, Telerik.Web.UI, Version=2011.2.712.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" />

<

add name="ChartImage_axd" preCondition="integratedMode" path="ChartImage.axd" verb="*" type="Telerik.Web.UI.ChartHttpHandler, Telerik.Web.UI, Version=2011.2.712.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" />

<

add name="Telerik_RadUploadProgressHandler_ashx" verb="*" preCondition="integratedMode" path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler, Telerik.Web.UI, Version=2011.2.712.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"/>

</

handlers>

Thanks for your help,
Marko

Upload (Obsolete)

answered on 02 Jul 2012

1 answer

91 views

GridDateTimeColumn with EqualTo return right result but does not show on grid

Hi team,

When I filter the grid by GridDateTime column with "EqualTo" operator and issue only happened with it, the result is right but they are not showed on grid. The total-item on grid is right. Please view my attachment.

In aspx page:

<telerik:RadGrid ID="grid" runat="server" Width="100%" AllowPaging="true" AllowCustomPaging="true"

ShowGroupPanel="true" AllowFilteringByColumn="true" AllowSorting="true" OnNeedDataSource="grid_NeedDataSource"

OnItemCommand="grid_ItemCommand" EnableLinqExpressions="false">

<ClientSettings AllowDragToGroup="true" AllowColumnsReorder="true" ReorderColumnsOnClient="true"

ColumnsReorderMethod="Reorder">

<Animation AllowColumnReorderAnimation="true" AllowColumnRevertAnimation="true" />

<ClientEvents OnFilterMenuShowing="FilterMenuShowing" />

</ClientSettings>

<GroupingSettings CaseSensitive="false" ShowUnGroupButton="true" />

<MasterTableView CommandItemDisplay="Top" AutoGenerateColumns="false" EnableHeaderContextMenu="true" DataKeyNames="InstructorProfileID">

<PagerStyle AlwaysVisible="true" />

<CommandItemSettings ShowAddNewRecordButton="false" ShowRefreshButton="false" ShowExportToExcelButton="true" />

<Columns>

<telerik:GridDateTimeColumn UniqueName="DateLastLogin" HeaderText="Date of Last Login" SortExpression="DateLastLogin" GroupByExpression="DateLastLogin Group By DateLastLogin"

DataField="DateLastLogin" FilterControlWidth="80%" DataType="System.DateTime" PickerType="DatePicker"/>

<telerik:GridTemplateColumn UniqueName="ReviewStatus" HeaderText="Review Status" SortExpression="ReviewStatus" GroupByExpression="ReviewStatus Group By ReviewStatus"

FilterControlWidth="80%" HeaderStyle-Width="190px" DataField="ReviewStatus" DataType="System.String">

<ItemTemplate>

<asp:Label ID="lblReviewStatus" runat="server" Text='<%# Eval("ReviewStatus")%>'/>

</ItemTemplate>

<FilterTemplate>

<telerik:RadComboBox ID="rcboFilterOptions" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rcboFilterOptions_SelectedIndexChanged">

<Items>

<telerik:RadComboBoxItem Value="ViewAll" Text="View All" />

<telerik:RadComboBoxItem Value="Mine" Text="Mine" />

<telerik:RadComboBoxItem Value="InProgress" Text="In Progress" />

<telerik:RadComboBoxItem Value="NotProcessed" Text="Not Processed" />

<telerik:RadComboBoxItem Value="MissCert" Text="Missing Presentation Skills Certificate" />

<telerik:RadComboBoxItem Value="Accepted" Text="Accepted" />

<telerik:RadComboBoxItem Value="Denied-HPCP" Text="Denied-HPCP" />

<telerik:RadComboBoxItem Value="Denied-PSC" Text="Denied-PSC" />

<telerik:RadComboBoxItem Value="Denied-No Sponsor" Text="Denied-No Sponsor" />

<telerik:RadComboBoxItem Value="Denied-PSC AND HPCP" Text="Denied-PSC AND HPCP" />

</Items>

</telerik:RadComboBox>

</FilterTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

In Code Behind:

protected void grid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

var totalItem = 0;

var dataSource = this.InstructorProfileStatusInfoService

                             .GetInstructorProfileStatusInfoCollection(grid.CurrentPageIndex

                                                                        , grid.PageSize

, this.CurrentCriteria

                                                                        , this.UserId, out totalItem);

grid.DataSource = dataSource ;

grid.VirtualItemCount = totalItem;

}

protected void rcboFilterOptions_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)

{

this.grid.CurrentPageIndex = 0;

var combo = sender as RadComboBox;

GridFilteringItem filterItem = combo.NamingContainer as GridFilteringItem;

filterItem.FireCommandEvent(RadGrid.FilterCommandName, new Pair { First = GridKnownFunction.EqualTo.ToString(), Second = "ReviewStatus" });

}

protected void grid_ItemCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)

{

            if (e.CommandName == RadGrid.FilterCommandName)

            {

                    this.grid.Rebind();

            }

 }

Please help me to solve.
Thanks.

Filter

answered on 02 Jul 2012

4 answers

141 views

Filtering Dropdown list in RadGrid

Hi,

I have a RadGrid with three levels. There is one DropDownList in the second level and another one in the third level. The combo in the third level has to be filtered based on the selection in the combo of second level. I tried a few methods but didn't help. I am using SQlDataSource to fill both these combos and having trouble setting the select parameter of the third level combo dynamically

Could you please help?

Thanks
Meera

Grid

answered on 02 Jul 2012

1 answer

99 views

Overlapping of Rotator Control

Hi there,
I have a master page with a rotator of type CarouselButtons on it who controls the site navigation.
Master page contains an IFrame where main contents are loaded. Here I have a RadGrid control to populate data, based on selected item in RadRotator.
At the moment, I have wraped the rotator with asp:CollapsiblePanelExtender so that user can collapse and expand the Rotator.
When Rotator is collapsed, Datagrid moves up to take the empty space and when it expands, datagrid moves down. This works fine.
I would like to achieve the following,

When Rotator expands, instead of taking its own space and moving the grid down, it comes on top of the Grid.
Is such control overlapping possible in situtation where Rotator and Grid resides in different pages i.e. Grid in IFrame & rotator in master page.

I would apperciate, if you could provide me a sample code, where I could see it running.

Best regards,

Rotator

answered on 02 Jul 2012

2 answers

109 views

Why on first click my radwindow is not getting closed

I have written a code to close radwindow on button click this is my design

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

<%@ 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">

<telerik:RadScriptManager ID="Script1" runat="server">

</telerik:RadScriptManager>

<div>

<telerik:RadCodeBlock ID="radcode" runat="server">

<script type="text/javascript">

function OpenSuperSeeding() {

var wnd = $find("<%= RadWindow1.ClientID%>");

wnd.Close();

}

</script>

</telerik:RadCodeBlock>

<telerik:RadButton ID="btn" runat="server" OnClick="btn_Click" Text="Open">

</telerik:RadButton>

<telerik:RadWindow runat="server" ID="RadWindow1">

<ContentTemplate>

<asp:UpdatePanel ID="Updatepanel1" runat="server" UpdateMode="Conditional">

<ContentTemplate>

<asp:Button ID="Button1" Text="Click for AJAX" runat="server" OnClick="Button1_Click" />

<br />

<asp:Label ID="Label1" Text="I will be updated" runat="server" />

</ContentTemplate>

</asp:UpdatePanel>

</ContentTemplate>

</telerik:RadWindow>

<asp:Label ID="Label2" Text="I will not be updated" runat="server" />

</div>

</form>

</body>

</html>

My code is as follows

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

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

{

bool m_flag = true;

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btn_Click(object sender, EventArgs e)

{

RadWindow1.VisibleOnPageLoad = true;

}

protected void Button1_Click(object sender, EventArgs e)

{

if (m_flag)

{

RadWindow1.VisibleOnPageLoad = false;

Button1.OnClientClick = "OpenSuperSeeding(); return false;";

}

else

{

Label1.Text = DateTime.Now.ToString();

Label2.Text = DateTime.Now.ToString();

}

But on first click radwindow is not getting closed, on the second click it is getting closed can some one help me..

Window

answered on 02 Jul 2012

3 answers

103 views

ItemCommand in RadListView with RadDataPager and SEOPaging

I have a RadListView with RadDataPager and SeoPaging set to true. I also have a RadTooltip on every row and as you know it wont work properly in IE if Tooltip target controls are not cleared when user change page or sort columns. IE do not change the tooltip data between pages if tooltip target controls arent cleared between page changes. The problem is RadListView itemcommand event is not firing when SeoPaging is set to true. So I cant clear Tooltip target controls in that event. Is this a bug and is there another event where I can clear the target controls so Tooltip would work properly in IE?

DataPager

answered on 02 Jul 2012

8 answers

544 views

RadDatePicker DatePopupButton displays default text "Open the calendar popup" whenever I assign any value to the cssClass property.

<telerik:RadDatePicker runat="server" ID="rdpSomeName" Width="125px" CssClass="SomeCssClass">

<DateInput ID="rdpSomeName_DateInput" InvalidStyleDuration="100" runat="server" CssClass="SomeCssClass">

</DateInput>

<DatePopupButton CssClass="SomeCssClass"/>

</telerik:RadDatePicker>

Whenever I assign any value to the DatePopupButton's CssClass property, the UI renders the default text for the button as a link instead of rendering the button image.

My goal is to access each element on the page with a given class name via jQuery and set the 'disabled' attribute accordingly:

function Set_CssClass_UI_Enabled(bool_Enable) {

//If we are told to ENABLE the UI set:

if (bool_Enable) {

$('.SomeCssClass').removeAttr('disabled');

}

else //Otherwise, DISABLE the UI set:

{

$('.SomeCssClass').attr('disabled', 'disabled');

}

This works for all the UI so far... except the date picker popup button. I really don't want to hard code any control names in this method because at some point I plan on even passing the name of the cssClass which we want to toggle. Thus I want to keep this as a generic helper method that I can reuse as needed.

Calendar

answered on 02 Jul 2012

0 answers

62 views

Ajax wheel reposiotioning

Telerik team,

I am using telerik tree in a radpane which has around 1000 nodes in it . Whenever the tree is expanded and any action is performed on it,

the ajax loading panel is showing up but in the middle of the tree(vertically i.e.The ajax wheel will be seen somewhere when I scroll down the browser window) due to which the User do not get prompt if any action is performed on tree.

I am using other controls also on the same page which are using same ajax manager,I do not want to disturb their ajax wheel position

I have tried the code given on following link but I could not achieve the result as expected.

http://www.telerik.com/help/aspnet-ajax/ajax-center-loadingpanel.html

Is there any way in which only for the tree control I can explicitly define the position of the ajax wheel so that it does not affect other controls?

Kindly let me know an appropriate solution for this as soon as possible.

A demo project would be of great help.

Thanking you in advance.

Ajax

asked on 02 Jul 2012

3 answers

172 views

client side add row to Grid

Hi!

I'm having a pretty specific question, and I wonder if it's possible what I want. In my codebehind I have a collection of objects that I bind to my gridview. In my gridview it is possible to check/uncheck some checkboxes. On a postback I read the values from the grid back into my collection of objects. When the user clicks the save button, I save the collection of objects to the database. I know this sounds a little bit clumsy, but I can't bind my database directly to my grid.

This all works fine. However, I also want to add a row to the grid and I want to do this client side. I have my own input form and if the user clicks 'Add', I want this row to be added to the grid, with the values that the user enered in the form. I don't want my Grid to rebind or something like that. I only want the row to be there.

Is this possible? And how can I achieve this?

Grid

answered on 02 Jul 2012

3 answers

52 views

PageSlider alignment missing in IE 7.

Hello,

I was working on telerik controls from the past 1year. So far I found few issues respect to the IE7 and we could able to fix those.
From the past 2-3weeks one issue is paining us like anything and which is only with IE7.

I have page with 'div' and in that I kept a radgrid control with pageslider, and when I open this page in IE7 I am seeing the alignment of pageslider is missing and it is not at its place where it should be.

Following is the markup page which has div and radgrid control.

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

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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

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

<div style="width:500px; height:300px; overflow:auto;">

<asp:toolkitscriptmanager id="ToolkitScriptManager1" runat="server" scriptmode="Release"

loadscriptsbeforeui="false" combinescripts="true" enablehistory="true" enablepagemethods="true">

</asp:toolkitscriptmanager>

<telerik:radgrid id="RadGrid1" runat="server" pagesize="10" width="800px"

onitemcreated="RadGrid_ItemCreated" onneeddatasource="RadGridInner_OnNeedDataSource"

allowpaging="true" enableheadercontextmenu="true"

enableheadercontextfiltermenu="true">

<MasterTableView PageSize="10" AllowSorting="true" AllowFilteringByColumn="true"

HierarchyLoadMode="Client" DataKeyNames="ID" AutoGenerateColumns="false">

<PagerStyle Position="Bottom" PageButtonCount="5" Mode="Slider" PageSizeLabelText="Records per Page:"

Visible="true" ShowPagerText="true" AlwaysVisible="true"></PagerStyle>

<Columns>

<telerik:GridBoundColumn DataField="ID" DataType="System.Int32" AllowSorting="true"

EmptyDataText="-" UniqueName="ID" HeaderText="Employee ID" SortExpression="ID" />

<telerik:GridBoundColumn ItemStyle-Font-Bold="true" DataField="FirstName" DataType="System.String"

AllowSorting="true" EmptyDataText="-" UniqueName="FirstName" HeaderText="First Name"

SortExpression="FirstName" />

<telerik:GridBoundColumn DataField="LastName" DataType="System.String" AllowSorting="true"

EmptyDataText="-" UniqueName="LastName" HeaderText="Last Name" SortExpression="LastName" />

<telerik:GridBoundColumn DataField="DateOfJoin" DataType="System.DateTime" AllowSorting="true"

EmptyDataText="-" DataFormatString="{0:MM/dd/yyyy}" UniqueName="Date Of Join"

HeaderText="Date Of Join" SortExpression="DateOfJoin">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Designation" DataType="System.String" AllowSorting="true"

EmptyDataText="-" UniqueName="Designation" HeaderText="Designation" SortExpression="Designation" />

<telerik:GridBoundColumn DataField="CompanyName" DataType="System.String" AllowSorting="true"

EmptyDataText="-" UniqueName="CompanyName" HeaderText="Company Name" SortExpression="CompanyName" />

</Columns>

</MasterTableView>

</telerik:radgrid>

</div>

</form>

</body>

</html>

Following is the codebehind file which basically I am using to bind the data.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

namespace WebApplication2

{

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

{

static List<DemoEmployee> employeeList = new List<DemoEmployee>();

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

employeeList = GetEmployeeList();

RadGrid1.DataSource = employeeList;

RadGrid1.DataBind();

}

protected void RadGrid_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item is GridGroupHeaderItem)

{

(e.Item as GridGroupHeaderItem).Cells[0].Controls.Clear();

}

if (e.Item is GridFilteringItem)

{

System.Web.UI.HtmlControls.HtmlGenericControl dynDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");

dynDiv.ID = "imgHeaderExpandAndCollpase";

dynDiv.Attributes.Add("class", "imageExpand");

dynDiv.Attributes.Add("onclick", "javascript:ToggleGridRows()");

(e.Item as GridFilteringItem).Cells[0].Controls.Add(dynDiv);

}

if (e.Item is GridPagerItem)

{

GridPagerItem pager = (GridPagerItem)e.Item;

Label lblPager = new Label();

lblPager.ID = "PageSizeLabel";

lblPager.CssClass = "lblPageSize";

lblPager.Text = "Records per Page:";

RadComboBox combo = new RadComboBox();

combo.ID = "PageSizeComboBox";

combo.CssClass = "pagerCombo";

combo.AutoPostBack = true;

// Adding items to combobox

combo.Items.Add(new RadComboBoxItem("10", "10"));

combo.FindItemByText("10").Attributes.Add("ownerTableViewId",

RadGrid1.MasterTableView.ClientID);

combo.Items.Add(new RadComboBoxItem("25", "25"));

combo.FindItemByText("25").Attributes.Add("ownerTableViewId",

RadGrid1.MasterTableView.ClientID);

combo.Items.Add(new RadComboBoxItem("50", "50"));

combo.FindItemByText("50").Attributes.Add("ownerTableViewId",

RadGrid1.MasterTableView.ClientID);

combo.Items.Add(new RadComboBoxItem("100", "100"));

combo.FindItemByText("100").Attributes.Add("ownerTableViewId",

RadGrid1.MasterTableView.ClientID);

combo.SelectedValue = "10";

combo.SelectedIndexChanged += new RadComboBoxSelectedIndexChangedEventHandler(combo_SelectedIndexChanged);

e.Item.Controls[0].Controls[0].Controls[0].Controls[0].Controls.Add(lblPager);

e.Item.Controls[0].Controls[0].Controls[0].Controls[0].Controls.Add(combo);

}

private void combo_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)

{

RefreshData();

}

protected void RadGridInner_OnNeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

RefreshData();

}

private void RefreshData()

{

RadGrid1.MasterTableView.PageSize = Convert.ToInt32("10");

employeeList = GetEmployeeList();

RadGrid1.DataSource = employeeList;

}

public static List<DemoEmployee> GetEmployeeList()

{

List<DemoEmployee> empList = new List<DemoEmployee>();

for (int i = 1; i <= 30; i++)

{

DemoEmployee emp = new DemoEmployee();

emp.ID = i;

emp.FirstName = "FirstName " + i.ToString();

emp.LastName = "LastName " + i.ToString();

emp.DateOfJoin = DateTime.Now;

emp.Designation = "Designation " + i.ToString();

emp.CompanyName = "CompanyName " + i.ToString();

List<Experience> experienceList = new List<Experience>();

for (int j = 1; j <= 3; j++)

{

Experience experience = new Experience();

experience.Company = "Company " + j.ToString();

experience.Years = j.ToString();

experience.Location = "Location " + j.ToString();

experienceList.Add(experience);

}

emp.ExperienceList = experienceList;

empList.Add(emp);

}

return empList;

}

[Serializable]

public class DemoEmployee

{

public int ID { get; set; }

public string FirstName { get; set; }

public string LastName { get; set; }

public DateTime DateOfJoin { get; set; }

public string Designation { get; set; }

public string CompanyName { get; set; }

public List<Experience> ExperienceList { get; set; }

}

[Serializable]

public class Experience

{

public string Company { set; get; }

public string Years { set; get; }

public string Location { set; get; }

}

Can anyone suggest me how to overcome this situation. [PageSlider in Grid is not aligned properly in IE7]
Please don't advise to remove the 'div', we need that div.

Thanks,
Praveen

Grid

answered on 02 Jul 2012