Questions on UI for ASP.NET AJAX Forum

1 answer

79 views

CurrentPageIndex ... not?

Am i wrong or is the CurrentPageIndex' zero-based?

Grid

answered on 03 Feb 2016

4 answers

140 views

Filtering Issues

I have a grid and I'm trying to add some date range filtering to. The date range filter is on a GridDateTimeColumn, however I just need to filter on Date. I enabled Range Filtering on the column, but the filter control didn't play nice with the grid, it extendes the width of the DateTimeColumn so the other columns are almost too small. I then implemented a FilterTemplate with two Telerik DatePicker controls (one on top of the other) as per this demo and that seemed to work. However, it broke other filtering that I had on the grid.

Whenever I use any other filter, the date range filter is ignored.

Example workflow:

Enter From Date and To Date - note the records in the grid
Filter on any other column - note the date range is ignored

Here is my markup

<%@ Page Title="" Language="C#" MasterPageFile="~/pqc.Master" AutoEventWireup="true" CodeBehind="inspection.aspx.cs" Inherits="pqc.web.inspection.Inspection" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head1" runat="server">

<telerik:RadScriptBlock runat="server" ID="radScriptBlock">

<script type="text/javascript">

function RowSelected(sender, args) {

var key = args.getDataKeyValue("inspection_id");

if (key) {

window.location.href = "viewinspection.aspx?id=" + key;

}

</script>

</telerik:RadScriptBlock>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContextMenu" runat="server">

<div>

<telerik:RadButton runat="server" ID="radNew" Text="New Inspection" OnClick="radNew_OnClick"></telerik:RadButton>

</div>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">

<telerik:RadAjaxManager runat="server" ID="radAjaxManager" EnableAJAX="True">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="radInspection">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="radInspection" LoadingPanelID="radLpInspection" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div class="title">Inspection</div>

<telerik:RadAjaxLoadingPanel runat="server" ID="radLpInspection"></telerik:RadAjaxLoadingPanel>

<telerik:RadGrid runat="server" ID="radInspection" AllowPaging="True" AllowSorting="True" ShowHeader="True" GridLines="None" CellPadding="0" CellSpacing="0"

PageSize="20" AllowFilteringByColumn="True" OnNeedDataSource="radInspection_OnNeedDataSource" OnItemCommand="radInspection_OnItemCommand"

OnItemDataBound="radInspection_OnItemDataBound">

<ClientSettings AllowColumnsReorder="False" EnableRowHoverStyle="True" EnablePostBackOnRowClick="False">

<Selecting AllowRowSelect="True"></Selecting>

<Scrolling UseStaticHeaders="True"></Scrolling>

<ClientEvents OnRowSelected="RowSelected"></ClientEvents>

</ClientSettings>

<GroupingSettings CaseSensitive="False"></GroupingSettings>

<MasterTableView DataKeyNames="inspection_id" ClientDataKeyNames="inspection_id" AutoGenerateColumns="False" AllowMultiColumnSorting="True" EnableHeaderContextMenu="True"

AllowFilteringByColumn="True" CommandItemDisplay="TopAndBottom" Height="100%">

<NoRecordsTemplate>No inspections.</NoRecordsTemplate>

<CommandItemSettings ShowAddNewRecordButton="False" ShowCancelChangesButton="False" ShowSaveChangesButton="False" ShowRefreshButton="True"></CommandItemSettings>

<Columns>

<telerik:GridBoundColumn DataField="inspection_id" HeaderText="ID">

<HeaderStyle Width="1%" VerticalAlign="Top" HorizontalAlign="Right"></HeaderStyle>

<ItemStyle Width="1%" VerticalAlign="Top" HorizontalAlign="Right"></ItemStyle>

<FilterTemplate>

<asp:ImageButton runat="server" ID="ibClearDate" ImageUrl="images/icons/cancel.png" AlternateText="Clear filter" ToolTip="Clear filter"

Width="16" Height="16" OnClick="ibClearDate_OnClick" />

</FilterTemplate>

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn DataField="inspection_datetime" HeaderText="Inspection Date" EnableTimeIndependentFiltering="False"

PickerType="DateTimePicker" DataFormatString="{0:yyyy-MM-dd HH:mm tt}" UniqueName="InspectionDate" enable>

<ItemStyle Width="7%" VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>

<HeaderStyle Width="7%"></HeaderStyle>

<FilterTemplate>

<div style="float: left">

<telerik:RadDatePicker runat="server" ID="radFromInspectionDate" Width="110px">

<Calendar>

<SpecialDays>

<telerik:RadCalendarDay Repeatable="Today">

<ItemStyle BackColor="LightGray" Font-Bold="True" BorderStyle="Solid" BorderColor="Black" BorderWidth="1px"></ItemStyle>

</telerik:RadCalendarDay>

</SpecialDays>

</Calendar>

<DateInput DisplayDateFormat="yyyy-MM-dd" DateFormat="yyyy-MM-dd" EmptyMessage="From Date"></DateInput>

<ClientEvents OnDateSelected="FromInspectionDateSelected"></ClientEvents>

</telerik:RadDatePicker>

<br />

<telerik:RadDatePicker runat="server" ID="radToInspectionDate" Width="110px">

<Calendar>

<SpecialDays>

<telerik:RadCalendarDay Repeatable="Today">

<ItemStyle BackColor="LightGray" Font-Bold="True" BorderStyle="Solid" BorderColor="Black" BorderWidth="1px"></ItemStyle>

</telerik:RadCalendarDay>

</SpecialDays>

</Calendar>

<DateInput DisplayDateFormat="yyyy-MM-dd" DateFormat="yyyy-MM-dd" EmptyMessage="To Date"></DateInput>

<ClientEvents OnDateSelected="ToInspectionDateSelected"></ClientEvents>

</telerik:RadDatePicker>

</div>

<telerik:RadScriptBlock runat="server" ID="radInspectionScripts">

<script type="text/javascript">

function FromInspectionDateSelected(sender, args) {

var tableView = $find("<%# Container.OwnerTableView.ClientID %>");

var toPicker = $find('<%# Container.FindControl("radToInspectionDate").ClientID %>');

if (tableView && toPicker) {

var fromDate = FormatSelectedDate(sender);

var toDate = FormatSelectedDate(toPicker);

tableView.filter("InspectionDate", fromDate + " " + toDate, "Between");

}

function ToInspectionDateSelected(sender, args) {

var tableView = $find("<%# Container.OwnerTableView.ClientID %>");

var fromPicker = $find('<%# Container.FindControl("radFromInspectionDate").ClientID %>');

if (tableView && fromPicker) {

var fromDate = FormatSelectedDate(fromPicker);

var toDate = FormatSelectedDate(sender);

tableView.filter("InspectionDate", fromDate + " " + toDate, "Between");

}

function FormatSelectedDate(picker) {

if (picker) {

var date = picker.get_selectedDate();

var dateInput = picker.get_dateInput();

if (!date) {

date = new Date();

}

var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());

return formattedDate;

}

return null;

}

</script>

</telerik:RadScriptBlock>

</FilterTemplate>

</telerik:GridDateTimeColumn>

<telerik:GridBoundColumn DataField="inspector" HeaderText="Inspector" FilterControlWidth="75%">

<HeaderStyle Width="7%"></HeaderStyle>

<ItemStyle Width="7%" VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="division" HeaderText="Division" UniqueName="Division" FilterControlWidth="75%">

<HeaderStyle Width="5%"></HeaderStyle>

<ItemStyle Width="5%" VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>

<FilterTemplate>

<telerik:RadComboBox runat="server" ID="radDivisionFilter" Width="120px" OnClientSelectedIndexChanged="DivisionIndexChanged"></telerik:RadComboBox>

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

<script type="text/javascript">

function DivisionIndexChanged(sender, args) {

var tableView = $find("<%# Container.OwnerTableView.ClientID %>");

tableView.filter("Division", args.get_item().get_value(), "EqualTo");

}

</script>

</telerik:RadCodeBlock>

</FilterTemplate>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="full_grade" HeaderText="Grade" FilterControlWidth="75%">

<HeaderStyle Width="8%"></HeaderStyle>

<ItemStyle Width="8%" VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="tag_number" HeaderText="Tag #" FilterControlWidth="75%">

<HeaderStyle Width="5%"></HeaderStyle>

<ItemStyle Width="5%" VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="size_description" HeaderText="Width" FilterControlWidth="75%">

<HeaderStyle Width="4%"></HeaderStyle>

<ItemStyle Width="4%" VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="length_description" HeaderText="Length" FilterControlWidth="75%">

<HeaderStyle Width="4%"></HeaderStyle>

<ItemStyle Width="4%" VerticalAlign="Top" HorizontalAlign="Left"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn DataField="complete" HeaderText="Completed" AllowFiltering="False">

<HeaderStyle Width="2%" HorizontalAlign="Right"></HeaderStyle>

<ItemStyle Width="2%" VerticalAlign="Top" HorizontalAlign="Right"></ItemStyle>

</telerik:GridCheckBoxColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</asp:Content>

Here is my code-behind

using System;

using System.Web.UI;

using pqc.web.Classes;

using Telerik.Web.UI;

namespace pqc.web.inspection

{

public partial class Inspection : PageBase

{

private DateTime? FromDate { get; set; }

private DateTime? ToDate { get; set; }

protected void Page_Load(object sender, EventArgs e)

{

if (Session["Key"] != null)

{

Session["Key"] = -1;

}

if (!IsPostBack)

{

LoadData();

}

private void LoadData()

{

var inspections = dal.Inspection.GetVInspectionHeaders();

radInspection.DataSource = inspections;

}

protected void radInspection_OnNeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

LoadData();

}

protected void radNew_OnClick(object sender, EventArgs e)

{

Session["Key"] = -1;

Response.Redirect("header.aspx");

}

protected void radInspection_OnItemCommand(object sender, GridCommandEventArgs e)

{

var grid = sender as RadGrid;

if (grid == null)

{

return;

}

if (e.CommandName == "RowClick")

{

var item = e.Item as GridEditableItem;

if (item == null)

{

return;

}

var key = item.GetDataKeyValue("inspection_id").ToString();

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

}

else

{

var filtering = e.Item as GridFilteringItem;

if (filtering == null)

{

return;

}

var selected = "";

var fromDate = filtering.FindControl("radFromInspectionDate") as RadDatePicker;

var toDate = filtering.FindControl("radToInspectionDate") as RadDatePicker;

if (fromDate != null)

{

if (!string.IsNullOrEmpty(grid.MasterTableView.GetColumn("InspectionDate").CurrentFilterValue))

{

selected = grid.MasterTableView.GetColumn("InspectionDate").CurrentFilterValue;

selected = selected.Split(' ')[0];

}

if (!string.IsNullOrEmpty(selected))

{

FromDate = Convert.ToDateTime(selected);

fromDate.SelectedDate = FromDate;

}

if (toDate != null)

{

if (!string.IsNullOrEmpty(grid.MasterTableView.GetColumn("InspectionDate").CurrentFilterValue))

{

selected = grid.MasterTableView.GetColumn("InspectionDate").CurrentFilterValue;

selected = selected.Split(' ')[1];

}

if (!string.IsNullOrEmpty(selected))

{

ToDate = Convert.ToDateTime(selected);

toDate.SelectedDate = ToDate;

}

protected void radInspection_OnItemDataBound(object sender, GridItemEventArgs e)

{

var grid = sender as RadGrid;

if (grid == null)

{

return;

}

var filtering = e.Item as GridFilteringItem;

if (filtering == null)

{

return;

}

var fromDate = filtering.FindControl("radFromInspectionDate") as RadDatePicker;

var toDate = filtering.FindControl("radToInspectionDate") as RadDatePicker;

var cmbDiv = filtering.FindControl("radDivisionFilter") as RadComboBox;

if (fromDate != null)

{

fromDate.SelectedDate = FromDate;

}

if (toDate != null)

{

toDate.SelectedDate = ToDate;

}

if (cmbDiv != null)

{

cmbDiv.ClearSelection();

cmbDiv.Items.Clear();

var selected = "";

if (!string.IsNullOrEmpty(grid.MasterTableView.GetColumn("Division").CurrentFilterValue))

{

selected = grid.MasterTableView.GetColumn("Division").CurrentFilterValue;

}

ListHelper.FillDivisionsForFilter(cmbDiv, ApplicationId, selected);

}

protected void ibClearDate_OnClick(object sender, ImageClickEventArgs e)

{

radInspection.MasterTableView.FilterExpression = string.Empty;

foreach (var column in radInspection.MasterTableView.RenderColumns)

{

var b = column as GridBoundColumn;

if (b != null)

{

b.CurrentFilterValue = string.Empty;

}

radInspection.Rebind();

}

How can I get the date filter preserved when other columns are filtered?

Grid

answered on 03 Feb 2016

20 answers

4.0K+ views

radgrid hyperlink column

Hi,

I am creating the datasource from datatable and populating the radgrid. i want to make cells as hyperlink column and navigate to url based on the cell value in the code behind. could anyone help regarding this issue.

thanks

Grid

answered on 03 Feb 2016

14 answers

476 views

RadPivotGrid Export to Excel Column Heading

Hi,

I have a RadPivotGrid where my PivotGridColumn is a date field. When I export to Excel, the column heading comes across as some generic numeric value and not the month name - year format that's displayed in the grid.

Is there anyway to fix this?

Thank you

Steve

Here is my grid and attached is a sample of the data:

<telerik:RadPivotGrid ID="gvSixMonthSalesReport" runat="server" ShowColumnHeaderZone="false" ShowRowHeaderZone="false" ShowDataHeaderZone="false" EnableZoneContextMenu="false" ColumnHeaderCellStyle-ForeColor="#003366" EmptyValue="$0.00" >

<Fields>

<telerik:PivotGridRowField DataField="GroupID" ZoneIndex="0" IsHidden="true" ></telerik:PivotGridRowField>

<telerik:PivotGridRowField DataField="GroupName" ZoneIndex="1" ></telerik:PivotGridRowField>

<telerik:PivotGridRowField DataField="Sales_Person" ZoneIndex="2"></telerik:PivotGridRowField>

<telerik:PivotGridColumnField DataField="MarginMonth" ZoneIndex="0" DataFormatString="{0:Y}"></telerik:PivotGridColumnField>

<telerik:PivotGridAggregateField DataField="Margin" Aggregate="Sum" DataFormatString="{0:C}"></telerik:PivotGridAggregateField>

</Fields>

<ExportSettings FileName="Six-Month Sales Maging Report" IgnorePaging="true" />

</telerik:RadPivotGrid>

PivotGrid

answered on 03 Feb 2016

1 answer

79 views

Redraw Calendar

I have a few rad buttons that set radCalendar1.selectedDate = "Some date" (+-1 day, +-7 days, +-1 month). The code works and the calendar does highlight the correct day but I can't see the selected date if it is in a different month/view. Is there a way to refresh the calendar view/display to update to the radCalendar1.selectedDate?

Calendar

answered on 03 Feb 2016

3 answers

563 views

Need help to solve error "Error loading RadChart image"

Hi Team,

We have updated .net framework 2.0 to 4.6 and telerik version from 2010.2.826.20 to 2015.3.1111.45.

When the property UseSession is set to false
We are getting an error as "Error loading RadChart image. You may also wish to check the ASP.NET Trace for further details. Display stack trace?". But I have found images are created in our TempImagesFolder(Cache). We never got this error in old version of telerik 2010.2.826.20.
We are looking for best solution to fix this error with RadChart. As per the suggestion to replace RadChart with RadHtmlChart in Telerik sites that we found. But in our case we are using RadChart in many parts of our application which not so easy to replace with RadHtmlChart. Please respond ASAP.

My chart image URL using browser's inspect element:http://localhost/xxx/ChartImage.axd?UseSession=false&ImageName=QbDPL66p6bEOlWq11Jibbiw64o%2btmhgdzHCOXHygpp8J9SSzUoHkZQzy0JrAcin0n5iitJHqTmroD5MwMSR20g%3d%3d&imageFormat=Png

Below are the additional details.

IIS 7.5
.Net 4.6

Code from ASPX Page
<telerik:RadChart ID="rchFMA" runat="server" Width="315px" DefaultType="Pie" Height="200px" AutoLayout="true" AutoTextWrap="true" Skin="WebBlue" TempImagesFolder="/Cache/" UseSession="false" IntelligentLabelsEnabled="true">
<Series>
</Series>
</telerik:RadChart>

Code from webconfig
<system.web>
<httpHandlers>
<add path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" validate="false"/>
</httpHandlers>
</system.web>
<system.webServer>
<handlers>
<add name="ChartImage_axd" path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler" verb="*" preCondition="integratedMode"/>
</handlers>
</system.webServer>

Ajax

answered on 03 Feb 2016

11 answers

375 views

JScript error on second Ajax postback

Hi,

I am using a RadAjaxManager to update one RadComboBox based on a change in another RadComboBox.

On the first postback, everything works fine, but the second time I get a java script error.

"Microsoft JScript runtime error: Sys.WebForms.PageRequestManagerServerErrorException: Specified argument was out of the range of valid values."

The script has this header info...

/* START MicrosoftAjax.js */

//----------------------------------------------------------

// MicrosoftAjax.js

Here is the markup I'm using...

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

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

<telerik:AjaxSetting AjaxControlID="cb1">

<telerik:AjaxUpdatedControl ControlID="cb2" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<tr>

<td>

<label class="normtext">Agency</label>

</td>

<telerik:RadComboBox ID="cb1" runat="server"

EmptyMessage="No Agencies Assigned" HighlightTemplatedItems="True"

AllowCustomText="True" Skin="Hay" Width="90%"

AutoPostBack="true">

</telerik:RadComboBox>

</td>

<td>

<label class="normtext">Branch</label>

</td>

<td>

<telerik:RadComboBox ID="cb2" runat="server"

EmptyMessage="N/A" HighlightTemplatedItems="true"

AllowCustomText="true" Enabled="false" Skin="Hay">

<asp:CheckBox runat="server" ID="chk1" Checked="true" onclick="onCheckBoxClick(this)"/>

<%#DataBinder.Eval(Container.DataItem, "BranchNameAndID")%>

</ItemTemplate>

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td>

<label class="normtext">Records Modified Between</label>

</td>

<td>

<telerik:RadDatePicker ID="RDPStart" runat="server" Width="100">

</DateInput>

</telerik:RadDatePicker>

</td>

<td>

</td>

<td>

<telerik:RadDatePicker ID="RDPEnd" runat="server" Width="100">

</DateInput>

</telerik:RadDatePicker>

</td>

</tr>

<tr>

<td>

<label class="normtext">Clinician Name</label>

</td>

<td>

<asp:TextBox runat="server" ID="txtClinician"></asp:TextBox>

</td>

<td>

<label class="normtext">Patient Last Name</label>

</td>

<td>

<asp:TextBox runat="server" ID="txtPatient"></asp:TextBox>

</td>

</tr>

</table>

Please help!

Thanks,

Billy

Ajax

answered on 03 Feb 2016

3 answers

129 views

Disable Thumbnails View

Hello. Is there a way to disable/hide the Thumbnails View on the File Explorer (for Document Manager, Flash Manager, Image Manager, et. al.)? If so, can someone give an example of how to set this property in code, either client-side or server-side?

FileExplorer

answered on 03 Feb 2016

2 answers

98 views

Excel export from RadGrid ends with "Unable to read file"

I've got a customer who is reporting that occasionally when exporting from the grid (and then opening the file directly rather than saving it), they receive an error message box from Excel, "Unable to read file."

I have been unable to reproduce the issue, and it doesn't happen every time for them either. Any thoughts on what could be causing this?

General Discussions

answered on 03 Feb 2016

1 answer

124 views

RadScheduler Form closed event

I'm using RadScheduler with custom form for creating appointments. I need reload page after appointment has been added. But controls hasn't event's like 'FormClosed'. If I call reload page in 'AppintmentInsert' event it prevents creation appointment in database. How I can manage this situation?

General Discussions

answered on 03 Feb 2016