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

[Solved] Problem with Ajax Binding and Partial View

13 Answers 286 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.

Pablo asked on 05 May 2011, 10:33 AM

Hi,

I am using 2 telerik grids (With Razor). One of them is on a View, and when you click on a row, another grid is loaded on a Partial View (Using jquery).

It loads it perfectly for the first time, but when I try to use the Ajax Binding on this second grid (For paging, sorting, editing, etc), instead of rebinding the grid using ajax, the grid uses the server binding, doing a full postback and showing only the grid content on a new page. Ajax binding works perfectly on the other grid.

I am using a layout page where I think I have added all the neccesary references to telerik, but I have also tried to add them on the partial view... here is my code ...

View with the master gridview

@model List<IRIS.Aurora.WebUI.Models.PlaceHolderViewModel>

<script src="@(Url.Content("~/Scripts/MicrosoftAjax.debug.js"))"

type="text/javascript"></script>

<script src="@(Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js"))"

type="text/javascript"></script>

@{

ViewBag.Title = "Index";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>PlaceHolder management</h2>

@(Html.Telerik().Grid(Model)

.Name("Grid")

.ClientEvents(events => events.OnRowSelected("onRowSelected"))

.Columns(columns =>

{

columns.Bound(o => o.ID).Width(100);

columns.Bound(o => o.Name).Width(100);

columns.Bound(o => o.Type).Width(100);

})

.DataBinding(dataBinding =>

{

dataBinding.Ajax().Select("_AjaxGetPlaceHolders", "PlaceHolder");

})

.Scrollable()

.Sortable()

.Selectable()

.Pageable(a => a.PageSize(10))

.Filterable()

.Footer(true)

)

<br /><br />

<div id="placeHolderValuesList">

</div>

<script type="text/javascript">

function onRowSelected(e) {

var phId = e.row.cells[0].innerHTML;

$('#placeHolderValuesList').load('@Url.Action("_PlaceHolderValueListByName", "PlaceHolder")', 'placeHolderId=' + phId);

}

</script>

Partial view loaded on demand with the second grid:

@model List<IRIS.Aurora.ClientModel.PlaceHolders.PlaceHolderModel>

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>

<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

@( Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(group => group.Add("telerik.common.css")

.Add("telerik.windows7.css")

.Add("css/iris/iris.jquery-ui.css")

.Add("css/style.css?v=2")

.Add("css/grid.css?v=1")

.Add("css/uniform.default.css?v=1")

.Add("css/iris/iris.jquery-ui.css?v=1")

.Add("Dashboard.css")

)

<h2>PlaceHolder values</h2>

@(Html.Telerik().Grid(Model)

.Name("Grid")

.DataKeys(keys => keys.Add(c => c.Name))

.Editable(editing => editing.Mode(GridEditMode.InCell))

.ClientEvents(events => events.OnRowSelected("onRowSelected"))

.ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Text).ImageHtmlAttributes(new { style = "margin-left:0" }))

.Columns(columns =>

{

columns.Bound(o => o.Name).Width(100);

columns.Bound(o => o.ValidFrom).Width(100);

columns.Bound(o => o.ValidTo).Width(100);

columns.Bound(o => o.Value).Width(100);

columns.Bound(o => o.ValueType).Width(100);

columns.Command(commands =>

{

commands.Delete().ButtonType(GridButtonType.Text);

commands.Edit().ButtonType(GridButtonType.Text);

}).Width(180).Title("Commands");

})

.DataBinding(dataBinding =>

{

dataBinding.Ajax().Select("_AjaxPlaceHolderValueListByName", "PlaceHolder", new { placeHolderName = (int)ViewData["placeHolderName"] })

.Update("_AjaxDeletePlaceHolderValue","PlaceHolder")

.Delete("_AjaxDeletePlaceHolderValue", "PlaceHolder");

})

.Scrollable()

.Sortable()

.Selectable()

.Pageable(a => a.PageSize(10))

.Filterable()

.Footer(true)

)

