jQuery Grid Plugin - jqGrid

Hi,

I have a drop down list outside of the jqgrid. When toggled this grid sets an ID with populates the Jqgrid. This works fine and so does editing in the dialog box. The problem arises when I try to add a new row. I use editData to send the DistrictID, however the value is always empty. If I hard code a number in then editData works, so it has something to do with reading the form value. I am new to jqgrid, so would really appreciate the help. Here is the code (noted where only a hardcoded number works and the form field fails):

<p>District Name: @Html.DropDownListFor(m => m.DistrictDirectorID, new SelectList(Model.DistrictList, "Value", "Text"), "-----Choose One-----")
@Html.ValidationMessage("DistrictDirectorID")</p>

<table id="list" class="scroll" cellpadding="0" cellspacing="0" style="display:none;"></table>
    <div id="listPager" class="scroll" style="text-align:center;"></div>                                                            
    <div id="listPsetcols" class="scroll" style="text-align:center;"></div>

<script type="text/javascript">

    $(document).ready(function () {

        $('#DistrictDirectorID').change(function () {
            var selectedID = $("#DistrictDirectorID").val();
            if (selectedID > 0) {
                $("#list").setGridParam({ postData: { id: $("#DistrictDirectorID").val()} }).trigger("reloadGrid");
                $('#list').show();
            } else {
                $('#list').hide();
            }
        });

        var updateDialog = {
            url: '/AnnualReport/Section1/Update/',
            editData: {
                DistrictDirectorID: function () { return $("#DistrictDirectorID option:selected").val(); } //here is where it fails to send unless hardcoded
                    },
            closeAfterAdd: true
                , closeAfterEdit: true
                , modal: true
                , onclickSubmit: function (params) {
                    var ajaxData = {};

                    var list = $("#list");
                    var selectedRow = list.getGridParam("selrow");
                    rowData = list.getRowData(selectedRow);
                    ajaxData = { StudentDemographicId: rowData.StudentDemographicId, DistrictDirectorID: $("#DistrictDirectorID option:selected").val() };

                    return ajaxData;
                }

                , width: "450"
        };

        $.jgrid.nav.addtext = "Add";
        $.jgrid.nav.edittext = "Edit";
        $.jgrid.nav.deltext = "Delete";
        $.jgrid.edit.addCaption = "Add Contact";
        $.jgrid.edit.editCaption = "Edit Contact";
        $.jgrid.del.caption = "Delete Contact";
        $.jgrid.del.msg = "Delete selected Contact?";
        $("#list").jqGrid({
            url: '/AnnualReport/Section1/List/',
            postData: {
                id: function () { return $("#DistrictDirectorID option:selected").val(); }
            },
            datatype: 'json',
            mtype: 'GET',
            colNames: ['StudentDemographicId', 'DistrictDirectorID', 'Targeted School'],
            colModel: [
                    { name: 'StudentDemographicId', index: 'StudentDemographicId', width: 40, align: 'left',  key: true,editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
                    { name: 'DistrictDirectorID', index: 'DistrictDirectorID', width: 40, align: 'left',  key: true,editable: true, editrules: { edithidden: false }, hidedlg: true, hidden: true },
                    { name: 'TargetedSchool', index: 'TargetedSchool', width: 350, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
                    ],
            pager: $('#listPager'),
            rowNum: 30,
            rowList: [1000],
            sortname: 'StudentDemographicId',
            sortorder: "desc",
            viewrecords: true,
            caption: 'Contact List',
            autowidth: true,
            ondblClickRow: function (rowid, iRow, iCol, e) {
                $("#list").editGridRow(rowid, prmGridDialog);
            }
        }).navGrid('#listPager',
                {
                    edit: true, add: true, del: true, search: false, refresh: true

                },
                updateDialog,
                updateDialog,
                updateDialog
            );
    });       
    </script>

Thanks!

Dan