Questions on UI for ASP.NET AJAX Forum

1 answer

96 views

add/remove EditorTools and EditorToolGroup on the client side

Hi there,
I found the following nice article explaining how tools can be dynamically added/removed from the editor:
http://www.telerik.com/help/aspnet-ajax/removingtoolbarbuttons.html

I prefer to do this on the client side since I would like to modify the tools based on the clicked html tag.

Is it possible? If not, I think my only option would be calling the server side code using Ajax.

Thanks,
Reza

Editor

answered on 11 Mar 2011

3 answers

303 views

Using telerik skin on generic table

Hello,
I'm trying to build user base theme into my application. I had no problem finding how to let the user choose a theme from the built-in themes collection, but I can't find a way to apply telerik's theme to generic table. I look into the forum and found similar questions, but no satisfying answer. Most post points to articles on how to modify built-in theme and how to create your own, but I'm looking on how to do the exact opposite, I want to use the built-in theme. There was one answer that seem to go into the right direction, but I guess I'm missing something... The example is:

<div class="RadGrid RadGrid_Default" style="width:400px">

<table class="MasterTable_Default" cellspacing="0" style="width:100%">

<tr>

<th class="GridHeader_Default">header cell</th>

</tr>

<tr class="GridRow_Default">

<td>data cell</td>

</tr>

<tr class="GridAltRow_Default">

<td>data cell</td>

</tr>

</table>

</div>

http://www.telerik.com/community/forums/aspnet-ajax/grid/applying-skin-to-generic-table-tags.aspx

So my question is how to apply a telerik built-in theme, let say Forest, at run-time to non telerik control such as generic and asp table?
Thanks for your help,
Louis-Philippe

General Discussions

answered on 11 Mar 2011

5 answers

334 views

Grid Edit Form Alignment

I have two columns one a bound column and one a template column. The alignment of the template data column is left of the bound column

telerik:GridBoundColumn DataField="First Name"

FilterControlAltText="Filter First Name column" HeaderText="First Name"

SortExpression="First Name" UniqueName="First Name">

<ItemStyle HorizontalAlign="Left" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="First Name" UniqueName="First Name">

<EditItemTemplate>

<telerik:RadTextBox id="tbFirstName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "First Name") %>'></telerik:RadTextBox>

<asp:RequiredFieldValidator id="RequiredFieldValidator1" runat="server" ErrorMessage="(Required)"

ControlToValidate= "tbFirstName" ForeColor="Red"> </asp:RequiredFieldValidator>

</EditItemTemplate>

<ItemStyle HorizontalAlign="Left" />

<ItemTemplate>

<asp:Label ID="dtFirst_Name" runat="server" Text='<%# Eval("First Name", "{0}") %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

How can I make these line up?
Thanks

Grid

answered on 11 Mar 2011

1 answer

164 views

Getting Toolbar position of RadEditor

Hi,

I'd like to get hold of the toolbar position of a RadEditor when the Mode is set to:

            re.ToolbarMode = EditorToolbarMode.PageTop;

I've added a custom save button to the toolbar and I'd like to flash a confirmation message just below the save button in the toolbar.
Currently, when the user scrolls, the toolbar moves to ensure that it is always at the top of the page. (I assume that this is re-positioned based on the scroll event).

