Questions on UI for ASP.NET AJAX Forum

2 answers

203 views

In a nutshell, I need to add an additional row to the grid's header so that I can visibly group columns together. After reading the following thread, Adding Multiple Header Rows at Runtime in RadGrid , I was successfully able to make this happen, but ran into a sizing issue. I realize that this situation is not supported but was hoping somebody will be able to help me out.

Simply put, when setting the colspan property of the new GridTableHeaderCell, the width of the columns shrink and I want them to stay fixed. Attached is a before & after pic. The before is by commenting out the dgHeader_PreRender event. The after has the same event uncommented. The width of dgHeader needs to equal the width of dgDetail, columns widths especially.

Please run the code with event dgHeader_PreRender commented out first to see what the column widths should always look like.

Here is my code:

ASPX

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default3.aspx.vb" Inherits="Default3" %>

<!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:RadScriptManager runat="server" ID="mgrJS" >

</telerik:RadScriptManager>

<div>

<table>

<tr>

<td align="left" valign="top">

<telerik:RadGrid runat="server" ID="dgHeader" Skin="Web20" AllowSorting="true" >

<ClientSettings>

<Scrolling UseStaticHeaders="True" />

</ClientSettings>

<MasterTableView BorderWidth="1px" GridLines="Both" style="border-collapse: collapse !Important;" Font-Bold="false" TableLayout="Fixed" AutoGenerateColumns="false" ShowHeader="True">

<Columns>

<telerik:GridBoundColumn DataField="N1" HeaderText="N 1" UniqueName="N1">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="N2" HeaderText="N 2" UniqueName="N2">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="N3" HeaderText="N 3" UniqueName="N3">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="C1" HeaderText="C 1" UniqueName="C1">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="C2" HeaderText="C 2" UniqueName="C2">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="C3" HeaderText="C 3" UniqueName="C3">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</td>

</tr>

<tr>

<td align="left" valign="top">

<telerik:RadGrid runat="server" ID="dgDetail" Skin="Web20" AllowSorting="true">

<ClientSettings>

<Scrolling UseStaticHeaders="True" />

</ClientSettings>

<MasterTableView BorderWidth="1px" GridLines="Both" style="border-collapse: collapse !Important;" Font-Bold="false" TableLayout="Fixed" AutoGenerateColumns="false" ShowHeader="False">

<Columns>

<telerik:GridBoundColumn DataField="N1" HeaderText="N 1" UniqueName="N1">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="N2" HeaderText="N 2" UniqueName="N2">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="N3" HeaderText="N 3" UniqueName="N3">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="C1" HeaderText="C 1" UniqueName="C1">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="C2" HeaderText="C 2" UniqueName="C2">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="C3" HeaderText="C 3" UniqueName="C3">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

VB

Partial Class Default3

Inherits System.Web.UI.Page

Private Sub dg_Init(ByRef dg As RadGrid, ByVal isHeader As Boolean)

With dg

If isHeader Then

For Each col As GridBoundColumn In dg.MasterTableView.Columns

'Need to set width's to 54 in order to line up with dtDetail's columns below

col.HeaderStyle.Width = 54

col.ItemStyle.Width = 54

col.ItemStyle.HorizontalAlign = HorizontalAlign.Right

Next

Else

For Each col As GridBoundColumn In dg.MasterTableView.Columns

col.HeaderStyle.Width = 60

col.ItemStyle.Width = 60

col.ItemStyle.HorizontalAlign = HorizontalAlign.Right

Next

End If

End With

End Sub

Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init

dg_Init(dgHeader, True)

dg_Init(dgDetail, False)

End Sub

Protected Sub dgHeader_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles dgHeader.NeedDataSource

dgHeader.DataSource = GetHeaderDatasource()

End Sub

Protected Sub dgDetail_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles dgDetail.NeedDataSource

dgDetail.DataSource = GetDetailDatasource()

End Sub

Protected Sub dgHeader_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles dgHeader.PreRender

Dim header As GridHeaderItem = DirectCast(dgHeader.MasterTableView.GetItems(GridItemType.Header)(0), GridHeaderItem)

