[Solved] How to populate Window with new data

[Michael]

I have a grid with one field that has an ID to a totally different table. When I click this ID field, I have a Window modal pop up. But I can't seem to figure out some things.

1. I must be blind, but I can't seem to find an example of the LoadContentFrom anywhere. Every example I see only shows the view side and not the controller side.

2. I need to load and then save a single record, that has a totally different model from the List<> of records in the grid.

3. How do I pass the ID in the grid record to the Window then pass that to the ActionResult method in the Controller.

[Craig Fisher]

You can dynamically pass parameters to the Window if you create it via the client API, like this:

 

 

function ShowLookupWindow(param) {

    lookupWindow = $.telerik.window.create({

        name: "LookupWindow",

        title: "Lookup",
        contentUrl: '/Portal/controller/Lookup?param='+param,
        modal: true,

        resizable: true,

        draggable: true,

        width: 700,

        height: 350,

        minHeight: 250,

        minWidth: 250,

        maxHeight: 500,

        maxWidth: 500,

        onClose: function(e) {

            e.preventDefault();

            lookupWindow.data('tWindow').destroy();

        }

    });

    lookupWindow.data('tWindow').center().open();

}

[Steven Archibald]

I'm trying your code, but when the event fires to create the window I get telerik.window is null or not an object.  What am I likely to be missing on the page.  

If I use the standard @Html.Telerik().Window(), the window will pop up, but I can't pass any parameters to it that way....

[nachid]

telerik.window.js is certainly missing
You should "scriptRegistrar" it before you can you have access to  $.telerik.window.create

[Steven Archibald]

I tried that, and still not working. I'm re-adding the code, because the textbox doesn't seem to work well when you post code directly from the VS editor.

Here is my view:

