This is a migrated thread and some comments may be shown as answers.

Panel Bar and JQuery

4 Answers 148 Views

PanelBar

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

4 Answers, 1 is accepted

answered on 22 Dec 2010, 11:37 AM

Hello,

The Telerik PanelBar control exists in an MVC partial view of mine, which I load and reload using JQuery for ASYNC features. When I postback via JQuery and get the result, the panelbar stops working.

Following are the sample code snippets. Please advice how can we make it work.
Thanks,

Site.Master

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<head runat="server">

<title>

<asp:ContentPlaceHolder ID="TitleContent" runat="server" />

</title>

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

<link href="../../Content/ui.datepicker.css" rel="stylesheet" type="text/css" />

<%-- <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>--%>

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>

<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

<script src="../../Scripts/2010.3.1110/jquery-1.4.3.min.js" type="text/javascript"></script>

<% Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(group => group.Add("telerik.common.css")

.Add("telerik.vista.css"))

.Render();

%>

</head>

<body>

<div class="page">

<div id="header">

<div id="title">

<h1>My MVC Application</h1>

</div>

<div id="logindisplay">

<% Html.RenderPartial("LogOnUserControl"); %>

</div>

<div id="menucontainer">

<ul id="menu">

<li><%= Html.ActionLink("Home", "Index", "Home")%></li>

<li><%= Html.ActionLink("About", "About", "Home")%></li>

</ul>

</div>

<div id="main">

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

<% Html.Telerik().ScriptRegistrar().Render(); %>

<div id="footer">

</div>

</body>

</html>

Index.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

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

Home Page

</asp:Content>

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

<script type="text/javascript">

function onBegin() {

alert('Begin');

}

function onComplete() {

alert('Complete');

}

function onFailure() {

alert('Failure');

}

function onSuccess() {

alert('Success');

}

</script>

<% using (Ajax.BeginForm("RenderTelerikPanelBar", "Home", new AjaxOptions {

UpdateTargetId = "myTargetId",

OnBegin = "onBegin",

OnComplete = "onComplete",

OnFailure = "onFailure",

OnSuccess = "onSuccess"

}))

{ %>

<div id="myTargetId">

<% Html.RenderPartial("~/Views/Home/TelerikPanelBar.ascx"); %>

</div>

<div style="padding-top: 15px;">

<input type="submit" name="Next" value="Next" />

</div>

<%} %>

</asp:Content>

TelerikPanelBar.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<div id="myTarget">

<% Html.Telerik().PanelBar()

.Name("PanelBar")

.SelectedIndex(0)

.Items(item => {

item.Add().Text("Panel 1").Items(SubItems => {

SubItems.Add().Text("SubItem 1.1");

SubItems.Add().Text("SubItem 1.2");

});

item.Add().Text("Panel 2").Items(SubItems => {

SubItems.Add().Text("SubItem 2.1");

SubItems.Add().Text("SubItem 2.2");

});

}).Render();%>

</div>

HomeController.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace TestMvcApplication.Controllers

{

[HandleError]

public class HomeController : Controller

{

public ActionResult Index()

{

ViewData["Message"] = "Welcome to ASP.NET MVC!";

return View();

}

public ActionResult About()

{

return View();

}

public ActionResult RenderTelerikPanelBar()

{

return PartialView("TelerikPanelBar");

}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Panel Bar and JQuery

4 Answers, 1 is accepted