Currently, I have code that looks like this but GetTopLeftPosition(el) always returns zero.
My question is how do I get hold of the new position of the toolbar (after scroll) so that I can display a message just below the save button?

        function OnClientCommandExecuting(editor, args)
        {
            var name = args.get_name();

            if (name == "Save")
            {
                var tool = args.get_tool();
                var attributes = tool.get_attributes();

                SaveCommentary(editor,
                               attributes["templateid"],
                               attributes["controlid"],
                               attributes["commentaryid"],
                               attributes["param1"],
                               attributes["param2"],
                               attributes["param3"]);

                args.set_cancel(true);
            }
        }

        function setOpacity(id, level)
        {
            var element = document.getElementById(id);
            element.style.display = 'inline';
            element.style.zoom = 1;
            element.style.opacity = level;
            element.style.MozOpacity = level;
            element.style.KhtmlOpacity = level;
            element.style.filter = "alpha(opacity=" + (level * 100) + ");";
        }

        function fadeIn(id, steps, duration, interval, fadeOutSteps, fadeOutDuration)
        {
            var fadeInComplete;
            for (i = 0; i <= 1; i += (1 / steps))
            {
              setTimeout("setOpacity('" + id + "', " + i + ")", i * duration);
              fadeInComplete = i * duration;
            }

            // Set the timeout to start after the fade in time and the interval to display the
            // message on the screen have both completed
            setTimeout("fadeOut('" + id + "', " + fadeOutSteps + ", " + fadeOutDuration + ")", fadeInComplete + interval);
        }

        function fadeOut(id, steps, duration)
        {
            var fadeOutComplete;

            for (i = 0; i <= 1; i += (1 / steps))
            {
              setTimeout("setOpacity('" + id + "', " + (1 - i) + ")", i * duration);
              fadeOutComplete = i * duration;
            }

            // Completely hide the displayed message after the fade effect is complete
            setTimeout("hide('" + id + "')", fadeOutComplete);
        }

        function hide(id)
        {
            document.getElementById(id).style.display = 'none';
        }

        function SaveCommentary(editor,reportID,controlID,commID,param1,param2,param3)
        {
            debugger;

            var result;
            var str = editor.get_element().id;

            var text = editor.get_html();
            var firstStripText = text.replace("<BODY contentEditable=true>","");
            var secondStripText = firstStripText.replace("</BODY>","");

            if(param1==undefined)
            {
                param1 = '';
            }

            if(param2==undefined)
            {
                param2 = '';
            }

            if(param3==undefined)
            {
                param3 = '';
            }

            result = Winston.SaveWithAjax(reportID, controlID, commID, param1, param2, param3, secondStripText);

            if (result.error == null)
            {
                var statusLabelID = "ctl00_commentaryMessage";
                var statusLabelText = document.getElementById(statusLabelID);

                var date = new Date();
                var d = date.getDate();
                var day = (d < 10) ? '0' + d : d;
                var m = date.getMonth() + 1;
                var month = (m < 10) ? '0' + m : m;
                var yy = date.getYear();
                var year = (yy < 1000) ? yy + 1900 : yy;
                var hour = date.getHours();
                var min = date.getMinutes();

                if (min < 10)
                {
                  min = "0" + min;
                }

                var window = editor.get_toolAdapter().get_window();

                var oPos = GetTopLeftPosition(window);

                // Position the label just below the save button
                statusLabelText.style.left = oPos.x;
                statusLabelText.style.top = oPos.y;

                statusLabelText.innerText = "Commentary Text Last saved at " + day + "-" + month + "-" + year + " " + hour + ":" + min
                fadeIn(statusLabelID, 20, 1000, 1000, 20, 200);
            }
            else
            {
                statusLabelText.innerText = "Failed to save commentary text. Please contact your system administrator.";
                fadeIn(statusLabelID, 20, 1000, 1000, 20, 200);
            }
         }
         function GetTopLeftPosition(el)
         {
              var left = 0;
              var top = 0;

              while (el.offsetParent)
              {
                  left += el.offsetLeft;
                  top += el.offsetTop;
                  elel = el.offsetParent;
              }

              if (el.x) left = el.x;
              if (el.y) top = el.y;
              var oPos = new Object();
              oPos.x = left;
              oPos.y = top;
              return oPos;
         }

Editor

answered on 11 Mar 2011

3 answers

117 views

Can't delete reccurrence exception

Hello,

Im trying to delete a recurrence exception but I keep getting this error:

Cannot locate the parent of appointment with ID = '1232'. Ensure that the parent appointment with ID = '1231' exists and is loaded.

This appointment is there and loaded as you can see in the added picture. I added the appointment id's between hooks as you can see.

Scheduler

