Questions on UI for ASP.NET AJAX Forum

4 answers

173 views

Implementing filtering for column containing custom formatted text.

Hi there,

I've a simple RadGrid which is bound through an objectDataSource. I've a couple of columns which are bound, using DataField attribute, to the properties of type returned by ObjectDataSource bound method.

<telerik:RadGrid ID="RGTasks" AllowPaging="True" runat="server"

AutoGenerateColumns="False" GridLines="None" CellSpacing="0"

DataSourceID="ObjectDataSource1" Skin="Outlook" PageSize="10"

style="width:100%; height:100%;" onitemdatabound="RGTasks_ItemDataBound"

AllowFilteringByColumn="true" AllowSorting="true"

onitemcommand="RGTasks_ItemCommand">

<MasterTableView DataKeyNames="RuleScheduleKey" AutoGenerateColumns="false" CommandItemDisplay="Top"

EditMode="EditForms" AllowAutomaticUpdates="true" AllowAutomaticInserts="false"

AllowFilteringByColumn="true" >

<EditFormSettings EditFormType="WebUserControl" UserControlName="../Controls/EditRule.ascx" />

<CommandItemSettings ExportToPdfText="Export to PDF" AddNewRecordText="Add Task"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

<AlternatingItemStyle BackColor="#EDF1FF" />

<Columns>

<telerik:GridBoundColumn FilterControlAltText="Filter column2 column"

UniqueName="column2" DataField="RuleScheduleKey" HeaderText="Task"

HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Center"

AllowFiltering="false">

<HeaderStyle HorizontalAlign="Center" Font-Bold="True"></HeaderStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn FilterControlAltText="Filter column1 column"

UniqueName="colRule" DataField="RuleKey" HeaderText="Rule"

HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Center"

CurrentFilterFunction="Contains" ShowFilterIcon="false" AutoPostBackOnFilter="true">

<HeaderStyle HorizontalAlign="Center" Font-Bold="True"></HeaderStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ScheduleKey" HeaderText="Schedule" UniqueName="ScheduleKey"

FilterControlAltText="Filter column6 column" AllowFiltering="false">

<HeaderStyle Font-Bold="True" />

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn FilterControlAltText="Filter column5 column"

UniqueName="column5" DataField="NextRunTimestamp" HeaderText="Next Run" ItemStyle-Width="10%"

HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Center"

ReadOnly="true" AllowFiltering="false">

<HeaderStyle Font-Bold="True" HorizontalAlign="Center" />

<ItemStyle Width="10%" />

</telerik:GridDateTimeColumn>

<telerik:GridDateTimeColumn DataField="LastRunTimestamp"

FilterControlAltText="Filter column column" HeaderText="Last Run"

UniqueName="column" AllowFiltering="false">

<HeaderStyle Font-Bold="True" />

</telerik:GridDateTimeColumn>

<telerik:GridBoundColumn FilterControlAltText="Filter column4 column"

UniqueName="column4" DataField="LastRunStatus" HeaderText="Last Run Status"

HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Center"

CurrentFilterFunction="Contains" ShowFilterIcon="false">

<HeaderStyle HorizontalAlign="Center" Font-Bold="True"></HeaderStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn FilterControlAltText="Filter column3 column"

UniqueName="column3" DataField="CreatedById" HeaderText="Created By"

HeaderStyle-Font-Bold="true" HeaderStyle-HorizontalAlign="Center"

ReadOnly="true" CurrentFilterFunction="StartsWith" ShowFilterIcon="false"

DataType="System.String" AutoPostBackOnFilter="true">

<HeaderStyle Font-Bold="True" HorizontalAlign="Center" />

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings >

<EditColumn FilterControlAltText="Filter EditCommandColumn column" ></EditColumn>

</EditFormSettings>

</MasterTableView>

<PagerStyle PagerTextFormat="{0} / {1}" />

<FilterMenu EnableImageSprites="False"></FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

