Questions on UI for ASP.NET AJAX Forum

2 answers

128 views

I have this in an aspx file:

<telerik:RadGrid ID="radFinalMinutes" runat="server" AllowPaging="true" OnNeedDataSource="radFinalMinutes_NeedDataSource" PageSize="20" AllowSorting="true" ShowHeader="true"

CellSpacing="0" EnableTheming="false" ShowStatusBar="true" EnableHeaderContextMenu="true" BorderStyle="None" OnItemCommand="radFinalMinutes_ItemCommand">

<PagerStyle Mode="NextPrevAndNumeric" />

<GroupingSettings CaseSensitive="false" />

<MasterTableView CommandItemDisplay="Top" AutoGenerateColumns="false" DataKeyNames="MinuteId" AllowSorting="true" AllowMultiColumnSorting="true" AllowFilteringByColumn="true"

TableLayout="Auto" GridLines="Vertical">

<CommandItemTemplate>

<div class="control_heading">

<div style="float:left">

Finalized Documents <img src="help.png" alt="Help!" />

</div>

</CommandItemTemplate>

<Columns>

<telerik:GridBoundColumn DataField="DivisionDescription" HeaderText="Division" UniqueName="Division" ItemStyle-HorizontalAlign="Left" />

<telerik:GridBoundColumn DataField="CategoryDescription" HeaderText="Category" UniqueName="Category" ItemStyle-HorizontalAlign="Left" />

<telerik:GridBoundColumn DataField="MeetingDescription" HeaderText="Meeting Type" UniqueName="MeetingType" ItemStyle-HorizontalAlign="Left" />

<telerik:GridBoundColumn DataField="Facilitator" HeaderText="Facilitator" UniqueName="Facilitator" ItemStyle-HorizontalAlign="Left" />

<telerik:GridDateTimeColumn DataField="MeetingDate" DataFormatString="{0:MMM dd, yyyy}" HeaderText="Date" UniqueName="Date" ItemStyle-Wrap="true" ItemStyle-HorizontalAlign="Left"

AutoPostBackOnFilter="true" PickerType="DatePicker" EnableRangeFiltering="true" EnableTimeIndependentFiltering="false" CurrentFilterFunction="Between">

<FilterTemplate>

<table cellpadding="0" cellspacing="0" border="0">

<tr>

<td align="left">From:</td>

<td align="left"><telerik:RadDatePicker ID="radFromDate" runat="server" Width="100px" ClientEvents-OnDateSelected="FromDateSelected"

FocusedDate='<%# this.startDate %>' SelectedDate='<%# this.startDate %>'></telerik:RadDatePicker></td>

</tr>

<tr>

<td align="left">To:</td>

<td align="left"><telerik:RadDatePicker ID="radToDate" runat="server" Width="100px" ClientEvents-OnDateSelected="ToDateSelected"

FocusedDate='<%# this.endDate %>' SelectedDate='<%# this.endDate %>'></telerik:RadDatePicker></td>

</tr>

</table>

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

<script type="text/javascript">

function FromDateSelected(sender, args) {

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

var ToPicker = $find('<%# ((GridItem)Container).FindControl("radToDate").ClientID %>');

var fromDate = FormatSelectedDate(sender);

var toDate = FormatSelectedDate(ToPicker);

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

}

function ToDateSelected(sender, args) {

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

var FromPicker = $find('<%# ((GridItem)Container).FindControl("radFromDate").ClientID %>');

var fromDate = FormatSelectedDate(FromPicker);

var toDate = FormatSelectedDate(sender);

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

}

function FormatSelectedDate(picker) {

var date = picker.get_selectedDate();

var dateInput = picker.get_dateInput();

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

return formattedDate;

}

</script>

</telerik:RadScriptBlock>

</FilterTemplate>

</telerik:GridDateTimeColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

And the code behind:

protected DateTime DefaultFromDate { get { return DateTime.Now.AddDays( -60 ).Date; } }

protected DateTime DefaultThruDate { get { return DateTime.Now.AddDays( 30 ); } }

protected DateTime? startDate

