Questions on UI for ASP.NET AJAX Forum

1 answer

245 views

RadGrid Aggregation

Hi,

We have a RadGrid control called "RadGrid1" and have it defined as follows in our ASPX page

<telerik:RadGrid ID="RadGrid1" runat="server" GridLines="Both">
</telerik:RadGrid>

In our Vb.Net codebehind, we are using an aggregate function as follows to display the sum in the footer of the grid.

boundcol(index).Aggregate() = GridAggregateFunction.Sum

We do not want all the row items to be included in this sum.

Is there a way to only include the last 2 records in the summation?

I tried to configure RadGrid1_CustomAggregate using the follow code in the ASPX file

<telerik:RadGrid ID="RadGrid1" runat="server" GridLines="Both" Aggregate="Custom" OnCustomAggregate="RadGrid1_CustomAggregate">
</telerik:RadGrid>

The vb.net file looks like the following for CustomAggregate configuration:

Protected Sub RadGrid1_CustomAggregate(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCustomAggregateEventArgs) Handles RadGrid1.CustomAggregate

End Sub

However, this event is not being fired.

I am using Telerik DevCraft version 2013.3 1014

Please advise how we can only include the last 2 records in the summation.

Thanks!

Avo

Grid

answered on 13 Jul 2015

3 answers

100 views

Display Server Error Page with Aajaxified Controls

I have a page with lots of different inputs that I'm using RadAjaxManager to Ajaxify. The problem is that if there is an error, it is thrown like a Script error and users are not noticing an issue and not reporting it to be fixed. I would like to throw a standard ASP.Net Server Error screen but can't seem to figure out how to accomplish or find an answer. Any help is appreciated.

Ajax

answered on 13 Jul 2015

1 answer

146 views

RadGrid delete\update child grid

For grid - update\delete\insert hierarchy I am not able edit\update child grid. I am able to edit\update parent grid but not the child grid though both are using the same code behind. I checked with the sql queries too. For child grid, when I click on edit button, it enables editing but when I click on update after changing the values, it is not updating in UI nor in database table. It is not giving any error though. Below is my code behind. Please if anybody can help me!

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

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>

