Questions on UI for ASP.NET AJAX Forum

4 answers

141 views

Is there a no-code method to open a RadWindow?

One of the things I like about the RadToolTip is its extremely simple to work with. No code is required, all it takes is setting a the TargetControlID and a few other properties:

<telerik:RadToolTip ID="StudentLastNameRadToolTip" TargetControlID="FullNameLabel" RelativeTo="Element" runat="server" HideEvent="ManualClose" ShowEvent="OnClick" Modal="True" ShowDelay="0">

Is there an equivalent way of using the RadWindow?

Window

answered on 06 Mar 2013

1 answer

188 views

Sliding pane adding margin to parent div

Hi,

I have a splitter, slidingzone and slidingpane combination implemented.
The first time client loads the site in browser and then the page on which this slider is placed, the sliding pane is not overlapping the div, rather its pushing it on the right, adding margin to it. At this time it flickers once and then disappears but the div doesnt comes back to original place.

If a single post back is done to the page it never happens again.
Please see the attached screenshots for the detailed scenario.

The code I am using for splitter and slidingzone is as follows:

<telerik:radsplitter id="RadSplitter1" runat="server" orientation="Vertical" height="230px"

borderstyle="None" borderwidth="0">

<telerik:RadPane ID="RadPane1" runat="server" Height="100%" BorderStyle="None" BorderWidth="0">

<telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Height="100%" BorderStyle="None" ClickToOpen="true"

BorderWidth="0" Width="27px" >

<telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Width="460px" Title="Add Stakeholder"

EnableDock="false" Height="240px" EnableResize="false" MinHeight="200" MinWidth="350">

<div id="dvStakeholder">

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<td colspan="2" style="color: White;">

Add Stakeholder

</td>

</tr>

<tr>

<td colspan="2" style="height: 10px;">

</td>

</tr>

<tr>

<td class="innerTd">

Stakeholder Type

</td>

<td>

<telerik:RadComboBox ID="rcbStakeholderType" runat="server" AllowCustomText="True"

Width="265px" OnClientSelectedIndexChanged="HideShowByStakeholderType" OnClientLoad="HideShowByStakeholderType"

DataSourceID="LinqDataSource3" DataTextField="Type_Description" DataValueField="Type_ID">

</telerik:RadComboBox>

<asp:LinqDataSource ID="LinqDataSource3" runat="server" ContextTypeName="CategoryTypeDataContext"

EntityTypeName="" Select="new (Type_ID, Type_Description, Category_ID, Category, Company_ID)"

TableName="View_CategoryType_Lists" Where="Company_ID = @Company_ID AND Category_ID = @Category_ID">

<WhereParameters>

<asp:Parameter Name="Company_ID" />

<asp:Parameter Name="Category_ID" />

</WhereParameters>

</asp:LinqDataSource>

</td>

</tr>

<tr id="trFirstName">

<td class="innerTd">

First Name

</td>

<td>

<telerik:RadTextBox ID="txtFirstName" runat="server" MaxLength="50" Width="260px" EmptyMessage="Maximum 50 Characters" EmptyMessageStyle-Font-Italic="true"></telerik:RadTextBox>

</td>

</tr>

<tr id="trLastName">

<td class="innerTd">

Last Name

</td>

<td>

<telerik:RadTextBox ID="txtLastName" runat="server" MaxLength="50" Width="260px" EmptyMessage="Maximum 50 Characters" EmptyMessageStyle-Font-Italic="true"></telerik:RadTextBox>

</td>

</tr>

<tr id="trName" style="display: none;">

<td class="innerTd">

Name

</td>

<td>

<telerik:RadTextBox ID="txtName" runat="server" Width="260px" MaxLength="50" EmptyMessage="Maximum 50 Characters" EmptyMessageStyle-Font-Italic="true">

</telerik:RadTextBox>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr id="trGroupCategory" style="display: none;">

<td class="innerTd">

Group Category

</td>

<td>

<telerik:RadComboBox ID="rcbGroupCategory" runat="server" AllowCustomText="True"

