Questions on UI for ASP.NET AJAX Forum

1 answer

872 views

Proper way to upgrade older telerik version

Hi,
   I have been away from telerik for a while and now i am back. I am wondering the proper way to handle the following:
1 - On my current development machines, I am currently on:
     Telerik Reporting 3.0.9.430
     Telerik.Web.Design dll 2009.2.826.35
     I am trying to upgrade to the most current version of Rad Ajax and Reporting. Do i just download and install RadControlsForAspNetAjaxControlPanal_2012_2_607.exe and Telerik_Reporting_Control_Panel_Q2_2012_v6_1_12_611.exe over these?
2 - Where does RadControls_Q1_2009_Dev_last_update.msi come in to play?

3 - I have a new lap top that does NOT have any telerik on it. But I need to be able to run my 2009.2.826.35 telerik code until i bring this new lap top up to the latest telerik version. How do i download and install this  2009.2.826.35 version, and do i need to consider hot fixes? OR, should i just install the current version of telerik.

4 - Is there someplace i can go to see the "what and why" of how my Web.config needs to look.

thanks for your time

Installer and VS Extensions

answered on 28 Jun 2012

4 answers

226 views

disable AutoFill date option

Hi
How to disable autofill date option in calender control.
If I enter year and lost focus its fill automatically date.
How to avoid this.

Calendar

answered on 28 Jun 2012

8 answers

150 views

Find Control Issue

Hi all,

i have an issue with my tree list.. i need to find controls "OnEditCommand" event in my rad tree list ...

please help ..

Regards,

Prassin

TreeList

answered on 28 Jun 2012

1 answer

115 views

radasyncupload window

Want to open radasyncupload window on radiobutton click? Is it possible.....?

AsyncUpload

answered on 28 Jun 2012

1 answer

130 views

Tab Shifting Right

I am using RadControls v2011.3.1305.40, VS2010, Win7, & IE8. I was brought into a project late in the development cycle, so I can't explain why this page was coded the way it was, so it is what it is. I stripped the code down to its simplest form in order to provide a working example of the issue.

The page has a vertical RadSplitter in order to provide left hand navigation (LHN) for the user. The LHN consists of a panel bar w/ 3 panels and a RadSlidingZone/RadSlidingPane. The right side of the splitter (aka the content body) consists of RadTabStrip w/ 2 tabs and a corresponding RadMultiPage. Tab 1 is selected & the sliding pane is collapsed by default. Notice the left side of Tab 1 is flush against the right side of the splitter. When the user clicks on Tab 2, the code behind sleeps for 3 seconds in order to display the loading panel and the sliding pane is expanded. All if fine and dandy until the user clicks on Tab 1. The sliding pane collapses, sleeps again for 3 seconds while displaying the loading panel, and there is now an empty space between the right side of the splitter and the left of Tab 1. Somehow the tabs shifted in position to the right, where I need to have the left side of the tabs flush against the right side of the splitter just how it looked when the page was loaded by default. There seems to be a rendering issue on the postback event.

Here is a short video of the issue:

http://screencast.com/t/vg5craqj8w

In my app, the tab clicking is ajaxified and works well, but for some odd reason the screen seems to be flickering behind the loading panel for this demo. Can you help me get the tab clicking ajaxified properly for this demo as well?

Here's the code:

<%@ Page Title="" Language="vb" AutoEventWireup="false" CodeBehind="p_TabShifing.aspx.vb" Inherits="MySolution.p_TabShifing" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="aspHead" runat="server">

<title runat="server" id="aspTitle">Tab Shifting Demo</title>

<style type="text/css">

.divTitleBar {

overflow: hidden;

position: relative;

height: 25px;

background: #FFFFFF;

font: bold 16pt arial;

text-align: center;

}

.divMenuBar {

overflow: visible;

height: 27px;

border-bottom: solid 3px #FFFFFF;

background-color: #336699;

font: bold 10pt arial;

}

.divTabStrip {

overflow: hidden;

position: relative;

height: 22px;

overflow: hidden;

padding-top: 4px;

vertical-align: middle;

background-color: #B0C4DE;

}

.lpFull {

position: absolute;

top: 0px;

left: 0px;

bottom: 0px;

right: 0px;

text-align: center;

z-index: 9999;

}

.tabsContainer, .rspTabsContainer {

background: #B0C4DE !important;

border-right: #336699 1px solid !important;

}