<div>
<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" ShowStatusBar="true"
AutoGenerateColumns="False" AllowSorting="True" AllowMultiRowSelection="False"
AllowAutomaticDeletes="True"
AllowAutomaticUpdates="True" OnItemUpdated="RadGrid1_ItemUpdated" OnItemDeleted="RadGrid1_ItemDeleted">
<PagerStyle Mode="NumericPages"></PagerStyle>
<MasterTableView DataSourceID="SqlDataSource1" EditMode = "InPlace" DataKeyNames="case_id" AllowMultiColumnSorting="True"
Width="100%" CommandItemDisplay="Top" Name="Cases">
<DetailTables>
<telerik:GridTableView EditMode = "InPlace" DataKeyNames="item_id" DataSourceID="SqlDataSource2" Width="100%"
runat="server" CommandItemDisplay="Top" Name="Items">
<ParentTableRelation>
<telerik:GridRelationFields DetailKeyField="case_id" MasterKeyField="case_id"></telerik:GridRelationFields>
</ParentTableRelation>
<Columns>
<telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn2">
<HeaderStyle Width="20px"></HeaderStyle>
<ItemStyle CssClass="MyImageButton"></ItemStyle>
</telerik:GridEditCommandColumn>
<telerik:GridBoundColumn SortExpression="grp_id" HeaderText="Group" HeaderButtonType="TextButton"
DataField="grp_id" UniqueName="grp_id" ReadOnly = "True">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="item_id" HeaderText="Item ID" HeaderButtonType="TextButton"
DataField="item_id" UniqueName="item_id" ReadOnly = "True" Visible = "False">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="inv_item_desc" HeaderText="Item Description" HeaderButtonType="TextButton"
DataField="inv_item_desc" UniqueName="inv_item_desc">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="inv_item_rate" HeaderText="Rate" HeaderButtonType="TextButton"
DataField="inv_item_rate" UniqueName="inv_item_rate">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="inv_item_qty" HeaderText="Quantity" HeaderButtonType="TextButton"
DataField="inv_item_qty" UniqueName="inv_item_qty">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="total" HeaderText="Total" HeaderButtonType="TextButton"
DataField="total" UniqueName="total" ReadOnly = "True">
</telerik:GridBoundColumn>
<telerik:GridButtonColumn ConfirmText="Delete these details record?" ButtonType="ImageButton"
CommandName="Delete" Text="Delete" UniqueName="DeleteColumn2">
<HeaderStyle Width="20px"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" CssClass="MyImageButton"></ItemStyle>
</telerik:GridButtonColumn>
</Columns>
</telerik:GridTableView>
</DetailTables>
<Columns>
<telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">
<HeaderStyle Width="20px"></HeaderStyle>
<ItemStyle CssClass="MyImageButton"></ItemStyle>
</telerik:GridEditCommandColumn>
<telerik:GridBoundColumn SortExpression="case_id" HeaderText="Case ID" HeaderButtonType="TextButton"
DataField="case_id" UniqueName="case_id" MaxLength="5" ReadOnly = "True">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="case_file_nbr" HeaderText="Case File Number" HeaderButtonType="TextButton"
DataField="case_file_nbr" UniqueName="case_file_nbr">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn SortExpression="case_desc" HeaderText="Case Description" HeaderButtonType="TextButton"
DataField="case_desc" UniqueName="case_desc">
</telerik:GridBoundColumn>
<telerik:GridButtonColumn ConfirmText="Delete this case?" ButtonType="ImageButton"
CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
<HeaderStyle Width="20px"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" CssClass="MyImageButton"></ItemStyle>
</telerik:GridButtonColumn>
</Columns>
<SortExpressions>
<telerik:GridSortExpression FieldName="case_desc"></telerik:GridSortExpression>
</SortExpressions>
</MasterTableView>
</telerik:RadGrid>
</div>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="Server=172.18.1.11;Database=ent64ast;user id=entqalogin;password=en7qal8g1n5"
DeleteCommand="DELETE FROM tbl_inv_case WHERE org_id= 'Oindem' and inv_no=31 and case_id = @case_id"
SelectCommand="SELECT case_id,case_file_nbr,case_desc from tbl_inv_case where org_id='Oindem' and inv_no=31"
UpdateCommand="UPDATE tbl_inv_case SET case_file_nbr = @case_file_nbr, case_desc = @case_desc WHERE org_id= 'Oindem' and inv_no=31 and case_id = @case_id">
<DeleteParameters>
<asp:Parameter Name="case_id" Type="String"></asp:Parameter>
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="org_id" Type="String"></asp:Parameter>
<asp:Parameter Name="inv_no" Type="String"></asp:Parameter>
<asp:Parameter Name="case_id" Type="String"></asp:Parameter>
<asp:Parameter Name="case_file_nbr" Type="String"></asp:Parameter>
<asp:Parameter Name="case_desc" Type="String"></asp:Parameter>
<asp:Parameter Name="case_amnt" Type="String"></asp:Parameter>
<asp:SessionParameter Name="login_id" Type="string" SessionField="loginid" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="case_id" Type="String"></asp:Parameter>
<asp:Parameter Name="case_file_nbr" Type="String"></asp:Parameter>
<asp:Parameter Name="case_desc" Type="String"></asp:Parameter>
</UpdateParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="Server=172.18.1.11;Database=ent64ast;user id=entqalogin;password=en7qal8g1n5"
DeleteCommand="DELETE FROM tbl_inv_case_items WHERE org_id= 'Oindem' and inv_no=31 and case_id = @case_id and item_id = @item_id"
SelectCommand="SELECT grp_id,case_id,item_id,inv_item_desc,inv_item_rate,inv_item_qty, cast(inv_item_rate*inv_item_qty as decimal(18,2)) 'total' FROM tbl_inv_case_items WHERE org_id='Oindem' AND inv_no=31 AND case_id = @case_id ORDER BY grp_id,case_id, inv_item_seqn"
UpdateCommand="UPDATE tbl_inv_case_items SET inv_item_desc = @inv_item_desc, inv_item_rate = @inv_item_rate, inv_item_qty = @inv_item_qty WHERE org_id= 'Oindem' AND inv_no=31 AND case_id = @case_id AND item_id = @item_id">
<DeleteParameters>
<asp:Parameter Name="item_id" Type="Int32"></asp:Parameter>
<asp:Parameter Name="case_id" Type="String"></asp:Parameter>
</DeleteParameters>
<SelectParameters>
<asp:Parameter Name="case_id" Type="String"></asp:Parameter>
</SelectParameters>
<UpdateParameters>
<asp:Parameter Name="inv_item_desc" Type="String"></asp:Parameter>
<asp:Parameter Name="inv_item_rate" Type="Double"></asp:Parameter>
<asp:Parameter Name="inv_item_qty" Type="Double"></asp:Parameter>
<asp:Parameter Name="item_id" Type="String"></asp:Parameter>
<asp:Parameter Name="case_id" Type="String"></asp:Parameter>
</UpdateParameters>
</asp:SqlDataSource>
</form>
</body>
</html>

