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

Ajax binding not working with grid

12 Answers 323 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Arnold Smith
Top achievements
Rank 1
Arnold Smith asked on 29 Jun 2011, 01:06 AM
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

12 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 29 Jun 2011, 09:27 AM
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
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
0
Arnold Smith
Top achievements
Rank 1
answered on 29 Jun 2011, 02:44 PM
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.
0
Rosen
Telerik team
answered on 29 Jun 2011, 03:56 PM
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
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
0
Arnold Smith
Top achievements
Rank 1
answered on 29 Jun 2011, 08:48 PM
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
0
TDG
Top achievements
Rank 1
answered on 20 Oct 2012, 08:09 PM
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.
0
Rosen
Telerik team
answered on 22 Oct 2012, 06:13 AM
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
Check out the successor of Telerik MVC Extensions - Kendo UI for ASP.NET MVC - and deem it for new ASP.NET MVC development.
0
TDG
Top achievements
Rank 1
answered on 22 Oct 2012, 07:48 PM
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.)



0
Rosen
Telerik team
answered on 24 Oct 2012, 12:27 PM
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
Check out the successor of Telerik MVC Extensions - Kendo UI for ASP.NET MVC - and deem it for new ASP.NET MVC development.
0
Young
Top achievements
Rank 1
answered on 26 Nov 2012, 03:51 AM
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.
0
Rosen
Telerik team
answered on 26 Nov 2012, 09:29 AM
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
Check out the successor of Telerik MVC Extensions - Kendo UI for ASP.NET MVC - and deem it for new ASP.NET MVC development.
0
Jenna Guess
Top achievements
Rank 1
answered on 04 Jun 2013, 10:58 AM
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

0
Rosen
Telerik team
answered on 05 Jun 2013, 03:30 PM
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
Check out the successor of Telerik MVC Extensions - Kendo UI for ASP.NET MVC - and deem it for new ASP.NET MVC development.
Tags
Grid
Asked by
Arnold Smith
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Arnold Smith
Top achievements
Rank 1
TDG
Top achievements
Rank 1
Young
Top achievements
Rank 1
Jenna Guess
Top achievements
Rank 1
Share this question
or