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?

LeftyX · Accepted Answer · 2011-02-05 11:48:28Z

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();

answered Feb 5, 2011 at 11:48

LeftyX

35.6k21 gold badges139 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Craig Over a year ago

Thanks @vandalo - Will the array be available to me when I click my Save button (Which is the submit button that submits the model back to the controller)?

LeftyX Over a year ago

Yes, you can declare your array as global in the page (script) so you can read its content from other functions (javascript) on the page. If you want to submit the array probably the best thing to do is to use this tool jquery.malsup.com/form/#ajaxSubmit , intercept the beforeSubmit event and put your array somewhere so it can be posted.

Collectives™ on Stack Overflow

ASP.Net MVC using Jquery Grid

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related