Dim head As GridTHead = DirectCast(header.Parent, GridTHead)

'create a new GridHeaderItem which will be the new row

Dim newHeaderItem As New GridHeaderItem(dgHeader.MasterTableView, 0, 0)

'add 2 empty table header cells, as there are 2 hidden columns always created in RadGrid

newHeaderItem.Cells.Add(New GridTableHeaderCell())

'Add as many header cells as you need with required colspans

newHeaderItem.Cells.Add(New GridTableHeaderCell() With {.Text = "Numbers", .ColumnSpan = 3})

newHeaderItem.Cells.Add(New GridTableHeaderCell() With {.Text = "Characters", .ColumnSpan = 3})

head.Controls.AddAt(0, newHeaderItem)

End Sub

Private Function GetHeaderDatasource() As DataTable

If Me.Session("dgHeader_DataSource") Is Nothing Then

Dim dt As DataTable = CreateDataTable()

Dim r As DataRow = dt.NewRow

r.ItemArray = New Object() {"100", "200", "300", "X", "Y", "Z"}

dt.Rows.Add(r)

Session("dgHeader_DataSource") = dt

End If

Return Session("dgHeader_DataSource")

End Function

Private Function GetDetailDatasource() As DataTable

If Me.Session("dgDetail_DataSource") Is Nothing Then

Dim dt As DataTable = CreateDataTable()

Dim r As DataRow = dt.NewRow

r.ItemArray = New Object() {"50", "100", "150", "X", "Y", "Z"}

dt.Rows.Add(r)

r = dt.NewRow

r.ItemArray = New Object() {"50", "100", "150", "X", "Y", "Z"}

dt.Rows.Add(r)

Session("dgDetail_DataSource") = dt

End If

Return Session("dgDetail_DataSource")

End Function

Private Function CreateDataTable() As DataTable

Dim dt As New DataTable

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

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

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

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

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

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

Return dt

End Function

End Class

Grid

answered on 01 May 2014

7 answers

365 views

RadTreeList column width adjustment

Hi,

Is the functionality of Reordering the columns supported in RadTreeList. That is dragging and dropping of columns.

Also in RadTreeList, how can we implement it so that the client can increase and decrease the width of the columns. I am using TreeListboundColumn currently.

Thanks in advance.

TreeList

answered on 01 May 2014

3 answers

182 views

css inside RadMultiPage RadPageView impacts whole page

We have a MultiPage in part of our app, it's essentially an email preview here:
<code>
<telerik:RadPageView ID="RadPageView1" runat="server" Visible="true">
<div id="divHTMLContent" runat="server">
</div>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server" Visible="true">
<div id="divPlainText" runat="server">
</div>
</telerik:RadPageView>
</code>

The problem arises that the HTML Content can contain styles, such as
<code>
<style type="text/css">
body {
background-color: #efefef;
color: #777777;
font-face: Garamond !important;
}
</style>
</code>

(deliberately chosen to demonstrate the effects)

These global styles are indeed global. In another context, I was able to <ol><li>introduce an iframe <li>HTMLEncode the content and <li>use jQuery to load the iframe at render time</ol> Any suggestions on how to get similar behaviour?

TabStrip

answered on 01 May 2014

1 answer

44 views

Statistics Module covered by buttons below editor

Hi,

I'm attempting to replace an existing editor with Telerik. So far its been ok, except that the statistics module is showing underneath buttons that I have below the editor and I'm not sure why. (image attached)

I note that the editor is in a table which is inside another table and the buttons are in a separate row cell inside the main table.

Thanks

Editor

answered on 01 May 2014

5 answers

80 views

Change Column Style When Filtered

Hi

Does anyone know how to change the column style when a column is filtered, in a similar way to when you sort a column?

I have a number of grids which are loaded with default filters and it would be nice if I can highlight somehow which filters are already applied when a grid loads.

If it is not possible to change the column style then some other form of highlighting, such as the filter textbox style, would work just as well.

Thanks in advance for any help

Cheers
Rob

Grid

answered on 30 Apr 2014

6 answers