answered on 11 Mar 2011

1 answer

191 views

Grid with timepicker

Hello,

I have an RadGrid with a DateTimePicker and a RadTimePicker in seperate GridTemplateColumn, so they are open for editing. When I do a postback (Save), I validates the DateTimePicker and RadTimePicker for each row to be sure they have valid data. If they don't have valid data then I set one of the labels to visible. When the page loads again I get a JavaScript error in Telerik.Web.UI.WebResource.axd.

I have no Ajax on the grid, just a standard grid with EditMode="InPlace"

The error:
Line: 16937
Error: 'this.get_timeView()' is null or not an object

The line in telerik code:
this._timePopupContainerID=this.get_timeView().get_id()+"_wrapper";

<telerik:GridTemplateColumn HeaderText="Date" UniqueName="Date">

<ItemTemplate>

<telerik:RadDatePicker ID="rdpDate" runat="server" DatePopupButton-Visible="true" Width="100px">

<DateInput ID="DateInputDate" runat="server" InvalidStyleDuration="100">

<ClientEvents OnError="OnRadDatePickerError" />

</DateInput>

<DatePopupButton ToolTip="Select date" />

</telerik:RadDatePicker>

<asp:CustomValidator ID="cvDate" runat="server" ErrorMessage="<br />Invalid date"

ValidationGroup="Gameplan" SetFocusOnError="true" Display="Dynamic" ControlToValidate="rdpDate"

ClientValidationFunction="ValidateRadDatePickers"></asp:CustomValidator>

<asp:RequiredFieldValidator ID="rfvDate" runat="server" ControlToValidate="rdpDate"

Display="Dynamic" ErrorMessage="<br />Mandatory" ValidationGroup="Gameplan"

SetFocusOnError="true"></asp:RequiredFieldValidator>

<asp:Label ID="lblMatchDate" runat="server" ForeColor="Red" Visible="False"><br />Date error</asp:Label><asp:Label

ID="lblLastDateError" runat="server" ForeColor="Red" Visible="False"><br />Last date error</asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Tidspunkt" UniqueName="Time">

<ItemTemplate>

<telerik:RadTimePicker ID="rtpTime" runat="server" TimePopupButton-Visible="true" Width="65px">

<DateInput ID="DateInputTime" runat="server" InvalidStyleDuration="100">

<ClientEvents OnError="OnRadTimePickerError" />

</DateInput>

</telerik:RadTimePicker>

<asp:CustomValidator ID="cvTime" runat="server" ErrorMessage="<br />Wrong format"

ValidationGroup="Gameplan" ControlToValidate="rtpTime" ClientValidationFunction="ValidateRadTimePickers"

SetFocusOnError="true" Display="Dynamic"></asp:CustomValidator>

</ItemTemplate>

</telerik:GridTemplateColumn>

Can you tell what is wrong?

Thanks

Grid

answered on 11 Mar 2011

3 answers

265 views

[Solved] Header and Item columns not aligning.

I am using the gridTemplateColumn to solve the Multiple header row issue. While can accomplish the multiple Header rows, I am not able to get the Header and Item rows to align. Below is the markup of the aspx page.

_________________________________________________________________________________________________________

<%@ Page Title="" Language="C#" MasterPageFile="~/Default.Master" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="APSFrameWork.test" %>

<%@ MasterType VirtualPath="~/Default.Master" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

<%--<meta http-equiv="X-UA-Compatible" content="IE=8" /> --%>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

<style type="text/css" >

.MasterTable_Office2007 th

{

padding: 0 4px 0 4px;

}

.MasterTable_Office2007 td

{

padding: 0 4px 0 4px;

}

</style>

</asp:Content>

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

<telerik:RadScriptManager ID="ScriptManager1" runat="server"

EnableTheming="True">

</telerik:RadScriptManager>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

<br />

</p>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

var popUp;

function PopUpShowing(sender, eventArgs)