{

set

{

ViewState["strD"] = value;

}

get

{

if ( ViewState["strD"] != null )

return (DateTime)ViewState["strD"];

else

return DefaultFromDate;

}

protected DateTime? endDate

{

set

{

ViewState["endD"] = value;

}

get

{

if ( ViewState["endD"] != null )

return (DateTime)ViewState["endD"];

else

return DefaultThruDate;

}

protected void Page_Load( object sender, EventArgs e )

{

if ( !IsPostBack )

{

LoadInfo();

this.startDate = DefaultFromDate;

this.endDate = DefaultThruDate;

}

protected void LoadInfo()

{

//loading data here into variable "list"

var list = Database.SetupFinalMinutes();

list.Load();

radFinalMinutes.DataSource = list.ToList();

}

protected void radFinalMinutes_NeedDataSource( object sender, GridNeedDataSourceEventArgs e )

{

LoadInfo();

}

protected void radFinalMinutes_ItemCommand( object sender, GridCommandEventArgs e )

{

if ( e.CommandName == RadGrid.FilterCommandName )

{

Pair filterPair = (Pair)e.CommandArgument;

switch ( filterPair.Second.ToString() )

{

case "Date":

this.startDate = ((e.Item as GridFilteringItem)[filterPair.Second.ToString()].FindControl( "radFromDate" ) as RadDatePicker).SelectedDate;

this.endDate = ((e.Item as GridFilteringItem)[filterPair.Second.ToString()].FindControl( "radToDate" ) as RadDatePicker).SelectedDate;

break;

default:

break;

}

Now the problem I'm having is the radFinalMinutes_ItemCommand event doesn't fire when I change the dates in my date filter. Any ideas? The javascript in the RadScriptBlock1 does fire, and returns the correct dates [and formatting] - but the filtering on the between dates does not happen. All other columns do fire the ItemCommand.

Edit: should note, I followed http://demos.telerik.com/aspnet-ajax/grid/examples/programming/filtertemplate/defaultcs.aspx

Grid

answered on 14 Mar 2013

1 answer

65 views

Editor deom - Uploading problem

Hello,

When i try to upload an image on the demo website
(http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx)
i get the following error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; WOW64; Trident/4.0; GTB7.4; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2; .NET4.0C; .NET4.0E)
Timestamp: Wed, 13 Mar 2013 07:34:25 UTC

Message: Unspecified error.
Line: 49
Char: 5
Code: 0
URI: http://demos.telerik.com/aspnet-ajax/editor/examples/overview/Telerik.Web.UI.DialogHandler.aspx?DialogName=ImageManager&UseRSM=true&Skin=Metro&Title=Image+Manager&doid=c5466ed4-9416-4601-b991-fbf5832a3cc4&dpptn=

Documentation and Tutorials

answered on 14 Mar 2013

2 answers

74 views

Opening Multiple RadWindows using RibbonButton Clicks

How do you create a new instance of a RadWindow using Javascript, I am trying to create multiple RadWindows based on the CommandName of the Button on the Ribbon. For example, a button called "Create Chart" will open a new window of a chart, and the user can click "Create Grid" to display a grid window, both of the windows should be on the page. And I am trying to do this without a postback...which is why I want to create them using Javascript.

Here is the function I am trying

function dsxRibbonBar_ButtonClicked(sender,args)
{
var windowType = args.get_commandName();//How do I get the the button command name?
alert(windowType);
}

Thanks in advance.

Michael

Window

answered on 14 Mar 2013

1 answer

30 views

Context popup menu which comes on right click is not having aligned text

The Context popup menu which comes on right click, inside the RadEditor control is not having aligned text.
the menu text in the popup, is wrapped and not in order.
Please find attached the screenshot

Editor

answered on 14 Mar 2013

1 answer

61 views

[Solved] Telerik Rad Editor focus issue

<telerik:RadEditor ID="Message" runat="server" ClientIDMode="Static" Height="400px"
Width="100%" EditModes="Design, Preview" ToolsFile="~/Styles/RadTools.xml"
EnableResize="False">
<ImageManager MaxUploadFileSize="100" UploadPaths="~/images" ViewPaths="~/images" />
<MediaManager MaxUploadFileSize="100" UploadPaths="~/images" ViewPaths="~/images" />
<FlashManager MaxUploadFileSize="100" UploadPaths="~/images" ViewPaths="~/images" />
</telerik:RadEditor>

I'm using Telerik Rad Editor in my Application, when i click on Editor the cursor is no showing up, but when i start typing the cursor appears at the begginning of the text and did not move along with the text.

Thanks

Editor

answered on 14 Mar 2013

1 answer

98 views

Rad Editor Error in IE 9 with IE 7 Compatibility Mode

When I load the rad editor in IE 9 with compatibility mode set to IE 7, I get the following error alerts invoked from RadEditor.js. Whereas in Mozilla, it loads without such error alerts and the content is displayed. Also, this works fine if the IE9 is set to IE9 compatibility mode.

"error while executing filter StripScriptsFilter - [object Error]"
"error while executing filter EncodingScriptsFilter - [object Error]"

Following these alert messages, the rad editor does not load the content rather it shows "null."

I am using Rad Editor of Telerik.Web.UI (version 2011.2.712.40).

Let me know how to fix this issue.

Editor

answered on 14 Mar 2013

3 answers

85 views

[Solved] What is the version of jQuery used in 2013.1.220?

What is the version of jQuery used in 2013.1.220?
On the site http://www.telerik.com/help/aspnet-ajax/introduction-using-jquery.html you are listing 2012 Q3 and mentioning jQuery 1.7.2, support. What about this latest release, which version of jQuery does it support, thanks.

General Discussions

answered on 14 Mar 2013

1 answer

120 views

How can I show text that I type in a RadEditor in another RadEditor

Live, as the user types, I would like the same characters that are entered in one editor to appear in another. How can I do this? If there is some way to do this with client-side events, that would be awesome.

What I'm doing is using a RadEditor for a text area where the user types message content for the body of an email. We have HTML templates for these emails that the user selects. These get loaded into another RadEditor that shows a Preview of the user's email. When the user clicks an Update button, the text from the message content editor gets inserted into part of the template inside the preview editor. This is done so that we can control exactly what parts of the template a user modifies.

It would be awesome if I could do away with that "Update" button and instead update the Preview as the user types!

Thanks for your time.

Editor

answered on 14 Mar 2013

2 answers

485 views

Apply css dynamically to RadGrid

Hi All,

I have a textbox and a radgrid on aspx page.
i write the path of css file in that textbox and on textbox's text change event i want to apply the given css to RadGrid to change the display style of the RadGrid (as we can do with Asp.net GridView control). I dont want to use the skins.
How can i apply the css classes to change the style of rows,headers and footers dynamically without creating skins.

Grid

answered on 14 Mar 2013

2 answers

97 views

ResizeToFit - do not take column header into consideration

I have RadGrids in my application that need the columns resized by their content; however, I do not want to include header into consideration for resize.

For example, in the grid below, the content of Contact Person Name is almost always empty. Using the code below, the Contact Person Name becomes as wide as it needs to be to fit the header in one single row. But I do not care about the header content, it can be split into multiple lines if need be. If all the 25 rows in a page is empty for this record, I'd rather the header be split into three lines (one per word) and have a small column.

<telerik:RadGrid ID="rgCompany" runat="server" AutoGenerateColumns="false" EnableViewState="true"

PageSize="25" AllowSorting="true" AllowMultiRowSelection="true" AllowCustomPaging="true"

OnNeedDataSource="rgCompany_NeedDataSource" OnSortCommand="rgCompany_SortCommand"

OnItemDataBound="rgCompany_ItemDataBound">

<PagerStyle Mode="NextPrevNumericAndAdvanced" Position="Bottom" AlwaysVisible="True" />

<ClientSettings EnableRowHoverStyle="true">

<Selecting AllowRowSelect="true"></Selecting>

<Resizing AllowColumnResize="True" ResizeGridOnColumnResize="True" AllowResizeToFit="True"></Resizing>

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

</ClientSettings>

<MasterTableView>

<telerik:GridBoundColumn UniqueName="Name" HeaderText="Company Name" DataField="CompanyName" />

<telerik:GridBoundColumn UniqueName="City" HeaderText="City" DataField="City" />

<telerik:GridBoundColumn UniqueName="State" HeaderText="State" DataField="State" />

<telerik:GridBoundColumn UniqueName="Zip" HeaderText="Zip" DataField="Zip" />

<telerik:GridBoundColumn UniqueName="Phone" HeaderText="Phone Number" DataField="PhoneNumber" />

<telerik:GridBoundColumn UniqueName="Contact" HeaderText="Contact Person Name" DataField="ContactName" />

</MasterTableView>

</telerik:RadGrid>

I'm calling this function from the javascript pageLoad of all pages that contain grid.

function resizeGridToFitColumnContent (grid) {

var masterTable = grid.get_masterTableView();

var columns = masterTable.get_columns();

for (var i = 0; i < columns.length; i++) {

columns[i].resizeToFit();

}

Can this be achieved?

Also, sometimes if the grid is long (a lot of columns) it takes more than a few seconds for the page is load up. The screen goes white until the calculation is done and grid is displayed. How can I easily provide a message during this time?

Grid

answered on 14 Mar 2013