This is a migrated thread and some comments may be shown as answers.

[Solved] Grid on Window not working

18 Answers 537 Views

Window

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Alex asked on 26 Jul 2010, 10:40 PM

Hi I was trying to create a new Window which loads its contents from an aspx page which contains Telerik's Grid...the window shows but the grid is not making the ajax call to grab the data...

The window code is on a page based on a masterpage which has the call to ScriptRegistrar...the aspx being loaded in the window is just a plain aspx with no masterpage...could this be a problem with script registration? or do I have to set/call scriptregistrar also in the aspx page?

Any ideas?

Thank you!!!

        <%= Html.Telerik().Window()
            .Name("NewCustomer")
            .Animation(true)
            .LoadContentFrom("ShowCustomerWindow", "Customer")
            .Buttons(buttons => buttons.Close())
            .Draggable(true)
            .Modal(true)
            .Title("Add Customer")
            .Visible(false)
        %>

18 Answers, 1 is accepted

answered on 27 Jul 2010, 08:19 AM

Hello Alex,

LoadContentFrom method uses MS Ajax to render provided partial view. As you probably no the javascript files will not be evaluated in this case. That is why you need to add them by hand. You can check these two help topics for more information:
http://www.telerik.com/help/aspnet-mvc/using-with-partial-views-loaded-via-ajax.html
http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-required-javascript-files.html

Kind regards,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 30 Aug 2010, 09:31 AM

Any luck on this? I can get a Grid to work properly on a Telerik Window when AJAX Binding is not used. (so Server binding)
When I use AJAX binding I start to get all sorts of weird errors.

Like Microsoft JScript runtime error: Object required

with the error at the line below within MicrosoftMvcValidation.js
    formElement[Sys.Mvc.FormContext._formValidationTag] = this;

Here is the Controller

 public ActionResult Index_BargeLog(int BargeId)
        {
            IEnumerable<BargeLogViewModel> blvms =  from bargelog in _db.BargeLogs.Where(bl => bl.BargeId == BargeId) select (new BargeLogViewModel 
            { 
                BargeLogId = bargelog.BargeLogId,
                BargeActivityDateTime = bargelog.BargeActivityDateTime,
                BargeActivityName = bargelog.BargeActivityType.BargeActivityName
            });
 
            ViewData.Model = blvms;
             
            ViewData["BargeId"] = BargeId;
            return PartialView("~/Views/BargeLog/Edit_BargeLog.ascx");
        }

            [GridAction]

        public ActionResult Index_BargeLog_Ajax(int BargeId)
        {
            IEnumerable<BargeLogViewModel> blvms = from bargelog in _db.BargeLogs.Where(bl => bl.BargeId == BargeId)
                                                   select (new BargeLogViewModel
                                                   {
                                                       BargeLogId = bargelog.BargeLogId,
                                                       BargeActivityDateTime = bargelog.BargeActivityDateTime,
                                                       BargeActivityName = bargelog.BargeActivityType.BargeActivityName
                                                   });
            ViewData.Model = new GridModel(blvms);
            ViewData["BargeId"] = BargeId;
            return PartialView("~/Views/BargeLog/Edit_BargeLog.ascx");
        }

Here is the Parent ASPX

<%= Html.Telerik().Window()
       .Name("Window")
       .LoadContentFrom("Index_BargeLog", "BargeLog", new {BargeId = ViewData["BargeId"]})
       .Buttons(buttons => buttons.Refresh().Maximize().Close())
%>

Here is the Partial View (Edit_BargeLog.ascx)

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<WebRole.ViewModels.BargeLogViewModel>>" %>

<%: Html.Telerik().Grid(Model)
        .Name("BargeLogGrid")
         .DataBinding(dataBinding => dataBinding 
            .Ajax()
                .Select("Index_BargeLog_Ajax", "BargeLog", new { BargeId = ViewData["BargeId"] })
                .Update("Edit_BargeLog", "BargeLog")) 
        .Columns(col =>
        {
            col.Bound(bat => bat.BargeLogId).Title("Barge Log ID");
            col.Bound(bat => bat.BargeActivityDateTime).Title("Date & Time");
            col.Bound(bat => bat.BargeActivityName).Title("Activity");
            col.Command(cmd => cmd.Edit());
        })
        .Pageable()
        .Sortable()
           .DataKeys(keys =>
            {                keys.Add(c => c.BargeLogId);
            })
%>
I've also tried different variations of the above and have ran into the Error! The requested URL returned 500 - Internal Server Error.

answered on 01 Sep 2010, 06:49 AM