@model FRB.EC.AdminWebApp.ModelViews.AccountGroupListMV
@{
 ViewBag.Title = "Index";
 Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
 Index</h2>
<p>
 @Html.ActionLink("Create New Entity", "Create")
 @(Html.Telerik().Grid(Model.Items)
  .Name("Grid")
  .DataKeys(keys => keys.Add(row => row.RowID))
  .Scrollable(scrolling => scrolling.Enabled(false))
  .Sortable(sorting => sorting.Enabled(true))
  .Filterable()
  .Pageable(paging =>
    paging.PageSize(10, new int[] { 10, 15, 20, 50, 100, 200 })
    .Style(GridPagerStyles.NextPreviousAndNumeric | GridPagerStyles.PageSizeDropDown | GridPagerStyles.PageInput)
    .Position(GridPagerPosition.Bottom)
    )
  .Footer(true)
  .DataBinding(dataBinding =>
  {
   dataBinding.Server().Select("Index", "AccountGroup");
  })
  .Columns(columns =>
  {
   columns.Bound(r => r.AccountFamily.AccountFamilyName);
   columns.Bound(r => r.RowID);
   columns.Template(
    @<text> <a href="#" onclick="javascript:linkToDetails(@item.RowID, @Model.BusinessManagerID);">@item.AccountTitle</a>
 </text>);
   columns.Bound(r => r.ACHLimit).Title("ACH Limit").Format("{0:0.00}");
   columns.Bound(r => r.PrimaryACHApprover.BMPartyName).Title("ACH Primary Approver");
   columns.Bound(r => r.SecondaryACHApprover.BMPartyName).Title("ACH Secondary Approver");
   columns.Bound(r => r.PrimaryWireApprover.BMPartyName).Title("Wire Primary Approver");
   columns.Bound(r => r.SecondaryWireApprover.BMPartyName).Title("Wire Secondary Approver");
  })
)
 @Html.HiddenFor(m => m.CurrentPageNumber)
 @Html.HiddenFor(m => m.CurrentPageSize)
 <script language="javascript" type="text/javascript">
  function linkToDetails(rowID, busMgrID)
  {
   //  debugger;
   //  $("#CurrentPageNumber").valueOf  = $("#Grid").data('tGrid').get_CurrentPage();
   //  $("#CurrentPageSize").valueOf  = $("#Grid").data('tGrid').get_PageSize();
   //  var url = "/AccountGroup/Details/" + rowID + "/" + busMgrID; //  + "/" + pageNbr + "/" + pageSz;
   //  document.location.href = url;
   //   $('#Window').data('tWindow').content(popupcontent).center().open();
   //$('#Window').data('tWindow').ContentUrl("/AccountGroup/EditPopup/" + rowID + "/" + busMgrID).center().open();
//   $('#Window').data('tWindow').loadContentFrom("/AccountGroup/EditPopup/" + rowID + "/" + busMgrID).center().open();

   editWindow = $().telerik.window.create(
   {
    name: "EditWindow",
    title: "Edit Entity",
    contentUrl: "/AccountGroup/EditPopup/" + rowID + "/" + busMgrID,
    modal: true,
    width: 800,
    height: 700,
    onClose: function (e)
    {
     e.preventDefault();
     editWindow.data('tWindow').destroy();
    }
   }
  );
   editWindow.data('tWindow').center().open();
  }
 </script>
 @(Html.Telerik().ScriptRegistrar().DefaultGroup(g=>g.Add("telerik.window.min.js")).DefaultGroup(g=>g.Add("telerik.draganddrop.min.js")))

Here is my layout:
<!DOCTYPE html>
<html>
<head id="Head1">
 <title>@ViewBag.Title</title>
 <link href="@Url.Content("~/Styles/Site.css")" rel="stylesheet" type="text/css" />
 <link href="@Url.Content("~/Content/teleriksite.css")" rel="stylesheet" type="text/css" />
 <link href="@Url.Content("~/Content/2011.1.315/telerik.common.min.css")" rel="Stylesheet" type="text/css" />
 <link href="@Url.Content("~/Content/2011.1.315/telerik.firstrepublic.css")" rel="Stylesheet" type="text/css" />
 <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
<body class="template">
 <div class="borderless">
  <div class="borderless">
   <table class="borderless" border="0" cellpadding="0" cellspacing="0" width="100%"
    align="center" bgcolor="#000000">
    <tr class="borderless">
     <td class="borderless" bgcolor="Black" align="left" style="padding: 3px;">
      <br />
      <a id="A1" runat="server" href="~/"><span class="EagleConnectTitle">&nbsp; &nbsp; EagleConnect
       Administration Console</span> </a>
      <br />
      <br />
      <font size="2" color="#FFFFFF" style="padding: 3px;">&nbsp; &nbsp; &nbsp; @ViewBag.ReleaseString</font>
     </td>
     <td class="borderless" bgcolor="Black" align="right">
      <img src="file://sfhttp12p/EaglesNET/graphics/frb_logo3.gif" alt="First Republic Bank"
       style="height: 58px; width: 209px" />
     </td>
    </tr>
    <tr class="borderless">
     <td class="borderless" bgcolor="#336633" align="left" valign="middle">
      <font size="1" color="#FFFFFF" style="padding: 10px;"><b>@ViewBag.Today.ToString("dddd, MMMM d")</b></font>
     </td>
     <td class="borderless" bgcolor="#336633" align="right">
      <font size="1" color="#FFFFFF" style="padding: 10px;"><b>
       @ViewBag.AuthorizedUser
      </b></font>
     </td>
    </tr>
   </table>
  </div>
  <br />
  @Html.Partial("TelerikMainMenu")
 </div>
 <div id="main" class="borderless" style="text-align: left; margin-top: 5px;">
  @RenderBody()
 </div>
 <div id="sitefooter">
  <a title="For any issues, contact Tech Support" href="mailto:[e-mail]">
   Tech Support</a>
 </div>
 @(Html.Telerik().ScriptRegistrar().Globalization(true))
</body>
</html>

[Deepthi]

Hi Craig,
  I followed ur method of writing a javascript to pass parameters to a window. Its calling the required action but i am stuck at passing parameters. I am not able to pass any parameteres. could you elaborate the code above to pass parameters and also how do we access this data in action?

could you please let me know on this.


Thanks
Deepthi