Grid

answered on 13 Jul 2015

1 answer

101 views

How to do Condition formatting for line series

Hi,

Please check the attached image. I need conditional format for line series. Please suggest me how to achieve this one.

Thanks in advance.

Thanks & Regards

Baji

Chart (HTML5)

answered on 13 Jul 2015

1 answer

126 views

String format issue in RadGrid

Hi Team,

While i'm trying to bind the string data to the Rad Grid it is not binding exact value which i have pulled from Data Base.

For Example i'm pulling the Data : - "A BC E F G" and binding the same data to the Rad Grid, the problem here is the rad grid column is trimming out all the spaces and displaying like :- "A BC EFG"

Here i need to bind the exact data which i'm pulling from Database.

Could you please help me out from this issue.

Thanks in Advance

A.Shrujan

Grid

answered on 13 Jul 2015

1 answer

160 views

RadListView Linq and Cache

I am trying to keep the latency to a minimum when using a Radlistview which grabs it's data from sql with linq. Example of how data is currently retrieved is as follows:-

<telerik:RadDropDownList ID="RadDropDownListSort" runat="server" Skin="MetroTouch" CssClass="sortCtrl" DefaultMessage="Sort by..." Width="175px" AutoPostBack="False" OnClientItemSelecting="sortSelecting" >

<Items>

<telerik:DropDownListItem Text="Sort by Price" Value="SalePrice" />

<telerik:DropDownListItem Text="Sort by Year" Value="YearOfMan" />

<telerik:DropDownListItem Text="Sort by Location" Value="Location" />

<telerik:DropDownListItem Text="Sort by Make/Model" Value="Make" />

<telerik:DropDownListItem Text="Sort by Category" Value="Category" />

</Items>

</telerik:RadDropDownList>

<telerik:RadListView ID="RadListView1" runat="server" DataKeyNames="ListingID,GstOptionID" ItemPlaceholderID="ListingsContainer"

AllowPaging="True" PageSize="10" AllowMultiFieldSorting="True" CanRetrieveAllData="True">

<LayoutTemplate>

<asp:Panel ID="ListingsContainer" runat="server" />

<table class="pagerTable pagertiles">

<tr>

<td>

<telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1"

PageSize="10" Skin="MetroTouch" CssClass="dataPager" >

<Fields>

<telerik:RadDataPagerButtonField FieldType="FirstPrev" />

<telerik:RadDataPagerButtonField FieldType="Numeric" />

<telerik:RadDataPagerButtonField FieldType="NextLast" />

<telerik:RadDataPagerPageSizeField PageSizeText="Tiles per page: " PageSizeComboWidth="62" PageSizes="20 30" />

<telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"

TextBoxWidth="20" />

<telerik:RadDataPagerTemplatePageField>

<PagerTemplate>

<div style="float: right">

<b>Items

<asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>" />

to

<asp:Label runat="server" ID="TotalPagesLabel"

Text="<%# IIF(Container.Owner.TotalRowCount > (Container.Owner.StartRowIndex+Container.Owner.PageSize), Container.Owner.StartRowIndex+Container.Owner.PageSize, Container.Owner.TotalRowCount) %>" />