{

popUp = eventArgs.get_popUp();

var gridWidth = sender.get_element().offsetWidth;

var gridHeight = sender.get_element().offsetHeight;

var popUpWidth = popUp.style.width.substr(0,popUp.style.width.indexOf("px"));

var popUpHeight = popUp.style.height.substr(0,popUp.style.height.indexOf("px"));

popUp.style.left = ((gridWidth - popUpWidth)/2 + sender.get_element().offsetLeft).toString() + "px";

popUp.style.top = ((gridHeight - popUpHeight)/2 + sender.get_element().offsetTop).toString() + "px";

}

</script>

</telerik:RadCodeBlock>

<telerik:RadGrid ID="gvForecast" runat="server"

AutoGenerateEditColumn="True"

oneditcommand="gvForecast_EditCommand"

oncancelcommand="gvForecast_CancelCommand"

onitemdatabound="gvForecast_ItemDataBound" Width="100%"

HorizontalAlign="Center" onneeddatasource="gvForecast_NeedDataSource"

Skin="Office2007" GridLines="Both"

>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

<ClientSettings EnableRowHoverStyle="true">

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

<ClientEvents OnPopUpShowing="PopUpShowing" />

<Selecting AllowRowSelect="true" />

</ClientSettings>

<MasterTableView autogeneratecolumns="false" ItemStyle-VerticalAlign="Top" CommandItemDisplay="Top" EditMode="PopUp" Width="100%">

<ItemStyle VerticalAlign="Top"></ItemStyle>

<CommandItemTemplate>

</CommandItemTemplate>

<NoRecordsTemplate>

No Line items Exit for this Unit

</NoRecordsTemplate>

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

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn UniqueName="venu">

<HeaderTemplate>

<table id="tbVenu" width="100%" border="0">

<col width="100px" /><col width="200px" /><col width="40px" />

<col width="40px" align="center" /><col width="40px" align="center" /><col width="40px" align="center" />

<col width="40px" align="center" /><col width="40px" align="center" /><col width="80px"/>

<tr>

<td colspan="3" align="center" bgcolor="#ccccff">WBS Details</td>

<td colspan="1" align="center" bgcolor="#ffff99">Act</td>

<td colspan ="11" align="center" bgcolor="#00cc00">Forecast</td>

<td colspan="3" align="center" bgcolor="#ccffff">Other Details</td>

</tr>

<tr>

<td>WBS</td><td>Description</td><td>Cost Element</td>

<td>Jan</td><td>Feb</td><td>Mar</td><td>Apr</td><td>May</td><td>Jun</td>

<td>Jul</td><td>Aug</td><td>Sep</td><td>Oct</td><td>Nov</td><td>Dec</td>

<td>YTD</td><td>To Go Forecast</td><td>Total Forecast</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<table id="tdItem" width="100%" border="0">

<col width="100px" /><col width="200px" /><col width="40px" />

<col width="40px" align="center" /><col width="40px" align="center" /><col width="40px" align="center" />

<col width="40px" align="center" /><col width="40px" align="center" /><col width="80px"/>

<tr>

<td><%# DataBinder.Eval(Container.DataItem, "WBS") %></td>

<TD><%# DataBinder.Eval(Container.DataItem, "Description") %></TD>

<TD><%# DataBinder.Eval(Container.DataItem, "CE") %></TD>

<TD align="center"><%# FormatAmount(Eval("Jan").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Feb").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Mar").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Apr").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("May").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Jun").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Jul").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Aug").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Sep").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Oct").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Nov").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("Dec").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("YTD").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("ToGoForecast").ToString()) %></TD>

<TD align="center"><%# FormatAmount(Eval("TotalForecast").ToString()) %></TD>

</tr>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<%--<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>--%>

<EditFormSettings CaptionFormatString="Edit WBS: {0}" EditFormType="Template" CaptionDataField="Description" PopUpSettings-Height="200px" PopUpSettings-Width="1300px" PopUpSettings-Modal="true">

<FormTemplate>

<table id="table1" width="1200px" border="0" align="center" style="table-layout:fixed" >

<col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px"><col width="100px">