.Navigation_Title {

font-size: 10pt;

padding: 5px 9px 5px 21px;

color: #FFFFFF;

border-top: 1px solid #ebebeb;

border-bottom: 1px solid #ebebeb;

height: 15px;

background: #336699 url(../Telerik/PanelBar/ArrowDownWhite.gif) no-repeat 9px 9px !important;

}

.RadPanelBar_B .rpTemplate {

background: #B0C4DE !important;

}

.RadPanelBar_B .rpRootGroup .rpText {

background-position: 35px 9px;

margin-left: 17px !important;

margin-right: 2px !important;

padding-left: 47px !important;

}

.RadPanelBar_B .rpRootGroup .rpExpandable .rpText {

background-position: 35px 9px;

}

.RadPanelBar_B .rpRootGroup .rpExpandable:Hover .rpText {

background-position: 35px 9px;

}

.RadPanelBar_B .rpRootGroup .rpExpanded .rpText {

background-position: 35px 9px;

}

</style>

<script language="javascript" type="text/javascript">

function ajaxStartReq(s, e) {

}

function ajaxEndResp(s, e) {

}

function spl_Loaded(s, e) {

s.get_element().style.visibility = 'inherit';

}

</script>

</head>

<body>

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

<telerik:RadStyleSheetManager runat="server" ID="styleMgr" EnableStyleSheetCombine="false">

</telerik:RadStyleSheetManager>

<telerik:RadScriptManager runat="server" ID="scrptMgr" AsyncPostBackTimeout="600"

EnableScriptCombine="false" ScriptMode="Release">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<div runat="server" id="divHdr" class="divTitleBar">

Tab Shifting Demo

</div>

<div class="divMenuBar">

</div>

<telerik:RadAjaxManager ID="axMgr" runat="server" EnablePageHeadUpdate="False" UpdatePanelsRenderMode="Inline"

ClientEvents-OnRequestStart="ajaxStartReq" ClientEvents-OnResponseEnd="ajaxEndResp"

DefaultLoadingPanelID="axLP">

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" IsSticky="true" CssClass="lpFull"

BackgroundPosition="Center" Transparency="45" BackColor="Gainsboro" InitialDelayTime="600">

<img src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'

alt="Loading..." />

</telerik:RadAjaxLoadingPanel>

<telerik:RadSplitter runat="server" ID="splM" SkinID="BlueBT" OnClientLoad="spl_Loaded"

VisibleDuringInit="false">

<telerik:RadPane runat="server" ID="pNav" SkinID="pLNav" Height="100%">

<telerik:RadAjaxPanel runat="server" ID="rapBody">

<telerik:RadAjaxPanel runat="server" ID="rapNav">

<div id="DivSLZone" runat="server" style="float: left; clear: none; width: 22px;

height: 100%;" class="tabsContainer">

<telerik:RadSlidingZone ID="slZone" runat="server" SlideDirection="Right" ClickToOpen="true" Width="22">

<telerik:RadSlidingPane ID="slPaneLoc" Title="Slider Panel" runat="server" Width="240"

EnableDock="false" Height="100%" MinWidth="100" Style="z-index: 1;">

<telerik:RadAjaxPanel runat="server" ID="rapLoc">

Slider Panel

</telerik:RadAjaxPanel>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</div>

</telerik:RadAjaxPanel>

<div runat="server" id="divNav" class="Navigation_Title">

Fake Root Panel

</div>

<div id="divPnlBar" runat="server">

<telerik:RadPanelBar runat="server" ID="pbPnlBar" CssClass="RadPanelBar_B" Height="96%"

Width="100%" Style="width: auto; position: static; border: 0;" BackColor="Transparent"

ExpandMode="FullExpandedItem">

<CollapseAnimation Type="OutQuint" />

<ExpandAnimation Type="InQuint" />

<Items>

<telerik:RadPanelItem Text="Pane 1" Expanded="true">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

<telerik:RadAjaxPanel runat="server" ID="rapAjax">

Panel 1

</telerik:RadAjaxPanel>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Panel 2">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

<telerik:RadAjaxPanel runat="server" ID="rapAjax">

Panel 2

</telerik:RadAjaxPanel>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="Panel 3">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

<telerik:RadAjaxPanel runat="server" ID="rapAjax">

Panel 3

</telerik:RadAjaxPanel>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</div>

</telerik:RadAjaxPanel>

</telerik:RadPane>

<telerik:RadSplitBar runat="server" ID="sBar1" CollapseMode="Forward" EnableResize="true" />

<telerik:RadPane runat="server" ID="pContent" Scrolling="none" BackColor="white">

