Questions on UI for ASP.NET AJAX Forum

1 answer

114 views

IE6/IE7 Datepicker absolute positioning issue

Hi,

I am running into an issue with the Calendar Datepicker control in IE6 and 7 and IE8/9 in compatibility mode, when the controls are drawn dynamically with absolute positioning. The controls drop about 10px down from their intended position sometimes as soon as the screen draws and sometimes when the mouse hovers over the first datapicker control. Below is an example of a test I built to demonstrate this behavior.
Please note the DOCTYPE tag I am using for the page, and that the application is running ASP.Net 4. I am using build 2011.1.413.40 of the Telerik.Web.UI assembly.

Page3.aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Page3.aspx.vb" Inherits="ASPNET4Test1.Page3" %>

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

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div>

<asp:Panel ID="Panel1" runat="server">

</asp:Panel>

</div>

</form>

</body>

</html>

Page3.aspx.vb

Imports System.Data

Imports System.Collections.Generic

Imports Telerik.Web.UI

Imports System.Linq

Public Class Page3

Inherits System.Web.UI.Page

Private Sub Panel1_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Panel1.Init

Try

Dim _date3 As RadDatePicker = Nothing

Dim oLabel As Label

Dim _cal As RadCalendar = Nothing

Dim _calAdded As Boolean = False

Dim Pnl As System.Web.UI.WebControls.WebControl = Panel1

Dim _posLeft As Integer = 80

Dim _posLabelLeft As Integer = 20

Dim _posTop As Integer

For _tabIndex As Integer = 1 To 3

_posTop = _tabIndex * 20 + 20

If IsNothing(_cal) Then

_cal = New RadCalendar()

_cal.ID = "sharedcalendar"

Pnl.Controls.Add(_cal)

End If

oLabel = New Label

oLabel.Style.Add("position", "absolute")

oLabel.Style.Add("top", String.Format("{0}px", (_posTop).ToString()))

oLabel.Style.Add("left", String.Format("{0}px", (_posLabelLeft).ToString()))

oLabel.Style.Add("width", String.Format("{0}px", (50).ToString()))

oLabel.Style.Add("height", String.Format("{0}px", (22).ToString()))

oLabel.Text = "Field " + _tabIndex.ToString()

oLabel.CssClass = "fls "

oLabel.EnableViewState = True

Pnl.Controls.Add(oLabel)

_date3 = New RadDatePicker()

_date3.ID = "dtp_" + _tabIndex.ToString()

_date3.Width = Unit.Pixel(60 + 15) '+ 10 ' 87

_date3.Height = Unit.Pixel(22 - 5) ' - 13

_date3.TabIndex = _tabIndex

_date3.SharedCalendar = _cal

_date3.Style.Add("position", "absolute")

_date3.Style.Add("top", String.Format("{0}px", (_posTop).ToString()))

_date3.Style.Add("left", String.Format("{0}px", _posLeft.ToString())) ' sCLeft)

_date3.Attributes.Add("fieldid", "fld" + _tabIndex.ToString())

_date3.Attributes.Add("fieldname", "fld" + _tabIndex.ToString())

_date3.Attributes.Add("fieldtype", "date")

_date3.Calendar.EnableNavigationAnimation = True

_date3.Culture = System.Globalization.CultureInfo.CurrentUICulture

_date3.MinDate = CDate("1900-1-1")

_date3.ShowPopupOnFocus = True

_date3.DatePopupButton.Visible = False

_date3.DateInput.EmptyMessage = System.Globalization.CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern.ToUpper()

_date3.DateInput.DateFormat = System.Globalization.CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern

_date3.DateInput.DisplayDateFormat = System.Globalization.CultureInfo.CurrentUICulture.DateTimeFormat.ShortDatePattern

_date3.DateInput.SelectionOnFocus = SelectionOnFocus.SelectAll

_date3.DateInput.ShowButton = False

_date3.DateInput.Width = Unit.Pixel(60)

_date3.DateInput.Height = Unit.Pixel(22 - 5)

Pnl.Controls.Add(_date3)

Next

Catch ex As System.Exception

Trace.Write(String.Format("Failed to draw fields. Exception: {0}", ex.ToString()))

Throw

Finally

Trace.Write("End ---> Panel1_Init")

End Try

End Sub

End Class