Width="265px" Height="160px">

</telerik:RadComboBox>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td class="innerTd">

Parent

</td>

<td>

<telerik:RadComboBox ID="rcbParentStakeholder" runat="server" DataMember="DefaultView"

CloseDropDownOnBlur="true" DataTextField="StakeholderRelationship" DataValueField="Stakeholder_ID"

Height="160px" Width="265px" EmptyMessage="Enter Stakeholder Name and Press Enter" AllowCustomText="true"

DropDownWidth="265px" OnClientKeyPressing="OnKeyPressGetParentStakeholder"

OnClientDropDownClosing="onClientClosing" OnClientBlur="onClientBlur" LoadingMessage="Loading.." MarkFirstMatch="true" >

</telerik:RadComboBox>

<%--<asp:LinqDataSource ID="LinqDataSource2" runat="server" ContextTypeName="StakeholderDataContext"

EntityTypeName="" Select="new (StakeholderRelationship, Stakeholder_ID)" TableName="View_Stakeholder_Search_Lists">

</asp:LinqDataSource>--%>

</td>

</tr>

<tr>

<td class="innerTd">

Title

</td>

<td>

<telerik:RadTextBox ID="txtTitle" runat="server" Width="260px" MaxLength="200" EmptyMessage="Maximum 200 Characters" EmptyMessageStyle-Font-Italic="true"></telerik:RadTextBox>

</td>

</tr>

<tr>

<td colspan="2">

</td>

</tr>

<tr>

<td colspan="2" align="right">

<asp:Button ID="btnSaveStakeholder" runat="server" Text="Save" OnClientClick="CollapsePane();" />

<asp:Button ID="btnCancelStakeholder" runat="server" Text="Cancel" OnClientClick="CollapsePane();" />

</td>

</tr>

</table>

</div>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

<telerik:RadPane ID="Radpane2" runat="server" Width="96%" Height="100%" BorderStyle="None" BorderWidth="0">

</telerik:RadPane>

</telerik:radsplitter>

Splitter

answered on 06 Mar 2013

1 answer

92 views

AutoScroll with ScreenBoundaryDetection

I have an issue with the RadMenu with EnableScreenBoundaryDetection="true" EnableAutoScroll="true"

A sub-submenu expanded near the bottom of the page will keep its original Y position, shrink and AutoScroll, but why won't it shift up to fit on the screen.

When AutoScroll is turned off, the menu does shift up to fit on the screen.

Is there an attribute I'm missing to get these to work together with BoundaryDetection implemented before AutoScroll.

I would like it to shift up so that as much of the sub-submenu can be visible and then autoscroll the remaining.
Can this be manually done through the OnClientItemShowing event?

Thanks

Menu

answered on 06 Mar 2013

1 answer

235 views

Update Control on Parent Page

Scenario:
Master page with no AjaxManager
Content page containing an AjaxManager and RadMultiPage control working with a RadTabStrip control
User control with an empty RadAjaxManagerProxy

User clicks a button in the user control, some server side code executes and then an event call is bubbled up to the content page. This event updates a label on the content page. I can see the code executing properly but the label doesn't get updated. Tried various AjaxManager settings with no luck.

Condensed Content page aspx:

<%@ Page Language="VB" MasterPageFile="M_Master.master" AutoEventWireup="false" CodeFile="dashboard.aspx.vb" Inherits="dashboard" title="Data Entry" %>

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

<%@ Register Src="tabpages/dashboardMethodology.ascx" TagName="Methodology" TagPrefix="uc1" %>

<%@ Register Src="tabpages/dashboardSubmit.ascx" TagName="Submit" TagPrefix="uc1" %>

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

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="ddlObligationYear">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="lblYear" />

<telerik:AjaxUpdatedControl ControlID="ddlPeriods" />

<telerik:AjaxUpdatedControl ControlID="lblEntry" />

<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="ddlPeriods">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="lblYear" />

<telerik:AjaxUpdatedControl ControlID="lblEntry" />

