[Solved] Ajax Binding

[Avi]

Hi,

I am new to MVC and MVC using  Telerik.

What is difference between

Html.Telerik().Grid(Model)
            .Name("Grid")
                    .Columns(colums =>
                                {
                                    colums.Add(o => Html.ActionLink("Edit", "Edit", new { id = o.Id }));
                                    colums.Add(o => Html.ActionLink("Delete", "Delete", new { id = o.Id }));
                                    colums.Add(o => o.Id);
                                    colums.Add(o => o.FirstName);
                                    colums.Add(o => o.LastName);
                                    colums.Add(o => o.Phone);
                                    colums.Add(o => o.Email);
                                }
                            )
            .Ajax(ajax => ajax.Action("_AjaxBinding", "Contact"))
            .Pageable()
            .Sortable()
            .Scrollable()

 and

<%= Html.Telerik().Grid<ContactManagement.Models.Contact>()
            .Name("ContactGrid")
            .Columns(colums =>
                        {
                            colums.Add(o => Html.ActionLink("Edit", "Edit", new { id = o.Id }));
                            colums.Add(o => Html.ActionLink("Delete", "Delete", new { id = o.Id }));
                            colums.Add(o => o.Id);
                            colums.Add(o => o.FirstName);
                            colums.Add(o => o.LastName);
                            colums.Add(o => o.Phone);
                            colums.Add(o => o.Email);
                        }
                    )
                         .Ajax(ajax => ajax.Action("_AjaxBinding", "Contact"))
            .Pageable()
            .Sortable()
            .Scrollable()

I mean  Html.Telerik().Grid(Model) and  Html.Telerik().Grid<ContactManagement.Models.Contact>()


I have used these two code snippets on a page. The first one generates grid with records, while the other one creates a grid but with no records in it.

Also,
          As u can see  i have  added  .Ajax(ajax => ajax.Action("_AjaxBinding", "Contact"))   to ajaxify the sorting and paging but that does not happen, becuase  following code in controller is never executed.

 [GridAction]
        public ActionResult _AjaxBinding()
        {
            return View(new GridModel<Contact>
            {
                Data = _entity.ContactSet.ToList()
            });

        }

Can any let me know what am i missing.


Thanks,
Avi

[Alex Gyoshev]

Hello Avi,

The line
<%= Html.Telerik().Grid<ContactManagement.Models.Contact>()
specifies the type of data that you will bind the grid to, and the line
<%=Html.Telerik().Grid(Model)
binds the grid to the Model (which is, or should be, a variable of type IEnumerable<ContactManagement.Models.Contact>). Thus, the grid will implicitly get the type from the Model, and show the data.

Regarding the Ajax sorting/paging - can you verify that you have a ScriptManager on the page? The grid needs one to include its scripts. Of course, you could include them manually, too.

Best wishes,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Missing User]

Is it really possible to specify both Html.Telerik().Grid(Model) and .Ajax()? Doesn't the first mean server binding and the second ajax binding?

[tdekoekkoek]

Yes I think you can have both server binding and ajax binding,  I think that way you bind first of all server-side and then secondly with Ajax.  However, I prefer to just have the ajax binding.  Also I do not think the "Edit" columns will work in ajax binding.  According to the docs this is not currently supported, but you can do it using the Format method

[Scott]

Gabriel,

See the help file and under the Grid, see the Using A Single Action Method For Ajax And Server Binding example... However...!!!

Alex,

I'm having the exact same issue as Avi, trying to utilize the Ajax binding capabilities of the MVC Grid.  I have tried this by including/using the ScriptManager approach and by manually including the necessary files, as indicated, with the same results of no data being returned.  The MVC Grid works great when the data is server-side bound or using any of the other databinding capabilties, just not when Ajax bound, for me. 

I have verified that when included manually, the scripts/files needed by the Grid are there/available, and also when using the ScriptManager approach that the apporpriate request for the assets are made (for example, a request goes out for:   <my-web-site-root>/asset.axd?id=fwAAAB-LCAAAAAAABADtvQdgHEmWJSYvbcp7f0r1StfgdKEIgGATJNiQQBDswYjN5pLsHWlHIymrKoHKZVZlXWYWQMztnbz33nvvvffee--997o7nU4n99__P1xmZAFs9s5K2smeIYCqyB8_fnwfPyJ-8UfT9qNHH2WrVVlMs7aolnffbf90dpk107pYtR-NPrqkr_d2dh6O74139_bu0SfTjx619TqnX2YfPbr36f3RR_Tze7_4oxW1fM2vNdTqnD-rPnq0M_poSd_89C9a5_X19i7B2Rv_dPPRL_n-L_n-L_l_ACd5iVB_AAAA ).

 Is it possible that the changes that came in MVC 2.0 Beta and the RC, whereby when returning Json from an action method you now must specifically allow the GET request with JsonRequestBehavior.AllowGet (or simply use a POST instead) are somehow involved here, since by default now, GET requests for JSON data are blocked?

I've read all the documentation, re-created the examples and demos...with no luck when using Ajax binding.  Any pointers to further information or assistance would be greatly appreciated.  Any chance of blog posts or new example demonstrating the capability we can try/examine?

--Scott Wade--

[Atanas Korchev]

Hi Scott,

There is no change in the way the grid is using ajax binding in MVC 2 RC. Find attached a working sample application showing how to databind the grid using Ajax.

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Scott]

Thanks for the code sample...  I'll give it a try.  It wasn't the Grid's behavior with ajax binding and the associated JSON data return I was thinking might have changed, but something to do with the changed JSON GET request being blocked by default that came with MVC 2.0 Beta changes...  Probably not related at all...

Thanks again...and I'll update this thread with my results...

--Scott Wade--

[Scott]

The sample attached really helped to illustrate what I had wrong, and I now have the Grid working great with Ajax binding.  Turned out that the Grid is more forgiving when server-side data bound, than it is when ajax data bound...with regards to the inclusion of the telerik.grid.min.js file and it's placement for some reason...   By comparing the differences when using <%= Html.Telerik().ScriptRegistrar() %> method versus manually including the necessary scripts/files, I was able to determine where my placement in the code for inclusion in the View page was errant.  Without the attached sample, I believe I would still be missing my error.  

As a suggestion, I'd like to recommend that the online documentation, and even the help file included which is more detailed with examples, and quite good, be slightly enhanced with some deeper information regarding the internals of the MVC Extension components and the interplay between the resources files/scripts needed and how they operate... Overall, a very high quality product, I will be recommending to all my collegues and look forward to each new build released!  Nice to see jquery-1.4 already being used in the latest build, so early after release!

Thanks, again...and BTW, I'm still hoping to see a Telerik podcast someday!  ;-)

--Scott Wade--

[Atanas Korchev]

Hello Scott,

The grid always requires a ScriptRegistrar. Manually including the JavaScript files is not enough as the ScriptRegistrar outputs the JSON configuration of the grid which is required for ajax binding.
We have this highlighted at the top of almost every help topic. We have also included it in our troubleshooting guide.

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.