Can somebody help me resolve an issue I am having with jqGrid and dropdown lists please?  I have looked at the questions on SO but the solutions do not help me.

I have two drop down lists - category and subCategory.  I want the subCategory value to be dependent on the category.  I am using Form-based editing
    I can get this working in the following cases no problem
- when i am adding a new row, the drop downs work fine.  SubCategory is initially set to just the 'Select' string and when I select a category, the subcategory values are correctly updated.
- ****I create any new row**** and then go back in my grid, click on any other row to edit the data, the subCategory value is correctly displayed from the database. 

  If however, I go into my page and just try to edit a row in the form (without first creating a new row), the subcategory is not set correctly from the database.  And just shows up empty.  I have tried using dataInit on both fields but it doesn't even fire!!!! 

These are the relevant code lines. 
jqGrid View:-

            { name: 'categoryId', index: 'categoryId', width: 100, align: 'left', sortable: true, editable: true, edittype: 'select',
                editoptions: { dataUrl: '/Admin/GetCategories',
                    dataEvents: [
                        { type: 'change',
                            fn: function (e) {
                                var v = $(e.target).val();
                                setSubCategory(v);
                            }
                        }
                         ]
                },
                editrules: { edithidden: true }, searchtype: "text", searchoptions: { sopt: ['cn', 'eq', 'ne', 'bw', 'ew', 'nc'] }
            },
            { name: 'subCategoryId', index: 'subCategoryId', width: 100, align: 'left', sortable: true, editable: true, edittype: 'select',
                editoptions: { dataUrl: '/Admin/GetSubCategoriesForCategory' },
                editrules: { edithidden: true }, searchtype: "text", searchoptions: { sopt: ['cn', 'eq', 'ne', 'bw', 'ew', 'nc'] }
            }....

    function setSubCategory(category) {
        $.ajax({
            url: '/Admin/GetSubCategoriesForCategory',
            data: { 'categoryId': category },
            type: 'GET',
            dataType: 'html',
            success: function (data) {
                $("#subCategoryId").html(data);
            }
        });
    }

And my controller action

    public string GetSubCategoriesForCategory(int? categoryId)
    {
        if (categoryId == null)
            return GetEmptySelect();   //Just returns a Select with no options

        StringBuilder result = new StringBuilder();
        result.Append(defaultVal);  //this is the 'Select' option
        if (categoryId != null)
        {
            foreach (var c in db.categories.Where(c => c.parentID == categoryId).ToList())
            {
                result.Append("<option value=" + c.ID + " > " + c.desc + " </option> ");
            }
        }
        return result.ToString();
    } 

As I mentioned before, I did try using the dataInit on categories to set the dataUrl of the sub-categories, but I keep getting an undefined value instead for some reason. 

P.S:- Not sure if this is relevant or not, but I cannot get many of the events to fire in the jqGrid.  I also cannot get the cell editing to work either, just freezes the grid and I cannot select any row etc.  I'm using IE8.

Thank you