using telerik grid with jquery ui dialog!

Question

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

from 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 the dialog is never shown!! and the user control is shown inside the master page as if i'm not using a dialog.

inside the "form" user control, when i disable the grid, every thing works fine and the dialog is shown correctly. when i used the firebug to figure out the problem, the following error appeared:

$ is not defined????

any body has an idea ??

here is the master 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>

Can you post more info? The master page and partial view would be of help. — Atanas Korchev
– Atanas Korchev, Commented Jul 19, 2010 at 12:24
hi korchev, thanks for the reply, I've modified the question and added more information. — Nour
– Nour, Commented Jul 20, 2010 at 7:06

Todd · Accepted Answer · 2010-07-20 19:16:53Z

When you use the Telerik ScriptRegistrar, by default it will output a link to jQuery at the bottom of your page. If you have code "higher" in your page that needs jQuery, or if you're manually adding jQuery to your page (as you are in your code example), you can disabled the ScriptRegistrar's behavior, like this:

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

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

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

As a final note, if you are going 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 details are available in the online docs.

Nour · Accepted Answer · 2010-07-20 18:46:26Z

2

i figured out 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 don't know how did this solve the problem.

and I'm not that professional in JavaScript.

answered Jul 20, 2010 at 18:46

Nour

5,5093 gold badges46 silver badges73 bronze badges

Collectives™ on Stack Overflow

using telerik grid with jquery ui dialog!

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related