<telerik:RadAjaxLoadingPanel ID="axLP" runat="server" IsSticky="true" BackgroundPosition="Center"

Transparency="45" BackColor="Gainsboro" Style="top: 0; left: 0; height: 100%;

z-index: 0 !important;">

<table style="height: 100%; width: 100%" border="0">

<tr>

<td width="100%" align="center" valign="middle">

<img src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'

alt="Loading..." style="border: 0px;" />

</td>

</tr>

</table>

</telerik:RadAjaxLoadingPanel>

<div class="divTabStrip">

<telerik:RadTabStrip runat="server" ID="tsPage" Height="40px" SelectedIndex="0" PerTabScrolling="True"

ClickSelectedTab="True" ScrollChildren="True" ScrollButtonsPosition="Middle"

MultiPageID="RadMultiPage1" OnClientTabSelected="ToggleDockPane">

<Tabs>

<telerik:RadTab runat="server" Text="Tab 1" Value="t1" Width="100px" PageViewID="pv1">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Tab 2" Value="t2" Width="100px" PageViewID="pv2">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

</div>

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

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

Tab 1

</telerik:RadPageView>

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

Tab 2

</telerik:RadPageView>

</telerik:RadMultiPage>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

<script language="javascript" type="text/javascript">

function ToggleDockPane(sender, args) {

var tabStrip = $find("<%= Me.tsPage.ClientID %>");

var slidingZone = $find("<%= Me.slZone.ClientID %>");

var expandedPaneId = slidingZone.get_expandedPaneId();

if (args.get_tab().get_value() == "t2") {

if (expandedPaneId == null || expandedPaneId != "slPaneLoc") {

slidingZone.expandPane("slPaneLoc");

}

} else {

slidingZone.collapsePane("slPaneLoc");

}

</script>

Imports Telerik.Web.UI

Public Class p_TabShifing

Inherits System.Web.UI.Page

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

Ajaxify()

End Sub

Private Sub tsPage_TabClick(sender As Object, e As Telerik.Web.UI.RadTabStripEventArgs) Handles tsPage.TabClick

System.Threading.Thread.Sleep(3000)

End Sub

Private Sub Ajaxify()

Dim axSett As AjaxSetting = New AjaxSetting(Me.tsPage.UniqueID)

axSett.UpdatedControls.Add(New AjaxUpdatedControl(Me.tsPage.UniqueID, Me.axLP.UniqueID))

axSett.UpdatedControls.Add(New AjaxUpdatedControl(Me.RadMultiPage1.UniqueID, String.Empty))

axMgr.AjaxSettings.Add(axSett)

End Sub

End Class

Thank you,

Rob

TabStrip

answered on 28 Jun 2012

1 answer

1.0K+ views

How to run JavaScript function after page change?

Hi,
I change the content in one of my columns with JavaScript (I need to fetch data from SharePoint with their Client Object Model). This works as expected the first time I load the pages in my grid. But not when I go to a page i've already loaded.

For example: Say that I have two pages in my grid. When I load the aspx, the content in the column is updated properly with data from SharePoint. When i press "Next Page" the grid changes page, my function gets called and the column is updated with correct data.
If I press "Prev Page" my function is never called and hence the column is never updated.

Is there a way to solve this?

I've tried a lot of different approaches to get the function to execute: $(document).ready, adding script from the PageIndexChange event, script tag in the ItemTemplate for the column, attaching client side click event to the "pages" buttons etc.

Regards,
Martin

Grid

answered on 28 Jun 2012

1 answer

148 views

Rad tool tip in raddatepicker

i gave a radtooltip to a raddatepicker and tooltip is not showing.? how can it be possible?

General Discussions

answered on 28 Jun 2012

0 answers

70 views

set limit to add child item

Hi All,

I have one tree list.. i wish to limit the adding of child item on a particular parent item.... its should be 3.. but there is o limit to add parent item in tree list... please give help..

Regards,
Prassin

TreeList

asked on 28 Jun 2012

7 answers

355 views

find control not working

Hi All,

I have an issue with tree list find control. when i put one Rad Text box inside the tree list i cant find the textbox reference in my code behind.. please help me for this issue..

TreeList

answered on 28 Jun 2012

1 answer

98 views

Grid Scroll using div tag?

Hi,

I was wondering if we can set Grid's Scroll effect (Vertical and Horiz) by just surrounding grid control with div tag and its attributes?
Don;t need static header feature.

Regards

Grid

answered on 28 Jun 2012