Ajax binding not working with grid

[Arnold Smith]

Hello Forum,

I'm stumped. It looks as though I have all my ducks in a row, however, some detail is preventing the grid from performing an Ajax client selection. The data loads fine when I use Server Selection. However when I code for Client Selection, the whole page is submitted when paging and sorting. I configured for .Filterable() and .Selectable(). The filtering images display, but are not enabled. The grid is not selectable. I call have javascript to alert me when "onLoad" and "onDataBinding" fire. But that javascript is not executed

I'm using MVC 3 Razor and Telerik 2011.1.315

Below, is the grid configuration.

@(Html.Telerik().Grid(Model.ListRequestor)
   .Name("SSAR Requestor")
   .DataKeys(keys => { keys.Add(p => p.FormGuid); })
   .DataBinding(dataBinding =>
      {
           dataBinding.Ajax().Select("_ViewForRequestor", "ListRequest", new {id = (string)ViewData["id"]});

      })
   .Pageable()
   .Sortable()
   .Filterable()
   .Selectable()
   .Columns(columns =>
   {
       columns.Bound(c => c.RequestorFirstName).Width("10%").Title("Req F Name");
       columns.Bound(c => c.RequestorLastName).Width("10%").Title("Req L Name");
       columns.Bound(c => c.RequestorNetworkId).Width("10%").Title("Network Id");
       columns.Bound(c => c.UserFirstName).Width("10%").Title("User F Name");
       columns.Bound(c => c.UserLastName).Width("10%").Title("User L Name");
       columns.Bound(c => c.AuthorizerEmail).Width("10%").Title("Authorizer Email");
       columns.Bound(c => c.CreateDate).Width("10%");
       columns.Bound(c => c.ApprovedDate).Width("10%");
       columns.Bound(c => c.FormGuid).Hidden(true);

   })
   .RowAction(row =>
   {
       row.Selected = row.DataItem.FormGuid.Equals(ViewData["id"]);
   })
   .ClientEvents(events => events
       .OnRowSelect("onRequestorRowSelected")
       .OnLoad("onLoad")
       .OnDataBinding("onDataBinding")

       )


   )

In my _Layout.cshtml I have the following:

At the top...

@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add(

"telerik.common.css").Add("telerik.office2007.css").Combined(true).Compress(true)))

At the bottom...
@(Html.Telerik().ScriptRegistrar().jQuery(

false).Globalization(true).DefaultGroup(group => group.Combined(true).Compress(true)))

Below, is the ActionResult in my ListRequest Controller.

[GridAction]
public ActionResult _ViewForRequestor(string id)
{
    if (id != null)
    {
        Guid Id = new Guid(id);
        return RedirectToAction("View", "SSAR", new { Id = id });
    }
    else
    {
        ListRequestVM listRequestVMTemp = new ListRequestVM();
        listRequestVMTemp = (ListRequestVM)TempData["ListRequestVM"];

        string currentUser = string.Empty;
        int lastIndexOf = 0;
        lastIndexOf = User.Identity.Name.LastIndexOf("\\");
        if (lastIndexOf > 0)
            currentUser = User.Identity.Name.Substring(lastIndexOf + 1);

        ListRequestVM listRequestVM = new ListRequestVM();
        listRequestVM = _requestListService.GetAllForms(currentUser, RequestListService.Actors.ALL.ToString());
        listRequestVM.ListAuthorizer = listRequestVMTemp.ListAuthorizer;

        TempData["ListRequestVM"] = listRequestVM;

        return View(new GridModel (listRequestVM.ListRequestor));
    }
}

_ViewForRequestor() code is never executed.

This ActionResult below always gets executed.

public ActionResult View()
{
    //call this to update Level3Authorizer table with networkIds
    //DriveUpdate();

    string currentUser = string.Empty;
    int lastIndexOf = 0;
    lastIndexOf = User.Identity.Name.LastIndexOf("\\");
    if (lastIndexOf > 0)
        currentUser = User.Identity.Name.Substring(lastIndexOf + 1);

    ListRequestVM listRequestVM = new ListRequestVM();
    listRequestVM = _requestListService.GetAllForms(currentUser, RequestListService.Actors.ALL.ToString());
    TempData["ListRequestVM"] = listRequestVM;

    return View("View", listRequestVM);

}