<tr><td colspan="12"> </td></tr>

<tr><td align="right">Cost Element</td><td>

<asp:Label ID="Label1" runat="server" Text='<%# Bind("CE") %>'></asp:Label></td><td align="right">WBS Description</td><td colspan="9">

<telerik:RadTextBox ID="WBSDesc" runat="server" Text='<%# Bind("Description") %>' Width="80%" ReadOnly="true">

</telerik:RadTextBox></td></tr>

<tr><td>Jan</td><td>Feb</td><td>Mar</td><td>Apr</td><td>May</td><td>Jun</td><td>Jul</td><td>Aug</td><td>Sep</td><td>Oct</td><td>Nov</td><td>Dec</td></tr>

<tr>

<td><telerik:RadNumericTextBox Type="Number" ReadOnly="true" BackColor="LightGray" ID="txtJan" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Jan") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtFeb" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Feb") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtMar" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Mar") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtApr" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Apr") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtMay" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("May") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtJun" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Jun") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtJul" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Jul") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtAug" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Aug") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtSep" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Sep") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtOct" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Oct") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtNov" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Nov") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

<td><telerik:RadNumericTextBox Type="Number" ID="txtDec" runat="server" MaxLength="7" Width="50px" Text='<%# Bind("Dec") %>'><NumberFormat DecimalDigits=0 /></telerik:RadNumericTextBox></td>

</tr>

<tr><td colspan="12"><font color="red" ><b>*</b> Greyed out textboxes are reflecting the actuals. </font></td></tr>

<tr><td colspan="5" align="right">

<telerik:RadButton ID="btnUpdate" runat="server" Text="Update Forecast" OnClick="btnUpdate_Click" />

</td>

<td colspan="2"> </td>

<td colspan="5"><telerik:RadButton ID="btnCancel" runat="server" Text="Cancel" CausesValidation="False" OnClick="btnCancel_Click" />

</td></tr>

</table>

</FormTemplate>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

<PopUpSettings Modal="True" Height="200px" Width="1300px"></PopUpSettings>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False"></FilterMenu>

</telerik:RadGrid><p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

</asp:Content>

Grid

answered on 11 Mar 2011

3 answers

63 views

RadMenu causes links to be blocked in areas where flyout menus will expand to

This issue seems to only pertain to IE7 and IE8.

I have a vertical RadMenu on my site that is 3 levels deep and uses the flyout on mouseover. When the menu is totally collapsed, any link that is to the right of the menu and within the bounds of where the submenus will expand to are unclickable. This is some kind of z-index issue I guess. I've tried to change the z-index of the menu and items on the page, but I haven't had any luck yet. Is there a different trick to this or do I need to keep messing with the z-index?

Menu

answered on 11 Mar 2011

1 answer

57 views

LoadOnDemand is not initiated from combo dropdown opne if the combo has already any item present.

We have a load-on-Demand combo which is working as expected for all the scenario except this one.

For a combo with no items in it, drop down opens and it calls ItemRequestedHandler which is fine. Now if I click on the combo again, this time drop down opens but ItemRequestedHandler is not called.

on the contrary if we write any text using keyboard, while the focus is on this combo, ItemRequestHandler is always called ( for a blank combo as well as for a combo which already have an item)

We want the same functionality i.e calling ItemRequestHandler even if we mouse click to open the drop down for a combo which already has item present in it

ComboBox

answered on 11 Mar 2011

3 answers

89 views

Problem with Sending AJAX request using Telerik RadAJAX manager

Hi,

I am using Telerik RadAJAX manager to send AJAX request.I have Telerik ComboBox ,Treeview and Chart controls on the page.When I click on the any of treenode it has send AJAX request and relaod chart and Combobox. But When I click on tree node at the first time it is sending an AJAX request. and When I click on the treenode next time it send normal Post back request and entire page getting refreshed.It is happening alternatively one time AJAX request and one time Normal Post back.

Can any one suggest me solution for this?

Ajax

answered on 11 Mar 2011