Questions on UI for ASP.NET AJAX Forum

2 answers

250 views

I have been using the radsplitter and radpanes to manage the layout of a screen in IE9. Everything has been working fine to date with the splitter filling the screen but a couple of my customers have reported problems with the splitter only filling half the page.
I have investigated and it would seem this issue only appears when you run IE7, IE8 or IE9 in compatibility mode.
I essentially have a master page with the following markup:

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

<div style="float:right">

<telerik:RadSkinManager ID="radSkinManager" runat="server"></telerik:RadSkinManager>

</div>

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

<telerik:RadNotification ID="radNotification" runat="server"></telerik:RadNotification>

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

<div>

<div class="pageHeader">HEADER</div>

<div class="pageBody">

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

<div class="pageFooter">FOOTER</div>

</div>

</form>

I then have a content page holding the splitter and associated panels as follows:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

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

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

PANEL1

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server">

</telerik:RadSplitBar>

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

<telerik:RadSplitter ID="RadSplitter2" runat="server" Height="100%" Width="100%" Orientation="Horizontal">

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

PANEL1

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar2" runat="server">

</telerik:RadSplitBar>

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

PANEL2

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</asp:Content>

The styles used are defined as:

.pageHeader { position:absolute; left:4px; top:4px; right:4px; height:100px; background-color:red }

.pageBody { position:absolute; left:4px; top:108px; right:4px; bottom:108px; background-color:blue }

.pageFooter { position:absolute; left:4px; bottom:4px; right:4px; height:100px; background-color:green }

It would appear the reason for the issue is that the pageBody DIV is held in an absolutely positioned DIV that hasn't had the height set to 100%. Does anybody know how I can resolve this issue?

Splitter

answered on 06 Jul 2012

2 answers

140 views

Export not working

I have a grid that I bind in the code behind. Whenever I click the export button, it just removes the paging and displays all 6000 records on one page, and doesn't export anything. Any ideas why? Here's the aspx and code behind

<%@ Page Title="" Language="VB" MasterPageFile="~/Main.master" AutoEventWireup="false"

CodeFile="CustomerList.aspx.vb" Inherits="Customers_CustomerList" %>

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

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="mainContentPlaceHolder" Runat="Server">

<telerik:RadFormDecorator ID="decorator" Skin="Default" DecoratedControls="Buttons"

runat="server" />

<telerik:RadTextBox ID="searchInput" runat="server">

</telerik:RadTextBox>

<asp:Button ID="searchGrid" runat="server" Text="Search" />

<asp:Button ID="Reset" runat="server" Text="reset" />

<br />

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

AllowSorting="True" AutoGenerateColumns="false" PageSize="50" Height="400px">

<MasterTableView DataKeyNames="customerid" AutoGenerateColumns="false">

<RowIndicatorColumn>

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

</RowIndicatorColumn>

<ExpandCollapseColumn>

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

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn AllowSorting="false" DataField="Edit" HeaderText="<span style='visibility: hidden;'>a</span>">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName"

UniqueName="FirstName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LastName" HeaderText="LastName" SortExpression="LastName"

UniqueName="LastName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Business Name" HeaderText="Business Name" SortExpression="Business Name"

UniqueName="Business Name">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="State" HeaderText="State" SortExpression="State"

UniqueName="State">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Zip" HeaderText="Zip" SortExpression="Zip" UniqueName="Zip">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Address" HeaderText="Address" SortExpression="Address"

UniqueName="Address">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="City" HeaderText="City" SortExpression="City"

UniqueName="City">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Phone" HeaderText="Phone" SortExpression="Phone"

UniqueName="Phone">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Fax" HeaderText="Fax" SortExpression="Fax" UniqueName="Fax">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Email" HeaderText="Email" SortExpression="Email"

UniqueName="Email">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CellPhone" HeaderText="CellPhone" SortExpression="CellPhone"

UniqueName="CellPhone">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<HeaderStyle Width="100px" />

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True">

</Scrolling>

</ClientSettings>

</telerik:RadGrid>

<asp:Label ID="output" runat="server"></asp:Label>

<br />

<asp:Button ID="export" Text="Export Data to Excel" runat="server" />

</asp:Content>

Imports System.Data

Imports System.Data.Sql

Imports System.Data.SqlClient