<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="pvSubmit">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="lblEntry" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:radformdecorator id="FormDecorator1" runat="server" DecoratedControls="Buttons,Checkboxes,Label"></telerik:radformdecorator>

<asp:Panel runat="server" ID="pnDashboard" CssClass="panel" Width="580pt">

<div id="body">

<telerik:RadWindowManager runat="server" ID="radWindowMngr"></telerik:RadWindowManager>

<div class="subheader"><asp:Literal runat="server" ID="lblYear" Text="" /></div><br />

<div id="reportingHeader">

<table width="100%">

<tr>

<td width="20%"><asp:Label ID="Label1" runat="server" Text="Reporting Year:"></asp:Label></td>

<td width="15%"><asp:DropDownList ID="ddlObligationYear" runat="server" AutoPostBack="True" TabIndex="100"></asp:DropDownList></td>

<td width="10%"><asp:Label ID="Label2" runat="server" Text="Period:"></asp:Label></td>

<td width="15%"><asp:DropDownList ID="ddlPeriods" runat="server" AutoPostBack="True" TabIndex="100" Width="120px"></asp:DropDownList> </td>

<td width="40%"><asp:Label ID="lblEntry" runat="server" CssClass="rjtext" Font-Bold="True" Width="360px"></asp:Label></td>

</tr>

</table>

<br />

</div><br />

<asp:Panel runat="server" ID="pnTabs" Width="100%">

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" SelectedIndex="0">

<Tabs>

<telerik:RadTab runat="server" Text="Report Methodology" Value="Methodology" PageViewID="pvMethodology" />

<telerik:RadTab runat="server" Text="Submit Report" Value="Submit" PageViewID="pvSubmit" />

</Tabs>

</telerik:RadTabStrip>

<br />

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" RenderSelectedPageOnly="true">

<telerik:RadPageView ID="pvMethodology" runat="server">

<uc1:Methodology runat="server" ID="tpMethodology" />

</telerik:RadPageView>

<telerik:RadPageView ID="pvSubmit" runat="server">

<uc1:Submit runat="server" ID="tpSubmit" />

</telerik:RadPageView>

</telerik:RadMultiPage>

</asp:Panel>

</div>

</asp:Panel>

</asp:Content>

Condensed Content page vb:

Imports Telerik.Web.UI

Imports System.Data

Imports System.Math

Imports BusinessObjects

Partial Class dashboard

Inherits PageManager

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

checkSession()

dashboardSubmit1 = tpSubmit

AddHandler dashboardSubmit1.refreshHeaders, AddressOf Me.refreshHeaders

If Not IsPostBack Then

populateYearsDropdown()

populatePeriodDropdownlist(ddlPeriods, CurrentSession.submission_year)

getFirstSubmissionPeriod()

retrieveReportTab()

setHeaders()

Else

CType(Me.FindControl("tp" + Right(RadTabStrip1.FindTabByValue(Session("clickedTab")).PageViewID, Len(RadTabStrip1.FindTabByValue(Session("clickedTab")).PageViewID) - 2)), tabpage).reloadTab()

ids_yearinfo = Session("ids_yearinfo")

lblEntry.Text = Session("PeriodSubmitted")

End If

End Sub

Protected Sub setHeaders()

'Set header text

lblEntry.Text = Session("PeriodSubmitted")

If Session("PeriodSubmitted") = "NOT SUBMITTED" Then

lblEntry.CssClass = "notsubtext"

Else

lblEntry.CssClass = "subtext"

End If

End Sub

Sub refreshHeaders(sender As Object, e As System.EventArgs)

populateYearsDropdown()

populatePeriodDropdownlist(ddlPeriods, CurrentSession.submission_year)

setHeaders()

End Sub

End Class

User control vb:

Imports Telerik.Web.UI

Imports System.Data

Imports System.Math

Imports BusinessObjects

Partial Class dashboardSubmit

Inherits tabpage

Public Event refreshHeaders As EventHandler

Protected Sub btnSubmit_Click(sender As Object, e As System.EventArgs) Handles btnSubmit.Click

