Questions on UI for ASP.NET AJAX Forum

1 answer

129 views

RadStyleSheetManager Error when AjaxFrameworkMode="Disabled"

We are trying to create lightweight page and we want combine css and javascript to reduce requests.

But we are not using any Ajax on the page.

Aspx page mark-up:

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

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager

id="StyleSheetManager"

runat="server" >

<StyleSheets >

<telerik:StyleSheetReference Path="~/Webforms/UI/Mobile/as.mobile.default.theme.min.css" />

<telerik:StyleSheetReference Path="~/Webforms/UI/Mobile/jquery.mobile.structure-1.0.1.min.css" />

</StyleSheets>

</telerik:RadStyleSheetManager>

</head>

<body>

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

<telerik:RadScriptManager

ID="ScriptManager"

Runat="Server"

ClientIDMode="Static"

EnableScriptCombine="true"

OutputCompression="AutoDetect"

ScriptMode="Release"

AjaxFrameworkMode="Disabled"

EnablePartialRendering="false"

CompositeScript-ScriptMode="Release"

LoadScriptsBeforeUI="false" >

<CompositeScript>

<Scripts>

<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" />

<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" />

<asp:ScriptReference Name="jQuery" />

</Scripts>

</CompositeScript>

</telerik:RadScriptManager>

</form>

</body>

</html>

So we set AjaxFrameworkMode="Disabled" and added the additional scripts. On load the page give the following error on "Sys.Application.add_load(loadHandler); line":

Uncaught ReferenceError: Sys is not defined

<script type="text/javascript">

//<![CDATA[

;(function() {

function loadHandler() {

var hf = $get('StyleSheetManager_TSSM');

if (!hf._RSSM_init) { hf._RSSM_init = true; hf.value = ''; }

hf.value += ';|634643790138684980:20a54711:5489a487';

Sys.Application.remove_load(loadHandler);

};

Sys.Application.add_load(loadHandler);

})();//]]>

</script>

how can we achieve this.

Thank you

Farid

ScriptManager and StyleSheetManager

answered on 14 Feb 2012

8 answers

291 views

Not combining scripts

I have to add a radscriptmanager in a base class and I want to combine the script however it doesn't appear to work. I am ensuring that this control is added as the first control of the form. I have the following...

RadScriptManager sm = new RadScriptManager();
   sm.ScriptMode = ScriptMode.Release;
   ScriptReference telerikCore = new ScriptReference("~/Scripts/Common/Core.js");
   ScriptReference jquery = new ScriptReference("~/Scripts/Common/jQuery.js");
   ScriptReference jQueryPlugins = new ScriptReference("~/Scripts/Common/jQueryPlugins.js");
   ScriptReference navigationScripts = new ScriptReference("~/Scripts/Common/Navigation/NavigationScripts.js");
   ScriptReference radMenuScripts = new ScriptReference("~/Scripts/Menu/RadMenuScripts.js");
   ScriptReference radCalendarCommonScript = new ScriptReference("~/Scripts/Calendar/RadCalendarCommonScript.js");
   ScriptReference radCalendarScript = new ScriptReference("~/Scripts/Calendar/RadCalendarScript.js");
   ScriptReference jqueryValidate = new ScriptReference("~/js/jquery.validate.js");
   ScriptReference slimStatAnalytics = new ScriptReference("~/slimstat/?js");
   sm.Scripts.Add(telerikCore);
   sm.Scripts.Add(jquery);
   sm.Scripts.Add(jQueryPlugins);
   sm.Scripts.Add(navigationScripts);
   sm.Scripts.Add(radMenuScripts);
   sm.Scripts.Add(radCalendarCommonScript);
   sm.Scripts.Add(radCalendarScript);
   sm.Scripts.Add(jqueryValidate);
   sm.Scripts.Add(slimStatAnalytics);

   sm.EnableScriptCombine = true;
   sm.EnablePageMethods = true;
   sm.OutputCompression = OutputCompression.AutoDetect;

   form.Controls.AddAt(0, sm);