Here is an image depicting the behavior I am experiencing this this page.

Thanks
Ali M.

Calendar

answered on 20 Jun 2011

5 answers

240 views

Grid not showing Loading Icon

Hello,

I am using Telerik AJAX Hierarchical Grid. I am using the version of 2010.3.1317.20. I cant upgrade to the latest version as the framework I am using .Net 2.0.

Now the issues is, below is my code. I dont see the Ajax loader and also getting an error saying the two controls cannot have the ID. So I have changed the AjaxControlID in AjaxSettings.

I want to show the busy icon on the grid, either the user do some action on the grid like clicking delete button on any of the row. or adding new rows to the grid or until the grid loads the data.

I am assigning the datasource from the SQL Server database.

My page where i have embedd the telerik grid is inside the contentplaceholder.

<asp:UpdatePanel ID="upGetStatus" runat="server" UpdateMode="Conditional">

<ContentTemplate>

<asp:Panel ID="pnlMain" runat="server">

<asp:Label ID="lblError" runat="server" Font-Bold="true" ForeColor="Red"></asp:Label>

<br />

<div id="Div1" style="z-index: 103; width: 80%; text-align: left" runat="server"

font-size="Large" font-names="Arial" font-bold="True" height="21px">

<div>

<div style="width: 20%; float: left">

<asp:Label ID="lblParentSerialNumber" runat="server">Parent Serial #</asp:Label>

</div>

<div style="width: 80%;">

<asp:TextBox ID="txtParentSerialNumber" runat="server" Width="150px" CausesValidation="false"

AutoPostBack="false" MaxLength="12"></asp:TextBox>

</div>

<div>

<div style="width: 20%; float: left; height: 19px;">

<asp:Label ID="lblSubSerialNumbers" runat="server">Sub Serial #</asp:Label>

</div>

<div style="width: 50%;">

<asp:TextBox ID="txtSubSerialNumbers" runat="server" TextMode="MultiLine" Width="150px"

Height="150px" AutoPostBack="false" CausesValidation="false"></asp:TextBox>

</div>

<div style="float: right">

<asp:Button ID="btnValidate" TabIndex="6" runat="server" Font-Bold="True" Width="130px"

BackColor="DarkKhaki" Text="Validate and Save" CausesValidation="true"></asp:Button>

<%-- <asp:Button ID="btnSave" TabIndex="4" runat="server" Font-Bold="True" Width="70px"

BackColor="Green" Text="Save" Enabled="false" />--%>

<asp:Button ID="btnClear" TabIndex="5" runat="server" Font-Bold="True" Width="70px"

BackColor="Peru" Text="Clear" CausesValidation="false" />

</div>

<br />

<div style="width: 80%; text-align: left">

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid11">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Width="95%"

Transparency="5">

<img style="border: 0; margin-top: 150px;" alt="Loading..." src="Images/infineralogo.gif" />

</telerik:RadAjaxLoadingPanel>

<telerik:RadGrid ID="RadGrid1" runat="server" Width="95%" ShowStatusBar="true" AutoGenerateColumns="False"

PageSize="10" AllowSorting="True" AllowMultiRowSelection="False" AllowPaging="True"

AlternatingItemStyle-BackColor="Ivory" ItemStyle-BackColor="LightGoldenrodYellow"

HeaderStyle-BackColor="SandyBrown" GridLines="None">

<PagerStyle Mode="NumericPages"></PagerStyle>

<MasterTableView Width="100%" DataKeyNames="ParentSerialNumber" AllowMultiColumnSorting="False">

<DetailTables>

<telerik:GridTableView DataKeyNames="SerialNoAssociateId" Name="SubSerialNumberGrid"

Width="100%" AllowSorting="true">

<Columns>

<telerik:GridBoundColumn SortExpression="SerialNoAssociateId" HeaderText="SerialNoAssociateId"

HeaderButtonType="TextButton" DataField="SerialNoAssociateId" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="ParentSerialNumber" HeaderText="ParentSerialNumber"

HeaderButtonType="TextButton" DataField="ParentSerialNumber" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="SubSerialNumber" HeaderText="Sub Serial Number"

HeaderButtonType="TextButton" DataField="SubSerialNumber">

</telerik:GridBoundColumn>

<telerik:GridButtonColumn HeaderText="Delete" ConfirmTitle="MPT" ConfirmDialogType="Classic"

