ASP.Net MVC using Jquery Grid

Question

I have View which (simplified version of the real screen) has a few Drop Down controls allowing the user to select a Category, then a Sub Category - enter an amount, and then click an 'Add' button. The Add button then adds a new row to a JQuery Grid ( enter link description here ).

Then, the controls reset, and allow the user to select another category, sub category and amount, and then click add again, adding the data to the grid.

        $(function () {
        $('#addSplit').click(function () {
            var mydata = [
                            { category: $('#SelectedCategoryId option:selected').text(), subcategory: $('#SelectedSubCategoryId option:selected').text(), costcenter: $('#SelectedCostCenterId option:selected').text(), budget: $('#SelectedBudgetId option:selected').text(), amount: $('#amount').val() }
                         ];

            for (var i = 0; i <= mydata.length; i++)
                jQuery("#list4").jqGrid('addRowData', i + 1, mydata[i]);
        });
    });

The rows are being added well. (I need to add hidden columns to store the ids somehow).

Then, the user will click 'Save'. I'd like to somehow itterate through the grid, grab the (to be added) ids, and somehow return that with the model, back to my MVC controller to store.

Can this be done? Or is there a better idea for what I am trying to do?

Answer 1

You have to define your colModel. I would define a function which receives an array of data, and binds it (data: DataToLoad)

function LoadGrid(DataToLoad)       {
    jQuery("#list4").jqGrid({
        data: DataToLoad,
        datatype: "local",
        width: 790,
            height: 250,
        rowNum: 999999,
        colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
        colModel:[
            {name:'id',index:'id', hidden:true, sorttype:"int"},
            {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
            {name:'name',index:'name', width:100},
            {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number"},
            {name:'tax',index:'tax', width:80, editable: true, align:"right",sorttype:"float"},     
            {name:'total',index:'total', width:80,align:"right",sorttype:"float"},      
            {name:'note',index:'note', width:150, sortable:false}       
        ],
        emptyrecords: "No records to view",
        cellEdit: true,
        cellsubmit: 'clientArray',
        viewrecords: true,
        shrinkToFit: false,
        scroll: false,
        rownumbers: true,
        hidegrid: false,
        pager: "#plist47",
        caption: "Manipulating Array Data"
    });
}

As you can see the first column is hidden:true

Then you can call your function with the array loaded, instead of adding the rows to the grid:

$("#addSplit").bind('click', function(){
    jQuery("#list4").GridUnload();
    // LOAD the ARRAY here.
    LoadGrid(mydata);
});

Remember to unload the grid jQuery("#list4").GridUnload();