ViewModel Binding only works with Ajax

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

1 Answer 48 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.

Jack asked on 25 Mar 2011, 07:10 PM

I am passing the following ViewModel to my view page:

namespace myApp.Domain.ViewModels

{

public class ApiAccountAccessKeyViewModel

{

public List<ApiAccountAccessKey> AccountAccessKeys { get; set; }

public myAppUser User { get; set; }

public List<SelectListItem> available { get; set; }

}

When I have the data binding set to dataBinding.Ajax() it works but as soon as I comment that line out it does not bind the ViewModel to the View any more (In debug I can see it passed the model to the view.)

View:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/SingleColumn.Master" Inherits="System.Web.Mvc.ViewPage<myApp.Domain.ViewModels.ApiAccountAccessKeyViewModel>" %>

Lots of HTML here and then:

<%

Html.Telerik().Grid<myApp.Domain.ApiAccountAccessKey>()

.Name("AccountAccessKeyGrid")

.DataKeys(dataKeys => dataKeys.Add(k => k))

//.DataBinding(dataBinding => dataBinding.Ajax().Select("AjaxBinding", "API"))

.ClientEvents(events => events.OnDataBound("onDataBound"))

.Columns(columns =>

{

columns.Bound(k => k.ID).Format("<a href='javascript:void(0)' onclick=editAccessKey('{0}');>" + Resources.Resource.Site_Grid_Edit + "</a>")

.Encoded(false).Title(" ").Filterable(false);

columns.Bound(k => k.ID).Format("<a href='javascript:void(0)' onclick=deleteAccessKey('{0}');>" + Resources.Resource.Device_Grid_Delete + "</a>")

.Encoded(false).Title(" ").Filterable(false);

columns.Bound(k => k.AccessKey).Title("Access key").Filterable(true);

columns.Bound(k => k.FriendlyName).Title(Resources.Resource.API_Friendly_Name).Filterable(true);

columns.Bound(k => k.ExpirationDate).Format("{0:MM/dd/yyyy}").Title(Resources.Resource.API_Expires).Filterable(true);

columns.Bound(k => k.IsActive).Title(Resources.Resource.API_Activated).Filterable(true);

columns.Bound(k => k.Description).Title(Resources.Resource.API_Accesskey_Description).Filterable(false);

})

.Pageable(p => p.PageSize(20))

.Sortable()

.Filterable()

.HtmlAttributes(new { @class = "content_border_table", style="display:none" })

.Render();

%>

This is my controller part:

public ActionResult ListAccessKeys()

{

var model = new ApiAccountAccessKeyViewModel();

model.AccountAccessKeys = _apiAccountAccessKeyRepository.GetAccessKeysByPartyID(PartyId);

model.User = _userRepository.GetByPartyId(PartyId);

return View("ListAccessKeys", model);

}

and the part that actually works:

[GridAction]

public ActionResult AjaxBinding()

{

return View(new GridModel(_apiAccountAccessKeyRepository.GetAccessKeysByPartyID(PartyId)));

}

The repository has: public List<ApiAccountAccessKey> GetAccessKeysByPartyID(int partyID)

I get that the ajax ActionResult passes a sub-set of the View Model but what can I do to get the binding to occur without the Ajax... I want the binding to happen server-side and from that point everything will be done Ajax-style.

Thank you
Jack.

1 Answer, 1 is accepted

answered on 07 Apr 2011, 07:39 PM

Ok, I answered my own question. What I found was:

Html.Telerik().Grid<Domain.PrescriptionFileTransfer>(Model)

.Name("PrescriptionFiles")

.DataKeys(dataKeys => dataKeys.Add(p => p.TechnicalKey))

.DataBinding(dataBinding=>

{

dataBinding.Server().Select("Index", "Prescription");

dataBinding.Ajax().Select("AjaxBinding", "Prescription");

}

)

.Columns(columns =>

{

columns.Bound(f => f.FileName).Title(Resources.Resource.AA_Index_Grid_Filename);

columns.Bound(f => f.Name).Title(Resources.Resource.AA_Index_Grid_Device);

columns.Bound(f => f.StatusText).Title(Resources.Resource.AA_Index_Grid_Status);

columns.Bound(f => f.DisplayDate).Title(Resources.Resource.AA_Index_Grid_Created);

columns.Bound(f => f.TechnicalKey).Format(

"<select onChange='selectChange(this)' disabled='disabled' class='prescriptionAction'>" +

"<option value='{0}'>"+ Resources.Resource.File_Grid_Select +"</option>" +

"<option value='delete'>"+ Resources.Resource.File_Grid_Delete +"</option>" +

"<option value='pview'>"+ Resources.Resource.File_Grid_View +"</option>" +

"<option value='save'>" + Resources.Resource.File_Grid_Save + "</option></select>").Encoded(false).Title(" ").Sortable(false);

columns.Bound(f => f.TechnicalKey).Format("<input type='checkbox' name='checkedRecords'

value='<#= TechnicalKey #>' style=' border: none;' />").Encoded(false).Title(" ").HtmlAttributes(new { style = "text-align:center;" });

})

.ClientEvents(config => config.OnDataBound("showNoDataText"))

.Pageable()

.Sortable()

.HtmlAttributes(new { @class = "content_table" })

.Render();

%>

I had to add the Modal and the Server data binding(all in bold). Seems like I could have survived without the dataBinding.Server() but it makes a better read with it than without it.