Questions on UI for ASP.NET AJAX Forum

4 answers

166 views

Managers dialog scrolling classic vs lightweight

Hi,

For users with small screens there is a big difference in accessing all UX elements in the dialog windows.

Please compare attached Classic and Lightweight screenshots.

On Classic all elements (read Pager) are always accessible by using the browser scrollbar.

On Lightweight the Pager is not accessible in Chrome and Edge. In Firefox a scrollbar appears in the RadWindow so the user can scrolldown there.

Screenshots are made with Default skin; as we use Material skin the problem occurs even on modern laptop sceens as the UX elements are all bigger.

Marc

Editor

answered on 13 Feb 2017

1 answer

376 views

telerik:GridEditCommandColumn does not fire OnEditCommand if ButtonType=“ImageButton”?

In a telerik:RadGrid, I have a GridEditCommandColumn like this:

<telerik:RadGrid ID="grdMembers" runat="server" OnEditCommand="grdMembers_OnEditCommand" AutoGenerateColumns="False">

<MasterTableView DataKeyNames="MemberID" ShowHeadersWhenNoRecords="false">

<Columns>

<telerik:GridEditCommandColumn HeaderStyle-Width="30px" EditImageUrl="pen-16x16.png" ButtonType="ImageButton" UniqueName="TemplateColumn"/>

</Columns>

</MasterTableView>

</telerik:RadGrid>

(some more columns are actually included, but I omit those for now).

The grdMembers_OnEditCommand is having a breakpoint.
Now, when the ButtonType is either ImageButton or FontIconButton, the pen icon shows up (not otherwise), but the OnEditCommand will not fire.

Why not?

If the ButtonType is LinkButton, the first column will read "Edit", and the OnEditCommand fires if such a link is clicked.

It would help if I could paste code in this forum without line endings being killed.

Also, undo would be appreciated.

Thanks!

Grid

answered on 13 Feb 2017

3 answers

263 views

Opening Stand alone Image Manager

Hi,

If I follow these instructions: http://www.telerik.com/support/kb/aspnet-ajax/editor/details/using-the-image-and-document-managers-outside-radeditor

When I open like this everything is OK:

function OpenImgManager(TheBox) {
$find(TheBox).open('ImageManager', { CssClasses: [] }, null, 'ImageManager');
}

But when I open like this, the image url is only passed when double clicking the image, on INSERT button null value is passed.

function OpenImgManager(TheBox) {
    var args = new Telerik.Web.UI.EditorCommandEventArgs("ImageManager", null, document.createElement("a"));
    args.CssClasses = [];
    $find(TheBox).open('ImageManager', args);
}

What is happening here, I think this always worked till now.

Marc

Editor

answered on 13 Feb 2017

10 answers

484 views

How can you bind a RadClientDataSource to a custom JavaScript object/array (not to an API/WebService)

I need to bind a RadClientDataSource to a TelerikSearchBox, where the RadClientDataSource pulls data that I already have on the client-side. All the examples I can find try to pull data from a web service or REST API.

I haven't had luck getting a consistent approach that works for setting data and handling when the item is clicked.

I've been playing with trying to set the data in the OnRequestStart client event using code like:

