Questions on UI for ASP.NET AJAX Forum

5 answers

472 views

jQuery script is not working after postback when using with ajax manager

I have the following issues when using jquery scripts in the page with ajax manager although I used radscriptblock rounding my script as documented:

1- when using radscriptblock inside updated ajax panel it will be executed in the load but if I make any ajax request manually using "ajaxRequest" function it will be executed again although I need it to be executed only one time [on page load]

2- when using radscriptblock out of updated ajax panel, it will be also executed in the load but if I make any ajax request manually using "ajaxRequest" function it will be no longer executed any more [after going to server side]

below is my code:

PAGE:

<head>

<script src="http://localhost/xsurvey/scripts/custom/collapsible.panel.js" type="text/javascript"></script>

</head>

<%--below is body-->

<asp:ScriptManager runat="server" ID="scrt" />

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="PnlPage">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="PnlPage" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="PnlPage" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

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

<telerik:RadScriptBlock runat="server" ID="s">

<script type="text/javascript">

$(document).ready(function() {

function test() {

$find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest('sss');

}

alert("d");

$("#faq").makeCollapsible({ 'collapse': '1' }, test);

});

</script>

</telerik:RadScriptBlock>

<asp:Label runat="server" ID="LblEd" />

<ul id="faq">

<li>

<h3 style="text-align: center">

More Options?</h3>

<p>

test test test

<br />

test test test

<br />

test test test

<br />

test test test

<br />

test test test

<br />

test test test

<br />

test test test

<br />

</p>

</li>

<li>

<h3 style="text-align: center">

More Options?</h3>

<p>

test test test

<br />

test test test

<br />

test test test

<br />

test test test

<br />

test test test

<br />

test test test

<br />

test test test

<br />

</p>

</li>

</ul>

</asp:Panel>

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using Telerik.Web.UI;

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

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void OnAjaxManager_Request(object sender, AjaxRequestEventArgs e)

{

LblEd.Text = "test test CALL SERVER" + DateTime.Now;

}

Collapsible.panel.js