@(Html.Telerik().ScriptRegistrar()

.DefaultGroup(group => group

.Add("~/Scripts/2011.1.315/telerik.common.min.js")

.Add("~/Scripts/2011.1.315/telerik.list.min.js")

.Add("~/Scripts/2011.1.315/telerik.combobox.min.js")

.Add("~/Scripts/jquery-ui-1.8.6.custom.min.js")

.Add("~/Scripts/libs/jquery.uniform.min.js")

.Add("~/Scripts/2011.1.315/jquery.validate.min.js")

.Add("~/Scripts/2011.1.315/telerik.calendar.js")

.Add("~/Scripts/2011.1.315/telerik.datepicker.js")

.Add("~/Scripts/2011.1.315/telerik.textbox.js")

.Add("~/Scripts/jquery.ribbon.js")

.Add("~/Scripts/iris-checkbox.js")

.Add("~/Scripts/jquery.calculator.js")

.Add("~/Scripts/2011.1.315/telerik.grid.js")

.Add("~/Scripts/2011.1.315/telerik.grid.filtering.js")

.Add("~/Scripts/2011.1.315/telerik.grid.grouping.js")

.Add("~/Scripts/2011.1.315/telerik.grid.editing.js")

.Add("~/Scripts/2011.1.315/telerik.grid.reordering.js")

.Compress(true))

)

Thanks in advance

13 Answers, 1 is accepted

answered on 05 May 2011, 11:07 AM

Hello Pablo,

The ScriptRegistrar which registers the JavaScript files must be in the parent view instead of the partial view. Currently those JavaScript files are still not loaded. If you cut the ScriptRegistrar declaration and paste it in your view (or master page) things should work.

Regards,
Atanas Korchev
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 05 May 2011, 11:12 AM

Sorry Atanas, but that hasn't fixed my problem.

I'd already added the scriptregistrar in my masterpage (and as it was not working i just tried to add it on the partial view), here is the code

<!DOCTYPE html>

<html >

<head>

<meta http-equiv="Expires" content="0"/>

<meta http-equiv="Pragma" content="no-cache"/>

<meta http-equiv="Cache-Control" content="no-cache"/>

<title>@ViewBag.Title</title>

@using Telerik.Web.Mvc.UI