ButtonType="ImageButton" ConfirmText="Are you sure you want to delete?" ItemStyle-HorizontalAlign="Left"

CommandName="DeleteSubSerial" Text="Delete" ImageUrl="Images/Delete.jpg">

</telerik:GridButtonColumn>

</Columns>

</telerik:GridTableView>

</DetailTables>

<Columns>

<telerik:GridBoundColumn SortExpression="ParentSerialNumber" HeaderText="Parent Serial Number"

HeaderButtonType="TextButton" DataField="ParentSerialNumber">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

<br />

<div style="width: 80%; text-align: left">

<asp:DataGrid ID="dgdErrors" runat="server" AutoGenerateColumns="true" CellSpacing="2"

GridLines="None" Visible="false">

<AlternatingItemStyle BackColor="Ivory"></AlternatingItemStyle>

<ItemStyle BackColor="LightGoldenrodYellow"></ItemStyle>

<HeaderStyle BackColor="SandyBrown"></HeaderStyle>

</asp:DataGrid>

</div>

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

Grid

answered on 20 Jun 2011

3 answers

170 views

Opening a RadWindow from a RadGrid item click?

Hi,

Is it possible to open a RadWindow when I click an item on the RadGrid even by adding a link inside? I did have a solution but it reloads the page and its very sloppy.

The way I did it was that I added the following in my aspx:

<telerik:GridHyperLinkColumn DataTextFormatString="Edit Item"
        avigateUrlFields="country_id" UniqueName="country_id"         DataNavigateUrlFormatString="~/admin/AdmCountries.aspx?edit_id={0}"
                        HeaderText="Edit Item" DataTextField="country_id" >
        </telerik:GridHyperLinkColumn>

then I updated my codebehind's OnPageLoad like this:

    
             string editID = Request.QueryString["edit_id"];

             if (editID != null)

            {

              RadWindowManager1.Windows[0].VisibleOnPageLoad = true;

            } else {

              RadWindowManager1.Windows[0].VisibleOnPageLoad = false;

            }

So essentially reloading the page with the ID parameter and if it is set then the window is displayed. What I would like instead is not to have a postback, rather displaying the window with a given ID, maybe using AJAX.

I am new to this great product and would like to get the hang of it, please help.

Thanks,
Miklos

Window

answered on 20 Jun 2011

1 answer

73 views

Need for a more tight Calendar Cells

Hello,

I need to gain on Space specially in height on a page containing a RadCalendar. I tried to change the height and width properties of the radcalendar component, and i note that its size get invariant below a given threshold values. In the attached document, you can see in the first image the min calendar size i have got , and in the second the size of the calendar that i would like to get ( I want more tight calendar cells). Should i create a new skin. If it is the case, which CSS classes should i redefine?

Thanks & Regards,

Calendar

answered on 20 Jun 2011

3 answers

101 views

Encoding of localized texts

Hi,

I'm having problem with some texts when localizing.
For example when setting the following:
RadEditor.Localization.Tools.Zoom = "<aaa>"

The zoom dropdown disappears (or becomes very small). Seems to be some problem when encoding the text.
If setting the text as html-encoded ("<aaa>"), then the tooltip gets wrong (displays <aaa>).

Regards
Caesar

Editor

answered on 20 Jun 2011

1 answer

151 views

How to use RadAjaxLoadingPanel with programmatically created RadGris?

I have created a RadGrid control programmatically and added it to a placeholder control and at the moment I've placed the placeholder inside a ASP.NET AJAX UpdatePanel to avoid page flashing (the radgrid data gets updated (triggered) by clicking an external button).

I'd like to use RadAjaxLoadingPanel so that user will have a nice experience while the Grid gets updated.

1) How to use RadAjaxLoadingPanel with this scenario?

Do I have to use RadAjaxManager instead of UpdatePanel? if so, how to configure it as my RadGrid is created at runtime.

2)
Also, my RadGrid is using Export to Excel and Word built-in buttons. How would it affect these?

Many thanks,

Grid

answered on 20 Jun 2011

4 answers

459 views

RadGrid with XmlDataSource

Hi,

I am trying to figure this out for past couple of days.