Does anyone see something I've missed or can anyone offer a suggestion as to the culprit? I'm stumped.

Thank you for any ideas!

Arnold

[Rosen]

Hi Arnold Smith,

Could you please verify that the required scripts are included and loaded correctly? If you continue to experiencing difficulties, please send us a small sample in which the described issue can be observed.

Regards,
Rosen
the Telerik team

[Arnold Smith]

Hi Rosen,

Thank you so much for the swift response.

I have verified that all of the required scripts are being loaded. I'm not editting, so I did not load jquery.validate.min.js.

I've attached a small application, TelerikTest, that demonstrates the issue I'm having. I created TelerikTest using the Telerik MVC 3 Razor tremplate in VS 2010.

Thank you for reviewing this issue. I suspect it's a "Doh!" issue on my part!

-Arnold

-Please use this second zip file. The first contains a reference in the Web.config to Entity Framework, and so might not work properly for you.

Thanks.

[Rosen]

Hi Arnold Smith,

I have examined the project you have send us and found that the cause for the issue is the space in the grid's Name. As you may know this is not valid and should not be used.

Also I have noticed that the script files are included twice, once "by hand" and once through the ScriptRegistrar.

Best wishes,
Rosen
the Telerik team

[Arnold Smith]

Rosen,

I don't know how that little item escaped me. Visual Studio does not display the scripts twice in execution mode. I found that in MVC 2 and sometimes in MVC 3, Views do not always 'see' the scripts or the CSS. I've developed a bad habit of pasting them on every View.

Anywawy, I owe you a big drink if you're ever in Chicago. Seriously.

Thank you! You guys are the best!

-Arnold

[TDG]

I got same problem, which ajax is not calling to get server side data after loaded page. My 3 files are attached for your reference.
What do I need more to load to call ajax to fill up the table? Thank you in advance.

[Rosen]

Hello,

 Looking at the code you have provided I suspect that the issue is cause by the fact that ScriptRegistrar is not present. (also note that the scripts are included in incorrect order, there are multiple jquery files included etc) It is required in order for components to be able to render their client object initialization. Please refer to this help article on how to setup your project for Telerik Extensions for ASP.NET MVC.

Greetings,
Rosen
the Telerik team

[TDG]

This is under Orchard Project and Layout.cshtml is part of theme project.
Do you have sample code of Layout, View.cshtml pages?
I cannot find a correct sample in Razor.

Beside that I got many missing file errors as below. Is this also related to the missing ScriptRegistrar() in Layout.cshtml file?

"NetworkError: 404 Not Found - http://localhost:30320/VGIWeb/Scripts/2012.2.607/telerik.grid.filtering.min.js"

teleri....min.js

"NetworkError: 404 Not Found - http://localhost:30320/VGIWeb/Scripts/2012.2.607/telerik.textbox.min.js"

teleri....min.js

"NetworkError: 404 Not Found - http://localhost:30320/VGIWeb/Scripts/2012.2.607/telerik.grid.grouping.min.js"

teleri....min.js

"NetworkError: 404 Not Found - http://localhost:30320/VGIWeb/Scripts/2012.2.607/telerik.common.min.js"

teleri....min.js

"NetworkError: 404 Not Found - http://localhost:30320/VGIWeb/Scripts/2012.2.607/telerik.draganddrop.min.js"

teleri....min.js

"NetworkError: 404 Not Found - http://localhost:30320/VGIWeb/Scripts/2012.2.607/telerik.grid.min.js"

teleri....min.js

"NetworkError: 404 Not Found - http://localhost:30320/VGIWeb/Scripts/2012.2.607/telerik.textbox.min.js"

teleri....min.js

"NetworkError: 404 Not Found - http://localhost:30320/VGIWeb/Scripts/2012.2.607/telerik.grid.min.js"

teleri....min.js

"NetworkError: 404 Not Found - http://localhost:30320/VGIWeb/Scripts/2012.2.607/telerik.grid.filtering.min.js"

teleri....min.js

"NetworkError: 404 Not Found - http://localhost:30320/VGIWeb/Scripts/2012.2.607/telerik.draganddrop.min.js"

teleri....min.js

