Questions on UI for ASP.NET AJAX Forum

4 answers

91 views

Hi,

After upgrading to 2012.1.411 version, the sum of the last column might be hidden in IE.
This problem was not in 2012.1.215.

It only occurs when there is a footer in the last column and that footer is aligned right.
Must also use scrolling and static headers.

Sample:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="testgrid.aspx.vb" Inherits="WebApplication1.testgrid" %>

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

<asp:ScriptManager ID="s" runat="server">

</asp:ScriptManager>

<div>

<telerik:RadGrid ID="rg" runat="server">

<ClientSettings>

<Scrolling AllowScroll="true" ScrollHeight="200px" UseStaticHeaders="true" />

</ClientSettings>

<MasterTableView ShowFooter="True" AutoGenerateColumns="false">

<Columns>

<telerik:GridBoundColumn DataField="string"></telerik:GridBoundColumn>

<telerik:GridNumericColumn DataField="number" Aggregate="Sum">

<ItemStyle HorizontalAlign="Right" />

<FooterStyle HorizontalAlign="Right" />

</telerik:GridNumericColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

Public Class testgrid

Inherits System.Web.UI.Page

Private Sub rg_NeedDataSource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles rg.NeedDataSource

Dim dt As New DataTable()

dt.Columns.Add("string", GetType(String))

dt.Columns.Add("number", GetType(Integer))

For i As Integer = 1 To 7

dt.Rows.Add({"test", i})

Next

rg.DataSource = dt

End Sub

End Class

As you can see in this sample, the sum of the "number" column will be cut off.

Regards
Caesar

Grid

answered on 19 Jun 2012

5 answers

539 views

Can't get the Height:100% to work

Hello Team;
I have tried all the recommendations for setting the proper Master Page in-line style:

<style type="css">

html, body, form

{

height: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

}

</style>

I have also copied the exact sample given in the help/demo and still the height 100% does not work.
Here is the Master Page:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="DBO_Web.SiteMaster" %>

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

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

<head runat="server">

<title>Document BackOffice</title>

<meta name="keywords" content="Document, Management, Sharing, Storage, Publish, Search" />

<meta name="description" content="Complete Document Publishing, Management, and Sharing system" />

<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

<link id="Link1" runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />

<link id="Link2" runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />

<style type="css">

html, body, form

{

height: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

}

</style>

</head>

<body>

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

<telerik:RadSkinManager ID="RadSkinManager" runat="server" Skin="Office2010Blue" />

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

<telerik:RadFormDecorator ID="RadFormDecorator" runat="server" />

<div style="margin-right: 10px; margin-left: 10px; height:100%" >

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

</div>

</form>

</body>

</html>

and Here is the content page to hold your sample, but still in all three browser they show height of 500px

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"

CodeBehind="Publish.aspx.cs" Inherits="DBO_Web.Views.Publisher.Publish" %>

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

<div id="ParentDivElement" style="height: 100%;">

<%--_________________________________________________________________________________________________--%>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%"

BackColor="#F4F9FE" VisibleDuringInit="False" Orientation="Horizontal">

<telerik:RadPane ID="TopPane" runat="server" Height="100" MinHeight="85" MaxHeight="150"

Scrolling="none">

</telerik:RadPane>

<telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />

<telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">

<telerik:RadSplitter ID="NestedSplitter" runat="server" LiveResize="true">

<telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="400">

</telerik:RadPane>

<telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" />

<telerik:RadPane ID="ContentPane" runat="server">

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

<%--_________________________________________________________________________________________________--%>

</div>

</asp:Content>

Hope this helps to get this resolved. I'm using the latest 2012 Q2.
Thank you in advance

Splitter

answered on 19 Jun 2012

0 answers

38 views

GridImageColumn - basic usage questions

I'll figure something out... thx.

Grid

asked on 19 Jun 2012

1 answer

49 views

RadGrid doesn't look good after grouping

I have a rad grid which loses its clean formatting style after grouping. I was not able to figure the reason for that. Kindly let me know how to deal with it.

<telerik:RadGrid ID="CustomersRadGrid" runat="server" Height="514px" Width="100%"

PageSize="14" CellSpacing="0" GridLines="None" HorizontalAlign="NotSet" HeaderStyle-Height="4%"

ShowGroupPanel="True" AllowPaging="true" AllowSorting="True" AutoGenerateColumns="False"

AllowMultiRowSelection="False" EnableLinqExpressions="false" AllowAutomaticInserts="False"

