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>