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

[Solved] Grid Ajax Problem

4 Answers 239 Views

General Discussions

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

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

Diego asked on 17 Feb 2011, 06:49 PM

Hi
I wanted to ajax-ify my grid's sorting, paging, filtering while leaving the initial load still done via server binding. Can you advise what I am doing wrong?

Controller

public ActionResult Index(string id)

{

try

{

var auction = Components.ComponentFactory.AuctionManager.FindBy(Guid.Parse(id));

if (auction.AuctionType.Name == "Standard")

return View("OpenDashboard", auction);

else

//ViewData["Bids"] = auction.Bids;

ViewData["auctionID"] = auction.ID;

ViewData["ajax"] = true;

return View("SealedDashboard", auction);

}

catch (Exception err)

{

LogManager<AuctionController>.LogError("BidController.Index", err);

return View("Error", err);

}

[GridAction]

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult _AjaxBinding(string id)

{

var auction = Components.ComponentFactory.AuctionManager.FindBy(Guid.Parse(id));

return PartialView(new GridModel(auction.Bids));

}

SealedDashboard View Page

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<table style="width: 100%">

<tr>

<td style="width: 50%;">

<div id="stauts" style="float:right ;color: Red;">Stauts: <%: Model.AuctionStatus.Name %></div>

<span style="color:#000000;font-size:13px"><b> Bid History</b></span>

</td>

</tr>

<td style="width:50%;">

<div id="busy" style="color: green; display:none" align="center" >

<img src="<%= Url.Content("~/Content/Images/ajax-loader.gif")%>" alt=""/>

</div>

<div id="panelHistory">

<% Html.RenderPartial("BidHistoryGrid", Model.Bids); %>

</div>

</td>

<tr>

</tr>

</table>

BidHistoryGrid .Ascx

<script type="text/javascript">

function onComplete(context) {

var html = context.get_data();

var target = context.get_updateTarget();

$(target).html(html);

return false;

}

<% using (Ajax.BeginForm("_AjaxBinding", "Dashboard",new { id =  ViewData["auctionID"].ToString() }, new AjaxOptions { UpdateTargetId = "panelHistory", LoadingElementId = "busy", OnComplete = "OnComplete" }))

{%>

</script>

<% Html.Telerik().Grid(Model)

.Name("Grid")

.Columns(columns =>

{

//columns.Bound(o => String.Format("{0},{1}", o.Bidder.FirstName, o.Bidder.LastName)).Width(100);

columns.Bound(o => o.Bidder.DisplayName).Width(100).Title("Bidder Name");

//change for email property when this exists.

columns.Bound(o => o.Bidder.AddressLine1).Width(100).Title("Bidder Email");

columns.Bound(o => o.BidDateTime).Format("{0:MM/dd/yyyy}").Width(120).Title("Date");

columns.Bound(o => o.OfferPrice).Width(100).Title("Amount");

columns.Bound(o => o.OfferPricePerSquareFoot).Title("$/SF");

//Add a column for contingency

//Get the name

columns.Bound(o => o.PSPeriod.Name).Width(100).Title("P&S");

//Get the Name

columns.Bound(o => o.DueDilligence.Name).Width(100).Title("DD");

//Get the name

columns.Bound(o => o.ClosingDaysPeriod.Name).Width(100).Title("Closing");

//Add Bid Round column, when it appears on Bid Table (Not in Auction)

})

.DataBinding(dataBinding =>

{

dataBinding.Ajax().Select("_AjaxBinding", "Dashboard",  ViewData["auctionID"].ToString()).Enabled((bool)ViewData["ajax"]);

})

.Pageable()

.Scrollable()

.Sortable()

.Filterable()

.Groupable()

.Render();

%>

<% } %>

Site.Master ( Just to see Registered Scripts)

<% Html.Telerik().ScriptRegistrar().DefaultGroup(group => group

.Add("jquery-1.4.4.min.js")

.Add("jquery.validate.min.js")

.Add("telerik.window.min.js")

.Add("telerik.textbox.min.js")

.Add("telerik.draganddrop.min.js")

.Add("telerik.datepicker.min.js")

.Add("telerik.calendar.min.js")

.Add("telerik.common.js")

.Add("telerik.grid.js")

.Add("telerik.grid.filtering.js")

.Add("telerik.grid.editing.js")

.Add("telerik.grid.grouping.js")

.Add("telerik.grid.reordering.js")

.Add("telerik.grid.resizing")); %>

I've also tried Putting the Ajax Form in the SealedDashboard View Page, and it is still being the same result.

Thanks

Posted on Feb 4, 2010 (permalink)

I wanted to ajax-ify my grid's sorting, paging, filtering while leaving the initial load still done via server binding. Once I switched to using GridModel<T> however my grid no longer renders correctly; the raw json data is being displayed. Can you advise what I am doing wrong?

Posted on Feb 4, 2010 (permalink)

[Solved] Grid Ajax Problem

4 Answers, 1 is accepted