AllowAutomaticUpdates="False" AllowAutomaticDeletes="False" OnNeedDataSource="CustomersRadGrid_NeedDataSource"

OnDataBound="CustomersRadGrid_DataBound" OnItemCreated="CustomersRadGrid_ItemCreated">

<ExportSettings Excel-Format="Html" ExportOnlyData="true" FileName="Customers" OpenInNewWindow="true" >

</ExportSettings>

<GroupingSettings CaseSensitive="false" />

<MasterTableView DataKeyNames="Id" AutoGenerateColumns="False" Name="Customers" CommandItemDisplay="Top" Width="200%" AllowMultiColumnSorting="True">

<CommandItemTemplate>

<table width="850px">

<tr>

<td width="71%">

</td>

<td width="3%">

<asp:LinkButton ID="ExportLinkButton" CommandName="Export" runat="server">

<asp:ImageButton ID="ExportImageButton" ToolTip="Export" ImageUrl="~/Images/Export.png"

runat="server" Height="24px" />

</asp:LinkButton>

</td>

<td width="7%">

<img id="Export" width="1px" height="24px" style="border: 0px" alt="" src="../../Images/Spacer.png" />Export

</td>

<td width="9%">

<asp:LinkButton ID="FilterLinkButton" CommandName="Filter" runat="server">

<telerik:RadButton ID="FilterRadButton" runat="server" ButtonType="ToggleButton"

ToggleType="CheckBox" Width="24px" Height="24px" AutoPostBack="false" Checked="true"

ToolTip="Filter">

<ToggleStates>

<telerik:RadButtonToggleState ImageUrl="../../Images/FilterOff.png" HoveredImageUrl="../../Images/FilterOff.png"

Text="On Filter" Selected="true" />

<telerik:RadButtonToggleState ImageUrl="../../Images/FilterOn.png" HoveredImageUrl="../../Images/FilterOn.png"

Text="Off Filter" />

</ToggleStates>

</telerik:RadButton>

<img id="Filter" width="1px" height="24px" style="border: 0px" alt="" src="../../Images/Spacer.png" />Filter

</asp:LinkButton>

</td>

<td width="3%">

<asp:LinkButton ID="RefreshLinkButton" CommandName="Rebind" runat="server">

<asp:ImageButton ID="RefreshImageButton" ToolTip="Refresh" ImageUrl="~/Images/Refresh.png"

runat="server" Height="24px" />

</asp:LinkButton>

</td>

<td width="7%">

<img id="Refresh" width="1px" height="24px" style="border: 0px" alt="" src="../../Images/Spacer.png" />Refresh

</td>

</tr>

</table>

</CommandItemTemplate>

<CommandItemSettings ExportToPdfText="Export to Excel" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="true">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="true">

</ExpandCollapseColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="true">

</ExpandCollapseColumn>

<Columns>

...............................

.............................

</Columns>

</MasterTableView>

<ClientSettings AllowKeyboardNavigation="true" AllowDragToGroup="True" AllowColumnsReorder="True" ReorderColumnsOnClient="true" >

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

<Resizing AllowRowResize="True" AllowColumnResize="True" EnableRealTimeResize="True" AllowResizeToFit="true" ClipCellContentOnResize="true"

ResizeGridOnColumnResize="true"></Resizing>

<Scrolling AllowScroll="true" SaveScrollPosition="true" FrozenColumnsCount="1" UseStaticHeaders="true" />

</ClientSettings>

<GroupingSettings ShowUnGroupButton="true" />

<SortingSettings EnableSkinSortStyles="false" />

<PagerStyle AlwaysVisible="true" Mode="NextPrevAndNumeric" />

<FilterMenu EnableImageSprites="False" >

</FilterMenu>

Please let me know how to deal with it.

Grid

answered on 19 Jun 2012

3 answers

197 views

Record count not updated after doing an filter

Hi,

I have 75 records in Grid on single page and then I applied filter, now record count is 15 but it will not updated on Paginate List. Please see that attached file. please let me know how can I update record count after applying the filter.

Thanks
Praveen Tomar

Grid

answered on 19 Jun 2012

1 answer

59 views

telerik tag prefix disappeared

I have been working on this project for weeks. All of a sudden today all my intellisence is messed up and it is no longer recognizing telerik: as a valid prefix (in VS2010). When I compile it works fine and all the dlls are properly registered and the appropriate web.config entries are in place, just intellisence doesn't work anymore (happened today, nothing changed environmentally as far as i can tell)

General Discussions

answered on 19 Jun 2012

1 answer

132 views