"NetworkError: 404 Not Found - http://localhost:30320/VGIWeb/Scripts/2012.2.607/telerik.grid.grouping.min.js"

I modified layout.cshtml as below.

@using (Script.Foot())
{
    @Html.Telerik().ScriptRegistrar().jQuery(false)
    @Html.Telerik().ScriptRegistrar().DefaultGroup(group => 
                group.Add("jquery-1.7.1.min.js")
                    .Add("telerik.common.min.js")
                    //.Add("telerik.examples.min.js")
                    .Add("telerik.textbox.min.js")
                    .Add("telerik.calendar.min.js")
                    .Add("telerik.datepicker.min.js")
                    .Add("telerik.grid.min.js")
                    .Add("telerik.grid.filtering.min.js")
                    .Add("telerik.draganddrop.min.js")
                    .Add("telerik.grid.grouping.min.js")
                    .Add("telerik.tabstrip.min.js")
                    .Add("telerik.panelbar.min.js")
                    .Add("telerik.list.min.js")
                    .Add("telerik.combobox.min.js")
                    .Add("telerik.menu.min.js")
            )
}

But I got another error, "

404 Not Found - http://localhost:30320/VGIWeb/Scripts/2012.2.607/telerik.textbox.min.js"

Although I have included Scripts/2012.2.607/all the javascript files underneath, I still got this error.
What could be wrong? (This is part of Orchard.Web/Scripts.)

[Rosen]

Hello,

Looking at the code you have pasted it seems that you have placed two ScriptRegistrars on the page.  Having just @Html.Telerik().ScriptRegistrar().jQuery(false) should be sufficient. If you continue to experiencing difficulties please provide a small runnable project in which the issue you are facing can be observed locally.

Greetings,
Rosen
the Telerik team

[Young]

I still have same problem that Fiddler complaint about the URL as 404 eror as below.

#	Result	Protocol	Host	URL	Body	Caching	Content-Type	Process	Comments	Custom
401	404	HTTP	localhost:30320	/VGIWeb/Scripts/2012.2.607/telerik.grid.editing.min.js	2,540	private	text/html; charset=utf-8	firefox:4892

I also copied my Layout.cshtml page to add js files from Telerik folder.
I have all the js files under Orchard.Web/Scripts/2012.2.607/ folder.
Why cannot file js files?

My layout.cshtml file includes below scripts to call js files.

@using (Script.Foot())
{
    @Html.Telerik().ScriptRegistrar().jQuery(true)
     @Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
                    .Add("http://aspnet-scripts.telerikstatic.com/mvcz/2012.2.607/telerik.common.min.js")
                    .Add("http://aspnet-scripts.telerikstatic.com/mvcz/2012.2.607/telerik.textbox.min.js")
                    .Add("http://aspnet-scripts.telerikstatic.com/mvcz/2012.2.607/telerik.calendar.min.js")
                    .Add("http://aspnet-scripts.telerikstatic.com/mvcz/2012.2.607/telerik.datepicker.min.js")
                    .Add("http://aspnet-scripts.telerikstatic.com/mvcz/2012.2.607/telerik.grid.min.js")
                    .Add("http://aspnet-scripts.telerikstatic.com/mvcz/2012.2.607/telerik.grid.editing.min.js")
                    .Add("http://aspnet-scripts.telerikstatic.com/mvcz/2012.2.607/telerik.grid.filtering.min.js")
                    .Add("http://aspnet-scripts.telerikstatic.com/mvcz/2012.2.607/telerik.draganddrop.min.js")
                    .Add("http://aspnet-scripts.telerikstatic.com/mvcz/2012.2.607/telerik.grid.grouping.min.js")
                    .Add("http://aspnet-scripts.telerikstatic.com/mvcz/2012.2.607/telerik.tabstrip.min.js")
                    .Add("http://aspnet-scripts.telerikstatic.com/mvcz/2012.2.607/telerik.panelbar.min.js")
                    .Add("http://aspnet-scripts.telerikstatic.com/mvcz/2012.2.607/telerik.list.min.js")
                    .Add("http://aspnet-scripts.telerikstatic.com/mvcz/2012.2.607/telerik.combobox.min.js")
                    .Add("http://aspnet-scripts.telerikstatic.com/mvcz/2012.2.607/telerik.menu.min.js")
            ) 
}