Imports Telerik.Web.UI

Partial Class internal_Clientlist

Inherits System.Web.UI.Page

Dim conn = System.Configuration.ConfigurationManager.ConnectionStrings("connection").ToString

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Page.IsPostBack Then

MyFunctions.setCurrent(Page.Master.FindControl("clientLink"))

bindGrid()

clientGrid.DataBind()

colDrop.DataSource = getColumns()

colDrop.DataValueField = "colName"

colDrop.DataTextField = "name"

colDrop.DataBind()

Session("searchDrop") = ""

'check the callback date

End If

End Sub 'page Load

'this sub gets the data for the grid

Protected Friend Sub bindGrid()

Try

Dim mytable As New DataTable

mytable.Columns.Add("userid")

mytable.Columns.Add("firstname")

mytable.Columns.Add("Lastname")

mytable.Columns.Add("SchoolName")

mytable.Columns.Add("State")

mytable.Columns.Add("Interest")

mytable.Columns.Add("Rating")

mytable.Columns.Add("NextContactDate")

mytable.Columns.Add("InterestLevel")

mytable.Columns("userid").DataType = System.Type.GetType("System.Int16")

mytable.Columns("NextContactDate").DataType = System.Type.GetType("System.DateTime")

mytable.Columns("Rating").DataType = System.Type.GetType("System.Int16")

mytable.Columns("InterestLevel").DataType = System.Type.GetType("System.Int16")

Dim username = Membership.GetUser.UserName

'if the search button is visible then we have to get the different sql

Dim gridSql

If (search.Visible) Then

findSearchValue(gridSql)

Else

gridSql =

"SELECT tblUsers.UserId AS uid, FirstName, LastName, SchoolName, State, Interest, Rating, CONVERT(VARCHAR(10), NextContactDate, 101) AS NextContactDate, "

& _

"InterestLevel FROM tblUsers WHERE isDeleted='no' "

End If

Using myconn As New SqlConnection(conn)

myconn.Open()

Dim reader

'if this is a salesman, we have to find the states they get.

If (Roles.IsUserInRole(Membership.GetUser.UserName, "salesman")) Then

reader = New SqlCommand("SELECT Name FROM userstates INNER JOIN states ON statefk = statesid WHERE username = '" & username & "'", myconn).ExecuteReader()

If (reader.HasRows()) Then

gridSql &= "AND( "

While reader.Read()

gridSql &= "State='" & reader("Name") & "' OR "

End While

gridSql = gridSql.Substring(0, (gridSql.Length - 4)) & ") "

Else

gridSql = "SELECT tblUsers.UserId AS uid, FirstName, LastName, Email FROM tblUsers WHERE isDeleted='no' AND State='blahblahblah' "

End If 'if reader.hasrows

reader.Close()

End If 'if isuserinrole

gridSql &= "ORDER BY tblUsers.UserId"

reader = New SqlCommand(gridSql, myconn).ExecuteReader

While reader.Read()

mytable.Rows.Add(reader("uid"), reader("FirstName"), reader("LastName"), reader("SchoolName"), reader("State"), reader("Interest"), _

reader("Rating"), reader("NextContactDate"), reader("InterestLevel"))

End While

myconn.Close()

End Using 'using myconn

'Dim dataSource As New SqlDataSource

'dataSource.ConnectionString = conn

'dataSource.SelectCommand = gridSql

clientGrid.DataSource = mytable

Catch ex As Exception

output.Text = "<div class=""outputDiv"" style=""color: red;"">There was an error updating the customer. Please contact the systme administrator if the problem persists.</div>"

output.Show()

End Try

End Sub 'bindGrid

Protected Sub clientGrid_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles clientGrid.Init

Dim menu As GridFilterMenu = clientGrid.FilterMenu

Dim i = 0

While i < menu.Items.Count

If (menu.Items(i).Text = "NoFilter") Then

menu.Items(i).Text = "Clear"

ElseIf menu.Items(i).Text = "Contains" Then

menu.Items(i).Text = "Search"

Else

menu.Items(i).Visible = False

End If

i = i + 1

End While 'while i <

End Sub 'rad grid init

Protected Sub clientGrid_ItemCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles clientGrid.ItemCommand