built error on sample downloded telerik code

Here Is what I have done.
1. I downloaded the Get the code sample from step by step Tutorial and I got
RadControlAJAXCourseware.zip so far so good.
2. I unzip this RadControlAJAXCourseware.zip
3. I open the web site courseware_projects that was created in step 2.
4. I build this solution.
5. Now I get the following error Error 1 It is an error to use a section registered as allowDefinition='MachineToApplication' beyond application level. This error can be caused by a virtual directory not being configured as an application in IIS. C:\Users\tony\download\radControl\Courseware_Projects\ActiveSkill Add Finish Page\CS\004\ActiveSkillBO\Web.config 40

My environment is.
Vista
Visual Studio 2010 professional
IE 7.0

I have tried with both IE and firefox both give compile error.

What do I have to do ?

//Tony

General Discussions

answered on 19 Jun 2012

1 answer

115 views

Incorrect Windows 7 Editor Toolbar Skin

Appeared in Editor 2012 Q2.
No background image on toolbar (only gray color) when Toolbar Mode=ShowOnFocus
Skin: Windows 7
Test here: http://demos.telerik.com/aspnet-ajax/editor/examples/default/defaultcs.aspx
Can I fix this myself?

Editor

answered on 19 Jun 2012

3 answers

110 views

Automatic scroll rotator needs pager to follow along

Hello,

I have created a rotator/pager following this example on the page.

http://demos.telerik.com/aspnet-ajax/rotator/examples/pagerintegration/defaultcs.aspx

I'm not sure what client side code I need to make the pager follow the item index that the rotator is on.

Here is my current code.

public partial class _Default : JJPro.Web.Page

