Questions on UI for ASP.NET AJAX Forum

3 answers

281 views

Hello,

Scenario:
Masterpage with content pages, In the masterpage there is a control we made called an errorcontrol which displays errors if the content generated them.
The content is placed dynamically so we now have to set all ajaxsettings in codebehind and for updating the errorcontrol we push the control through to all subcontrols (sometimes 5 deep)

Is it possible to implement that no matter what control fires an ajaxrequest, the errorcontrol will always be updated on the page??

Hope this is clear enough.

Thanks in advance,

The SOFIM-team (Belgium)

Ajax

answered on 20 Apr 2012

1 answer

230 views

Docks dynamically loading custom controls from DB when Dragged & Dropped... almost working :)

Hi there,

What I'm trying to achieve here is I think pretty simple and is nearly working. I have a RadGrid with drag and drop set to true, an extender so I can design my own helper when dragging and a RadDock drop zone.
I followed this example to load Custom WebControls dynamically in my docks, this one for virtual scrolling in my grid, and been sent this project sample to drag and drop nodes from TreeView to a dockzone few weeks ago by the Telerik team (Thanks again ;)).

It works fine if I'm not using the ASP UpdatePanel for AsyncPostback except that when I add a new dock to my zone or re-order them, all the pre-existing docks become empty. I first thought that this was due to the fact that I'm not posting my data properly using this UpdatePanel and thus implemented it.

I'm now getting an error saying that it couldn't find my UpdatePanel1 :

PRM_MissingPanel : Could not find UpdatePanel with ID UpdatePanel1.

Here's my code, hopefully someone will be able to help. I'm suspecting the RadAjaxPanel embedding the UpdatePanel to screw this up, but I kinda need it to pass some parameters my method in code behind:

ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StopsMgr.aspx.cs" Inherits="Test.StopsMgr" %>

<!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>Stop Manager</title>

<link href="css/StopsMgr.css" rel="stylesheet" type="text/css" />

</head>

<body>

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

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

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<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 id="TabStop">

<telerik:RadAjaxLoadingPanel ID="StopLoadingPanel" runat="server">

</telerik:RadAjaxLoadingPanel>

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

<script type="text/javascript">

function showLoadingPanel(sender, args) {

toggleLoadingPanel(sender.get_id(), true);

}

function hideLoadingPanel(sender, args) {

toggleLoadingPanel(sender.get_id(), false);

}

