Questions on UI for ASP.NET AJAX Forum

1 answer

250 views

After working on it a bit, I have expand/collapse all functionality working in my grid, with images in the header, but I have a concern. I am adding the expand/collapse buttons to the header in the code behind, because putting it in the template column wasn't making it appear. But, if I remove the template column, the buttons don't show up.

Here is the code from the .aspx page (with the columns removed):

<telerik:RadGrid ID="ResultsGrid" runat="server" ShowStatusBar="true" EnableViewState="true" AllowSorting="True" AllowFilteringByColumn="false" GroupingEnabled="False"

AutoGenerateColumns="False" AllowMultiRowSelection="false" OnNeedDataSource="ResultsGrid_NeedDataSource"

OnItemCommand="ResultsGrid_ItemCommand" OnItemDataBound="ResultsGrid_ItemDataBound" OnPreRender="ResultsGrid_PreRender"

OnItemCreated="ResultsGrid_ItemCreated" OnDetailTableDataBind="ResultsGrid_DetailTableDataBind">

<StatusBarSettings ReadyText="Stand by" LoadingText="Working..." />

<HeaderContextMenu EnableTheming="True">

<CollapseAnimation Duration="200" Type="OutQuint" />

</HeaderContextMenu>

<MasterTableView DataMember="TriggeredConditions" AllowMultiColumnSorting="true"

EnableHeaderContextMenu="true" HierarchyLoadMode="ServerOnDemand"

ClientDataKeyNames="TriggeredConditionId" DataKeyNames="TriggeredConditionId">

<DetailTables>

<telerik:GridTableView runat="server" AllowSorting="false" ShowFooter="false" ShowHeader="false"

DataMember="TriggeredConditionStats" Name="ConditionStats" EnableNoRecordsTemplate="false"

ShowHeadersWhenNoRecords="false" NoDetailRecordsText="">

<Columns>

(Removed)

</Columns>

</telerik:GridTableView>

</DetailTables>

<RowIndicatorColumn Visible="False">

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<Columns>

<telerik:GridTemplateColumn UniqueName="TemplateColumn">

<HeaderTemplate>

<asp:ImageButton ID="ExpandAll" runat="server" CommandName="ExpandAll"

ImageUrl="~/App_Themes/Standard/images/Grid_ExpandAll.png" ToolTip="ExpandAll" />

<asp:ImageButton ID="CollapseAll" runat="server" CommandName="CollapseAll"

ImageUrl="~/App_Themes/Standard/images/Grid_CollapseAll.png" ToolTip="CollapseAll" />

</HeaderTemplate>

</telerik:GridTemplateColumn>

(Columns Removed)

</Columns>

</MasterTableView>

<SortingSettings SortToolTip="" />

<ClientSettings AllowColumnsReorder="true" AllowKeyboardNavigation="true"

ColumnsReorderMethod="Reorder" AllowExpandCollapse="true">

<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="100%" SaveScrollPosition="false" />

<Resizing AllowColumnResize="True" ClipCellContentOnResize="True" EnableRealTimeResize="True" />

<Selecting AllowRowSelect="True" />

<ClientEvents OnKeyPress="GridKeyPressed" OnRowSelected="RowSelected"

OnGridCreated="GridCreated" />

<ClientMessages DragToGroupOrReorder="" />

</ClientSettings>

<FilterMenu EnableEmbeddedSkins="False" EnableTheming="True">

<CollapseAnimation Duration="200" Type="OutQuint" />

</FilterMenu>

</telerik:RadGrid>

And the code behind:

private GridHeaderItem _gridHeaderItem;

private ImageButton _imgCollapse;

private ImageButton _imgExpand;

protected void ResultsGrid_ItemCreated(object sender, GridItemEventArgs e)

