How to send dynamic columns in jquery flexigrid

394 Views Asked by At

i am not sure how can i pass dynamic columns along with the default paramters e.g. rp, sortname, sortorder in jquery flexigrid. i have read articles but that only suggest to pass the dynamic column on onSubmit event. i am confused how can i embed this onsubmit event and pass the additional fields to server side. see my page code. i am using asp.net mvc4 so i am using c# controller to handle server side.

$('#CustomerList').flexigrid({
    url: '@Url.Action("CustomerList", "Customer")',
    dataType: 'json',
    colModel: [
        {
            display: 'Number',
            name: 'Id',
            width: 40,
            sortable: true,
            align: 'left'
        },
        {
            display: 'First Name',
            name: 'FirstName',
            width: 80,
            sortable: true,
            align: 'left'
        },
        {
            display: 'Last Name',
            name: 'LastName',
            width: 80,
            sortable: true,
            align: 'left'
        },
    ],
    buttons: [
    {
        name: 'Edit',
        bclass: 'edit',
        onpress: test
    }, {
        name: 'Delete',
        bclass: 'delete',
        onpress: test
    }, {
        separator: true
    }],
    searchitems: [
        {
            display: 'First Name',
            name: 'FirstName'
        },
        {
            display: 'Last Name',
            name: 'LastName'
        },
        {
            display: 'Email',
            name: 'Email'
        },
        {
            display: 'Age',
            name: 'Age'
        },
        {
            display: 'Sex',
            name: 'Sex'
        },
        {
            display: 'Membership Type',
            name: 'MembershipType'
        }

    ],
    sortname: "LastName",
    sortorder: "asc",
    usepager: true,
    title: 'Customer',
    useRp: true,
    rp: 10,
    showTableToggleBtn: true,
    width: 930,
    height: 500,
    singleSelect: true
});

Following aritcles suggest to create another form and pass the parameters in Onsubmit event. i am stuck how to pass it

<form id="fmFilter">
    <select id="cmbfilter">
        <option>All</option>
        <option>Family</option>
    </select>

</form>

<script> 
    $('#grid01').flexigrid($.extend({}, myFlex, {
        onSubmit : function(){
            $('#grid01').flexOptions({
                params: [{name:'callId',  value:'grid01'}].concat($('#fmFilter').serializeArray())
            });
            return true;
        }
    }));                            // ')' was missing
</script>

Controller

public ActionResult CustomerList(int page, int rp, string sortname, string sortorder, string qtype, string query){}

Essence:

how to call the CustomerList controller method on the onchange event of "cmbfilter" and send its value along with default flexigrid default parameters e.g. rp, sortorder, sortname?

0

There are 0 best solutions below