If (e.CommandName = "RowClick" AndAlso TypeOf e.Item Is GridDataItem) Then

Dim id = e.Item.Cells(2).Text

Response.Redirect("EditClient.aspx?id=" & id)

End If

End Sub 'itemcommand

Protected Sub export_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles export.Click

Dim mydate = Date.Now

Dim fileName = mydate.Year & "-" & mydate.Month & "-" & mydate.Day & " - Client List"

clientGrid.ExportSettings.OpenInNewWindow = True

clientGrid.ExportSettings.ExportOnlyData = True

clientGrid.ExportSettings.IgnorePaging = True

'clientGrid.ExportSettings.FileName = fileName

clientGrid.MasterTableView.ExportToExcel()

End Sub 'export click

'this function returns the data table for the column dropdown

Protected Friend Function getColumns() As DataTable

Dim myTable As New DataTable

myTable.Columns.Add("colName")

myTable.Columns.Add("name")

myTable.Columns.Add("type")

myTable.Rows.Add("- Please Select -", "- Please Select -", "none")

myTable.Rows.Add("Address", "Address", "text")

myTable.Rows.Add("CallAt1Text", "Call Attempt 1 Status", "drop")

myTable.Rows.Add("CallAt2Text", "Call Attempt 2 Status", "drop")

myTable.Rows.Add("CallAt3Text", "Call Attempt 3 Status", "drop")

myTable.Rows.Add("CallAt4Text", "Call Attempt 4 Status", "drop")

myTable.Rows.Add("checkedLiterature", "Checked Literature", "check")

myTable.Rows.Add("City", "City", "text")

myTable.Rows.Add("ContactedDate", "Contacted Date", "date")

myTable.Rows.Add("DateLiteratureChecked", "Date Literature Checked", "date")

myTable.Rows.Add("DateRegistered", "Date Registered", "date")

myTable.Rows.Add("Email", "Email Address", "text")

myTable.Rows.Add("ZipCode", "Zip", "text")

myTable.Rows.Add("ExtendedZipCode", "Extended Zip Code", "text")

myTable.Rows.Add("Fax", "Fax", "text")

myTable.Rows.Add("Interest", "Interest", "drop")

myTable.Rows.Add("InterestLevel", "Interest Level", "drop")

myTable.Rows.Add("NextContactDate", "Callback Date", "date")

myTable.Rows.Add("NextContactTime", "Callback Time", "time")

myTable.Rows.Add("Notes", "Notes", "text")

myTable.Rows.Add("PhoneNumber", "Phone Number", "text")

myTable.Rows.Add("SalesNotes", "Sales Notes", "text")

myTable.Rows.Add("Title", "Title", "text")

myTable.Rows.Add("UserID", "User Id", "text")

myTable.Rows.Add("userPosition", "Position", "drop")

Return myTable

End Function 'getColums