of

<asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />

<br />

</b>

</div>

</PagerTemplate>

</telerik:RadDataPagerTemplatePageField>

</Fields>

</telerik:RadDataPager>

</td>

</tr>

</table>

</LayoutTemplate>

<ItemTemplate>

....

</ItemTemplate>

<EmptyDataTemplate>

...

</EmptyDataTemplate>

</telerik:RadListView>

Private Sub RadListView1_NeedDataSource(sender As Object, e As Telerik.Web.UI.RadListViewNeedDataSourceEventArgs) Handles RadListView1.NeedDataSource

Dim dsTiles As IQueryable(Of ListingResults) = GetLinqListingData

RadListView1.DataSource = dsTiles

End Sub

Having looked through the documentation and demos for the RadListview, I'm struggling to understand what amount of data is retrieved from sql and/or the server when the page first loads and on subsequent page change or sort on ajax call back. When using Iqueryable does the Radlistview grab only the data for the page shown to the user? IE 10 rows for page size of 10 retrieved from sql OR perhaps: All rows retrieved to server, but only 10 rows sent to client (user).

Presuming that it only grabs the rows for displayed items on the page, if I try to implement the usage of a shared (and/or local) cache as follows, the full set of rows would need to be retrieved from sql for first save to the cache. And on each and every page change or sort, the full set of rows is again retrieved from the cache. A suggested example of using cache:

Private Sub RadListView1_NeedDataSource(sender As Object, e As Telerik.Web.UI.RadListViewNeedDataSourceEventArgs) Handles RadListView1.NeedDataSource

Dim dsTiles As List(Of ListingResults) = GetCacheData

If dsTiles is nothing

dsTiles = GetLinqListingData

SaveCacheData(dsTiles)

End If

RadListView1.DataSource = dsTiles

End Sub

Would greatly appreciate any explanation on how data is retrieved and any suggestion of whether cache is beneficial for short-term single user usage and longer term subsequent visitors seeking the same data.

Thank you

ListView

answered on 10 Jul 2015

3 answers

289 views

telerik dll conflict for SharePoint 2013

We have a commercial SharePoint 2013 web part application for which we license the Telerik.Web.UI dll, etc.

We build the dlls with our own .snk file (e.g. unique PublicKeyToken) and custom initialization (so noone else can use the dlls).

The dlls are installed in the GAC

At a customer site, they have our web part app and that of another company who also installs their version of the Telerik.Web.UI dlls, etc.

Problem - either one app or the other will work, but not both.

While it is possible to specify a specific version of the dll (including PublicKeyToken) in the SharePoint web.config file, there can only be one web.config file for all web part apps (for that SP site collection) and in that web.config only qualifiedEntry element for the dll with the name Telerik.Web.UI.

