title: using telerik grid with jquery ui dialog!
body: <p>in mvc user control called form.ascx, I have a Telerik Grid contained in a div called "details".</p>
  
  <p>from a page called edit.aspx i wrote the following:</p>
  
  <pre><code>    &lt;asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"&gt;
      &lt;div id="details"&gt;
          &lt;%Html.RenderPartial("form", Model != null ? Model.CurrentEntity : null); %&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript" language="javascript"&gt;
          $(document).ready(function () {
              $('#details').dialog(
              { modal: true,
                  title: "add",
                  width: 815,
                  buttons: {
                      'save': function () { $("form:first").trigger("submit"); },
                      'close': function () { $(this).dialog('close'); }
                  }
              });
          });
      &lt;/script&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <p>$ is not defined????</p>
  
  <p>any body has an idea ??</p>
  
  <p>here is the master page:</p>
  
  <pre><code>    &lt;%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %&gt;
      &lt;%@ Import Namespace="Telerik.Web.Mvc.UI" %&gt;
  
      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
      &lt;head&gt;
          &lt;link type="text/css" href="../../Content/Site.css" rel="stylesheet" /&gt;
          &lt;link type="text/css" href="../../content/css/start/jquery-ui-1.8.2.custom.css" rel="Stylesheet" /&gt;
          &lt;script type="text/javascript" src="/Scripts/jquery-1.4.2.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/Scripts/jquery-ui-1.8.2.custom.js"&gt;&lt;/script&gt;
      &lt;%--&lt;script type="text/javascript" src="../../Scripts/Jquery.Validate.js"&gt;&lt;/script&gt;--%&gt;
          &lt;%--&lt;script type="text/javascript" src="../../Scripts/MicrosoftMvcJQueryValidation.js"&gt;&lt;/script&gt;--%&gt;
          &lt;title&gt;
              &lt;asp:ContentPlaceHolder ID="TitleContent" runat="server" /&gt;
          &lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;%= Html.Telerik().StyleSheetRegistrar()
          .DefaultGroup(group =&gt; group.Add("telerik.common.css")
                                      .Add("telerik.outlook.css"))
  &lt;!----- some html content only -----&gt;
  
          &lt;div id="maincontent" class="fixed"&gt;
              &lt;asp:ContentPlaceHolder ID="MainContent" runat="server"&gt;
              &lt;/asp:ContentPlaceHolder&gt;
          &lt;/div&gt;
  
      &lt;asp:ContentPlaceHolder runat="server" ID="Footer" /&gt;
      &lt;% Html.Telerik().ScriptRegistrar().DefaultGroup(group =&gt; { group.Add("telerik.examples.js").Compress(true); }).
             OnDocumentReady(() =&gt;
             { %&gt;prettyPrint();&lt;% }).Render(); %&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and here is the partial view form.acsx:</p>
  
  <pre><code>&lt;%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl&lt;Bereau.Core.IncommingCorrespondence&gt;" %&gt;
  &lt;%@ Import Namespace="System.Web.Mvc.Html" %&gt;
  &lt;%@ Import Namespace="BureauModule.Utility" %&gt;
  &lt;%@ Import Namespace="Telerik.Web.Mvc.UI" %&gt;
  &lt;%--&lt;%= Html.ValidationSummaryJQuery("Error must be fixed.", new Dictionary&lt;string, object&gt; { { "id", "valSumId" } })%&gt;--%&gt;
  &lt;%--&lt;% Html.EnableClientValidation(); %&gt;--%&gt;
  &lt;% using (Html.BeginForm())
     { %&gt;
  &lt;%=Html.DisplayFor (c=&gt;c.Photocopy ) %&gt;
  &lt;%--&lt;% ViewContext.FormContext.ValidationSummaryId = "valSumId"; %&gt;--%&gt;
  &lt;form action="" method="post" id="customer_form" dir="rtl"&gt;
  &lt;div class="editor-label"&gt;
      &lt;%:Html.LabelFor(c =&gt; c.Overstatment)%&gt;
      &lt;%=Html.TextBoxFor(c =&gt; c.Overstatment,new { @class ="text ui-widget-content ui-corner-all"})%&gt;
      &lt;%--&lt;%= Html.ValidationMessageFor(model =&gt; model.Overstatment,"*") %&gt;--%&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label for="CorrespondenceNumber"&gt;CorrespondenceNumber:&lt;/label&gt;
      &lt;%=Html.TextBoxFor(c =&gt; c.CorrespondenceNumber, new { @class = "text ui-widget-content ui-corner-all" })%&gt;
      &lt;span&gt;
          &lt;%--&lt;%= Html.ValidationMessageFor(model =&gt; model.CorrespondenceNumber, "*")%&gt;--%&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label for="Nature"&gt;Nature:&lt;/label&gt;
      &lt;%=Html.DropDownList("Nature")%&gt;
      &lt;%--&lt;%= Html.ValidationMessageFor(model =&gt; model.Nature, "*")%&gt;--%&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label for="Sender"&gt;Sender:&lt;/label&gt;
      &lt;%=Html.DropDownList("Sender")%&gt;
      &lt;%--&lt;%= Html.ValidationMessageFor(model =&gt; model.Sender, "*")%&gt;--%&gt;
  &lt;/div&gt;
  &lt;div class="correspondenceReceiver"&gt;
      &lt;% Html.Telerik().Grid&lt;Bereau.Core.CorrespondenceDetail&gt;(Model != null ? Model.Details : null)
          .Name("Grid")
          .DataKeys(keys =&gt; keys.Add(c =&gt; c.CorrespondenceDetailID))
          .HtmlAttributes(new { @class = "t-grid-rtl" })
          .Columns(columns =&gt;
          {
              columns.Bound(c =&gt; c.CorrespondenceDetailID).Visible(false);
              columns.Bound(c =&gt; c.Sender).Title("Sender");
              columns.Bound(c =&gt; c.Count).Title("Count");
              columns.Bound(c =&gt; c.Date).Title("Date").Format("{0:yyyy/MM/dd}");
              columns.Bound(c =&gt; c.Notes).Title("Notes");
              columns.Command(c =&gt; c.Edit());
          })
          .ToolBar(t =&gt; t.Insert())
          .DataBinding
          (c =&gt; c.Ajax()
              .Select("Select", "IncommingCorespondence")
              .Insert("InsertDetail", "IncommingCorespondence")
              .Update("UpdateDetail", "IncommingCorespondence")
              )
          .Scrollable()
          .Sortable()
          .Pageable()
          .Render();
      %&gt;
      &lt;% Html.Telerik().ScriptRegistrar().OnDocumentReady(() =&gt;
         {
      %&gt;
      $('.insert-button').click(function(e) { e.preventDefault(); $('#Grid').data('tGrid').createRow();
      });
      &lt;% }); %&gt;
  &lt;/div&gt;
  &lt;input type="submit" runat="server" /&gt;
  &lt;% } %&gt;
  &lt;/form&gt;
  </code></pre>