I get a Telerik.Web.UI.WebResource.axd file containing 10,000 lines of code which looks like Ms Ajax related js - no reference to Telerik in there at all. My page still contains the scripts as separate links. Do I need to set enableembeddedscripts to false on all my rad controls? How about the RegisterWithScriptManager property on radmenu?

If I create another page and do this in mark up it works fine. What am I doing wrong? I don't suppose you have an example of this working?

Thanks
Matt

ScriptManager and StyleSheetManager

answered on 14 Feb 2012

1 answer

43 views

Show more than 45 days in Monthview

Is it possible to show 45 days in the month view. I looked around and it looks like in the Silverlight version we can do it by settong the visibleDateRange property. Is it possible for ASP.Net AJAX version?
Thanks,
Mona

Scheduler

answered on 14 Feb 2012

1 answer

137 views

RadAjaxManager does not work in some browsers

I've noteced, that RadAjaxManager works only in Google Chrome, Mozilla Firefox 7.0.1, but does not work neither in IE9, nor in Safari or may be even more browser.
I'd like to ask, if there is any work around or this control is not designed to support popular browsers. Or is there any mistakes in my code.

I have a Master page, Web user control and Web form page. Here is the code to reproduce bug.

Master page

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="RAM.Site" %>

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

<%@ Register src="WebUserControl.ascx" tagname="WebUserControl" tagprefix="uc" %>

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

<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>

</head>

<body>

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

<div>

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

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

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager" onajaxrequest="RadAjaxManager_AjaxRequest">

<AjaxSettings>

<telerik:AjaxSetting>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

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

<ContentTemplate>

<uc:WebUserControl ID="WebUserControl1" runat="server" />

</ContentTemplate>

</asp:UpdatePanel>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

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

<script type="text/javascript">

function doAjaxRequest() {

$find("<%= RadAjaxManager.ClientID %>").ajaxRequest("AddNumber");

var UpdatePanel = '<%= UpdatePanel.ClientID %>';

__doPostBack(UpdatePanel, '');

return false;

}

</script>

</telerik:RadCodeBlock>

</form>

</body>

</html>

Master page code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace RAM