151 views

UseAllDataFields paging and grouping: Results on first page only

Hi,

The project I've taken over uses all code behind for creating a grid. The solution calls for using column aggregates. According to other Telerik threads I found that I needed to set UseAllDataFields = true. Upon implementing this I noticed that grouping and paging did not work correctly. The problem is you only get the first page of results. Once you select another page, no records are returned. Filtering does not seem to be affected by this.

Unfortunately, I cannot post all the code (to spread out). However, here are the grid properties:

RadGrid1.MasterTableView.EditFormSettings.EditColumn.ButtonType = GridButtonColumnType.PushButton;

RadGrid1.MasterTableView.UseAllDataFields = true;

RadGrid1.EnableViewState = true;

RadGrid1.EnableLinqExpressions = false;

RadGrid1.AutoGenerateColumns = false;

RadGrid1.MasterTableView.EnableColumnsViewState = false; // because the column structure can change on Postback (new Layout)

RadGrid1.ClientSettings.ClientEvents.OnGridCreated = "onGridCreated";

RadGrid1.ClientSettings.ClientEvents.OnCommand = "onGridCommand";

RadGrid1.ClientSettings.ClientEvents.OnColumnResized = "OnGridColumnResized";

RadGrid1.ClientSettings.ClientEvents.OnColumnSwapped = "OnColumnSwapped";

RadGrid1.ClientSettings.ClientEvents.OnRowMouseOver = "RowMouseOver";

RadGrid1.ClientSettings.ClientEvents.OnFilterMenuShowing = "filterMenuShowing";

RadGrid1.FilterMenu.OnClientShowing = "MenuShowing";

RadGrid1.CellSpacing = 2;

RadGrid1.ShowStatusBar = false;

RadGrid1.MasterTableView.TableLayout = GridTableLayout.Fixed;

RadGrid1.EnableHeaderContextMenu = true;

RadGrid1.MasterTableView.EditMode = GridEditMode.EditForms;

RadGrid1.MasterTableView.EditFormSettings.FormStyle.BackColor = System.Drawing.ColorTranslator.FromHtml("#FFFFDD");

RadGrid1.GroupingSettings.ShowUnGroupButton = true;

RadGrid1.ClientSettings.AllowDragToGroup = true;

RadGrid1.ClientSettings.AllowGroupExpandCollapse = true;

RadGrid1.MasterTableView.GroupLoadMode = GridGroupLoadMode.Client;

RadGrid1.GroupingSettings.CaseSensitive = false;

RadGrid1.FilterItemStyle.Wrap = false;

RadGrid1.AllowSorting = true;

RadGrid1.MasterTableView.AllowNaturalSort = false;

RadGrid1.AllowPaging = true;

RadGrid1.MasterTableView.PagerStyle.AlwaysVisible = true;

RadGrid1.ClientSettings.Scrolling.AllowScroll = true;

RadGrid1.ClientSettings.Scrolling.UseStaticHeaders = true;

RadGrid1.ClientSettings.Scrolling.SaveScrollPosition = true;

RadGrid1.ClientSettings.Resizing.AllowColumnResize = true;

RadGrid1.ClientSettings.Resizing.ClipCellContentOnResize = false;

RadGrid1.ClientSettings.Resizing.EnableRealTimeResize = false;

RadGrid1.ClientSettings.Resizing.ResizeGridOnColumnResize = true;

RadGrid1.ClientSettings.AllowColumnsReorder = true;

RadGrid1.ClientSettings.ColumnsReorderMethod = GridClientSettings.GridColumnsReorderMethod.Reorder;

RadGrid1.ClientSettings.ReorderColumnsOnClient = false;

RadGrid1.ClientSettings.EnableRowHoverStyle = true;

RadGrid1.ClientSettings.Selecting.AllowRowSelect = true;

Any help would be appreciated.

Thanks.

Blair

Grid

answered on 30 Apr 2014

1 answer

159 views

GridDateTimeColumn unable to filter using RadDateTimePicker