function toggleLoadingPanel(elementId, show) {

var loadingPanel = $find("StopLoadingPanel");

if (show) {

loadingPanel.show(elementId);

}

else {

loadingPanel.hide(elementId);

}

function clientDragCreating(sender, args) {

var grid = $find("<%=GridSearchStops.ClientID %>");

var MasterTable = grid.get_masterTableView();

var selectedRows = MasterTable.get_selectedItems();

var name = MasterTable.getCellByColumnUniqueName(selectedRows[0], "Name");

var lines = MasterTable.getCellByColumnUniqueName(selectedRows[0], "Lines");

$("#rgDraggedItemHeader").html(name.innerHTML);

$("#rgDraggedItemSub").html(lines.innerHTML);

}

var currentGrid;

var zone;

var mouseX;

var mouseY;

var displayPlaceholder = false;

function onRowDragStarted(sender, args) {

currentGrid = sender;

zone = $find("RadDockZoneStops");

$(document).mousemove(function (e) {

mouseX = e.pageX;

mouseY = e.pageY;

if (zone != null && displayPlaceholder)

zone._showPlaceholder(args.get_gridDataItem());

});

$("#RadDockZoneStops").mouseenter(function () {

displayPlaceholder = true;

}).mouseleave(function () {

displayPlaceholder = false;

if (zone != null)

zone._hidePlaceholder();

});

}

function onRowDropping(sender, args) {

zone = $find("RadDockZoneStops");

if (zone != null)

zone._hidePlaceholder();

$(document).unbind('mousemove');

$("#RadDockZoneStops").unbind('mouseenter').unbind('mouseleave');

if (sender.get_id() == "<%=GridSearchStops.ClientID %>") {

var node = args.get_destinationHtmlElement();

if (isChildOf('RadDockZoneStops', node)) {

$find("<%= RadAjaxPanel1.ClientID%>").ajaxRequestWithTarget("<%= RadAjaxPanel1.UniqueID %>", "LoadDock¤" + args._dragedItems[0].getDataKeyValue('Id'));

args.set_cancel(true);

}

args.set_cancel(true);

}

function isChildOf(parentId, element) {

while (element) {

if (element.id && element.id.indexOf(parentId) > -1) {

return true;

}

element = element.parentNode;

}

return false;

}

</script>

</telerik:RadCodeBlock>

<div id="Search">

<telerik:RadGrid ID="GridSearchStops" runat="server" AllowPaging="true" PageSize="42"

AutoGenerateColumns="false" Height="820px" >

<PagerStyle Mode="NextPrevNumericAndAdvanced" />

<MasterTableView TableLayout="Fixed" DataKeyNames="Id" ClientDataKeyNames="Id">

<Columns>

<telerik:GridBoundColumn DataField="Id" HeaderText="ID" />

<telerik:GridBoundColumn DataField="Name" HeaderText="Stop Name" />

<telerik:GridBoundColumn DataField="Lines" HeaderText="Currently On Lines" />

</Columns>

</MasterTableView>

<ClientSettings AllowRowsDragDrop="true">

<Scrolling AllowScroll="true" EnableVirtualScrollPaging="true" UseStaticHeaders="true" />

<DataBinding Location="StopsMgr.aspx" SelectMethod="GetStopData" SelectCountMethod="GetStopCount"

StartRowIndexParameterName="startRowIndex" MaximumRowsParameterName="maxRows" />

<ClientEvents OnCommand="showLoadingPanel" OnDataBound="hideLoadingPanel" OnRowDragStarted="onRowDragStarted"

OnRowDropping="onRowDropping" />

<Selecting AllowRowSelect="true" />

</ClientSettings>

</telerik:RadGrid>

<ext:GridCustomDragExtender ID="GridCustomDragExtender1" runat="server" TargetControlID="GridSearchStops"

CursorOffsetLeft="0" CursorOffsetTop="0" OnClientDragContentCreating="clientDragCreating">

<DragContentTemplate>

<div class="rgDraggedItem">

<div id="rgDraggedItemHeader">

</div>

<div id="rgDraggedItemSub">

</div>

</DragContentTemplate>

</ext:GridCustomDragExtender>

</div>

<div id="DropZone">

<input type="text" id="currentPlaceholderPosition" runat="server" style="display: none" />

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" OnAjaxRequest="OnAjaxRequest_Action">

<telerik:RadDockLayout ID="RadDockLayout1" runat="server" OnLoadDockLayout="RadDockLayout1_LoadDockLayout"

OnSaveDockLayout="RadDockLayout1_SaveDockLayout">

<telerik:RadDockZone ID="RadDockZoneStops" runat="server" MinHeight="300px" HighlightedCssClass="RadDockZoneStopsHighlight">

</telerik:RadDockZone>

<div style="display: none">

Hidden UpdatePanel, which is used to receive the new dock controls. We will move

them with script to the desired initial dock zone.

<asp:UpdatePanel runat="server" ID="UpdatePanel1">

<Triggers>

<asp:AsyncPostBackTrigger ControlID="GridSearchStops" EventName="RowDrop" />

</Triggers>

</asp:UpdatePanel>

</div>

</telerik:RadDockLayout>

</telerik:RadAjaxPanel>

</div>

<script type="text/javascript">

var $T = Telerik.Web.UI;

var isRowDragged = false;

//parameter can be dock or GridDataItem

Telerik.Web.UI.RadDockZone.prototype._showPlaceholder = function (obj, location) {

if (Object.getTypeName(obj) == "Telerik.Web.UI.GridDataItem") {

isRowDragged = true;

var row = obj;

this._repositionPlaceholder(row.get_element(), location);

var placeholderStyle = this._placeholder.style;

placeholderStyle.height = "50px";

placeholderStyle.width = "100%";

placeholderStyle.display = "block";

isRowDragged = false;

}

else {

var dock = obj;

this._repositionPlaceholder(dock.get_element(), location);

var dockBounds = dock._getBounds();

var placeholderMargin = dock._getMarginBox(this._placeholder);

var placeholderBorder = dock._getBorderBox(this._placeholder);

var horizontal = this.get_isHorizontal();

var placeholderStyle = this._placeholder.style;

placeholderStyle.height = dockBounds.height - (placeholderMargin.vertical + placeholderBorder.vertical) + "px";

placeholderStyle.width = this.get_fitDocks() && !horizontal ? "100%" : dockBounds.width - (placeholderMargin.horizontal + placeholderBorder.horizontal) + "px";

placeholderStyle.display = "block";

}

Telerik.Web.UI.RadDockZone.prototype._repositionPlaceholder = function (dock_element, location) {

//fix Row drag

if (isRowDragged == true) {

location = new Sys.UI.Point(mouseX, mouseY);

}

//end fix

var nearestChild = this._findItemAt(location, dock_element);

var zone_element = this.get_element();

if (null == nearestChild) {

// _clearElement must be after all docks and _placeholder

zone_element.insertBefore(this._placeholder, this._clearElement);

}

else {

if (nearestChild.previousSibling != this._placeholder) {

zone_element.insertBefore(this._placeholder, nearestChild);

}

//GET placeholder position

for (var i = 0; i < zone_element.childNodes.length; i++) {

if (zone_element.childNodes[i] == this._placeholder) {

var currentPos = i;

$get('currentPlaceholderPosition').value = currentPos - 2;

}

//end Get

}

</script>

</form>

</body>

</html>

C#

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.Services;

using System.Data.SqlClient;

using System.Web.Configuration;

using System.Data;

using Telerik.Web.UI;

namespace test

{

public partial class StopsMgr : System.Web.UI.Page

{

private List<DockState> CurrentDockStates

{

get

{

//Store the info about the added docks in the session. For real life

// applications we recommend using database or other storage medium

// for persisting this information.

List<DockState> _currentDockStates = (List<DockState>)Session["CurrentDockStatesDynamicDocks"];

if (Object.Equals(_currentDockStates, null))

{

_currentDockStates = new List<DockState>();

Session["CurrentDockStatesDynamicDocks"] = _currentDockStates;

}

return _currentDockStates;

}

set

{

Session["CurrentDockStatesDynamicDocks"] = value;

}

private RadDock CreateRadDockFromState(DockState state)

{

RadDock dock = new RadDock();

dock.ID = string.Format("RadDock{0}", state.UniqueName);

dock.ApplyState(state);

dock.Command += new DockCommandEventHandler(dock_Command);

dock.Commands.Add(new DockCloseCommand());

dock.Commands.Add(new DockExpandCollapseCommand());

return dock;

}

protected void Page_Init(object sender, EventArgs e)

{

//Recreate the docks in order to ensure their proper operation

for (int i = 0; i < CurrentDockStates.Count; i++)

{

RadDock dock = CreateRadDockFromState(CurrentDockStates[i]);

//We will just add the RadDock control to the RadDockLayout.

// You could use any other control for that purpose, just ensure

// that it is inside the RadDockLayout control.

// The RadDockLayout control will automatically move the RadDock

// controls to their corresponding zone in the LoadDockLayout

// event (see below).

RadDockLayout1.Controls.Add(dock);

//We want to save the dock state every time a dock is moved.

CreateSaveStateTrigger(dock);

}

protected void Page_Load(object sender, EventArgs e)

{

//this.DataBind();

}

#region Stops

[WebMethod]

public static int GetStopCount()

{

var cmd = new SqlCommand("P_GetNumberOfStops", new SqlConnection(WebConfigurationManager.ConnectionStrings["TestDB"].ConnectionString));

cmd.CommandType = CommandType.StoredProcedure;

cmd.Connection.Open();

if (cmd.Connection.State != ConnectionState.Open)

throw new Exception("Connection to DB failed");

var max = (int)cmd.ExecuteScalar();

cmd.Connection.Close();

return max;

}

[WebMethod]

public static IEnumerable<Stop> GetStopData(int startRowIndex, int maxRows)

{

var cmd = new SqlCommand("P_GetStopData", new SqlConnection(WebConfigurationManager.ConnectionStrings["TestDB"].ConnectionString));

cmd.CommandType = CommandType.StoredProcedure;

cmd.Parameters.Add(new SqlParameter("@startRow", SqlDbType.Int));

cmd.Parameters.Add(new SqlParameter("@maxRows", SqlDbType.Int));

cmd.Parameters["@startRow"].Value = startRowIndex;

cmd.Parameters["@maxRows"].Value = startRowIndex + maxRows;

cmd.Connection.Open();

if (cmd.Connection.State != ConnectionState.Open)

throw new Exception("Connection to DB failed");

var sqlRd = cmd.ExecuteReader();

if (sqlRd.HasRows)

{

while (sqlRd.Read())

{

var stop = new Stop()

{

Id = (int)sqlRd["S_ID"],

Name = sqlRd["S_NAME"].ToString(),

Lines = "---"

};

yield return stop;

}

cmd.Connection.Close();

}

#region DockPanel

void dock_Command(object sender, DockCommandEventArgs e)

{

if (e.Command.Name == "Close")

{

ScriptManager.RegisterStartupScript(

UpdatePanel1,

this.GetType(),

"RemoveDock",

string.Format(@"function _removeDock() {{

Sys.Application.remove_load(_removeDock);

$find('{0}').undock();

$get('{1}').appendChild($get('{0}'));

$find('{0}').doPostBack('DockPositionChanged');

}};

Sys.Application.add_load(_removeDock);", ((RadDock)sender).ClientID, UpdatePanel1.ClientID),

true);

}

private void CreateSaveStateTrigger(RadDock dock)

{

//Ensure that the RadDock control will initiate postback

// when its position changes on the client or any of the commands is clicked.

//Using the trigger we will "ajaxify" that postback.

dock.AutoPostBack = true;

dock.CommandsAutoPostBack = true;

AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger();

saveStateTrigger.ControlID = dock.ID;

saveStateTrigger.EventName = "DockPositionChanged";

UpdatePanel1.Triggers.Add(saveStateTrigger);

saveStateTrigger = new AsyncPostBackTrigger();

saveStateTrigger.ControlID = dock.ID;

saveStateTrigger.EventName = "Command";

UpdatePanel1.Triggers.Add(saveStateTrigger);

}

protected void RadDockLayout1_LoadDockLayout(object sender, DockLayoutEventArgs e)

{

//Populate the event args with the state information. The RadDockLayout control

// will automatically move the docks according that information.

foreach (DockState state in CurrentDockStates)

{

e.Positions[state.UniqueName] = state.DockZoneID;

e.Indices[state.UniqueName] = state.Index;

}

protected void RadDockLayout1_SaveDockLayout(object sender, DockLayoutEventArgs e)

{

//Save the dock state in the page Session. This will enable us

// to recreate the dock in the next Page_Init.

CurrentDockStates = RadDockLayout1.GetRegisteredDocksState();

}

protected void OnAjaxRequest_Action(object sender, AjaxRequestEventArgs e)

{

var args = e.Argument.Split('¤');

if (args[0] == "LoadDock" && args.Length > 1)

{

var dock = LoadDock(int.Parse(args[1]));

var currentPos = int.Parse(currentPlaceholderPosition.Value);

UpdatePanel1.ContentTemplateContainer.Controls.Add(dock);

ScriptManager.RegisterStartupScript(

dock,

this.GetType(),

"AddDock",

string.Format(@"function _addDock() {{

Sys.Application.remove_load(_addDock);

$find('{1}').dock($find('{0}'),{2});

$find('{0}').doPostBack('DockPositionChanged');

}};

Sys.Application.add_load(_addDock);", dock.ClientID, RadDockZoneStops.ID, currentPos),

true);

CreateSaveStateTrigger(dock);

}

private RadDock LoadDock(int id)

{

try

{

var dock = new RadDock();

dock.DockMode = DockMode.Docked;

dock.EnableRoundedCorners = true;

dock.UniqueName = Guid.NewGuid().ToString();

dock.ID = string.Format("RadDock{0}", dock.UniqueName);

dock.Title = "Title " + id;

var widget = LoadControl(this, "~/Templates/StopFormTpl.ascx", id, "myTitle");

widget.EnableViewState = false;

dock.ContentContainer.Controls.Add(widget);

dock.Width = Unit.Percentage(100);

dock.Height = Unit.Pixel(200);

dock.Commands.Add(new DockCloseCommand());

dock.Commands.Add(new DockExpandCollapseCommand());

dock.Command += new DockCommandEventHandler(dock_Command);

return dock;

}

catch (Exception ex)

{

throw new Exception(ex.Message, ex.InnerException);

}

When, I refresh the page, the dock appears but is not docked to the zone.

Help anyone ?

Cheers

Dock

answered on 20 Apr 2012

0 answers

205 views

IIS 7.5 Setup

I am using the "RadActive.WebControls.ILoad" File Version: 2008.2.4.0

I am unable to get the image uploader to work on my new Windows 2008R2 server wunning IIS 7.5

Is there any documentation on how to do this?

My site is running .Net Framework 3.5

I am not sure if this is the AJAX or Silverlight control

General Discussions

asked on 19 Apr 2012

0 answers

82 views

Browser.browser file issue

when i enabled the View state compression using Browser.browserfile it compresses the Data (Sent/Received)
Scenario:
I have modal dialogs where some Searches are done and selections are made on telerik grid.
On closing the dialog window the Selected data are returned back from the dialog window using javascript.
But after this step is done when we do a postback on the Parent page the view state is lost and when the Page loads back the Hidden text boxes/dropdowns which were not visible initially comes back on the screen.

Does doing view state compression cause any issues for the whole website?

Ajax

asked on 19 Apr 2012

1 answer

493 views

RadAjaxManager ClientEvents-OnRequestStart event not firing

I am trying to upload files via a RadGrid that is Ajaxified. Based on the demos, I am trying to disable Ajax when the "Insert" button is clicked when trying to add a new row to the grid. The ClientEvents-OnRequestStart event is never firing.

Does anyone have any ideas what I might be doing wrong?

Here is the code for my aspx page:

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

<head runat="server">

<title></title>

</head>

<body>

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

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

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

<script type="text/javascript">

function conditionalPostback(sender, args) {

alert('ConditionalPostBack');

var theRegexp = new RegExp("\.RadButtonInsert$", "ig");

if (args.get_eventTarget().match(theRegexp)) {

var upload = $find(window['RadUpload1']);

if (upload.GetFileInputs()[0].value != "") {

args.set_enableAjax(false);

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxManager ID="radAjaxManager" runat="server" ClientEvents-OnRequestStart="conditionalPostback">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="radButtonEdit">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="panelToolbar" />

<telerik:AjaxUpdatedControl ControlID="panelContent" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="radButtonSave">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="panelToolbar" />

<telerik:AjaxUpdatedControl ControlID="panelContent" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<asp:Panel runat="server">

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

<telerik:RadButton ID="radButtonEdit" runat="server" Text="Edit" CausesValidation="false" OnClick="radButtonEdit_Click" />

<telerik:RadButton ID="radButtonSave" runat="server" Text="Save" CausesValidation="true" OnClick="radButtonSave_Click" />

</asp:Panel>

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

<telerik:RadPanelBar ID="radPanelBarAttachments" runat="server" Width="100%">

<Items>

<telerik:RadPanelItem Text="Attachments" Expanded="true">

<ContentTemplate>

<telerik:RadGrid ID="radGridAttachments" runat="server" AutoGenerateColumns="false" OnNeedDataSource="radGridAttachments_NeedDataSource" OnInsertCommand="radGridAttachments_InsertCommand" OnDeleteCommand="radGridAttachments_DeleteCommand" OnItemCommand="radGridAttachments_ItemCommand">

<MasterTableView CommandItemDisplay="Top" DataKeyNames="ID">

<CommandItemTemplate>

<telerik:RadButton ID="radButtonAdd" runat="server" Text="Add New Record" CommandName="InitInsert" Visible='<%# !radGridAttachments.MasterTableView.IsItemInserted %>' ButtonType="LinkButton">

</telerik:RadButton>

</CommandItemTemplate>

<Columns>

<telerik:GridBoundColumn DataField="ID" HeaderText="ID" ReadOnly="true" />

<telerik:GridBoundColumn UniqueName="FileName" DataField="FileName" HeaderText="File Name" ReadOnly="true" />

<telerik:GridTemplateColumn HeaderText="Attachment (LinkButton)">

<ItemTemplate>

<asp:LinkButton ID="ViewAttachmentLinkButton" runat="server" CommandName="ViewAttachment">View</asp:LinkButton>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridButtonColumn UniqueName="DeleteColumn" ButtonType="PushButton" Text="Delete" CommandName="Delete" />

</Columns>

<EditFormSettings EditFormType="Template">

<FormTemplate>

<telerik:RadUpload ID="RadUpload1" runat="server" InitialFileInputsCount="1" MaxFileInputsCount="1" ControlObjectsVisibility="None" />

<telerik:RadButton ID="RadButtonInsert" runat="server"

Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>' CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>' />

<telerik:RadButton ID="RadButtonCancel" runat="server" Text="Cancel" CausesValidation="false" CommandName="Cancel" />

</FormTemplate>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

</ContentTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</asp:Panel>

</form>

</body>

</html>

Upload (Obsolete)

answered on 19 Apr 2012

0 answers

50 views

Scheduler on Panel shows scrollbars in IE but not Chrome

Using meyer's reset, I get the browser's scrollbars in both IE and Chrome...

Chrome looks correct (no scrollbars) without reset.
IE has scrollbars with or without reset.

To reproduce it... comment out the reset.css href in the page... and view in chrome and ie.

How can I get it to display without browser scrollbars in both IE and Chrome with the reset css?

meyer's reset.css

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

Schedule.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Schedule.aspx.cs" Inherits="SchedulerDemo.Schedule" %>

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

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

<link href="Styles/reset.css" rel="stylesheet" type="text/css" />

<style type="text/css">

html, body, form

{

height: 100%;

margin: 0;

padding: 0;

}

</style>

</head>

<body>

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

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

<Scripts>

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

</asp:ScriptReference>

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

</asp:ScriptReference>

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

</asp:ScriptReference>

</Scripts>

</telerik:RadScriptManager>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" Width="100%"

Height="100%">

<telerik:RadPane ID="ApplicationNavigationPane" runat="server" Height="100px">

ApplicationNavigationPane

</telerik:RadPane>

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

<telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Vertical">

<telerik:RadPane ID="LeftPane" runat="server" Width="100px">

PageNavigationPane

</telerik:RadPane>

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

</telerik:RadSplitBar>

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

<telerik:RadScheduler ID="RadScheduler1" runat="server" Height="100%" DataKeyField="Key"

DataDescriptionField="Description" DataStartField="Start" DataSubjectField="Subject"

DataEndField="End" MinutesPerRow="5" TimeLabelRowSpan="3">

</telerik:RadScheduler>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

Schedule.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace SchedulerDemo

{

public partial class Schedule : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

Scheduler

asked on 19 Apr 2012

1 answer

100 views

Can you do related comboboxes in inline templates?

Been checking the different demos out there, especially in the combobox area, but not having any luck with getting project to build when I put the comboboxes in the inline template and try to load data for the dependent combo. It was working with the combos in the InlineInsertTemplate before I tried to filter them. I'm thinking it's because the controls don't really exist within the template to the code behind environment, or the complier until after the telerik stuff is built. So, also getting errors on the clientid references in the javascript section. Scenario is location for an event, they need to pick the site, then the buildings that are available at that site. Similar to the continent, country scenario.
here's the javascript client side, adapted from demo, with additional function from a forum posting:

<script type="text/javascript">

//Put your JavaScript code here.

// global variables for connected comboboxes

var bldgCombo;

function pageLoad() {

bldgCombo = $find("<%= RcbBldg.ClientID %>"); //errors on this line

}

function loadBldg(sender, eventArgs) {

var item = eventArgs.get_item();

bldgCombo.set_text("Loading...");

// if a site is selected

if (item.get_index() > 0) {

bldgCombo.requestItems(item.get_value(), false);

}

else {

bldgCombo.set_text(" ");

bldgCombo.clearItems();

}

function onBldgRequesting(sender, eventArgs) {

var cboSite = $find("<%= RcbSite.ClientID%>"); //errors on this line

eventArgs.get_context()["SiteVal"] = cboSite.get_value();

}

function ItemsLoaded(sender, eventArgs) {

if (sender.get_items().get_count() > 0) {

// pre-select the first item

sender.set_text(sender.get_items().getItem(0).get_text());

sender.get_items().getItem(0).highlight();

}

sender.showDropDown();

}

</script>

This is the aspx code:

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadScheduler1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadScheduler1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

<telerik:RadScheduler ID="RadScheduler1" runat="server" DataDescriptionField="EventDescription"

DataEndField="EventEnd" DataKeyField="EventId" DataRecurrenceField="EventRecurRule"

DataRecurrenceParentKeyField="EventRecurParentId" DataSourceID="SqlDataSourceEvents"

DataStartField="EventStart" DataSubjectField="EventSubject" EnableDescriptionField="True"

Height="650px" Width="900px" WorkDayStartTime="07:30:00" DayStartTime="07:00:00"

SelectedView="MonthView" CustomAttributeNames="ModifiedBy,LastUpdated,EventRoomLoc"

Style="margin-bottom: 2" EnableCustomAttributeEditing="True">

<AdvancedForm EnableCustomAttributeEditing="True" />

<ResourceTypes>

<telerik:ResourceType DataSourceID="SqlDataSourceEventCategories" ForeignKeyField="EventCategory"

KeyField="EvntCatId" Name="Category" TextField="EvntCategoryName" />

<telerik:ResourceType DataSourceID="SqlDataSourcePOCList" ForeignKeyField="EventPOC"

KeyField="UserGuid" Name="POC" TextField="UserNameDisplay" />

<telerik:ResourceType DataSourceID="SqlDataSourceSiteList" ForeignKeyField="EventSiteLoc"

KeyField="Site_PK" Name="Site" TextField="FullSiteName" />

<telerik:ResourceType DataSourceID="SqlDataSourceBldgList" ForeignKeyField="EventBldgLoc"

KeyField="Bldg_PK" Name="Building" TextField="BldgDesc" />

</ResourceTypes>

<MultiDayView DayStartTime="07:00:00" />

<AppointmentTemplate>

<div class="rsAptSubject">

<%# Eval("Subject") %>

</div>

<%# If(Container.Appointment.Resources.GetResourceByType("POC") Is Nothing, _

"", "POC: " & Container.Appointment.Resources.GetResourceByType("POC").Text & "<br /> ")%>

<%# If(Container.Appointment.Resources.GetResourceByType("Site") Is Nothing, "", _

"Site: " & Container.Appointment.Resources.GetResourceByType("Site").Text & _

If(Container.Appointment.Resources.GetResourceByType("Building").Text Is Nothing, "", _

" Bldg: " & Container.Appointment.Resources.GetResourceByType("Building").Text) & _

" Room: " & Container.Appointment.Attributes("EventRoomLoc"))%>

</AppointmentTemplate>

<InlineInsertTemplate>

<asp:TextBox ID="SubjectTextBox" runat="server" Text='<%# Bind("Subject") %>' Width="80%"></asp:TextBox>

<div class="ResourceToolbox">

Category:

<telerik:RadComboBox ID="RcbCategory" runat="server" DataSourceID="SqlDataSourceEventCategories"

DataTextField="EvntCategoryName" DataValueField="EvntCatId" SelectedValue='<%# Bind("EventCategory") %>'>

</telerik:RadComboBox>

Site:

<telerik:RadComboBox ID="RcbSite" runat="server" DataSourceID="SqlDataSourceSiteList"

DataTextField="FullSiteName" DataValueField="Site_PK" SelectedValue='<%# Bind("EventSiteLoc") %>'

OnClientSelectedIndexChanging="loadBldg" MarkFirstMatch="True">

</telerik:RadComboBox>

Bldg:

<telerik:RadComboBox ID="RcbBldg" runat="server" DataSourceID="SqlDataSourceBldgList"

DataTextField="BldgDesc" DataValueField="Bldg_PK" SelectedValue='<%# Bind("EventBldgLoc") %>'

MarkFirstMatch="True" OnClientItemsRequested="ItemsLoaded" OnItemsRequested="RcbBldg_ItemsRequested"

>

</telerik:RadComboBox>

<asp:Button ID="btnInsert" runat="server" Text="Insert" CommandName="Insert" /><asp:Button

ID="btnCancel" runat="server" Text="Cancel" CommandName="Cancel" />

</div>

</InlineInsertTemplate>

</telerik:RadScheduler>

</div>

And this is the code behind in VB

Protected Sub LoadBldgs(ByVal siteID As String)

Dim connection As New SqlConnection(ConfigurationManager.ConnectionStrings("ERMasterConnectionString").ConnectionString)

' Select a country based on the continentID.

Dim adapter As New SqlDataAdapter("SELECT [Bldg_PK], [BldgNbr], [Description], [Site_PK], [BldgNbr]+'-'+[Description] As BldgDesc " & _

"FROM [Building] WHERE Site_PK=@siteID ORDER By BldgNbr", connection)

Adapter.SelectCommand.Parameters.AddWithValue("@siteID", siteID)

Dim dt As New DataTable()

Adapter.Fill(dt)

'RcbBldg.DataTextField = "BldgDesc" 'set from initial declaration

'RcbBldg.DataValueField = "Bldg_PK"

RcbBldg.DataSource = dt 'does not find this control to allow build

RcbBldg.DataBind()

End Sub

Private Sub Page_Init(sender As Object, e As System.EventArgs) Handles Me.Init

End Sub

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

If (Not IsPostBack) Then

' set up other stuff that not combo related

' should not have to do anything with site combo, as pulled from control settings.

ElseIf Not Page.IsCallback Then

LoadBldgs(RcbSite.SelectedValue) ' does not find this combo

strUserGuid = hfUserGuid.Value

Else

strUserGuid = hfUserGuid.Value

End If

End Sub

I'm hoping to continue to use the inline templates, but expect the answer I'm going to get is the advanced form...
Brenda

Scheduler

answered on 19 Apr 2012

1 answer

110 views

Bubble chart

Hi,

i have problem when i try to use bubble chart type
my datatable

Title               Complexity             Stategic value            Cost
item 1            25                                 5                          $10,000
item 2            14                                 2                          $2,000
item 2            1                                 2                          $25,000

aspx.cs

<telerik:RadChart ID="RadChart1" SkinsOverrideStyles="true" runat="server"   >
                        <PlotArea>
                        <XAxis AutoScale="False" MaxValue="20" MinValue="0" Step="5">
                        </XAxis>
                        <YAxis AutoScale="False" MaxValue="40" MinValue="0" Step="5">
                        </YAxis>
                        <YAxis2 AutoScale="true" ></YAxis2>
                        </PlotArea>

                        <Series >
                               <telerik:ChartSeries Name="Series 1" Type="Bubble"    >
                                <Appearance LegendDisplayMode="ItemLabels" >
                                    <FillStyle MainColor="Blue">
                                    </FillStyle>
                                </Appearance>
                                <Items>
                                     <telerik:ChartSeriesItem XValue="5" YValue="25" YValue2="10000" Name="Item 1">
                                    </telerik:ChartSeriesItem>
                                    <telerik:ChartSeriesItem XValue="2" YValue="14" YValue2="2000" Name="Item 2">
                                    </telerik:ChartSeriesItem>
                                    <telerik:ChartSeriesItem XValue="2"   YValue="1" YValue2="25000"   Name="Item 3">
                                    </telerik:ChartSeriesItem>

                                </Items>
                            </telerik:ChartSeries>
                        </Series>
                    </telerik:RadChart>

when i run it, i can see buble chart image. how to fix it

Chart (Obsolete)

answered on 19 Apr 2012

5 answers

116 views

How to edit Firefox title attribute

Hey there,

Internet Explorer and Fire Fox seem to use different attributes of an image tag to render the tooltip text. Fire Fox uses the 'alt text' as a place holder for unavailable images and the 'title' tag to render the tooltip. Whereas IE seems to use the 'alt text' for both.

Our question is whether or not the RadEditor has a way of editing the 'title' attribute (for FF) through the UI?

Regards,

Gav.

Editor

answered on 19 Apr 2012

2 answers

136 views

Tab Notifications

Is there any support in the TabStrip for notification style behavior? By that, I mean behavior like you would see in an IM client with different tabs for each conversation and a tab blinks when someone has sent a message on a closed tab. I'm just looking for the ability to cause a tab to have that behavior until the user clicks it. If there isn't a way to do that now, could it be included in a future release?

TabStrip

answered on 19 Apr 2012