Thanks in advance.

[Rosen]

Hi Young,

You are still having two ScriptRegistrars included on the page, as I have stated on my previous message. Please remove the first one and see if there is a change in the behavior. 

All the best,
Rosen
the Telerik team

[Jenna Guess]

I'm having the same issue but I don't have 2 ScriptRegistrars.  I am using Telerik MVC version 2012.2.802 in a MC2 VB project.  The grid paging does not work unless I change to ScriptRegistrar().jQuery(true), but that breaks everything else on the page.  Attached is my master.

View:

<%
     Html.Telerik().Grid(Of ECOT.Web.Models.ActionRequest.ActionRequestGridModel) _
     .Name("ARGridTelerik") _
     .Sortable() _
     .Filterable() _
     .Pageable(Sub(p)
                   p.PageSize(10, New Integer() {10, 20})
                   p.Style(GridPagerStyles.NextPrevious Or GridPagerStyles.Numeric Or GridPagerStyles.PageSizeDropDown Or GridPagerStyles.PageInput)
               End Sub) _
     .Footer(True) _
     .DataBinding(Function(dataBinding) dataBinding.Ajax().Select("_GetActionRequestsByClientEntityId", "ActionRequest", New With {.Id = Model.Student.EntityID, .GetAll = False})) _
     .Columns(Sub(columns)
                  columns.Bound(Function(o) o.Flags).Encoded(False).Filterable(False).Title("Flag")
                  columns.Bound(Function(o) o.ActionRequestLink).Encoded(False).Title("Request #")
                  columns.Bound(Function(o) o.AssignedAgent).Encoded(False).Title("Assigned Agent")
                  columns.Bound(Function(o) o.ActionRequestType).Encoded(False).Title("AR Type")
                  columns.Bound(Function(o) o.ARSubType).Encoded(False).Title("AR SubType")
                  columns.Bound(Function(o) o.ActionRequestDateString).Encoded(False).Title("Date Opened")
                  columns.Bound(Function(o) o.LastUpdateString).Encoded(False).Title("Last Update")
                  columns.Bound(Function(o) o.Attachment).Encoded(False).Filterable(False)
              End Sub) _
     .Render()
%>

Controller:

<GridAction()> _
Public Function _GetActionRequestsByClientEntityId(ByVal id As Integer, ByVal getAll As Boolean) As ActionResult
    Dim dateFormat = ConfigurationManager.AppSettings("DateFormatString")

    Dim actionRequests = _actionRequestService.GetRequestsByClientEntityId(id, getAll).OrderByDescending(Function(x) x.ActionRequestDate).
    Select(Function(x) New ActionRequestGridModel With {
     .ActionRequestID = x.ActionRequestID,
     .Flags = ClosedARStyle(x.ActionRequestStatus, _flagService.GetFlagMarkup(x.ActionRequestID)),
     .ActionRequestLink = ClosedARStyle(x.ActionRequestStatus, String.Format("<a href='/actionrequest/edit/{0}'>{0}</a>", x.ActionRequestID)),
      .AssignedAgent = ClosedARStyle(x.ActionRequestStatus, String.Format("{0}{1}", GetPerson1LastName(x), " ")),
      .ActionRequestType = ClosedARStyle(x.ActionRequestStatus, x.ActionRequestType.ARParentType),
      .ARSubType = ClosedARStyle(x.ActionRequestStatus, x.ActionRequestType.ActionRequestType),
      .ActionRequestDateString = ClosedARStyle(x.ActionRequestStatus, x.ActionRequestDate.ToString(dateFormat)),
      .LastUpdateString = ClosedARStyle(x.ActionRequestStatus, x.Modified.GetValueOrDefault.ToString(dateFormat)),
     .Attachment = GetAttachmentLink(x.ActionRequestAttachments.ToList, x.ActionRequestNotes.ToList)})

    Return View(New GridModel(actionRequests))

End Function

[Rosen]

HiJenna,

I'm afraid that I'm not sure what may caused such issue looking at the provided information. Therefore, you should provide a small runnable sample in which it can be recreated locally.

Regards,
Rosen
Telerik