function QN_OnClientDataRequestingDS(sender, args) {

if (args.get_type() === "read") {

//var searchText = sender.get_filterExpressions().getItem(0).get_value();

// Normally get this from another array already on the client-side, but stubbed this for the example

var myData = [

{

'ID': 1,

'Text': 'Item 1'

},

{

'ID': 2,

'Text': 'Item 2'

},

];

var dataSource = sender.get_dataSourceObject();

dataSource.transport.data = myData;

}

The OnRequestStart appears to be called multiple times however.

Also, then in the RadSearchBox OnClientSearch event, I'm trying to get the selected item when they click the dropdown list item, but it doesnt return anything but text:

function QN_OnClientSearch(sender, args) {

// http://docs.telerik.com/devtools/aspnet-ajax/controls/searchbox/client-side-programming/events/onclientsearch

var item = args.get_dataItem(),

text = args.get_text(),

value = args.get_value();

if (item) {

alert(text + " " + value);

}

My server controls are defined like:

<telerik:RadSearchBox

id="SearchBox"

accesskey="S"

runat="server"

visible="true"

EmptyMessage="Search..."

ClientDataSourceID="SearchDS"

DataTextField="Text"

DataValueField="ID"

OnClientSearch="QN_OnClientSearch"

>

</aec:TelerikSearchBox>

<telerik:RadClientDataSource

ID="SearchDS"

runat="server"

>

<Schema>

<Model ID="ID">

<Fields>

<telerik:ClientDataSourceModelField FieldName="ID" DataType="Number" />

<telerik:ClientDataSourceModelField FieldName="Text" DataType="String" />

</Fields>

</Model>

</Schema>

<ClientEvents OnRequestStart="QN_OnClientDataRequestingDS" />

</telerik:RadClientDataSource>

Thanks!

Mike

ClientDataSource

answered on 13 Feb 2017

4 answers

252 views

biff excel export currency in excel file

Hi

Hi,

We use Radgrid and use Bill Excel Export. One of the column data is currency. At design time, 

we are declaring it like this:

<telerik:GridBoundColumn DataField="Amount" HeaderText="Amount" UniqueName="Amount" DataFormatString="{0:C2}" HeaderTooltip="Amount">

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

<ItemStyle HorizontalAlign="Right" />

</telerik:GridBoundColumn>

When I export, in excel this column shows up with green triangle in the corner, that means currency is 

treated as string. I know that this is because of use of DataFormatString. The amount is showing fine 

with $ sign and commas. I need this amount column to be treated as currency and not string. This make it 

get rid of green corner in excel. Please let me know how to do it. I tried mso-number-format, 

exportinfrastructure.cell.format etc. Nothing worked out.

Thanks,

Prathiba

Grid

answered on 13 Feb 2017

1 answer

405 views

Load-On-Demand data bound controls in RadPageView when they are selected by RadTab

In my webpage, I have a RadTabStrip containing RadTab:s which will decide which page view the webpage that is shown.

<telerik:RadTabStrip ID="rtsTabs2" runat="server" Width="100%" MultiPageID="rmpMultiPage2" AutoPostBack="True" SelectedIndex="0" OnTabClick="rtsTabs2_TabClick">

<Tabs>

<telerik:RadTab Text="Page 1" PageViewID="pvPage1" />

<telerik:RadTab Text="Page 2" PageViewID="pvPage2" />

</Tabs>

</telerik:RadTabStrip>

The page views are defined like this:

<telerik:RadMultiPage ID="rmpMultiPage2" runat="server">

<telerik:RadPageView ID="pvPage1" runat="server"> RadGrids etc </telerik:RadPageView>

<telerik:RadPageView ID="pvPage2" runat="server"> More RadGrids etc </telerik:RadPageView>

</telerik:RadMultiPage>

The page views contains numerous components that will be populated from the database.

However, I will only be interested in populate those when a page view containing them is displayed.

Which event should I listed at to determine when to populate components?

The OnLoad event in RadPageView is triggered when the page load, regardless if the page view is shown or not.
The OnPreRender event in RadPageView is also triggered on page load.
The OnNeedDataSource event in GridView is the same, the event triggers when the page loads.
Using Visible="False" in a RadPageView only results in page views that will never show up even if the corresponding RadTab is clicked.

TabStrip

answered on 13 Feb 2017

11 answers

724 views

Hiding Sub Totals for Row Items

Hey,

I have a couple of nested row items and I do not want to the show the totals for each group since they are meaningless to the client.

Desired Layout
Person Name August
Product
Budget 15
Actual 14
Production 2
Budget 16
Actual 16

Is there a way to hide the Total footers that would show up under the Person Name field and the Product? This is being done with the latest version of the PivotGrid for ASP.NET AJAX

PivotGrid

answered on 13 Feb 2017

11 answers

427 views

RadGrid erroneously firing timeout

The following issue occurs in Chrome 9.0.597.98 beta. I can't reproduce it in Firefox or IE. Here goes.

So, I have the following javascript running on every page in my web app:

var TIMEOUT_DURATION = 1200000;

var timerID = null;

function onLogoutTimeout()

{

$("a").each(function ()

{

var isLogoutLink = jQuery(this).attr("id").toString().search(new RegExp(/signoutLink/i));

if (isLogoutLink >= 0)

document.location = this.href;

});

}

function onResetTimer()

{

clearTimeout(timerID);

timerID = setTimeout("onLogoutTimeout()", TIMEOUT_DURATION);

}

$(document).ready(function ()

{

timerID = setTimeout("onLogoutTimeout()", TIMEOUT_DURATION);

$(this).mousemove(function (e) { onResetTimer() });

$(this).keydown(function (e) { onResetTimer() });

});

Basically, it sets a timeout so that if a user is idle for to long, it will log them out. You'll notice that I'm using jQuery. I'm using the jQuery that comes packages with the Telerik controls. I'm using 2010.3.1317.40. The following is a simple page with a RadGrid on it:

<%@ Page Title="" Language="C#" MasterPageFile="~/Includes/MasterPages/GofrPortalMasterPage.master"

AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Organization_Admin_Users_Default"

Culture="auto" UICulture="auto" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="PageTitle" runat="Server">

<asp:Localize runat="server" meta:resourcekey="PageTitle"></asp:Localize>

</asp:Content>

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

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

<script type="text/javascript">

if (typeof SubscribeToWindowClose == "function")

{

SubscribeToWindowClose("rwCreateUser", OnCreateUserWindowClose);

SubscribeToWindowClose("rwEditUser", OnCreateUserWindowClose);

}

function OnCreateUserWindowClose(args)

{

var userGridAjaxPanel = $find("<%= rapUserGrid.ClientID %>");

userGridAjaxPanel.ajaxRequest("Rebind");

}

</script>

</telerik:RadCodeBlock>

You can add users by clicking on the plus icon or modify them by clicking on their

email address.<br />

<br />

<telerik:RadAjaxPanel ID="rapUserGrid" runat="server" OnAjaxRequest="OnUserGridAjaxRequest"

LoadingPanelID="loadingPanel">

<telerik:RadGrid ID="rgUser" runat="server" EnableEmbeddedSkins="False" Skin="GofrDefault"

GridLines="None" AutoGenerateColumns="False" OnItemDeleted="OnItemDeleted" OnNeedDataSource="OnNeedUsersDataSource"

OnDeleteCommand="OnDeleteUser" AllowSorting="true">

<MasterTableView DataKeyNames="AssetID" CommandItemDisplay="Top" meta:resourcekey="GridMasterTableView">

<Columns>

<telerik:GridButtonColumn ButtonType="ImageButton" ConfirmText="Are you sure you want to delete this user?"

ConfirmTitle="Confirm Delete" UniqueName="DeleteColumn" CommandName="Delete" ImageUrl="~/Skins/GofrDefault/Grid/Delete.gif"

ItemStyle-Width="1em" meta:resourcekey="UserGridDeleteColumn">

</telerik:GridButtonColumn>

<telerik:GridHyperLinkColumn HeaderText="Email Address" SortExpression="EmailAddress"

ItemStyle-Width="30em" DataTextField="EmailAddress" DataNavigateUrlFields="AssetID"

DataNavigateUrlFormatString="javascript:OpenRadWindow_NoReturn('rwEditUser', {{'UserID':{0}}})"

meta:resourcekey="UserGridEmailColumn">

</telerik:GridHyperLinkColumn>

<telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name" SortExpression="FirstName"

meta:resourcekey="UserGridFirstNameColumn">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LastName" HeaderText="Last Name" SortExpression="LastName"

meta:resourcekey="UserGridLastNameColumn">

</telerik:GridBoundColumn>

</Columns>

<CommandItemTemplate>

<div class="gridCommandItemDiv">

<asp:HyperLink runat="server" CssClass="gridCommandItem" Text="<%$ Resources:VirtualOfficeResources, CreateUserLabel %>"

NavigateUrl="javascript:OpenRadWindow_NoReturn('rwCreateUser', null, null)" ImageUrl="~/Skins/GofrDefault/Grid/AddRecord.gif"

ToolTip="Create User"></asp:HyperLink>

</div>

</CommandItemTemplate>

</MasterTableView>

<FilterMenu EnableEmbeddedSkins="False">

</FilterMenu>

<HeaderContextMenu EnableEmbeddedSkins="False">

</HeaderContextMenu>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

<telerik:RadAjaxLoadingPanel ID="loadingPanel" runat="server" Transparency="0" IsSticky="true">

<asp:Panel ID="innerLoadingPanel" runat="server" CssClass="innerLoadingPanel">

<table>

<tr>

<td>

<asp:Image runat="server" ImageUrl="~/Skins/GofrDefault/Common/loading.gif" />

</td>

<td style="color: White; padding-left: 1em; font-size: larger">

<asp:Localize runat="server" Text="<%$ Resources:VirtualOfficeResources, LoadingLabel %>"></asp:Localize>

</td>

</tr>

</table>

</asp:Panel>

<ajax:AlwaysVisibleControlExtender runat="server" HorizontalSide="Center" VerticalSide="Middle"

VerticalOffset="150" HorizontalOffset="100" TargetControlID="innerLoadingPanel">

</ajax:AlwaysVisibleControlExtender>

</telerik:RadAjaxLoadingPanel>

</asp:Content>

So basically what is happening is that when I push the delete button next to a user, it is firing the onLogoutTimeout() javascript timeout. The confirm dialog comes up, on confirm the server side event gets fired, and then this timeout event gets fired, which logs a user out. Not sure why this is happening. Any help would be appreciated.

Grid

answered on 13 Feb 2017

2 answers

169 views

Radwindow won't open if 2 requiredfieldvalidator's on the page

Here is a code sample of my test page.

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

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

<%--<%@ Register Src="~/CustomControls/Header.ascx" TagPrefix="uc1" TagName="Header" %>--%>

<!DOCTYPE html>

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

<head runat="server">

<title></title>

</head>

<body>

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

<div>

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

<telerik:RadTextBox runat="server" ID="txtFriendly" Width="400px" Skin="Silk"></telerik:RadTextBox>

<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="txtFriendly"

Display="Dynamic" ErrorMessage=" * required" CssClass=" text-danger"/>

<telerik:RadTextBox runat="server" ID="txtSubject" Width="400px" Skin="Silk" ></telerik:RadTextBox>

<%-- <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator5" ControlToValidate="txtSubject"

Display="Dynamic" ErrorMessage=" * required" CssClass=" text-danger"/>

--%>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">

</telerik:RadWindowManager>

<asp:Button runat="server" ID="btntest" OnClick="btntest_Click" Text="test" CausesValidation="false" />

</div>

</form>

</body>

</html>

And the codebehind:

protected void btntest_Click(object sender, EventArgs e)

{

RadWindow newWindow = new RadWindow();

newWindow.NavigateUrl = "http://www.google.com";

newWindow.VisibleOnPageLoad = true;

RadWindowManager1.Windows.Add(newWindow);

}

If I comment out either (or both) of the 2 RequiredFieldValidator's, the modal displays. It doesn't matter which one is commented.

If both are on the page, I get no modal dialog.

We are using v2016.3.1018.45

Window

answered on 10 Feb 2017

2 answers

1.0K+ views

Can't change default font size on pdf export?

Hi

I am exporting a grid to pdf following various examples, and I am using the RadGrid_ItemCreated event successfully to have alternating row styles but I haven't found any way to set the font size.

Existing code is :

Protected Sub FormatGridItem(item As GridItem)
If TypeOf item Is GridHeaderItem Then
For Each cell As TableCell In item.Cells
cell.Style("font-family") = "Arial"
cell.Style("text-align") = "left"
cell.Style("vertical-align") = "middle"
Next
End If

' Dim dataItems As GridItem() = View.GetItems(GridItemType.Item)
If TypeOf item Is GridDataItem Then
item.Style("Font-family") = "Arial"
Select Case item.ItemType

Case GridItemType.Item
item.Style("background-color") = "#DDDDDD"
item.Style("Font-size") = "10pt" ' no effect
Exit Select
Case GridItemType.AlternatingItem
item.Style("background-color") = "#FFFFFF"
item.Style("Font-size") = "10pt" ' no effect
Exit Select
Case GridItemType.Header
item.Font.Bold = True
Exit Select
Case GridItemType.Footer
item.Style("background-color") = "#FFFFFF"
Exit Select
End Select
End If
End Sub