I probably won't need a sample project after I explain further. The real problem is really an Object Required Jscript error with the file MicrosoftMvcValidation.js and the Telerik MVC grid. The problem happens with or without the use of a Telerik Window.

If I remove the line below from the js file the Object Required error goes away.

Sys.Mvc.FormContext._Application_Load()

I am referencing the following files below in my master page to achieve client side validation using Data Annotations and an Entity Framework model.

    <script src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
     <script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>" type="text/javascript"></script>
     <script src="<%= Url.Content("~/Scripts/MicrosoftMvcValidation.js") %>" type="text/javascript"></script>

Also, I assume this reason this only happens in IE and not Firefox is because of some IE JavaScript setting. The jscript error does not occur in FireFox but the client side validation stops working.

This really belongs in the Grid area of the forum so I'll post a more detailed message there.

answered on 03 Feb 2011, 06:09 PM

Thanks for your response Atanas.

I found the instructions on that page a bit confusing because I'm not using a partial view. The Window content is populated from a View page.
When I have a grid on the parent page, the grid in the Window works properly (it does Ajax requests). That suggests to me that it probably is a problem with the grid in the Window not having access to the scripts. But if it is being loaded from a View rather than a partial view wouldn't the scripts be registered automatically? (Actually, it only works properly the first time the Window is opened, the second time it doesn't - refreshing the grid doesn't do an Ajax request. Not sure why that would be. ??)
Do I have to load the Window content from a partial view?
I'm creating the Window on the client side like this:

var windowElement = $.telerik.window.create({
name: "LookupWindow",
title: "Code Lookup",
contentUrl: '/Portal/Lookup',
modal: true,
resizable: true,
draggable: true,
width: 500,
height: 350
});

answered on 29 Nov 2011, 11:35 AM

GridInsideWindow.zip

Hello Matt Cowen,

When you set the Content of the Window please make sure you use the @<text>...</text> Razor syntax correctly.
e.g.

@(Html.Telerik().Window()

.Name("GridWindow")

.Title("Grid Inside Window")

.Width(350)

.Height(400)

.Content(

@<text>

@(Html.Telerik().Grid<Person>()

.Name("Grid")

.DataBinding(binding => binding.Ajax().Select("GetPersons", "Grid"))

.Columns(columns =>

{

columns.AutoGenerate(true);

columns.Bound(p => p.Name).ClientTemplate("<strong><#= Name #></strong>").Title("Client Templated");

})

)

</text>

)

For your convenience I attached a sample project which implements the scenario with a Grid using Ajax Binding and a Client Template column inside a Window.

Kind regards,
Petur Subev
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

answered on 29 Nov 2011, 11:41 AM

Thanks Petur, however I'm using traditional ASPX views rather than Razor.

I was setting the content inline but changed it to use a PartialView, neither way worked but I would like to use a partial view for maintainability:

.Content(() => Html.RenderPartial("FindChild"))

Here's what my Grid code in the view looked like:

<% Html.Telerik().Grid<App.Core.QueryDtos.ChildDto>()

.DataKeys(k => k.Add(c => c.Id))

.Name("FindChildrenGrid")

.Columns(columns => {

columns.Command(commands => commands.Select()).Title("Select");

columns

.Template(c => {

%>

<%=Html.ActionLink<ParentsController>(x => x.AddChild(1, c.Id), "Select")%>

<%

})

.ClientTemplate("<a href='" + Url.Action("AddChild", "Parents") + "/<# Id #>'>Select</a>")

.Title("Select");

columns.Bound(c => c.Forename).HeaderHtmlAttributes(new { @class = "name-column" });

columns.Bound(c => c.Surname).HeaderHtmlAttributes(new { @class = "email-column" });

})

.DataBinding(dataBinding => dataBinding.Ajax().Select("Find", "Children"))

.ClientEvents(x => x.OnDataBinding("onDataBinding"))

.ClientEvents(x => x.OnRowSelect("onRowSelect"))

.Pageable(settings => settings

.Total((int)ViewData["total"]))

.EnableCustomBinding(true)

.Sortable(sorting => sorting

.OrderBy(sortOrder => sortOrder.Add(c => c.Surname).Ascending()))

.RowAction(row => row.Selected = row.DataItem.Id.Equals(ViewData["id"]))

.Render();

answered on 30 Nov 2011, 02:31 PM

GridInsideWindowAjaxBind.zip

Hello Matt Cowen,

I recreated the scenario using the ASPX view engine and there is no difference in the behavior.
Could you please check the project I attached? If I missed something please modify the project and send it back so I can examine it.

Regards,
Petur Subev
the Telerik team