I would like to know how to implement RadGrid with xmldatasource. It's pretty easy to bind it in the front end. But I would like to bind the xml to gridview from serverside. I would like to use XPath and DOM model to select the nodes/attributes from my Xml to be displayed as columns in the Gridview and content accordingly. My Xml looks something similar to this:

<structure>
   <headers>
      <headertext text="Product Name">
      <headertext text="Product ID">
      <headertext text="Product No.">
   </headers>
   <content>
       <row value="Apple">
       <row value="123">
       <row value="354367">  
   </row> 
</row>

I would like to populate HeaderText (Product Name, Product ID .... as column header) from server side using XPath and DOM and rows for each of the columns. Basically, there can be many columns and I have to iterate through each of them and display all column with all data.

Secondly, I am not able to create an instance of XmlDocument to load the xml from the server side, causing couple of errors.

Would be great if someone can help me in this issue.

Thanks.

Grid

answered on 20 Jun 2011

1 answer

168 views

Client side databind ASP.Net RadGrid with Checkbox column

I have a asp.net radgrid with checkcolumn, when i bind the grid from server the checkbox column is binding correctly.

If i bind the grid with client side programmatically, the checkbox column is not checking.

Please let me know how to bind the grid with checkbox column from client side.

Thanks & Regards
D Praveen

Grid

answered on 20 Jun 2011

1 answer

253 views

Moving to MVC.

Hi Telerik,

I apologize in advance if this post gets a bit long-winded. I'm just trying to get my head around a lot of things while also trying to make some decisions on where I need to go next.

I have a fairly complex ASP.NET/AJAX Web Dashboard. It utilizes the following RadControls for AJAX:

RadSplitter/RadSlidingZone/RadPane/RadSlidingPane/RadSplitBar
RadListBox
RadTab/RadMultiPage (less so)
RadDock/RadDockZone/RadDockLayout

All except a handful of instances of the controls are completely dynamically created and restored through page-postback and session. The RadListBox uses drag-and-drop features to move RadListBoxItems to the page. Event handlers then take over the creating of RadDocks or RadSplitters and RadPanes. If it would help this discussion I am able to provide a working copy of my current solution.

Now, I am 100% nubile to MVC aside from code I have inherited at my job. I have this dashboard working, using ASP.NET/AJAX controls, inside of the MVC solution -- but breaking MVC architecture to do so. My goal is to not break this architecture - I am not concerned at this point about whether I use RadControls for MVC, RadControls for AJAX, a mixture of the two, or pick-and-choose controls with outside support from jQuery patching up the edges.

So, where do we stand? I played around with Telerik Controls for MVC and while I believe I could achieve the functionality I want out of some of these controls -- not everything has been fleshed out yet. Is mixing in controls from RadControls for AJAX going to be acceptable? I know, I know, I read that this is possible -- but I want to know if it's the best decision to be making.

For instance, does RadSplitter for MVC support dynamically creating new panes, nesting splitters and panes to an arbitrary depth?

Lets assume I am going to not use RadControls for MVC for my first iteration of integrating my project into MVC architecture. Is it POSSIBLE to achieve the same functionality as I have currently using RadControls for AJAX in MVC? A simple example I have is "I rely heavily on RadDockLayout's SaveDockLayout event, how can I emulate this behavior in MVC?"

The third solution, which I believe to be the answer (but do not want to jade anyone else into thinking that this is the only answer) is a mixing of Telerik Controls for AJAX and other jQuery libraries to patch the bridge. For instance, using jQuery docking functionality where I originally used RadDocking.

Maybe this is all worth opening a ticket to discuss, but I thought it'd be best for other Telerik users to be able to see my thoughts and concerns. I have a long road ahead of me, and I'd love to not make it longer with some helpful insight from the Telerik team.

Kind regards,

Sean Anderson

UI for ASP.NET AJAX in ASP.NET MVC

answered on 20 Jun 2011

2 answers

84 views

Loading Panel to match resized control

I am using the RadAjaxManager / RadAjaxProxyManager to update a datalist. I have added a MinDisplayTime so the user has time to see the notification of the update.

However the RadAjaxLoadingPanel's height is set to the initial size / height of the datalist so there is an ugly transition as the datalist grows or shrinks underneath the LoadingPanel.

What is the best way to avoid this transition? Can the LoadingPanel match the height of the element being updated?

Or is there a way to use something like jQuery to animate the transition of both elements?

Ajax

answered on 20 Jun 2011