{

if (e.Item is GridHeaderItem)

{

if (e.Item.OwnerTableView == e.Item.OwnerTableView.OwnerGrid.MasterTableView)

{

_gridHeaderItem = e.Item as GridHeaderItem;

_imgCollapse = new ImageButton();

_imgCollapse.ImageUrl = "~/App_Themes/Standard/images/Grid_CollapseAll.png";

_imgCollapse.CommandName = "CollapseAll";

_imgCollapse.ID = "btnCollapse";

_imgCollapse.Visible = false;

_imgExpand = new ImageButton();

_imgExpand.ImageUrl = "~/App_Themes/Standard/images/Grid_ExpandAll.png";

_imgExpand.CommandName = "ExpandAll";

_imgExpand.ID = "btnExpand";

_imgExpand.Visible = true;

_gridHeaderItem.Cells[0].Controls.Add(_imgCollapse);

_gridHeaderItem.Cells[0].Controls.Add(_imgExpand);

}

protected void ResultsGrid_ItemCommand(object source, GridCommandEventArgs e)

{

switch (e.CommandName)

{

case "ExpandCollapse":

CheckExpandCollapse(e);

break;

case "ExpandAll":

ChangeExpandButtons(e, true);

break;

case "CollapseAll":

ChangeExpandButtons(e, false);

break;

}

private void CheckExpandCollapse(GridCommandEventArgs e)

{

int expanded = 0;

int collapsed = 0;

foreach (GridDataItem item in ResultsGrid.MasterTableView.Items)

{

if (item.Expanded)

{

expanded++;

}

else

{

collapsed++;

}

//All are expanded

if (collapsed == 1 && !e.Item.Expanded)

{

_gridHeaderItem.Cells[0].Controls.Remove(_imgCollapse);

_gridHeaderItem.Cells[0].Controls.Remove(_imgExpand);

_imgCollapse.Visible = true;

_imgExpand.Visible = false;

_gridHeaderItem.Cells[0].Controls.Add(_imgCollapse);

_gridHeaderItem.Cells[0].Controls.Add(_imgExpand);

}

//All are collapsed, current item is collapsing

if (expanded == 1 && e.Item.Expanded)

{

_gridHeaderItem.Cells[0].Controls.Remove(_imgCollapse);

_gridHeaderItem.Cells[0].Controls.Remove(_imgExpand);

_imgCollapse.Visible = false;

_imgExpand.Visible = true;

_gridHeaderItem.Cells[0].Controls.Add(_imgCollapse);

_gridHeaderItem.Cells[0].Controls.Add(_imgExpand);

}

private void ChangeExpandButtons(GridCommandEventArgs e, bool expand)

{

ImageButton btnExpand = (ImageButton)e.Item.FindControl("btnExpand");

ImageButton btnCollapse = (ImageButton)e.Item.FindControl("btnCollapse");

//Looping through each DataItem and making the "btnExpand" image button in the item visibility  to false and  "btnCollapse" visibility to true

foreach (GridDataItem gridDataItem in ResultsGrid.MasterTableView.GetItems(new GridItemType[] { GridItemType.Item, GridItemType.AlternatingItem }))

{

btnExpand.Visible = !expand;

btnCollapse.Visible = expand;

}

//Exapanding the DataItem

foreach (GridDataItem item in ResultsGrid.Items)

{

item.Expanded = expand;

}

//Hiding the CollapseAll image in the header to true and ExpandAll image in the header to false

GridHeaderItem gridHeaderItem = e.Item as GridHeaderItem;

ImageButton imgCollapseAll = (ImageButton)gridHeaderItem.FindControl("CollapseAll");

imgCollapseAll.Visible = expand;

ImageButton imgExpandAll = (ImageButton)gridHeaderItem.FindControl("ExpandAll");

imgExpandAll.Visible = !expand;

}

If I take out the template column on the grid, the header image buttons don't show. But, it seems very extraneous to leave them there. And I'm not sure why they didn't work in the first place. Any ideas?

Grid

answered on 27 Sep 2010

3 answers

167 views

Paging doesn't work

Hi,

The paging doesn't work correctly. It only shows 1 page, while the record has more than 50 rows. I attached the code below.

Thanks

Vinh

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

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

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">

</telerik:RadStyleSheetManager>

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

</telerik:RadScriptManager>

<div>

<br />

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True"

DataSourceID="SqlDataSource1" GridLines="None"

ShowGroupPanel="True" Skin="Vista" AllowAutomaticUpdates="True"

AutoGenerateEditColumn="True">

<PagerStyle AlwaysVisible="True" />

<MasterTableView AllowCustomPaging="True" AutoGenerateColumns="False" DataKeyNames="ID"

DataSourceID="SqlDataSource1" EditMode="PopUp">

<RowIndicatorColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<DetailTables>

<telerik:GridTableView DataKeyNames="CubeID" DataSourceID="SqlDataSource2" Width="100%"

runat="server" AutoGenerateColumns="False"

AllowAutomaticUpdates="False" AllowSorting="True" EditMode="InPlace">

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="CubeID" MasterKeyField="ID" />

</ParentTableRelation>

<CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>

<Columns>

<telerik:GridBoundColumn SortExpression="cubename" HeaderText="Cube name" HeaderButtonType="TextButton"

DataField="cubename" UniqueName="cubename" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Status" HeaderText="Status" HeaderButtonType="TextButton"

DataField="Status" UniqueName="Status" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="lastcheck" HeaderText="Last check" HeaderButtonType="TextButton"

DataField="lastcheck" UniqueName="lastcheck" ReadOnly="True">

</telerik:GridBoundColumn>

</Columns>

<AlternatingItemStyle BackColor="#99CCFF" ForeColor="White" />

<PagerStyle AlwaysVisible="True" />

</telerik:GridTableView>

</DetailTables>

<CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>

<ExpandCollapseColumn Visible="True">

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="ID" DataType="System.Int32" HeaderText="ID"

ReadOnly="True" SortExpression="ID" UniqueName="ID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CatalogName" HeaderText="CatalogName"

SortExpression="CatalogName" UniqueName="CatalogName" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CubeName" HeaderText="CubeName"

SortExpression="CubeName" UniqueName="CubeName" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ServerName" HeaderText="ServerName"

SortExpression="ServerName" UniqueName="ServerName" ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn DataField="Monitor" DataType="System.Boolean"

HeaderText="Monitor" SortExpression="Monitor" UniqueName="Monitor">

</telerik:GridCheckBoxColumn>

</Columns>

<AlternatingItemStyle BackColor="#99CCFF" ForeColor="White" />

<PagerStyle AlwaysVisible="True" />

<HeaderStyle Font-Bold="True" Font-Italic="False" Font-Overline="False"

Font-Strikeout="False" Font-Underline="False" Wrap="True" />

</MasterTableView>

<ClientSettings AllowDragToGroup="True">

</ClientSettings>

</telerik:RadGrid>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:csSSIReports %>"

SelectCommand="SELECT [ID], [CatalogName], [CubeName], [ServerName], [Monitor] FROM [tblCubes]"

UpdateCommand="UPDATE tblCubes SET Monitor = @Monitor WHERE (ID = @ID)">

<UpdateParameters>

<asp:Parameter Name="Monitor" />

<asp:Parameter Name="ID" />

</UpdateParameters>

</asp:SqlDataSource>

</div>

<telerik:RadAjaxManager runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" UpdatePanelHeight="" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<asp:SqlDataSource ID="SqlDataSource2" runat="server"

ConnectionString="<%$ ConnectionStrings:csSSIReports %>"

SelectCommand=

"SELECT SS.CubeID, S.CubeName, SS.Status, SS.LastCheck FROM tblCubeStatus AS SS INNER JOIN tblCubes AS S ON S.ID = SS.CubeID WHERE (SS.CubeID = @CubeID)"

>

<SelectParameters>

<asp:Parameter Name="CubeID" />

</SelectParameters>

</asp:SqlDataSource>

</form>

</body>

</html>

Grid

answered on 27 Sep 2010

2 answers

185 views

ASP.NET Grid - Excel-Style with Autosave

Dear telerik

I have checked out your gridwiew demo's but not quite found what i was looking for.

Hvowewer obout's grid seems to do the Excel like grid with autosave.
http://www.obout.com/grid/aspnet_commands_excel_style_autosave.aspx

Could this be achived with the telerik grid control?

Regards Claus

Grid

answered on 27 Sep 2010

3 answers

123 views

How to build this form with controls?

I was wondering what you thought the best approach would be to build the attached form. They want the form to use themes so if I switch the theme, the panel header color changes and the buttons at the bottom change as well.

We were thinking maybe grid listview, but weren't really sure.

What do you think?

General Discussions

answered on 27 Sep 2010

1 answer

97 views

ENTER and BRs issues in Chrome 7

I found an issue that reproduces on your demos too:

1. Open the editor, goto HTML mode.
2. Paste the following HTML in the editor:

<html>

<head>

<title>A page</title>

</head>

<body>

Some text content in the BODY. Press ENTER with the cursor placed anywhere in this text. Go to HTML mode, count how many BRs were created and delete the BRs. Go back to design mode. Press ENTER again, go back into HTML mode and count the BRs again. Repeat. You'll notice that a BR is added after each cycle. This happens only when the HTML and BODY tags are present in the HTML code; doesn;t happen when only the text is pasted in the editor in HTML mode.

</body>

</html>

3. Goto Design mode, click anywhere in the text and press ENTER.
4. Goto to HTML mode and count the BRs and delete them.
5. Repeat steps 3 and 4 and observe how the number of BRs increases by 1 with each cycle.

Please note that this issue doesn't reproduce if the initial content doesn't contain the HTML, HEAD and BODY.

Editor

answered on 27 Sep 2010

4 answers

77 views

Apply Font Size fails in Chrome and Safari with 2010.2.826 (Telerik.Web.UI_2010_2_826_Dev_hotfix)

Hi,

Apply Font Size fails in Chrome and Safari with 2010.2.826 (Telerik.Web.UI_2010_2_826_Dev_hotfix)

To reproduce:

Open editor in Chrome or Safari, latest versions, type some text and more, select some text, apply font size.
Result: selected text disappears, the HTML source shows: some <span style="font-family: azby; font-size: 13px;"></span> and more

This what I see in Chrome in the JS debugger, might give you a clue of what's happening:

f.pasteHtml("<font "+e+" id='radERealFont'> </font>");

Thanks,
Dan Popa

Editor

answered on 27 Sep 2010

1 answer

70 views

remove null option from resource and dependancies?

Hi (vb user)
First off... love the scheduler. Once you have spent a few days playing with it, it becomes pretty darn cool.
Questions:
A: How do I remove the '-' or Empty option from my resources. I am always going to demand a 'user' and 'location'
B: Is it possible based on one resource eg. Location to rebind the user resource?

I have created resources both using the code behind ie.InitializeResources and using the datasetID straight off the ASPX. It would be really great if I could determine how to rebind/rebuild a resource based on another resource.

I think if I coud get these things done I might get paid.

Scheduler

answered on 27 Sep 2010

1 answer

112 views

Code behind not knowing coordinates

Apologies if this is a silly question, still learning telerik...

I have a RadWindowManager that has several windows. When a user moves them around and clicks a button that does a postback the code behind has no knowledge of the current location of the windows. Surely it can do this... I must be missing something obvious. Would I have to do a postback to update the viewstate of each window? (the viewstate is set to false for the windows, but true for the window manager so it remembers orginal windows along with newly spawned). Do I have to keep track of the changes client side (after the client side events) and send it to the server? I would think there is a very easy way to do this...

Thank you in advance,
John

Window

answered on 27 Sep 2010

1 answer

84 views

GridEditCommandColumn - only refreshes page

I am using GridEditCommandColumn column, it works locally on my machine, however when deploying it on the server it only refreshes the screen. But on my local box it opens the edit entry form.

Hector

Grid

answered on 27 Sep 2010

1 answer

121 views

sum of Column in client side

Dear Team,

I am using Rad Grid then I binded some fileds in Existing Table.after given text box this calculated filed. Give correct solution for java script.

With Regards,
S.kannadasan

Grid

answered on 27 Sep 2010