{

string virtualPath = "~/Images/Headers";

private void Page_Load(object sender, System.EventArgs e)

{

if (!IsPostBack)

{

RadRotator1.DataSource = GetFilesInFolder(virtualPath);// Set datasource

RadRotator1.DataBind();

}

// Returns all virtual paths to files located in the given virtual directory

protected List<string> GetFilesInFolder(string folderVirtualPath)

{

string physicalPathToFolder = Server.MapPath(folderVirtualPath);// Get the physical path

string[] physicalPathsCollection = System.IO.Directory.GetFiles(physicalPathToFolder);// Get all child files of the given folder

List<string> virtualPathsCollection = new List<string>();// Contains the result

foreach (String path in physicalPathsCollection)

{

// The value of virtualPath will be similar to '~/PathToFolder/Image1.jpg

string virtualPath = VirtualPathUtility.AppendTrailingSlash(folderVirtualPath) + System.IO.Path.GetFileName(path);

virtualPathsCollection.Add(virtualPath);

}

return virtualPathsCollection;

}

protected void RadRotator1_DataBound(object sender, EventArgs e)

{

AddNavigationButtons();

}

private void AddNavigationButtons()

{

foreach (RadRotatorItem item in RadRotator1.Items)

{

LinkButton linkButton = CreateLinkButton(item.Index);

ButtonsContainer.Controls.Add(linkButton);

}

private LinkButton CreateLinkButton(int itemIndex)

{

// Create the LinkButton

LinkButton button = new LinkButton();

button.Text = (itemIndex + 1).ToString();// The test of the button

button.ID = string.Format("Button{0}", itemIndex);// Assign an unique ID

// Attach a JavaScript handler to the click event

button.OnClientClick = string.Format("showItemByIndex({0}); return false;", itemIndex);

button.Attributes.Add("onclick", "<script>testHello();</script>");

// Class which is applied to the newly added button

button.CssClass = "buttonClass";

return button;

}

function OnClientLoad(rotator, args) {

startRotator(rotator);

}

function startRotator(rotator) {

if (!rotator.autoIntervalID) {

rotator.autoIntervalID = window.setInterval(function () {

rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);

}, rotator.get_frameDuration());

}

function stopRotator(rotator) {

if (rotator.autoIntervalID) {

window.clearInterval(rotator.autoIntervalID);

rotator.autoIntervalID = null;

}

function OnClientMouseOver(rotator) {

stopRotator(rotator);

}

function OnClientMouseOut(rotator) {

startRotator(rotator);

}

// Panel Buttons

var lastShownButton;

function showItemByIndex(index) {

// gets reference to the rotator object

var oRotator = $find("<%= RadRotator1.ClientID %>");

// Sets currently shown item by its index

oRotator.set_currentItemIndex(index);

if (lastShownButton)

lastShownButton.removeClass("btnHighlight");

var currentButton = getButtonByIndex(index);

currentButton.addClass("btnHighlight");

lastShownButton = currentButton;

}

function OnClientItemShown(oRotator, args) {

var currentIndex = args.get_item().get_index();

if (lastShownButton)

lastShownButton.removeClass("btnHighlight");

var currentButton = getButtonByIndex(currentIndex);

currentButton.addClass("btnHighlight");

lastShownButton = currentButton;

}

function getButtonByIndex(index) {

var buttonIdSelector = String.format("Button{0}:first", index);

var currentButton = $telerik.$(buttonIdSelector)

return currentButton;

}

function showItemByIndex(index) {

// get reference to the rotator object

var oRotator = $find("<%= RadRotator1.ClientID %>");

// Set currently shown item by its index

oRotator.set_currentItemIndex(index);

}

function testHello()

{

alert ("Works");

}

</script>

<div class="rotatorCont">

<div class="rotator">

<div style=" margin-left: 0px;">

<telerik:RadRotator RotatorType="Buttons" ID="RadRotator1" runat="server"

Width="1012" ItemWidth="1012" ScrollDirection="Left, Right"

SlideShowAnimation-Type="Fade"

Height="300" ItemHeight="275" FrameDuration="4000" OnClientMouseOver="OnClientMouseOver" OnClientMouseOut="OnClientMouseOut"

ScrollDuration="10" SkinID="WebBlue" OnClientItemShown="OnClientItemShown"

BorderStyle="None" OnClientLoad="OnClientLoad" PauseOnMouseOver="False" SlideShowAnimation-Duration="500" BorderColor="Black" OnDataBound="RadRotator1_DataBound">

<ItemTemplate>

<div class="itemTemplate">

<asp:Image ID="Image1" Width="1012" Height="275" runat="server"

ImageUrl='<%# Container.DataItem  %>' AlternateText="<%# VirtualPathUtility.GetFileName(Container.DataItem.ToString()) %>" />

</div>

</ItemTemplate>

<ControlButtons LeftButtonID="leftArrow" RightButtonID="rightArrow" />

</telerik:RadRotator>

<div class="links" onclick="stopRotator(rotator)">

<asp:Panel CssClass="ScrollerButtonsContainer" OnMouseOver="OnClientMouseOver" ID="ButtonsContainer" runat="server">

</asp:Panel>

<a href="#" id="leftArrow" title="Rotate Left" class="leftButton"></a><a href="#"

id="rightArrow" title="Rotate Right" class="rightButton"></a>

</div>

/*Rotator Buttons Css*/

.rotatorCont

{

width: 800px;

height: 400px;

margin: 10px 135px;

}

.rotator

{

margin: 0 auto;

width: 500px;

height: 220px;

}

.links

{

margin: 0px auto auto 780px;

width: 381px;

position:absolute;

z-index: 5;

}

.ScrollerButtonsContainer

{

height: 22px;

line-height: 22px;

padding: 0 5px 0 2px;

}

.ScrollerButtonsContainer .buttonClass

{

display: inline-block;

float: left;

width: 22px;

text-align: center;

text-decoration: none;

color: #eee;

}

.ScrollerButtonsContainer .buttonClass, .leftButton, .leftButton:hover, .rightButton, .rightButton:hover

{

background: url(/Images/ArrowSprite.gif) no-repeat;

}

.btnHighlight

{

background-position: 0 -110px !important;

color: #9EDA29 !important;

}

.ScrollerButtonsContainer .buttonClass

{

background-position: 0 0;

}

.ScrollerButtonsContainer .buttonClass:hover

{

background-position: 0 -110px;

color: #9EDA29;

}

.ScrollerButtonsContainer, .leftButton, .rightButton

{

float: left;

}

.leftButton, .rightButton

{

display: block;

width: 22px;

height: 22px;

}

.leftButton

{

background-position: 0 -22px;

}

.leftButton:hover

{

background-position: 0 -44px;

}

.rightButton

{

background-position: 0 -66px;

}

.rightButton:hover

{

background-position: 0 -88px;

}

.conf

{

clear: both;

height: 100px;

}

.itemTemplate

{

width: 570px;

height: 230px;

}

.info, .title

{

font-size: 14px;

}

Rotator

answered on 19 Jun 2012

1 answer

77 views

RTL support in HTML code

Hi,

Just want to check, is it normal for this behaviour? URL: http://www.ximnet.com.my/upload/rtleditor.swf
The + sign is in front of the number in Design mode, but when switch to HTML mode, it is at the back.

Thanks.

Editor

answered on 19 Jun 2012