Dim Report As New Reports

Session("PeriodSubmitted") = Report.submitReport(Session("nReportID"), CurrentSession.login_id)

CurrentSession.read_only = True

retrieveDeclationInfo()

RaiseEvent refreshHeaders(Me, e)

End Sub

End Class

Ajax

answered on 06 Mar 2013

4 answers

118 views

changing the scrollheight dynamically...

I want change the scroll height from clientside. I have seen your examples But my scenario is is different. I have radgrid on popup window with addnotes tab. By defalut grid scroll height is 220px. when i click addnote button i want decrease the scrollheight size to 120px. How to do it. I tried your code but i am getting error like "Microsoft JScript runtime error: 'GridDataDiv' is null or not an object". Here is my code....

function showAddNotes(sender, args) {

document.getElementById('trAddNewNotes').style.display = "block";

document.getElementById('ctl00_PagePlaceholder_winBlkTskAssign_C_tabTskAssign_TabNotes_trNotes').style.display = "none";

var scrollArea = sender.GridDataDiv;

var parent = $get("div1");

var gridHeader = sender.GridHeaderDiv;

scrollArea.style.height = "120px";

return false;

}

<div id="div1" style="width: 100%; overflow: auto; overflow-x: hidden">

<table class="customFont" width="98.5%">

<tr id="tr1" runat="server">

<td align="right">

<asp:Button Text="Add Note" runat="server" ID="Button1" OnClientClick="return showAddNotes()" />

</td>

</tr>

<tr style="display: none; position: relative" id="tr2">

<td>

<table style="background-color: #F5F5E9" cellspacing="2">

<tr>

<td align="left" style="width: 70px;">

Note Type

</td>

<td align="left" style="width: 82px; height: 24px;">

<telerik:RadComboBox ID="RadComboBox1" EmptyMessage="Please select" runat="server"

MarkFirstMatch="True" CollapseDelay="0" Width="115px" DropDownWidth="100px" AllowCustomText="True">

<CollapseAnimation Duration="0" />

</telerik:RadComboBox>

<asp:RequiredFieldValidator InitialValue="" ValidationGroup="Notes" ID="RequiredFieldValidator1"

runat="server" ControlToValidate="ddlNoteType" ClientValidationFunction="ddlNt"

Display="None" ErrorMessage="Please select Note Type."></asp:RequiredFieldValidator>

<cc2:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" TargetControlID="custValCou"

runat="server" Enabled="True">

</cc2:ValidatorCalloutExtender>

</td>

<td>

</td>

</tr>

<tr>

<td align="left" valign="middle" style="width: 70px;">

Notes

</td>

<td align="left">

<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Rows="3" Width="570px"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" ValidationGroup="Notes"

ControlToValidate="txtNoteDesc" Display="None" runat="server" ErrorMessage="Please enter Notes."></asp:RequiredFieldValidator>

<cc2:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" TargetControlID="valCliID"

runat="server">

</cc2:ValidatorCalloutExtender>

</td>

<td valign="top">

<div style="padding-bottom: 4px;">

<asp:Button ID="Button2" Width="60px" OnClick="btnAddNote_Click" ValidationGroup="Notes"

runat="server" Text="Add" /></div>

<asp:Button ID="Button3" Width="60px" runat="server" OnClientClick="return hideAddNotes()"

Text="Cancel" />

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<telerik:RadGrid ID="RadGrid1" GridLines="None" AllowSorting="false" Width="100%"

runat="server" AutoGenerateColumns="false" ShowFooter="false" ShowGroupPanel="false"

ShowStatusBar="false" EnableEmbeddedSkins="false" HeaderStyle-HorizontalAlign="Left"

ItemStyle-HorizontalAlign="Left" Font-Size="7.5pt" BorderColor="White" BorderWidth="0"

BorderStyle="None">

<HeaderStyle BackColor="#004000" ForeColor="White" Font-Size="7.5pt" Font-Bold="True"

HorizontalAlign="Left" BorderColor="White" />