I'm having trouble in filtering the columns using the RadDateTimePicker for the GridDateTimeColumn. I'm getting the error 'The string was not recognized as a valid DateTime.' I verified the formats and seems to be proper. I used the following code,

<telerik:GridDateTimeColumn UniqueName="EventDate" DataField="Date" SortExpression="Date" DataFormatString="{0:MMMM, dd, yyyy HH:mm:ss}" DataType="System.DateTime">
<HeaderStyle Wrap="False" Width="20%"></HeaderStyle>
<ItemStyle Wrap="False" HorizontalAlign="Left" Width="20%"></ItemStyle>
<FilterTemplate>
From
<telerik:RadDateTimePicker ID="FromOrderDatePicker" runat="server" Width="140px" ClientEvents-OnDateSelected="FromDateSelected" />

To
<telerik:RadDateTimePicker ID="ToOrderDatePicker" runat="server" Width="140px" ClientEvents-OnDateSelected="ToDateSelected" />
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function FromDateSelected(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
var ToPicker = $find('<%# ((GridItem)Container).FindControl("ToOrderDatePicker").ClientID %>');

var fromDate = FormatSelectedDate(sender);
var toDate = FormatSelectedDate(ToPicker););

console.log(fromDate + " " + toDate);

tableView.filter("EventDate", fromDate + " " + toDate, "Between");

}
function ToDateSelected(sender, args) {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
var FromPicker = $find('<%# ((GridItem)Container).FindControl("FromOrderDatePicker").ClientID %>');

var fromDate = FormatSelectedDate(FromPicker);
var toDate = FormatSelectedDate(sender);

console.log(fromDate + " " + toDate);

tableView.filter("EventDate", fromDate + " " + toDate, "Between");
}
function FormatSelectedDate(picker) {
var date = picker.get_selectedDate();
var dateInput = picker.get_dateInput();

console.log("1 -> " + date + " " + dateInput);

var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, "M/dd/yyyy hh:mm:ss tt");
//var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());

return formattedDate;
}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridDateTimeColumn>.

I'm getting the following print for the from and to date,
"4/23/2014 12:00:00 AM - 4/24/2014 12:00:00 AM "

Please help. I want to filter based on both date and time.

Grid

answered on 30 Apr 2014

2 answers

216 views

RadDatePicker render issue on IE11

Hi,

We are using the Telerik 2013.1.417.40 version and use the RadDatePicker and timer all over the site, which renders fine on all the browser except on IE11.
On all the browsers it uses the inline style "display:inline-block" and take the default width of "100px". We did not specify any width for the control and any css class.

<telerik:RadDatePicker ID="DatePickerStart" runat="server" Calendar-ClientEvents-OnDateClick="DateSelected"
DateInput-ClientEvents-OnValueChanged="DateChanged" >
<DatePopupButton></DatePopupButton>
</telerik:RadDatePicker>
    
<telerik:RadTimePicker runat="server" id="TimePickerStart" TimeView-OnClientTimeSelected="TimeSelected" ></telerik:RadTimePicker>

The above code renders the Date picker textbox and time picker text box on the same line for all the browsers. But on IE11 both the boxes taking more than 100pixels width and the time picker box renders on next line. When i looked at it on IE11 developer tools, datepicker div renders with inline style "display : inline", for other browsers it comes as "inline-block". Even i gave the custom css class for the RadDatePicker and Timercontrols to specify the "display" property. But Telerik control renders the Inline display property.

Is there any fix for IE11 render issue? Please find the attached image for the how it renders it on chrome and IE11.

Calendar

answered on 30 Apr 2014

2 answers

156 views

Vertical align Text & Image in RadPanelBar

I try to vertcal align text and image in RadPanelBarItem. take a look on the attach image. Please show me how to do it.
Thanks

PanelBar

answered on 30 Apr 2014

4 answers

261 views

RadGrid - SelectedItems.Count = 0 in ItemCommand

Hi,

I want to delete selected item but in a particular way.
So, I created CommandItemTemplate with some Linbutton, especially DeleteButton with custom Command "DeleteSelected".

On my grid I had property to allow client select row:

<ClientSettings>

<Selecting AllowRowSelect="True"