@( Html.Telerik().StyleSheetRegistrar()

.DefaultGroup(group => group.Add("telerik.common.css")

.Add("telerik.windows7.css")

.Add("css/iris/iris.jquery-ui.css")

.Add("css/style.css?v=2")

.Add("css/grid.css?v=1")

.Add("css/uniform.default.css?v=1")

.Add("css/iris/iris.jquery-ui.css?v=1")

.Add("Dashboard.css")

)

<link rel="Stylesheet" href="../../Content/telerik.windows7.css" />

<link rel="Stylesheet" href="../../Content/telerik.common.css" />

<link rel="Stylesheet" href="../../Content/css/style.css" />

</head>

<body>

<header>

<div class="paddingdiv2">

<div class="clearfix" id="top-bar">

<div class="container_16 clearfix">

<div class="grid_4">

<div class="top-logo"></div>

</div>

<div class="grid_12" style="">

<div class="user-information">

<div class="signin-info-wrap">

<div class="floating-mail-animate">

<span class="white">2</span>

</div>

<div class="floating-mail">

<span class="white">2</span>

</div>

Signed in as <span class="white bold">@User.Identity</span><br />

<span class="icon-mail">You have <span class="white">2 new </span>messages<br /></span>

</div>

<ul id="top-bar-buttons">

<li>

<a href="/Account/Settings">Settings</a><span class="divide"> | </span>

</li>

<li>

<a href="#">Inbox</a><span class="divide"> | </span>

</li>

<li>

<a href="/Account/LogOff">Sign Out</a>

</li>

</ul>

</div>

<div class="container_16 clearfix tab-border-bottom"></div><br />

</div>

</header>

@RenderBody()

<footer>

<div class="paddingdiv2">

<div class="container_16 clearfix">

<div class="grid_8">

Registration number: 542342238 <br/>

+44 (0)1753 212-200

</div>

<div class="grid_8 align-right">

<a href="#">Terms of Service</a> |

<a href="#">Privacy Policy</a><br/>

administrator@iris.co.uk <br/>

<ul>

<li><a class="rss" href="#"/></a></li>

<li><a class="digg" href="#"/></a></li>

</ul>

</div>

</footer>

@* LOAD TELERIK COMMON FIRST! Otherwise you will regret it. *@

@(Html.Telerik().ScriptRegistrar()

.DefaultGroup(group => group

.Add("~/Scripts/2011.1.315/telerik.common.min.js")

.Add("~/Scripts/2011.1.315/telerik.list.min.js")

.Add("~/Scripts/2011.1.315/telerik.combobox.min.js")

.Add("~/Scripts/jquery-ui-1.8.6.custom.min.js")

.Add("~/Scripts/libs/jquery.uniform.min.js")

.Add("~/Scripts/2011.1.315/jquery.validate.min.js")

.Add("~/Scripts/2011.1.315/telerik.calendar.js")

.Add("~/Scripts/2011.1.315/telerik.datepicker.js")

.Add("~/Scripts/2011.1.315/telerik.textbox.js")

.Add("~/Scripts/jquery.ribbon.js")

.Add("~/Scripts/iris-checkbox.js")

.Add("~/Scripts/jquery.calculator.js")

.Add("~/Scripts/2011.1.315/telerik.grid.js")

.Add("~/Scripts/2011.1.315/telerik.grid.filtering.js")

.Add("~/Scripts/2011.1.315/telerik.grid.grouping.js")

.Add("~/Scripts/2011.1.315/telerik.grid.editing.js")

.Add("~/Scripts/2011.1.315/telerik.grid.reordering.js")

.Compress(true))

)

</body>

</html>

answered on 05 May 2011, 11:19 AM

Hello Pablo,

The script registration looks ok. Do you see any JavaScript error when the page loads? Could it be that some of the non-telerik JavaScript files interfere? You can try not including them to see if this would make a difference.

This is a code library project showing a working implementation of loading a grid in a tabstrip via ajax. You can check it out to see if it would help.

Finally you could send us a sample project which we can troubleshoot.

Regards,
Atanas Korchev
the Telerik team

answered on 24 Sep 2011, 12:56 AM

Hi,

I tried your sample , when i added edit command its not even calling _Select. Please try this.

Html.Telerik().Grid<GridLoadedWithAjaxInTabStrip.Models.

Customer>()

.Name(

"Grid")

.DataKeys(keys =>

{

keys.Add(p => p.ID);

})

.Columns(columns =>

{

columns.Bound(c => c.ID).Width(200);

columns.Bound(c => c.Name);

columns.Command(commands =>

{

commands.Edit();

}).Width(60).Title("Commands");

})

.DataBinding(dataBinding => {

dataBinding.Ajax().Select(

"_Select", "Home"); /* configure the grid for ajax binding */

dataBinding.Ajax().Update(

"_Edit", "Home");

})

// .Editable(editing => editing.Mode(GridEditMode.InLine))

.Sortable()

.Pageable()

.Groupable()

.Filterable()

answered on 22 Oct 2011, 12:44 AM

AjaxLoadedGridEditing.zip

Hi Rosen,
I am having similar issues as Krish described. Most important difference is that I am using the combination of a Drop Down List for the master and Grid for the detail roles. I am reproducing the notes and questions I embedded in the project (please see ~\Views\Home\_GameWeeksGrid.cshtml, lines 10 - 25). Obviously they make most sense in context.

    //Grid shows up empty if 'Model' is NOT passed in, except when id is included as the third parameter (see Note 1 below, Line 26).  In the later 
    //scenario, ajax load does not show data in the grid when a different season is selected in the dropdown list (see Note 2 in Index.cshtml, Line 17).
    
    //Question 1: How do I fix it to get the expected behaviour of grid showing up with data first time AND at every ajax load directed by
    //the dropdown list change?
    
    //When 'Model' is passed in (as shown in the code fragment starting below), grid data shows the first time AND whenever user change season in the 
    //dropdown list.  HOWEVER, edit (I am using inline) does not show current data but what look like default values for each column.  Edit DOES work
    //as expected the very first time page loads, that is before the first time user changes the season that initiates ajax load.
    
    //Question 2: What do I need to fix to get the expected edit behaviour of showing current values for each column of the grid?
    
    //In addition, paging works as expected BEFORE the first ajax load.  Every time after that, paging in the grid reloads the page with only the grid
    //without any styling.  Entire page consists of plain html table containing data.
    
    //Question 3: How do I fix this so that I get the expected behaviour of paging resulting in no changes to page except for the grid showing new data?

Html.Telerik().Grid<AjaxLoadedGridEditing.Models.GameWeek>(Model)

.Name("GameWeeksGrid")

.DataKeys(keys => keys.Add(g => g.GameWeekId))

.ToolBar(commands => commands.Insert().ButtonType(type))

.DataBinding(databinding => databinding.Ajax()

//.Select("_SelectAjax", "GameWeeks")

//Note 1:

.Select("_SelectAjax", "Home", new { id = Model.ToList()[0].GameWeekId })

.Insert("_InsertAjax", "Home", new { seasonId = Model.ToList()[0].SeasonId })

.Update("_SaveAjax", "Home")

.Delete("_DeleteAjax", "Home")

)

.Columns(columns =>

{

columns.Bound(g=>g.WeekNumber).Width(20);

columns.Bound(g => g.GameWeekSunday).Format("{0:d}");

columns.Bound(g => g.DaysFirstGamePriorToSunday);

columns.Bound(g => g.GameStartTimeET);

columns.Command(commands =>

{

commands.Edit().ButtonType(type);

commands.Delete().ButtonType(type);

}

).Width(300).Title("Action");

}

)

.Editable(editing => editing.Mode(mode))

.Pageable()

.Sortable()

.Render();

I am attaching a sample project and am hoping that you could help.
Thanks

answered on 24 Oct 2011, 09:56 AM

AjaxLoadedGridEditing.zip

Hi Sreenivas,

In order the described scenario to work you should pass the current selected seasonId to the grid's routing configuration. Also I have noticed that the container element in which the grid is rendered has the same id as the grid element itself, this will yield invalid html and the JavaScript object initialization will not work.
I have attached an updated version of the project you have provided.

All the best,
Rosen
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 26 Oct 2011, 09:48 PM

ScreenHunter-01-Oct-26-14-44.gif

Hi Rosen,
Thanks for the observation on the identical names for the div and the grid itself.
Unfortunately, the solution does not work as expected. I have not had the opportunity to try CRUD operations yet, but paging results in the second page showing the first season game weeks, irrespective of what season is selected in the drop down (please see the attached picture)
Also, I am confused about passing the season id in grid ajax actions, because the grid is displaying game weeks, not seasons. The relationship is a season has many game weeks.
Sreenivas

answered on 27 Oct 2011, 09:06 AM

Hello Sreenivas,

Indeed, the modified project I have attached is meant to illustrate the approach which should be taken in the described scenario concerning the grid component and does not go in-depth into the details of the back-end logic and queries of the actual project. Therefore, if the appropriate methods are used in the select action the mentioned behavior will not appear:

[GridAction]

public ActionResult _SelectAjax(int id)

{

// GameWeek gameWeek = GameWeekRepository.FindGameWeekById(id);

IQueryable<GameWeek> gameWeeks = GetSeasonGameWeeks(id).OrderBy(g=>g.WeekNumber);

return View(new GridModel(gameWeeks));

}

Also you may modify the default value of the sessionId pass through the ViewData to match the one initially selected in the DropDownList:

<div id="GameWeeksGridContainer">

@{ ViewData["seasonId"] = 2; // modify to more appropriate value or serialize from the controller }

@Html.Partial("_GameWeeksGrid", Model.GameWeeks)

</div>

Also note that you may need to further tweak the sample to better suit your needs.

Regards,
Rosen
the Telerik team

answered on 27 Oct 2011, 04:31 PM

Hi Rosen,
Thank you for the quick response.
Your changes did the trick. The grid works as expected.
However, the bad news for me is that I am not any wiser as to how the ajax binding works and why it works after your changes. When I was starting out, I wanted to find literature that would explain how the grid works. Although the samples are wonderful, and helped me get a fast start, I would be more confident if I understood the innards. Before, I start digging in using Firebug-like tool, is there any place I overlooked that provides this knowledge?
Thanks