<ItemStyle BorderStyle="None" />

<AlternatingItemStyle BorderStyle="None" />

<AlternatingItemStyle BackColor="#F5F5E9" />

<MasterTableView>

<Columns>

<telerik:GridBoundColumn HeaderText="#" DataField="rowNum" HeaderStyle-Width="12px"

ItemStyle-Width="12px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn ReadOnly="true" HeaderStyle-Width="413px" ItemStyle-Width="413px"

UniqueName="Notes" HeaderText="Notes" DataField="Notes">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Type Description" HeaderStyle-Width="57px" ItemStyle-Width="57px"

HeaderText="Note Type" DataField="Type Description" ReadOnly="true">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Created By">

<ItemTemplate>

<asp:Label ID="lblCreatedBy" runat="server" Width="78px" Text='<%# Bind("CreatedBy") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="CreationDate" HeaderText="Created Date" DataField="CreationDate"

ReadOnly="true">

</telerik:GridBoundColumn>

</Columns>

<NoRecordsTemplate>

No notes are avaliable</NoRecordsTemplate>

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="220px" SaveScrollPosition="True">

</Scrolling>

</ClientSettings>

</telerik:RadGrid>

</td>

</tr>

</table>

</div>

Grid

answered on 06 Mar 2013

1 answer

472 views

RadEditor StripFormattingOptions

Hi,

While pasting from Outlook or MS Word to the editor, it was adding extra spaces between lines.
I used AllExceptNewLines to avoid the extra spaces.
<property name="StripFormattingOptions">AllExceptNewLines</property>
But now, I am not able to see the bold letters and Hyperlinks.
What combinations should I use?

Input

answered on 06 Mar 2013

1 answer

78 views

Simple Scriptmanager jQuery question

...pretty sure the answer to this is yes, but have to ask

The RadScriptManager is what sends downt he $telerik.$ embedded jquery right...so regardless of a radcontrol NEEDING it (assume one doesn't), if the scriptmanager is there, that's being downloaded...

Correct?

ScriptManager and StyleSheetManager

answered on 06 Mar 2013

10 answers

183 views

Adding another button

Hello - I am currently using the SocialShare control for an online product gallery. I would like to add a button for pinning the current page to Pinterest, as many of our customers and potential customers are using that site now.The code is provided at the bottom of this page:
http://pinterest.com/about/goodies/

How would you recommend integrating this into the SocialShare control? I could add this separately along side the SocialShare control, but I'd like to stay to minimal code and keep the appearance as consistent as possible.

SocialShare

answered on 06 Mar 2013

5 answers

134 views

Error Loading RadChart when i click logout button

hi,
i am getting ERROR LOADING RADCHART IMAGE? when i click my logout button in my live chart.
<telerik:RadChart ID="RadChart1" runat='server' UseSession="false" CreateImageMap="False"
ChartImageFormat="png" Height="500px" Width="800px" AutoLayout="True" TempImagesFolder="~/TempImg" >
And
Protected Sub lgoutlbl_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lgoutlbl.Click
RadChart1.HttpHandlerUrl = ResolveUrl("ChartImage.axd")
RadChart1.Series.ClearDataBoundState()
RadChart1.Clear()
End Sub
And
<httpHandlers>
<add path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler, Telerik.Web.UI, Culture=neutral, PublicKeyToken=31BF3856AD364E35, Version=3.5.0.0" verb="*" validate="false"/>
</httpHandlers>
<system.webServer>
<handlers>
<add name="ChartImageHandler" verb="*" preCondition="integratedMode" path="ChartImage.axd" type="Telerik.Web.UI.ChartHttpHandler"/>
</handlers>
</system.webServer>

Chart (Obsolete)

answered on 06 Mar 2013

5 answers

76 views

How to scroll to select whole day's time slot?

Hi,

On the schedule week view, if I want to select whole day's time slot to create schedule event, how could I do the selection? Could I do the selection just like in Outlook, click left mouse button on the top time slot and drag to the end time slot?

Scheduler

answered on 06 Mar 2013