</telerik:RadGrid>

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"

SelectMethod="GetAllRuleSchedulesByUserID"

TypeName="DataAccessHelper"

onselecting="ObjectDataSource1_Selecting"

DataObjectTypeName="Datasets.RuleSchedule">

<SelectParameters>

<asp:Parameter Name="userID" Type="String" />

<asp:SessionParameter SessionField="IsUserAdmin" Name="isAdmin" Type="Boolean" DefaultValue="false" />

</SelectParameters>

</asp:ObjectDataSource>

While the data that is being displayed on the grid is formatted in the backend using the ItemDataBound
method.

Code behind

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

{

if ((e.Item.ItemType == Telerik.Web.UI.GridItemType.Item) ||

(e.Item.ItemType == Telerik.Web.UI.GridItemType.AlternatingItem))

{

try

{

RuleSchedule rs = new RuleSchedule();

rs = (RuleSchedule)e.Item.DataItem;

BusinessRule br = DataAccessHelper.GetBusinessRule(rs.RuleKey);

if (!string.IsNullOrEmpty(br.Name))

{

e.Item.Cells[5].Text = "[" + e.Item.Cells[5].Text + "] " + br.Name;

}

Schedule sc = DataAccessHelper.GetSchedule(rs.ScheduleKey);

if (!string.IsNullOrEmpty(sc.RecurrenceTypeCd))

{

e.Item.Cells[6].Text = "[" + e.Item.Cells[6].Text + "] " + sc.RecurrenceTypeCd;

}

catch

{

}

I would like to let users filter the displayed text in the formatted columns instead of the DataField.
ie. if the DataField value was say "14" while the displayed text post formatting is "[14] BiWeekly"
I would like to display the row if user types "week" in the filter control.

Any suggestions or pointers will be appreciated.

Thanks in advance.

Regards,

Grid

answered on 09 Jun 2011

9 answers

59 views

Pager not Obeying Property Assignment - [CLASSIC Controls]

Hi,

I'm working on a project whereby we are augmenting the functionality of an existing application which was built using the ASP.NET AJAX classic controls. (The analysis of upgrading to the current control suite determined that this would take to long).

So, using the WCSF and the MVP pattern, I am trying to re-apply state to a Grid. Here are the circumstances:
- user performs search
- user clicks on item in grid and is navigated to a page for that one item to edit
- as part of that operation, the state of the Grid is saved into a Session object (i.e. CurrentPage, PageSize)
- user clicks on a "Return to Search" button.
- upon loading the Grid and populating it, the Presenter applies its stored state to the Grid (i.e.CurrentPage, PageSize)

The result is a bit off. The results that are displayed are fine. However, the Pager TextBoxes and LinkButtons are all out of whack. That is, even though there may be 4 items in the Grid (as per the previously selected PageSize), the Page Size TexBox will have reverted to its original value of 10, the Page index will be 1 (even though the result set is the 4th page) and the pager LinkButton which is colored as active is the 1st page index (i.e. 1).

I've set the properties as so, and when debugging, the values seem to be assigned perfectly well:

public int LicencesResultsPageSize

{

get

{

if (this.LicenceResultsPanel.Visible)

{

return this.LicenceResultsGrid.MasterTableView.PageSize;

}

return 0;

}

set

{

if (this.LicenceResultsPanel.Visible)

{

this.LicenceResultsGrid.MasterTableView.PageSize = value;

}

public int LicencesResultsPageIndex

{

get

{

if (this.LicenceResultsPanel.Visible)

{

return this.LicenceResultsGrid.MasterTableView.CurrentPageIndex;

}

return 0;

}

set

{

if (this.LicenceResultsPanel.Visible)

{

this.LicenceResultsGrid.MasterTableView.CurrentPageIndex = value;

}

Does anyone know of a way to get those pager controls in Sync with the actual results?

Grid

answered on 09 Jun 2011

11 answers

537 views

How to add close icon to a tab

Dear Sir,

How to add close icon to a tab. When a user clicks close icon, the tab will be closed (disappear)

TabStrip

answered on 09 Jun 2011

1 answer

40 views

put a color in a row depending on a validation

need to put a red line when the column "emergency = YE"S, but not how to do it, is thispossible?.

Grid

answered on 09 Jun 2011

9 answers

164 views

GridDropDownColumn context dependent values

Hi,

I have a rad grid on my web page and I need to do the following.

- Have a GridDropDownColumn that uses values in other columns in the current row to retrieve a list of appropriate values.

We are creating a general ledger code builder and the 4th part of the code is dependent on the 1st 3 parts. So on a row by row basis i need to return the context specific values.

I have a datasource that take two parameters
1) Type this is set ok
2) The portion of the code to return appropriate values for.

How do i pass the values of my columns in to this parameter?
In my edit form i have used the selecting event to set the parameter, but i can't see how i would do this for the grid.

Any help much appreciated

Graham

Grid

answered on 08 Jun 2011

4 answers

252 views

Row Select & Deselect

I'm using the client side row selection feature described here http://demos.telerik.com/aspnet-ajax/grid/examples/client/selecting/defaultcs.aspx.

It works as described, but I wonder if I can change the behavior. Right now, when I click on a row to select it, it deselects other rows that were selected previously. Is it possible to cancel the deselect on all the other rows? I'd rather a row click affect only the row that was clicked.

Also, if a row is already selected, and I click it, nothing happens to that row. Could it be changed so that a click on the selected row will deselect that row?

Tom

Grid

answered on 08 Jun 2011

3 answers

111 views

RadScheduler - CANNOT GET TO WORK

I am currently tieing the RadScheduler to a datasource but once I have it up, I cannot seem to do an insert. Nothing happens.
As such, I cannot see how the delete and update work. Below is what I have for the .aspx file:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void Button1_Click(object sender, EventArgs e)

{

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

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

<div>

</div>

<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">

</telerik:RadScriptManager>

<telerik:RadScheduler ID="RadScheduler1" runat="server"

DataEndField="DataEndField" DataKeyField="DataKeyField"

DataSourceID="SqlDataSource3" DataStartField="DataStartField"

DataSubjectField="DataSubjectField">

</telerik:RadScheduler>

<asp:SqlDataSource ID="SqlDataSource3" runat="server"

ConnectionString="<%$ ConnectionStrings:Scheduler %>"

SelectCommand="SELECT [DataKeyField], [DataSubjectField], [DataStartField], [DataEndField] FROM [Sched]">

</asp:SqlDataSource>

<br />

</form>

</body>

</html

> 





Below is my aspx.cs file content:




using System; 
using System.Collections.Generic; 
using System.ComponentModel; 
using System.Collections; 
using System.Linq; 
using System.Text; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using Telerik.Web.UI; 
using System.Data; 
using System.Web.UI.HtmlControls; 
  
   
  
namespace AjaxRND 
{ 
    public partial class RadScheduler : System.Web.UI.Page 
    { 
        protected void Page_Load(object sender, EventArgs e) 
        { 
               
        } 
    } 
}



Thank you in advance

Scheduler

answered on 08 Jun 2011

1 answer

86 views

Tooltip calendar - RTL issue

I want to display the hijri conversion of dates in a RadCalendar ; the problem is that the text is left-to-right and I need to change it to RTL...
(see picture attached, the tooltip should display "الإثنين 02 رمضان 1432")

Calendar

answered on 08 Jun 2011

3 answers

70 views

RadTimePicker in IE sets wrong time when using Vertical and Footer

I have created an instance of a RadTimePicker with RenderDirection="Vertical" and using a footer template. Then when I pick a time in the time picker control in column 2 or 3 it changes the time ahead by 30 minutes. Eg. if I pick 10:00 AM it closes the popup and puts 10:30 AM in the text box.

After extensive testing and trying to isolate and recreate the issue I've found that the problem goes away if

- I don't use IE 8 (use Firefox or Chrome instead)
- Use a Render Direction = Horizontal
- Don't use a footer template on the timepicker popup

Additionally when I open the popup again - it actually displays the correct time in the popup.

Please let me know if there is something I have overlooked that can correct this behaviour without using any of the options I listed above which aren't what we want to have to do.

Is there an e-mail address I could submit a copy of my test application that displays this behaviour to? I can't attach a zip to this...

Thanks,

Jonathan

Main code for the page displays below: (there is no code-behind code)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="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" />

</head>

<body>

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

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

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

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

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<div>

<telerik:RadTimePicker ID="tme_startTime" runat="server" Skin="Vista"

Culture="en-CA" AutoPostBack="false" AutoPostBackControl="TimeView">

<Calendar ID="Calendar1" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" runat="server"></Calendar>

<DatePopupButton Visible="False" CssClass="" ImageUrl="" HoverImageUrl=""></DatePopupButton>

<TimeView ID="TimeView1" ShowHeader="false" CellSpacing="-1" Culture="en-CA" Interval="00:30:00" RenderDirection="Vertical" HeaderText="" runat="server">

<FooterTemplate>

<button onclick="javascript: ClosePopup(); return false;">Close</button>

</FooterTemplate>

</TimeView>

<TimePopupButton CssClass="" ImageUrl="" HoverImageUrl=""></TimePopupButton>

<DateInput Width="" DisplayDateFormat="dd/MM/yyyy" DateFormat="dd/MM/yyyy"

AutoPostBack="false"></DateInput>

<ShowAnimation Type="Slide" />

<HideAnimation Type="Slide" />

</telerik:RadTimePicker>

44

<br />

66

<telerik:RadTimePicker ID="RadTimePicker1" runat="server" Skin="Vista"

Culture="en-CA" AutoPostBack="false" AutoPostBackControl="TimeView">

<Calendar ID="Calendar2" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" runat="server"></Calendar>

<DatePopupButton Visible="False" CssClass="" ImageUrl="" HoverImageUrl=""></DatePopupButton>

<TimeView ID="TimeView3" CellSpacing="-1" Culture="en-CA" Interval="00:30:00" RenderDirection="Vertical" HeaderText="" runat="server">

<FooterTemplate>

</FooterTemplate>

</TimeView>

<TimePopupButton CssClass="" ImageUrl="" HoverImageUrl=""></TimePopupButton>

<DateInput Width="" DisplayDateFormat="dd/MM/yyyy" DateFormat="dd/MM/yyyy"

AutoPostBack="false"></DateInput>

<ShowAnimation Type="Slide" />

<HideAnimation Type="Slide" />

</telerik:RadTimePicker>

<br />

<telerik:RadTimePicker ID="RadTimePicker3" runat="server" AutoPostBack="false" >

<TimeView ID="TimeView2" Interval="00:30:00" HeaderText="" RenderDirection="Vertical" runat="server">

<FooterTemplate>

g

</FooterTemplate>

</TimeView>

</telerik:RadTimePicker>

88

<br />

<telerik:RadTimePicker ID="RadTimePicker2" runat="server" AutoPostBack="false" >

<TimeView ID="TimeView4" Interval="00:30:00" HeaderText="" runat="server">

<FooterTemplate>

g

</FooterTemplate>

</TimeView>

</telerik:RadTimePicker>

36

</div>

</form>

</body>

</html>

Calendar

answered on 08 Jun 2011

2 answers

50 views

IE7: Client nested view toggle - button not hiding

In IE7, if a rad button appears inside a RadGrid nested view template with HierarchyLoadMode="Client", the button does not hide after the details are shown then toggled off again:

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

<!doctype html>

<html>

<head><title></title></head>

<body>

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

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>