This question is locked. New answers and comments are not allowed.
Hi Guys,
I am doing a project with Razor and MVC3. I want to use the telerik mvc grid but when I add the @Html.Telerik().ScriptRegistrar(), it breaks my jquery datepicker dropdown (doesn't fire and I get an error).
I spent a couple hours trying to get this to work by trying different versions of Jquery but I finally got fed up and started a sample project from scratch. It is here I found it working fine like it used to until i added the telerik scriptregistrar. Is there a way to get there two items to co-operate so I can use the telerik stuff with the JQuery UI stuff?
Below is a link to the master (_layout) where i register everything and then the actual view
_Layout.cshtml code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.6.2.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/ui/jquery.ui.core.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/ui/jquery.ui.widget.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/ui/jquery.ui.datepicker.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/ui/i18n/jquery.ui.datepicker-nl.js")"></script>
@(Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group
.Add("telerik.examples.css")
.Add("telerik.windows7.min.css")
.Combined(true)
.Compress(true))
)
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Products", "Index", "Product")</li>
<li>@Html.ActionLink("Orders", "Index", "Order")</li>
<li>@Html.ActionLink("Customers", "Index", "Customer")</li>
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
@Html.Telerik().ScriptRegistrar()
</div>
</body>
</html>
Customer\Index.cshtml
@model ICollection<OrderDB.Models.Customer>
@{
ViewBag.Title = "Index";
}
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("#Hi").hide();
});
$('#TextBox').datepicker({ dateFormat: "dd/mm/yy" });
});
</script>
<h2>Index</h2>
@{ var grid = new WebGrid(Model);
@grid.GetHtml(columns: grid.Columns(
grid.Column("Id", "Id", canSort: true),
grid.Column(format: (item) => Html.ActionLink(string.Format("{0} {1}", (string)item.FirstName, (string)item.LastName), "Details", new { id = item.Id }),header: "Name", columnName: "FirstName", canSort: true),
grid.Column("FirstName", "First Name", canSort: true),
grid.Column("LastName", "Last Name", canSort: true),
grid.Column("Email", "Email", canSort: true),
grid.Column("PhoneNumber", "Phone Number", canSort: true),
grid.Column("FollowUpDate", "Follow Up Date", canSort: true),
grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.Id }))
));
}
<input id="TextBox" type="text" />
<p>
@Html.ActionLink("Create New", "Create")
</p>
I am doing a project with Razor and MVC3. I want to use the telerik mvc grid but when I add the @Html.Telerik().ScriptRegistrar(), it breaks my jquery datepicker dropdown (doesn't fire and I get an error).
I spent a couple hours trying to get this to work by trying different versions of Jquery but I finally got fed up and started a sample project from scratch. It is here I found it working fine like it used to until i added the telerik scriptregistrar. Is there a way to get there two items to co-operate so I can use the telerik stuff with the JQuery UI stuff?
Below is a link to the master (_layout) where i register everything and then the actual view
_Layout.cshtml code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.6.2.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/ui/jquery.ui.core.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/ui/jquery.ui.widget.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/ui/jquery.ui.datepicker.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/ui/i18n/jquery.ui.datepicker-nl.js")"></script>
@(Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group
.Add("telerik.examples.css")
.Add("telerik.windows7.min.css")
.Combined(true)
.Compress(true))
)
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Products", "Index", "Product")</li>
<li>@Html.ActionLink("Orders", "Index", "Order")</li>
<li>@Html.ActionLink("Customers", "Index", "Customer")</li>
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
@Html.Telerik().ScriptRegistrar()
</div>
</body>
</html>
Customer\Index.cshtml
@model ICollection<OrderDB.Models.Customer>
@{
ViewBag.Title = "Index";
}
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("#Hi").hide();
});
$('#TextBox').datepicker({ dateFormat: "dd/mm/yy" });
});
</script>
<h2>Index</h2>
@{ var grid = new WebGrid(Model);
@grid.GetHtml(columns: grid.Columns(
grid.Column("Id", "Id", canSort: true),
grid.Column(format: (item) => Html.ActionLink(string.Format("{0} {1}", (string)item.FirstName, (string)item.LastName), "Details", new { id = item.Id }),header: "Name", columnName: "FirstName", canSort: true),
grid.Column("FirstName", "First Name", canSort: true),
grid.Column("LastName", "Last Name", canSort: true),
grid.Column("Email", "Email", canSort: true),
grid.Column("PhoneNumber", "Phone Number", canSort: true),
grid.Column("FollowUpDate", "Follow Up Date", canSort: true),
grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.Id }))
));
}
<input id="TextBox" type="text" />
<p>
@Html.ActionLink("Create New", "Create")
</p>
3 Answers, 1 is accepted
0
Accepted
Hi Tim,
Kind regards,
Tsvetomir Tsonev
the Telerik team
The ScriptRegistrar includes jQuery by default. In your case it overwrites the jQuery that you've included. Please set jQuery(false) as described here:
Html.Telerik().ScriptRegistrar().jQuery(false)Tsvetomir Tsonev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Tim
Top achievements
Rank 1
Rank 1
answered on 11 Oct 2011, 08:35 PM
Thanks it worked like a charm!
0
Matthew
Top achievements
Rank 1
Rank 1
answered on 26 Jul 2012, 02:33 AM
** DropDownList in Grid EditorTemplate Not Fixed **
This didn't fix the problem for me. I hate to bring up an old thread, but I've tried literally for weeks.
When I tried the solution above, I no longer got the datepicker error. However, my telerik drop down was no longer recognized and throws an error when trying to access the object via jQuery. As well, the dropdownlist does not open when clicked.
I tried the following as suggested in other threads:
However, this makes the jQuery datepicker throw the original error of not being recognized.
Below are the code snippets:
Teams.cshtml
Division.cshtml
I apologize for the length of the post. Obviously, I've omitted code for brevity, but left in enough to hopefully give a sense of what I'm trying to accomplish. Like I said, I've tried to fix this for weeks without asking for help, but I'm always left with either an unrecognizable datepicker or an unrecognizable telerik dropdownlist.
_Layout.cshtml, Teams.cshtml, and Division.cshtml in full are all attached.
Thanks in advance,
Matthew
This didn't fix the problem for me. I hate to bring up an old thread, but I've tried literally for weeks.
When I tried the solution above, I no longer got the datepicker error. However, my telerik drop down was no longer recognized and throws an error when trying to access the object via jQuery. As well, the dropdownlist does not open when clicked.
I tried the following as suggested in other threads:
@(Html.Telerik().ScriptRegistrar().jQuery(false) .jQueryValidation(false).Globalization(true) .DefaultGroup(g => g.Add("2012.1.214/jquery-1.7.1.min.js") .Add("2012.1.214/telerik.common.min.js") .Add("2012.1.214/telerik.list.min.js")))However, this makes the jQuery datepicker throw the original error of not being recognized.
Below are the code snippets:
Teams.cshtml
function TeamsGrid_onEdit(e) { $("#DivisionId").data('tDropDownList');}<div> @(Html.Telerik().Grid<TeamDAO>() .Name("TeamsGrid") .ClientEvents(events => events.OnEdit("TeamsGrid_onEdit")) .DataKeys(keys => keys.Add(c => c.TeamId)) .DataBinding(dataBinding => dataBinding.Ajax()
.Select("AjaxSelectTeams", "NCAA")) .Editable(editing => editing.Mode(GridEditMode.InLine)) .Columns(columns => { columns.Bound(c => c) .ClientTemplate( "<#= Division.Abbreviation #>" + "<# if (SubDivisionId != 0) { #>" + " <#= SubDivision.Abbreviation #>" + "<# } #>" ) .EditorTemplateName("Division") .Title("Division"); } )</div>@{ Html.Telerik().ScriptRegistrar().jQuery(false).Render(); }Division.cshtml
@using Telerik.Web.Mvc.UI@{ var divisions = NCAAController.GetDivisions().OrderBy(c => c.Name); var subDivisions = NCAAController.GetSubDivisions().OrderBy(cd => cd.Name);}@(Html.Telerik().DropDownList().Name("DivisionId") .BindTo(new SelectList(divisions, "DivisionId", "Abbreviation")) .Placeholder("Division...") .CascadeTo("SubDivisionId"))@(Html.Telerik().DropDownList().Name("SubDivisionId") .BindTo(new SelectList(subDivisions, "SubDivisionId", "Abbreviation")) .DataBinding(binding => binding.Ajax().Select("GetSubDivisions", "NCAA")) .Placeholder("Sub Division..."))I apologize for the length of the post. Obviously, I've omitted code for brevity, but left in enough to hopefully give a sense of what I'm trying to accomplish. Like I said, I've tried to fix this for weeks without asking for help, but I'm always left with either an unrecognizable datepicker or an unrecognizable telerik dropdownlist.
_Layout.cshtml, Teams.cshtml, and Division.cshtml in full are all attached.
Thanks in advance,
Matthew