Protected Sub clientGrid_NeedDataSource(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles clientGrid.NeedDataSource

bindGrid()

End Sub 'need data source

'find what they picked and then set the corresponding thing to visible

Protected Sub colDrop_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles colDrop.SelectedIndexChanged

search.Visible = True

'set all these to invisible initially

searchCheck.Visible = False

searchDate.Visible = False

searchDrop.Visible = False

searchInput.Visible = False

searchTime.Visible = False

Dim myTable = getColumns()

Dim type

For Each i In myTable.Rows

If (i("colName") = colDrop.SelectedValue) Then

type = i("type")

Exit For

End If

Next 'for each

'now show the proper field

If (type = "text") Then

searchInput.Visible = True

ElseIf (type = "drop") Then

searchDrop.Visible = True

'only bind if this is a new dropdown item

If (Not Session("searchDrop") Is Nothing AndAlso Session("searchDrop") <> colDrop.SelectedValue) Then

Dim searchTable As New DataTable

searchTable.Columns.Add("value")

searchTable.Columns.Add("text")

'get all of the data from the database to create the dropdown

Using myconn As New SqlConnection(conn)

myconn.Open()

Dim reader = New SqlCommand("SELECT value FROM SearchDropItems WHERE colName ='" & colDrop.SelectedValue & "'", myconn).ExecuteReader()

While reader.Read()

searchTable.Rows.Add(reader(0), reader(0))

End While

myconn.Close()

End Using

searchDrop.DataSource = searchTable

searchDrop.DataTextField = "value"

searchDrop.DataValueField = "value"

searchDrop.DataBind()

End If 'if not

ElseIf (type = "time") Then

searchTime.Visible = True

ElseIf (type = "date") Then

searchDate.Visible = True

ElseIf (type = "check") Then

searchCheck.Visible = True

ElseIf (type = "none") Then

search.Visible = False

searchCheck.Visible = False

searchDate.Visible = False

searchDrop.Visible = False

searchInput.Visible = False

searchTime.Visible = False

End If

Session("searchDrop") = colDrop.SelectedValue

End Sub 'colDrop index changed

'if they clicked search

Protected Sub search_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles search.Click

'bind the grid

bindGrid()

clientGrid.DataBind()

End Sub 'search click

'this sub finds the proper search values

Protected Friend Sub findSearchValue(ByRef sql As String)

sql =

"SELECT tblUsers.UserId AS uid, FirstName, LastName, SchoolName, State, Interest, Rating, CONVERT(VARCHAR(10), NextContactDate, 101) AS NextContactDate, "

& _

"InterestLevel FROM tblUsers WHERE isDeleted='no' "

'see what type we are looking for

If (searchInput.Visible) Then

sql &= "AND " & colDrop.SelectedValue & " like '%" & searchInput.Text & "%' "

ElseIf (searchCheck.Visible) Then

sql &= "AND " & colDrop.SelectedValue & " = '" & searchCheck.Checked & "' "

ElseIf (searchDate.Visible) Then

sql &= "AND " & colDrop.SelectedValue & " = '" & searchDate.SelectedDate & "' "

ElseIf (searchDrop.Visible) Then

sql &= "AND " & colDrop.SelectedValue & " = '" & searchDrop.SelectedValue & "' "

ElseIf (searchTime.Visible) Then

sql &= "AND " & colDrop.SelectedValue & " = '" & searchTime.SelectedDate & "' "

End If

End Sub 'findSearchValue

End Class

Grid

answered on 06 Jul 2012

2 answers

150 views

How to set_selectedDate to radDatetimepicker in radgrid

hi all ..
i have raddatetimepicker in radgrid i want to set selected date to raddatetimepicker on OnClientTimeSelecting this event

<telerik:RadGrid ID="radGrid_Attendance" Width="938" runat="server" AutoGenerateColumns="false"<br>

OnItemDataBound="radGrid_Attendance_ItemDataBound" <br>

onitemcommand="radGrid_Attendance_ItemCommand" <br>

oninsertcommand="radGrid_Attendance_InsertCommand"><br>

<MasterTableView CommandItemDisplay="Top" EditMode="PopUp" Width="938"><br>

<Columns><br>

<telerik:GridTemplateColumn HeaderStyle-Width="190" HeaderText="Login." ItemStyle-Width="190"><br>

<ItemTemplate><br>

<telerik:RadDateTimePicker ID="raddtp_LoginTime" DateInput-DateFormat="MMM dd yyyy hh:mm tt"<br>

runat="server" TimeView-Columns="4" TimeView-Interval="00:30:00" Width="99%"><br>

<ClientEvents OnDateSelected="raddtp_LoginTime_OnDateSelected" /><br>

<TimeView runat="server" ID="TimeView1" OnClientTimeSelecting="ClientTimeSelecting" ></TimeView><br>

</telerik:RadDateTimePicker><br>

</ItemTemplate><br>

</telerik:GridTemplateColumn><br>

</Columns><br>

</telerik:RadGrid>

On databinding completed
grid have 10 rows..
i want to set selected date to particular datetimepicker...
plz help me...

Grid

answered on 06 Jul 2012

4 answers

179 views

RadMenu Databind large collection

We use the RadMenu control in one of our user controls.
The page which uses this control render very slow.
After profiling the page with a few tools we came to the conclusion the databinding of the RadMenu takes up 90% of the time spent generating the page.

radMenu.DataSource = collection;

radMenu.DataBind();

The collection has about 1500 items in it. How can we optimize the performance, so the control can cope with such a large number of items in its datasource...

Kind regards,

Menu

answered on 06 Jul 2012

1 answer

100 views

UseStaticHeaders and Scolling

Hello,
I'm trying to use the Grid and enabling Scrolling.
I have this settings for scrolling:

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

As you can see in the attachment file, I have a "white margin" on the grid header.
if I analize the page with Firebug I see that for the <div> with class rgHeaderDiv is added a right margin of 16px.
I've tried to remove this margin with jQuery, but it seems that this margin is added dinamically and so in some cases I have that this margin is still applied.

Is there a way to fix this issue and remove this margin?
Thanks,
Alessandro

Grid

answered on 06 Jul 2012

15 answers

365 views

Date column widths?

I've noticed some weird behavior with the AJAX grid control in Chrome. Whenever I bind a datasource that contains one or more date fields to the grid. Those date fields are automatically set to a ridiculously large width (over 39000px). Browsing to the same page in FireFox the date columns are displayed as you'd expect. Bug?

Grid control version: 2010.3.1215.40
Chrome version: 8.0.552.224
FireFox version: 3.6.10

Grid

answered on 06 Jul 2012

0 answers

95 views

RadGrid Filter button placed partially outside of grid

I've got a radgrid which is full width of it's parent element.
When I apply filtering to my radgrid, it seems like the radgrid doesn't adjust to make room for the filter buttons, as the the right most filter button is placed partially outside of the radgrid.
see this example picture (I've removed all text such as column names and values)

My grid is created programatically. Could I be enabling the filtering at the
This is basically the OnInit method:

protected override void OnInit(EventArgs e)
{

radGrid = new RadGrid();
radGrid.ID = "myGrid";
radGrid.NeedDataSource += new GridNeedDataSourceEventHandler(_grid_NeedDataSource);

radGrid.MasterTableView.AllowFilteringByColumn = true;

radGrid.MasterTableView.EnableHeaderContextFilterMenu = true;

radGrid.Skin = "Windows7";
radGrid.EnableEmbeddedSkins = true;
radGrid.Width = Unit.Percentage(100);

radGrid_AddColumnsToGrid(); 
}

Grid

asked on 06 Jul 2012

10 answers

369 views

Rad controls with Https broken?

Your controls suffer from the well known issue with about:blank and https and IE..
I.e you need to STOP generating about:blank as this will cause IE to display mixed content popups with https..
This happens on RadMenu, which have been testing, but suspect is a general defect..

Search of google will show you how to fix..

General Discussions

answered on 06 Jul 2012

4 answers

426 views

ExportToExcel does not work for the RADGRID ?

Hi All,

My requirement is to export the grid data into excell sheet and promt user to save this excell file on the click of a radgrid toolbar button.
I have made my set ups for this feature to work at my end like mentioned below :-

1) Added a new GridToolBar button "Export".

<telerik:RadToolBarButton Text="Excel" ImageUrl="~/Images/excel.png" CommandName="ExportToExcel" Value="Export" />

2) On page load i have added the code like below :-