How to resolve (dynamic load of the specific dll?, build a "private" version of the Telerik dlls, rename the dll file/assembly name? Some other magic we don't know about?)

Sharepoint Integration

answered on 10 Jul 2015

1 answer

129 views

Batchediting with GridAttachmentcolumn - not able to find file name

I am trying to use GridAttachemntColumn in grid with batcheditng. i tried to find out the file name in prior to store in db. but not able to do it.please find code snippet for further detail.

protected void gridProjectManagement_BatchEditCommand(object sender, GridBatchEditingEventArgs e)

{

int s = e.Commands.Count();

foreach (GridBatchEditingCommand command in e.Commands)

{

Hashtable newValues = command.NewValues;

Hashtable oldValues = command.OldValues;

//RadAsyncUpload rd = command.Item["Attachment"].Controls[0] as RadAsyncUpload;

//string file = rd.UploadedFiles[0].FileName;

//command.Item.EditManager.GetColumnEditor("Attachment")

//var gridAttachmentColumnEditor = ((GridAttachmentColumnEditor)command.Item.EditManager.GetColumnEditor("Attachment"));

//string file = gridAttachmentColumnEditor.RadUploadControl.UploadedFiles[0].GetName();

string id = (string)newValues["ID"];

//Convert.ToInt64(newValues["ID"].ToString());

// string newFirstName = newValues["PerspectiveRating"].ToString();

if (!string.IsNullOrEmpty(id))

{

var OldeItem = ListActivityArchivalSupportPM.Where(x => x.ID == Convert.ToInt32(id)).FirstOrDefault();

using (var db = new EntitiesModel())

{

var p = db.ActivityArchivalSupportPMs.Where(x => x.ID == Convert.ToInt32(id)).FirstOrDefault();

if (newValues["Estimate"] != null)

{

p.Estimate = Convert.ToDecimal(newValues["Estimate"].ToString());

}

p.Activity = (string)newValues["Activity"];

p.EstimateAssumptions = (string)newValues["EstimateAssumptions"];

p.ApplicationID = AppName.Value;

if (newValues["FileName"] != null)

{

p.Attachment = (Byte[])newValues["FileName"];

}

<telerik:RadGrid ID="gridProjectManagement" GridLines="None" runat="server" AllowAutomaticDeletes="false"

AllowAutomaticInserts="True" AllowSorting="true" AllowFilteringByColumn="true" FilterType="CheckList" EnableLinqExpressions="false"

OnItemCreated="gridProjectManagement_ItemCreated" OnPreRender="gridProjectManagement_PreRender" AllowAutomaticUpdates="True"

AutoGenerateColumns="False" OnBatchEditCommand="gridProjectManagement_BatchEditCommand" OnItemCommand="gridProjectManagement_ItemCommand" OnNeedDataSource="gridProjectManagement_NeedDataSource" OnItemDataBound="gridProjectManagement_ItemDataBound" >

<ExportSettings ExportOnlyData="true" HideStructureColumns="true" OpenInNewWindow="true" IgnorePaging="true"><Excel Format="Html" /></ExportSettings>

<MasterTableView CommandItemDisplay="Top" DataKeyNames="ID" Font-Size="Small" CommandItemSettings-ShowAddNewRecordButton="false" CommandItemSettings-ShowRefreshButton="false"

HorizontalAlign="NotSet" EditMode="Batch" AutoGenerateColumns="False" AllowFilteringByColumn="True">

<CommandItemSettings ShowExportToCsvButton="true" ShowExportToExcelButton="true" ShowAddNewRecordButton="true" ShowExportToPdfButton="true" ShowExportToWordButton="true" />

<BatchEditingSettings EditType="Cell" OpenEditingEvent="Click" />

<%-- <SortExpressions>

<telerik:GridSortExpression FieldName="PerspModel_ID" SortOrder="Descending" />

</SortExpressions>--%>

<Columns>

<telerik:GridBoundColumn DataField="ID" ForceExtractValue="Always" Display="false" HeaderText="ID"

UniqueName="ID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Activity" AllowSorting="true" SortExpression="Activity" HeaderStyle-Width="150px" HeaderText="Activity"

UniqueName="Activity">

</telerik:GridBoundColumn>

<telerik:GridNumericColumn DataField="Estimate" HeaderStyle-Width="80px" AllowFiltering="false" AllowSorting="false" DataType="System.Decimal" DecimalDigits="1" HeaderText="Estimate(hours)"

SortExpression="Estimate" UniqueName="Estimate">

</telerik:GridNumericColumn>

<telerik:GridTemplateColumn ColumnEditorID="EstimateAssumptions" ItemStyle-CssClass="breakWord120" UniqueName="EstimateAssumptions" ItemStyle-Width="100px" AllowFiltering="false" HeaderStyle-Width="150px" HeaderText="Estimate Assumptions">

<ItemTemplate>

<%# Eval("EstimateAssumptions")%>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadTextBox ID="txtEditEstimateAssumptions" Height="50px" Wrap="true" TextMode="MultiLine" ToolTip='<%# Eval("EstimateAssumptions")%>' runat="server" Text='<%# Eval("EstimateAdjustmentRationale")%>'></telerik:RadTextBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridAttachmentColumn

EditFormHeaderTextFormat="Upload File:" HeaderStyle-Width="150px" HeaderText="Attachment" AttachmentDataField="Attachment"

AttachmentKeyFields="ID" FileNameTextField="FileName" DataTextField="FileName"

UniqueName="Attachment">

</telerik:GridAttachmentColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="300px" SaveScrollPosition="true"></Scrolling>

<%-- <ClientEvents OnBatchEditOpened="OnBatchEditOpened" OnBatchEditOpening="BatchEditOpening" />--%>

<%-- <ClientEvents OnCommand="gridCommand"></ClientEvents>--%>

</ClientSettings>

</telerik:RadGrid>

Grid

answered on 10 Jul 2015

2 answers

160 views

[Solved] resetAutoPostBackTile changes TileList height

I use the recommended code for setting tile postbacks (below) and I found that it changes the inline height Css to 185px. The two screenshots show the affect, it changes the horizontal layout and the tilelist height. Project code below, screenshots attached.

<%@ Page Language="C#" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
            <link rel="stylesheet" href="/App_Themes/Edway/Edway.css" type="text/css" />
        <link rel="stylesheet" href="mypage.css" type="text/css" />
     <style>

         .left {
             align-items: center;
         }
        .wideContent {
            width: 290px;
            height: 130px;
            font-family: Segoe UI;
            padding: 10px;
        }

        .squareContent {
            width: 100px;
            height: 120px;
            padding: 10px;
        }

        .shortContent {
            height: 105px;
        }

        .font14 {
            font-size: 14px;
        }

        .font16 {
            font-size: 16px;
        }

        .peekTemplateClass {
            width: 120px;
            height: 120px;
            padding: 10px;
            font-size: 13px;
            line-height: 20px;
        }

                .feedback {
            width: 120px;
            height: 120px;

            font-size: 13px;
            line-height: 20px;
        }

        /* group heading tile appearance */
        .groupHeadingTitle {
            height: 120px;
            width: 120px;
            position: relative;
        }

        .innerTitle {
            width: 120px;
            height: 40px;
            top: 50%;
            margin-top: -20px;
            position: absolute;
            font-size: 17px;
            line-height: 20px;
            padding-left: 10px;
        }

        div.noHover.RadTile {
            border-color: transparent;
        }

        /* change tile texts to better fit long names and show over the images */
        .RadTile div.rtileBottomContent {
            font-weight: bold;
            width: auto;
            max-width: 120px;
            color: Black;
            /* semi-transparent background like this will work in CSS3 compatible browsers */
            background-color: rgba(255,255,255,0.5);
            height: 20px;
            line-height: 20px;
            padding: 0 10px;
            bottom: 10px;
        }
    </style>
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <telerik:RadTileList ID="RadTileList1" runat="server" TileRows="1" Skin="Bootstrap" AutoPostBack="true" OnClientLoad="resetAutoPostBackTile" CssClass="left" >
                <Groups>
                    <telerik:TileGroup>
                        <telerik:RadImageAndTextTile ID="RadImageAndTextTile1" runat="server"   Width="120px" Height="120px" NavigateUrl="student-Program-progress.aspx" Target="_self" Text="Gradebook">
                            <PeekTemplate>
                                <div class="squareContent font14">
                                    See your complete gradebook
                                </div>
                            </PeekTemplate>
                            <PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
                                ShowPeekTemplateOnMouseOver="true" />
                        </telerik:RadImageAndTextTile>
                        <telerik:RadImageAndTextTile ID="RadImageAndTextTile2" runat="server"   Width="120px" Height="120px" NavigateUrl="/Help/MyPage.htm" Target="_blank" Text="Help" BackColor="#f8b617">
                            <PeekTemplate>
                                <div style="background-color: #f8b617" class="squareContent font14">
                                    See help for your homepage
                                </div>
                            </PeekTemplate>
                            <PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
                                ShowPeekTemplateOnMouseOver="true" />
                        </telerik:RadImageAndTextTile>
                        <telerik:RadImageAndTextTile ID="TextTileProfile" Name="TextTileProfile" runat="server"    Width="120px" Height="120px" NavigateUrl="/MyPage-UserInfo.aspx" Target="_blank" Text="Profile" BackColor="#f37928">
                            <PeekTemplate>
                                <div style="background-color: #f37928" class="squareContent font14">
                                    Update your password
                                </div>
                            </PeekTemplate>
                            <PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
                                ShowPeekTemplateOnMouseOver="true" />
                        </telerik:RadImageAndTextTile>
                        <telerik:RadImageAndTextTile ID="tileLogout" runat="server"      Width="120px" Height="120px" Text="Logout" BackColor="#03953f" AutoPostBack="true">
                            <PeekTemplate>
                                <div style="background-color: #03953f" class="squareContent font14">
                                 Logout
                                </div>
                            </PeekTemplate>
                            <PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
                                ShowPeekTemplateOnMouseOver="true" />
                        </telerik:RadImageAndTextTile>
                    </telerik:TileGroup>
                </Groups>
            </telerik:RadTileList>
          <telerik:RadTileList ID="RadTileList2" runat="server" TileRows="1" Skin="Bootstrap" AutoPostBack="true" OnClientLoad="resetAutoPostBackTile" CssClass="left" >
                <Groups>
                    <telerik:TileGroup>
                        <telerik:RadImageAndTextTile ID="RadImageAndTextTile3" runat="server"   Width="120px" Height="120px" NavigateUrl="student-Program-progress.aspx" Target="_self" Text="Gradebook">
                            <PeekTemplate>
                                <div class="squareContent font14">
                                    See your complete gradebook
                                </div>
                            </PeekTemplate>
                            <PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
                                ShowPeekTemplateOnMouseOver="true" />
                        </telerik:RadImageAndTextTile>
                        <telerik:RadImageAndTextTile ID="RadImageAndTextTile4" runat="server"   Width="120px" Height="120px" NavigateUrl="/Help/MyPage.htm" Target="_blank" Text="Help" BackColor="#f8b617">
                            <PeekTemplate>
                                <div style="background-color: #f8b617" class="squareContent font14">
                                    See help for your homepage
                                </div>
                            </PeekTemplate>
                            <PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
                                ShowPeekTemplateOnMouseOver="true" />
                        </telerik:RadImageAndTextTile>
                        <telerik:RadImageAndTextTile ID="RadImageAndTextTile5" Name="TextTileProfile" runat="server"    Width="120px" Height="120px" NavigateUrl="/MyPage-UserInfo.aspx" Target="_blank" Text="Profile" BackColor="#f37928">
                            <PeekTemplate>
                                <div style="background-color: #f37928" class="squareContent font14">
                                    Update your password
                                </div>
                            </PeekTemplate>
                            <PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
                                ShowPeekTemplateOnMouseOver="true" />
                        </telerik:RadImageAndTextTile>
                        <telerik:RadImageAndTextTile ID="RadImageAndTextTile6" runat="server"      Width="120px" Height="120px" Text="Logout" BackColor="#03953f" AutoPostBack="true">
                            <PeekTemplate>
                                <div style="background-color: #03953f" class="squareContent font14">
                                 Logout
                                </div>
                            </PeekTemplate>
                            <PeekTemplateSettings CloseDelay="6000" Animation="Fade" HidePeekTemplateOnMouseOut="true"
                                ShowPeekTemplateOnMouseOver="true" />
                        </telerik:RadImageAndTextTile>
                    </telerik:TileGroup>
                </Groups>
            </telerik:RadTileList>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    </div>
    </form>
</body>
</html>

TileList

answered on 10 Jul 2015

1 answer

122 views

Aligning items in group headers

Hello,

I am attempting to display aggregate sums of groups in group headers in my RadGrid. I have attempted to use the instructions in the following article: http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/functionality/grouping/how-to/aligning-items-in-groupheader

My issue is due to the fact that I am using multiple levels of grouping. I am not sure why, but when I use the code in the article mentioned above, the entries in my group headers become misaligned as shown in the attached image. In the picture shown, my goal is to have the 10,000's be lined up no matter which level of grouping they are in, and to have the product names behave as they would be normally. Is there any easier way to display group totals for each column in the group headers? If not, is there some modification that can be made to the code in the help article that will ensure that the header items are aligned in each level of group headers? Thanks

Grid

answered on 10 Jul 2015