Questions on UI for ASP.NET AJAX Forum

1 answer

54 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

212 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

86 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

145 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

129 views

[Solved] 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

207 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

90 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

1 answer

93 views

Minimize RadRibbonBar

Hey
Anyone got idea on how to minimize RadRibbonBar?
thanx
Ryan

General Discussions

answered on 19 Jun 2012

3 answers

114 views

RAD Scheduler in Sharepoint 2010

Hi,
I have one simple question only: is it possible and sensefull to use RAD Scheduler in SharePoint 2010 visual webparts?
Thank you very much for your effort!
Ulrich

Sharepoint Integration

answered on 19 Jun 2012

1 answer

260 views

Set height dynamically

This is my scenario:

I have a Div = CenterBody, with set height dynamically depending on windows Heigth.
I need create radsplitter programmatically and set height = ccenterBody Heigth.

this is my aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="WebSearch.UI.Test" %>
<!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 id="Head1" runat="server">
<telerik:RadCodeBlock ID="CodeBlock" runat="server">
<script type="text/javascript">

//here set center body Height
function pageLoad() {
var windowHeight;
if (typeof window.innerWidth != 'undefined') {
windowHeight = window.innerHeight;
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first
// line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth != 'undefined'
&& document.documentElement.clientWidth != 0) {
windowHeight = document.documentElement.clientHeight;
}
// older versions of IE
else {
windowHeight = document.getElementsByTagName('body')[0].clientHeight;
}
document.getElementById("centerBody").style.height = (windowHeight - document.getElementById("centerBody").offsetTop) + "px";

// here i need set RadSplitter .height = = (windowHeight - document.getElementById("centerBody").offsetTop) + "px";

}


</script>
</telerik:RadCodeBlock>
</head>
<body>
<form id="Form2" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />


<div id="centerBody" runat="server" style="border-color:Green; border-width:2px; border-style:solid; width:100%">
</div>


</form>
</body>
</html>

my aspx.cs where I create RadSplitter programmatically

public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
RadSplitter splitter = new RadSplitter();
splitter.ID = "RadSplitter1";
splitter.Width = Unit.Percentage(100);
splitter.Height = Unit.Percentage(100);
splitter.Orientation = Orientation.Vertical;
RadPane topPane = new RadPane();
topPane.ID = "TopPane";
Label topLabel = new Label();
topLabel.ID = "TopLabel";
topLabel.Text = "Top pane";
topPane.Controls.Add(topLabel);
splitter.Items.Add(topPane);
RadSplitBar splitBar1 = new RadSplitBar();
splitBar1.ID = "SplitBar1";
splitter.Items.Add(splitBar1);
RadPane middlePane = new RadPane();
middlePane.ID = "MiddlePane";
middlePane.Controls.Add(new LiteralControl("Middle pane"));
splitter.Items.Add(middlePane);
RadSplitBar splitBar2 = new RadSplitBar();
splitBar2.ID = "SplitBar2";
splitter.Items.Add(splitBar2);
RadPane bottomPane = new RadPane();
bottomPane.ID = "BottomPane";
bottomPane.Controls.Add(new LiteralControl("Bottom pane"));

splitter.Items.Add(bottomPane);
centerBody.Controls.Add(splitter);
}

}

the result is captura1.

I need show as captura2

How I can do this???

regards

Splitter

answered on 19 Jun 2012