Geek Answers Handbook

Using the telerik grid with the jquery ui! Dialog box

in a mvc user control called form.ascx, I have a Telerik grid contained in a div called "details".

on a page called edit.aspx, I wrote the following:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <div id="details"> <%Html.RenderPartial("form", Model != null ? Model.CurrentEntity : null); %> </div> <script type="text/javascript" language="javascript"> $(document).ready(function () { $('#details').dialog( { modal: true, title: "add", width: 815, buttons: { 'save': function () { $("form:first").trigger("submit"); }, 'close': function () { $(this).dialog('close'); } } }); }); </script> </asp:Content>

The problem is that the dialog is never displayed! and the user control appears on the main page as if I were not using a dialog.

inside the custom form element, when I turn off the grid, everything works fine and the dialog displays correctly. when I used firebug to find out the problem, the following error appeared:

$ not defined ????

does any body have an idea?

here is the main page:

  <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %> <%@ Import Namespace="Telerik.Web.Mvc.UI" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <link type="text/css" href="../../Content/Site.css" rel="stylesheet" /> <link type="text/css" href="../../content/css/start/jquery-ui-1.8.2.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="/Scripts/jquery-1.4.2.js"></script> <script type="text/javascript" src="/Scripts/jquery-ui-1.8.2.custom.js"></script> <%--<script type="text/javascript" src="../../Scripts/Jquery.Validate.js"></script>--%> <%--<script type="text/javascript" src="../../Scripts/MicrosoftMvcJQueryValidation.js"></script>--%> <title> <asp:ContentPlaceHolder ID="TitleContent" runat="server" /> </title> </head> <body> <%= Html.Telerik().StyleSheetRegistrar() .DefaultGroup(group => group.Add("telerik.common.css") .Add("telerik.outlook.css")) <!----- some html content only -----> <div id="maincontent" class="fixed"> <asp:ContentPlaceHolder ID="MainContent" runat="server"> </asp:ContentPlaceHolder> </div> <asp:ContentPlaceHolder runat="server" ID="Footer" /> <% Html.Telerik().ScriptRegistrar().DefaultGroup(group => { group.Add("telerik.examples.js").Compress(true); }). OnDocumentReady(() => { %>prettyPrint();<% }).Render(); %> </body> </html>

and here is the partial view form .acsx:

 <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Bereau.Core.IncommingCorrespondence>" %> <%@ Import Namespace="System.Web.Mvc.Html" %> <%@ Import Namespace="BureauModule.Utility" %> <%@ Import Namespace="Telerik.Web.Mvc.UI" %> <%--<%= Html.ValidationSummaryJQuery("Error must be fixed.", new Dictionary<string, object> { { "id", "valSumId" } })%>--%> <%--<% Html.EnableClientValidation(); %>--%> <% using (Html.BeginForm()) { %> <%=Html.DisplayFor (c=>c.Photocopy ) %> <%--<% ViewContext.FormContext.ValidationSummaryId = "valSumId"; %>--%> <form action="" method="post" id="customer_form" dir="rtl"> <div class="editor-label"> <%:Html.LabelFor(c => c.Overstatment)%> <%=Html.TextBoxFor(c => c.Overstatment,new { @class ="text ui-widget-content ui-corner-all"})%> <%--<%= Html.ValidationMessageFor(model => model.Overstatment,"*") %>--%> </div> <div> <label for="CorrespondenceNumber">CorrespondenceNumber:</label> <%=Html.TextBoxFor(c => c.CorrespondenceNumber, new { @class = "text ui-widget-content ui-corner-all" })%> <span> <%--<%= Html.ValidationMessageFor(model => model.CorrespondenceNumber, "*")%>--%></span> </div> <div> <label for="Nature">Nature:</label> <%=Html.DropDownList("Nature")%> <%--<%= Html.ValidationMessageFor(model => model.Nature, "*")%>--%> </div> <div> <label for="Sender">Sender:</label> <%=Html.DropDownList("Sender")%> <%--<%= Html.ValidationMessageFor(model => model.Sender, "*")%>--%> </div> <div class="correspondenceReceiver"> <% Html.Telerik().Grid<Bereau.Core.CorrespondenceDetail>(Model != null ? Model.Details : null) .Name("Grid") .DataKeys(keys => keys.Add(c => c.CorrespondenceDetailID)) .HtmlAttributes(new { @class = "t-grid-rtl" }) .Columns(columns => { columns.Bound(c => c.CorrespondenceDetailID).Visible(false); columns.Bound(c => c.Sender).Title("Sender"); columns.Bound(c => c.Count).Title("Count"); columns.Bound(c => c.Date).Title("Date").Format("{0:yyyy/MM/dd}"); columns.Bound(c => c.Notes).Title("Notes"); columns.Command(c => c.Edit()); }) .ToolBar(t => t.Insert()) .DataBinding (c => c.Ajax() .Select("Select", "IncommingCorespondence") .Insert("InsertDetail", "IncommingCorespondence") .Update("UpdateDetail", "IncommingCorespondence") ) .Scrollable() .Sortable() .Pageable() .Render(); %> <% Html.Telerik().ScriptRegistrar().OnDocumentReady(() => { %> $('.insert-button').click(function(e) { e.preventDefault(); $('#Grid').data('tGrid').createRow(); }); <% }); %> </div> <input type="submit" runat="server" /> <% } %> </form>
+6
c # jquery-ui asp.net-mvc telerik telerik-mvc
source share
2 answers

I understood the problem:

i disabled the following script files (which are already disabled in the situation):

 <%--<script type="text/javascript" src="../../Scripts/Jquery.Validate.js"></script>--%> <%--<script type="text/javascript" src="../../Scripts/MicrosoftMvcJQueryValidation.js">/script>--%>

and changed the following code:

 % Html.Telerik().ScriptRegistrar().DefaultGroup(group => { group.Add("telerik.examples.js").Compress(true); }). OnDocumentReady(() => { %>prettyPrint();<% }).Render(); %>

to

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

I do not know how this solved the problem.

and I'm not a JavaScript professional.

+2
source share

When you use Telerik ScriptRegistrar , by default it will display a jQuery link at the bottom of your page. If you have the “above” code on your page that requires jQuery, or if you manually add jQuery to your page (as in the code example), you can disable the ScriptRegistrar behavior, for example:

 Html.Telerik().ScriptRegistrar().jQuery(false).Render();

Also note that you do not need "telerik.examples.js" or "prettyPrint ()"; unless you actually use this code. These resources are used in Telerik demos, but usually not on other websites.

You should be able to update ScriptRegistrar as shown above and then re-enable jQuery validation scripts without any problems.

As a final note, if you intend to use ScriptRegistrar compression, you need to register the Asset HttpHandler in your web.config:

 <add verb="GET,HEAD" path="asset.axd" validate="false" type="Telerik.Web.Mvc.WebAssetHttpHandler, Telerik.Web.Mvc"/>

More information is available in online documents .

+13
source share

More articles:


All Articles