(function($) {

$.fn.makeCollapsible = function(options, onCollapse) {

var settings = $.extend({

'collapse': '1',

'idToCollapse': ''

}, options);

return this.each(function() {

var $this = $(this);

$this.find("li > h3").each(function() {

$(this).css("cursor", "pointer");

$(this).siblings().wrapAll('<div>');

});

//$("#faq li > *:not(h3)").hide();

$this.find("li > h3").click(function() {

var $h3 = $(this);

//minus icon

var minus = {

'background-image': 'url(http://localhost/xsurvey/Images/minus.gif)'

};

//plus icon

var plus = {

'background-image': 'url(http://localhost/xsurvey/Images/plus.gif)'

};

//all siblings beside <li><h3></h3>(.....)</li>

var risposta = $h3.siblings();

var callf = 0;

if (risposta.is(':hidden')) {

$h3.css(minus);

callf = 1;

risposta.slideDown("slow");

}

else {

$h3.css(plus);

risposta.slideUp("slow");

}

//risposta.slideToggle("slow");

if (callf == 1 && settings.onCollapse != '') {

//setTimeout(alert('s'), 2000);

if (typeof onCollapse == "function") onCollapse();

}

});

}

})(jQuery);

Ajax

answered on 03 Feb 2012

7 answers

187 views

Apply VALIDATION when user Edit Node

I need add custom validation (not repeat node name) when user Edit/Add new node.
I try do it with EDITNODE event, but I can get the new name.
All treView and node are created Dynamically

this is my code:

Class1.cs
this code is execute in page_init

RadTreeView radTreeView   = new RadTreeView { ID = "tvWorkspace" };

                    RadTreeNode parentNode = new RadTreeNode(_resources.GetString("Workspace", new CultureInfo(_culture)))
                                                 {Expanded = true};

                    radTreeView.Nodes.Add(parentNode);


                    List<smWorkspace> workspaceFolder = new smOrganization().GetWorkspace(App.CurrentUserId());

                    if (workspaceFolder.Count > 0)
                    {
                        CreateNodes(workspaceFolder, radTreeView.Nodes[0]);
                    }

                    radTreeView.AllowNodeEditing = true;
                    radTreeView.NodeEdit += RadTreeView1_NodeEdit;

                    radTreeView.ContextMenus.Add(new ContextMenu().CreateContextMenu());
                    radTreeView.ContextMenuItemClick += RadTree_Contextmenutitem;
                    wsTreeview.Controls.Add(radTreeView);

                    workspaceDiv.Controls.Add(wsTreeview);

protected void RadTreeView1_NodeEdit(object sender, RadTreeNodeEventArgs e)
        {
            RadTreeNode nodeEdited = e.Node;
            string folderId = nodeEdited.Value;
            string Name = nodeEdited.Text;

//here I need add Validation By New name and Value.

}

private void CreateNodes(List<smWorkspace> workspaces, RadTreeNode parentnode)
        {
            int folderId = workspaces[0].FolderId;
            RadTreeNode rootParent = new RadTreeNode(workspaces[0].FolderName) {ImageUrl = "~/UI/Images/folder.png"};
            parentnode.Nodes.Add(rootParent);


            foreach (smWorkspace folder in workspaces)
            {
                if (folder.FolderId != folderId)
                {
                    folderId = folder.FolderId;
                    rootParent = new RadTreeNode(folder.FolderName) { ImageUrl = "~/UI/Images/folder.png", Value = folderId.ToString() };
                    parentnode.Nodes.Add(rootParent);

                }else
                {
                    RadTreeNode child = new RadTreeNode(folder.File.FileName);
                    string extension = Components.CommonFunctions.GetExtensionFile(folder.File.FileFullPath);
                    child.ImageUrl = CommonFunctions.GetDocumentIcon(extension);

                    rootParent.Nodes.Add(child);
                }

            }


        }

Value node is FolderId in Database.

how and Where I can add Custom Validation?...

I need show like this:

TreeView

answered on 03 Feb 2012

3 answers

106 views

MultiPage won't appear next to Tab Strip

I have a tab strip with 8 long tabs. I have them set to "VerticalLeft" orientation, and then I want my MultiPage to appear immediately to the right of the tabs. I looked at the examples for TabStrip in which this is accomplished, but when I try it in my project the Multipage is always below the TabStrip. I have no spaces between them, no BR's... is there some property somewhere I need to set so the Mutlipage will appear to the right of the TabStrip and not below it?

These 2 controls are inside a page from another MultiPage control, if that matters.

TabStrip

answered on 03 Feb 2012

7 answers

165 views

radopen() not working with IE9

Hi,

I know there's another thread like this too
http://www.telerik.com/community/forums/aspnet-ajax/general-discussions/radopen-is-not-working-properly-on-ie-9.aspx
But what I encountered is different.
Here's my code for calling the radopen when clicking a button.

ClientScript.RegisterStartupScript(Page.GetType(), ShowRemarks, "ShowRemarksDialog();", true);

Here's the javascript code in my main aspx page.

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

<script type="text/javascript">

function ShowRemarksDialog() {

Sys.Application.add_load(function() {

window.radopen("UpdateRemarks.aspx?ScreenType=1", "RemarksDialog");

return false;

});

}

function refreshGrid() {

$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");

}

</script>

</telerik:RadCodeBlock>

in the UpdateRemarks.aspx
I'm using this javascript to refresh my grid.

<script type="text/javascript">

function CloseAndRebind() {

GetRadWindow().BrowserWindow.refreshGrid();

GetRadWindow().close();

}

function GetRadWindow() {

var oWindow = null;

if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog

else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)

return oWindow;

}

function CancelEdit() {

GetRadWindow().close();

}

</script>

When the button is clicked, nothing is displayed in IE9.
It is working fine with IE7 though..
Any idea how to solve this???
THanks..

General Discussions

answered on 03 Feb 2012

1 answer

122 views

Upgrading to new Telerik Controls

Currently our company website uses the old 2006 version of Telerik controls. We are soon gonna upgrade to the newer version and I was wondering if both versions of telerik(the old-version we currently have and the new one) are able to be installed and still work with one another. I am afraid that certain controls will break on our website when upgrading to the newer version. Please let me know. Thank You.

Installer and VS Extensions

answered on 03 Feb 2012

5 answers

1.0K+ views

e.item.dataitem missing in grid.itemcommand

I have a grid which lists items in an order. The first column has a GridButtonColumn which a user can click to remove the item from the order.

The data in the grid is loaded using the OnNeedDataSource method, items are bound to the grid and hidden fields are set using OnItemDataBound method, and the event to remove the item uses the OnItemCommand method.

When the user clicks the delete/remove icon in the GridButtonColumn, the page fires the Grid_ItemCommand, but the e.item.DataItem is null, not allowing me to perform my action as I now don't know which item is to be removed from the order?

How do I ensure the DataItem is still available once the user clicks the delete/remove icon?

Grid

answered on 03 Feb 2012

1 answer

86 views

RadConfirm implementation in External js file

Hi,

I have a webpage in which javascript functionality was embedded in external js file.
Currently in external js file we have used ordinary confirm and i want to replace this with radconfirm.

I have used radconfirm on button click, where we have return false also with that. and then in javascript callback we do a post back using
"__dopostback() fuction.

I dont know how can i use this in external js file.

Current Scenario :
I am able to see radconfirm,but the execution is not stopping when we click on cancel.

Please help me.

Thanks,
A2H

Window

answered on 03 Feb 2012

3 answers

79 views

RadToolTipManager problem in IE 8

Problem in IE 8 and lower.
In page we haw RadGrid and RadToolTipManager. When paging applied, grid tooltip appears correctly but when filter applied content is empty. This problem only exists in old IE(7,8) .
Page:

<telerik:RadGrid ID="objectGrid" runat="server" AutoGenerateColumns="false" GridLines="None" AllowPaging="true" PageSize="25" EnableLinqExpressions="false"

AllowSorting="true" AllowFilteringByColumn="true" AllowMultiRowSelection="true"

OnNeedDataSource="LoadData"

OnItemDataBound="objectGrid_ItemDataBound"

OnItemCommand="objectGrid_OnItemCommand"

OnItemCreated="objectGrid_ItemCreated"

OnPageIndexChanged="objectGrid_OnPageIndexChanged">

<ExportSettings IgnorePaging="true" OpenInNewWindow="true" HideStructureColumns="true" >

<Excel Format="Html" />

</ExportSettings>

<MasterTableView CommandItemDisplay="Top">

<CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="false"/>

<Columns>

<telerik:GridTemplateColumn meta:resourcekey="colChecks" UniqueName="colChecks" AllowFiltering="false">

<ItemTemplate>

<table>

<tr>

<td width="20px">

<asp:ImageButton ID="imgActions" runat="server" meta:resourcekey="imgActions" ImageUrl="~/Images/wizzard_16.png" Visible='<%# this.HasAvailableChecks(Eval("Id")) %>' CommandArgument='<%# Eval("Id") %>' />

</td>

</tr>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<telerik:RadToolTipManager ID="toolTipManager" runat="server" ShowEvent="OnClick" EnableViewState="true"

AutoTooltipify="false" OnAjaxUpdate="OnAjaxUpdate" ManualClose="true" Position="BottomRight"

RelativeTo="Element" OnClientHide="OnClientClose" Width="300px">

</telerik:RadToolTipManager>

Code:

protected void objectGrid_OnItemCommand(object source, GridCommandEventArgs e)

{

if (e.CommandName == "ExportToExcel")

{

GridExport();

}

if (e.CommandName == "Page" || e.CommandName == "ChangePageSize" || e.CommandName == "Filter")

{

toolTipManager.TargetControls.Clear();

BindData();

}

protected void objectGrid_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item.ItemType == GridItemType.AlternatingItem || e.Item.ItemType == GridItemType.Item)

{

// Actions

ImageButton actions = e.Item.FindControl("imgActions") as ImageButton;

toolTipManager.TargetControls.Add(actions.ClientID, actions.CommandArgument, true);

}

protected void objectGrid_OnPageIndexChanged(object sender, GridPageChangedEventArgs e)

{

toolTipManager.TargetControls.Clear();

}

ToolTip

answered on 03 Feb 2012

3 answers

721 views

Setting innerhtml of an item

Article at
http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlcontainercontrol.innerhtml.aspx
suggests you can set the innerhtml of items

So I have

<telerik:RadDock ID="RadDock3" runat="server" Width="300px" Resizable="True" DockHandle="Grip">

<ContentTemplate>

<div>

<span id="Message" runat="server">Hello World</span>

</div>

</ContentTemplate>

</telerik:RadDock>

In my code behind I have

Dim myHtml As String = Message.InnerHtml

When I try to run it says build errors, but doesn't display any ??

Is getting and setting the innerhtml possible ?

Thanks
Jim

General Discussions

answered on 03 Feb 2012

7 answers

101 views

RadToolTipManager + AjaxUpdate + jQuery

Hi, i've got a image map. That i've got a radtooltipmanager attached to. All works well - i've got an ajaxupdate that fires retrieves some information from the database on area on the imagemap, and displays it in the tooltip.

However, the issue being is that after the ajaxupdate has completed, i have some jquery on the page which seems to stop working.
Previously when i've had issues with ajax requests and cancelling jquery / javascript i've added the control that contains the jquery into the radajaxmanager of the control that's caused the ajax request. I've tried this with adding the radtooltipmanager into the radajaxmanager, and adding the panel tha contains my jquery stuff into the updatedcontrols.

This panel contains the necessary javascript enclosed in a radscriptblock, including a link to the jquery external file. (it doesnt however include the jquery ui which i think this piece of jquery uses.)

Any suggestions ?

ToolTip

answered on 03 Feb 2012