jQuery Grid Plugin - jqGrid

I'm building an MVC application for my own use and to learn more about MVC and decided to use jqGrid.  Nice product, BTW.  I dig it.

Anyway, I've built all my models and controllers and have grids working for the pages on which I'm going to use them.  I'm able to display, edit, add, and delete records as expected and I've been successful in wiring up edit forms that use my controllers to populate dropdown options.  All of that is working great.

The problem I have is when I display each record in the main grid.  I have two tables, each with corresponding models and controllers.  Table 1 is Seasons (id, name, start date, end date, frequency).  Table 2 is Frequency (id and description).  Basically the frequency is a lookup for values of weekly, bi-weekly, monthly, etc.  The FrequencyId primary key is a foreign key in the Season table.

When my edit/add form is populated, I use the frequency controller to return an html string of options and that part works great.  It even populates the correct selection on edit.  When the grid is displaying each Season row, though, the Frequency field shows the ID.  I have been searching for a solution and trying many different ways to code this for a couple days now and nothing is working.  I used "formatter: select" and that just blanked out the field on load and I've recently been trying to use a custom formatter so that I can pass the cell value back to my controller method.  That's where I'm stuck.  How do I setup the custom formatter to return a string from the controller instead of just returning the literal string.  I've tried to use a url property instead of what you see below but haven't had any luck there, either.

Also, am I doing this the right way?  Am I making it too complicated?  Is there an easy way to do what I'm trying to do here?

Thanks!

 

My Seasons ViewModel:

$(function () {
$("#grid").jqGrid({
url: "/AdminSeasons/GetSeasons",
datatype: 'json',
mType: 'Get',
colNames: ['SeasonId', 'Season Name', 'Start Date', 'End Date', 'Bowl Frequency', 'Handicap Base Score', 'Handicap Percentage', 'Day Of The Week'],
colModel: [
{ key: true, name: 'SeasonId', index: 'SeasonId', hidden: true },
{ key: false, name: 'SeasonName', index: 'SeasonName', editable: true },
{
editable: true, width: 120, name: "SeasonStartDate", search: false, formatter: "date",
formatoptions: { srcformat: "m/d/Y h:i:s A", newformat: "Y-m-d" }
},
{
editable: true, width: 120, name: "SeasonEndDate", search: false, formatter: "date",
formatoptions: { srcformat: "m/d/Y h:i:s A", newformat: "Y-m-d" }
},
{
editable: true, width: 120, name: "FrequencyId", search: false, edittype: "select", formatter: frequencyFormatter,
editoptions: { dataUrl: "/AdminFrequency/FrequencyList" }
},
{
editable: true, width: 120, name: "HandicapBaseScore", search: false, edittype: "select",
editoptions: { dataUrl: "/AdminSeasons/HtmlFormattedBaseScoreList" }
},
{
editable: true, width: 120, name: "HandicapPercentage", search: false, edittype: "select",
editoptions: { dataUrl: "/AdminSeasons/HtmlFormattedPercentageList" }
},
{
editable: true, width: 120, name: "DayOfTheWeekId", search: false, edittype: "select", formatter: "select",
editoptions: { dataUrl: "/AdminDayOfTheWeek/DayOfTheWeekList" }
}],
pager: jQuery("#pager"),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewRecords: true,
caption: 'Manage Seasons',
emptyRecords: 'No records to display',
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
repeatitems: false,
id: '0'
},
autowidth: true,
multiselect: false
}).navGrid('#pager', { edit: true, add: true, del: true, search: false, refresh: true },
{
// edit options
zIndex: 100,
url: '/AdminSeasons/Edit',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
//afterComplete: function (response) {
// if (response.responseText) {
// alert(response.responseText);
// }
//}
},
{
// add options
zIndex: 100,
url: '/AdminSeasons/Create',
closeOnEscape: true,
closeAfterAdd: true,
//afterComplete: function (response) {
// if (response.responseText) {
// alert(response.responseText);
// }
//}
},
{
// delete options
zIndex: 100,
url: '/AdminSeasons/Delete',
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true,
msg: 'Are you sure you want to delete this season?',
//afterComplete: function (response) {
// if (response.responseText) {
// alert(response.responseText);
// }
//}
});

function frequencyFormatter(cellvalue, options, rowObject) {
return '/AdminFrequency/FrequencyDescriptById/' + cellvalue;
//debugger;
//return frequency;
}
});