if (!Page.IsPostBack)

{

rgMyGrid.ExportSettings.ExportOnlyData = true;

rgMyGrid.MasterTableView.UseAllDataFields = true;

rgMyGrid.ExportSettings.Excel.Format = GridExcelExportFormat.ExcelML;

rgMyGrid.ExportSettings.IgnorePaging = true;

rgMyGrid.ExportSettings.FileName = "CropList";

rgMyGrid.ExportSettings.OpenInNewWindow = true;

}

3) Handling the button click of the grid to export the data to Excell file, used code as below :
Ex :-

protected void rtbCommand_ButtonClick(object sender, RadToolBarEventArgs e)

{

if (e.Item.Value == "Export")

{

ExportGrid();

}

The ExportGrid method is as below :

protected void ExportGrid()

{

rgMyGrid.ExportSettings.ExportOnlyData = true;

rgMyGrid.ExportSettings.Excel.Format = GridExcelExportFormat.ExcelML;

rgMyGrid.ExportSettings.IgnorePaging = true;

rgMyGrid.ExportSettings.FileName = "CropList";

rgMyGrid.ExportSettings.OpenInNewWindow = true;

rgMyGrid.MasterTableView.ExportToExcel();

}

Still it does not seems to be working rather it makes the toolbar to disappear when click on the EXPORT button. :-(

Is this the right way i am going through or need to change the coding any way ?
Please help me in this regard. Thanks in advance.

Grid