{

public partial class Site : System.Web.UI.MasterPage

{

private int _number;

public int Number

{

get

{

if (Session["Number"] != null)

_number = (int)Session["Number"];

else _number = 0;

return _number;

}

set

{

Session["Number"] = value;

}

protected void Page_PreRender(object sender, EventArgs e)

{

Session["Number"] = Number;

}

protected void Page_Load(object sender, EventArgs e)

{

}

protected void RadAjaxManager_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

{

if (e.Argument.StartsWith("Add"))

{

Number++;

}

Web User Control:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl.ascx.cs" Inherits="RAM.WebUserControl" %>

<asp:Label ID="Label" runat="server" Text="---"></asp:Label>

Web User Control code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace RAM

{

public partial class WebUserControl : System.Web.UI.UserControl

{

protected void Page_Load(object sender, EventArgs e)

{

this.Label.Text = (Page.Master as Site).Number.ToString();

}

Web Form:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm.aspx.cs" Inherits="RAM.WebForm" %>

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

</asp:Content>

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

<asp:Button ID="Button" runat="server" Text="Increase number" OnClientClick="doAjaxRequest(); return false;" />

</asp:Content>

Ajax

answered on 14 Feb 2012

3 answers

178 views

RadMenu Set Fit to Browser

Hi,

Here I need to set radmenu fit to screen (browser). Please assist me how can I achieve it? My Menu binding is dynamic from database.

ref. http://demos.telerik.com/aspnet-ajax/menu/examples/functionality/scrolling/defaultcs.aspx

What I have tried (As below):

JavaScript:

<script type="text/javascript">

function pageLoad() {

var menu = $find("<%= RadMenu1.ClientID %>");

debugger;

var menuWid = getWindowWidth() + "px";

menu.offsetWidth = menuWid;

menu._element.offsetParent.clientWidth = menuWid;

menu._element.offsetParent.scrollWidth = getWindowWidth() - 100 + "px";

menu.repaint();

}

window.onresize = pageLoad;

function getWindowWidth() {

var windowWidth = 0;

if (typeof (window.innerWidth) == 'number') {

windowWidth = window.innerWidth;

}

else {

if (document.documentElement && document.documentElement.clientWidth) {

windowWidth = document.documentElement.clientWidth;

}

else {

if (document.body && document.body.clientWidth) {

windowWidth = document.body.clientWidth;

}

return windowWidth;

}

</script>

HTML:

<telerik:RadMenu ID="RadMenu1" runat="server" EnableRootItemScroll="true" width="100%"

EnableRoundedCorners="true">

<Items>

<telerik:RadMenuItem Text="Arial" />

<telerik:RadMenuItem Text="Verdana" />

<telerik:RadMenuItem Text="Tahoma" />

<telerik:RadMenuItem Text="Sans-serif" />

<telerik:RadMenuItem IsSeparator="true" />

<telerik:RadMenuItem Text="Arial" />

<telerik:RadMenuItem Text="Arial Black" />

<telerik:RadMenuItem Text="Arial Narrow" />

<telerik:RadMenuItem Text="Arial Unicode MS" />

<telerik:RadMenuItem Text="Bookman Old Style" />

<telerik:RadMenuItem Text="Bookshelf Symbol 7" />

<telerik:RadMenuItem Text="Century" />

<telerik:RadMenuItem Text="Century Gothic" />

<telerik:RadMenuItem Text="Comic Sans MS" />

<telerik:RadMenuItem Text="Courier New" />

<telerik:RadMenuItem Text="Garamond" />

<telerik:RadMenuItem Text="Georgia" />

<telerik:RadMenuItem Text="Goudy Old Style" />

<telerik:RadMenuItem Text="Goudy Stout" />

<telerik:RadMenuItem Text="Haettenschweiler" />

<telerik:RadMenuItem Text="Helvetica" />

<telerik:RadMenuItem Text="Impact" />

<telerik:RadMenuItem Text="Imprint MT Shadow" />

<telerik:RadMenuItem Text="Latha" />

<telerik:RadMenuItem Text="Lucida Console" />

<telerik:RadMenuItem Text="Lucida Sans" />

<telerik:RadMenuItem Text="Lucida Sans Typewriter" />

<telerik:RadMenuItem Text="Lucida Sans Unicode" />

</Items>

</telerik:RadMenu>

Thanks & Regards,

Kaushal Jani

Menu

answered on 14 Feb 2012

1 answer

125 views

Mega Drop Down issue

Hi,

Am doing mega drop down menu, where the menu items and sub items are driven from XML file.Actually my wish is drop down should not appear if no sub items are present under a menu item.But in this case am getting an empty drop down.Please let me know how to get out of this.

Code snippet is as folows and the following attachment is my xml file.

        protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            RadMenu1.LoadContentFile("menu3.xml");
            RadMenu1.DataBind();

        }
    }

protected void RadMenu1_DataBound(object sender, EventArgs e)
    {
        RadMenu menu = (RadMenu)sender;
        menu.Width = 880;
        menu.Height = 35;
        foreach (RadMenuItem item in menu.Items)
        {
            RadSiteMap sm = new RadSiteMap();
            PopulateSiteMap(sm, null, item);

            //sitemap settings to have the menu items appear in columns

            SiteMapLevelSetting rootLevelSetting = new SiteMapLevelSetting(0);
            rootLevelSetting.ListLayout.RepeatColumns = 1;
            rootLevelSetting.ListLayout.RepeatDirection = SiteMapRepeatDirection.Horizontal;
            sm.LevelSettings.Add(rootLevelSetting);
            item.Items.Clear();
            RadMenuItem childItem = new RadMenuItem();

            childItem.Width = 880;
            Panel catWrapper = new Panel();
            catWrapper.CssClass = "Wrapper";
            catWrapper.Width = Unit.Pixel(870);
            catWrapper.Controls.Add(sm);

            childItem.Controls.Add(catWrapper);
            item.Items.Add(childItem);
        }
    }

private static void PopulateSiteMap(RadSiteMap sm, RadSiteMapNode node, RadMenuItem item)
    {
        if (node == null)
        {
            foreach (RadMenuItem child in item.Items)
            {
                node = new RadSiteMapNode(child.Text, child.NavigateUrl);
                sm.Nodes.Add(node);
                if (child.Items.Count > 0)
                {
                    PopulateSiteMap(sm, node, child);
                }
            }
        }
        else
        {
            foreach (RadMenuItem child in item.Items)
            {
                node.Nodes.Add(new RadSiteMapNode(child.Text, child.NavigateUrl));
                if (child.Items.Count > 0)
                {
                    PopulateSiteMap(sm, node, child);
                }
            }
        }
    }

Thanks & Regards
Mohanram Poola

Menu

answered on 14 Feb 2012

4 answers

543 views

Radcombo With Multiple Check Box Selection.

Hi ALL,
I have done multiple check box selection inside the Radcombobox using Javascript Please have one look it may help you in your project:

JAVASCRIPT:

<script type="text/javascript">

function onCheckBoxClickClass(chk, combo) {

var combo;

if (combo == 'rcbClassGroup') {

combo = $find("<%= rcbClassGroup.ClientID %>");

}

cancelDropDownClosing = true;

//holds the text of all checked items

var text = "";

//holds the values of all checked items

var values = "";

//get the collection of all items

var items = combo.get_items();

//enumerate all items

for (var i = 0; i < items.get_count(); i++) {

var item = items.getItem(i);

//get the checkbox element of the current item

var chkMultipleSelectclass = $get(combo.get_id() + "_i" + i + "_chkMultipleSelectclass");

if (chkMultipleSelectclass.checked) {

text += item.get_text() + ",";

values += item.get_value() + ",";

}

//remove the last comma from the string

text = removeLastComma(text);

values = removeLastComma(values);

if (text.length > 0) {

//set the text of the combobox

combo.set_text(text);

}

else {

//all checkboxes are unchecked

//so reset the controls

combo.set_text("");

}

var cancelDropDownClosing = false;

function removeLastComma(str) {

return str.replace(/,$/, "");

}

function StopPropagation(e) {

//cancel bubbling

e.cancelBubble = true;

if (e.stopPropagation) {

e.stopPropagation();

}

function onDropDownClosing() {

cancelDropDownClosing = false;

}

function selectAllNodes(chk, combo, chkItem, ChkNone) {

var combo;

var combobox;

if (combo == 'rcbClassGroup') {

combobox = $find('<%=rcbClassGroup.ClientID %>');

}

var nestedCheckBox = combobox.get_items()._array;

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

var chk1 = $get(combobox.get_id() + "_i" + i + "_" + chkItem);

chk1.checked = chk.checked;

}

if (chk.checked && combo == 'rcbClassGroup')

onCheckBoxClickClass(chk, combo);

if (ChkNone != null) {

var chkNone = $get(combobox.get_id() + "_Header_" + ChkNone);

if (chkNone.checked)

chkNone.checked = false;

}

if (!chk.checked)

combobox.set_text("");

}

</script>

HTML:

<telerik:RadComboBox ID="rcbClassGroup" runat="server" AllowCustomText="true" SkinID="DropDownList298x200"

Filter="Contains" EmptyMessage="--Select--" AutoPostBack="false" DataSourceID="test" DataTextField="Name" DataValueField="ID" >

<HeaderTemplate>

<asp:CheckBox ID="ChkClassroomGroup" runat="server" Text="Select All" AutoPostBack="false"

onClick="selectAllNodes(this,'rcbClassGroup','chkMultipleSelectclass',null)" />

</HeaderTemplate>

<ItemTemplate>

<div onclick="StopPropagation(event)">

<asp:CheckBox ID="chkMultipleSelectclass" runat="server" Text='<%#Eval("Name") %>'

AutoPostBack="false" onclick="onCheckBoxClickClass(this,'rcbClassGroup')" />

</div>

</ItemTemplate>

</telerik:RadComboBox>

<asp:XmlDataSource ID="test" DataFile="../XMLFiles/RadCombo.xml" runat="server"></asp:XmlDataSource>

Let me know if any issue.

Thanks,
Abhishek K

ComboBox

answered on 14 Feb 2012

1 answer

158 views

RadAjaxLoadingPanel in master page

Hi,

is it possible to place a RadAjaxLoadingPanel inside the master page so it will show on any kind of postback event!? I don't want to attach the RadAjaxLoadingPanel to specific controls like a send button which fire the postback. As for me, it should work on any page using the master page. Is this possible!?

Thanks in advance

Martin

Ajax

answered on 14 Feb 2012

3 answers

75 views

Initial Grid filter expression on being passed to DataBinding

For the following control definition, I am not getting an initial filter expression passed to the WCF GetDataAndCount method. The initial filter expression is empty. If I set a filter after the grid is loaded, then the call to GetDataAndCount is passed a filter expression. I am following the example at http://www.telerik.com/help/aspnet-ajax/grid-applying-default-filter-on-initial-load.html.

<telerik:RadGrid runat="server" ID="RadGrid1" AllowPaging="True" AllowSorting="True"
            AllowFilteringByColumn="True" PageSize="40" CellSpacing="0"
            GridLines="None" Skin="Office2010Blue" AutoGenerateColumns="False"
            EnableViewState="False" EnableLinqExpressions="false" >
            <MasterTableView DataKeyNames="ProductID" ClientDataKeyNames="ProductID"
                EnableViewState="False" FilterExpression="([Staus] <> 'Closed')">
                <PagerStyle Mode="NumericPages" />
                <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
                <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>
                <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>
                <Columns>
                    <telerik:GridBoundColumn DataField="Number" HeaderText="Number" DataType="System.Int32" HeaderStyle-Width="50px">
                        <HeaderStyle Width="50px"></HeaderStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Type" HeaderText="Type" DataType="System.Int32" HeaderStyle-Width="75px">
                        <HeaderStyle Width="75px"></HeaderStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Subject" HeaderText="Subject" DataType="System.String" ItemStyle-Wrap="False" FilterControlWidth="150px">
                        <HeaderStyle Width="150px"></HeaderStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Status" HeaderText="Status" DataType="System.String" CurrentFilterFunction="NotEqualTo" CurrentFilterValue="Closed">
                        <HeaderStyle Width="75px"></HeaderStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Priority" HeaderText="Priority" DataType="System.String">
                        <HeaderStyle Width="75px"></HeaderStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridDateTimeColumn DataField="CreationDate" HeaderText="Creation Date" PickerType="None" DataType="System.DateTime" DataFormatString="{0:M/d/yyyy h:mm tt}" ItemStyle-Wrap="False">
                        <HeaderStyle Width="200px"></HeaderStyle>
                    </telerik:GridDateTimeColumn>
                </Columns>

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

                <PagerStyle Mode="NextPrevAndNumeric" />
            </MasterTableView>
            <ClientSettings>
                <DataBinding SelectMethod="GetDataAndCount" Location="Ajax" SortParameterType="String" FilterParameterType="String">
                </DataBinding>
                <Selecting AllowRowSelect="True" />
                <ClientEvents OnRowDataBound="rowBound" />
            </ClientSettings>
            <FilterMenu EnableImageSprites="False"></FilterMenu>
        </telerik:RadGrid>

Grid

answered on 14 Feb 2012

1 answer

52 views

Filtered data not comming from all pages in the grid ?

I have a grid in which I have filtering as well as paging turned on.

When I am filtering the the grid based on a particular column, the rows which are matching in the current page are showing up in the filter result but the rows which are matching in the other pages of the grid are not comming in the filter result and I want them to come up in the result of the filter. Unable to do so.

Please help me out.

Grid

answered on 14 Feb 2012