Show different Jqgrid formats in the same page

I want someone to help me, I have a case that seems very particular need in a single page display multiple jqGrid formats, depending on the selection of a dropdownlist which is out of jqGrid, like in the image:

First I need a recommendation about how best to implement the dropdownlist, if using jquery directly or built in html and how to get the item selected to work with. I am very confused with this, I do not know how to send data from dropdownlist to the controller.

On the other hand need to know if is possible to show a different jqGrid format, according to the item selected in the dropdownlist, ie:

If the option is "A" the columns to be displayed are: Id, Name, City, if the selected option is "B" columns to be displayed are Id, Name, Last Name, Phone, If change is "C "must show ID, Name, Surname, Marital Status, Age. Is this possible..??? and if possible, how can I do this? can help me with an example ..?

Thanks in advance. Best Regards.

EDIT:

Here I post the Javascript code of mi application, it's have the Matt's sugestions, but have a little problem yet, when I select an option it`s show me the cols I want. but when I choose another option y try to choose again the first, the cols doesn't change....

<script type="text/javascript">

    jQuery(document).ready(function () {
        var lastsel;

        $(function () {
            $('#list').jqGrid({
                url: '/EquipodeRed/GridData/',
                editurl: '/EquipodeRed/EditData/',
                datatype: 'json',
                height: 250,
                colNames: ['Id', 'Descripción', 'Dirección Mac', 'Marca', 'Modelo', 'Numero de Serie', 'Tipo de Equipo'],
                colModel: [
                            { name: 'Id', index: 'Id', width: 30 },
                            { name: 'Descripcion', index: 'Descripcion', width: 100, sortable: true, editable: true, edittype: "text", editoptions: { size: "15", maxlength: "20"} },
                            { name: 'DireccionMac', index: 'DireccionMac', width: 80, sortable: true, editable: true, edittype: "text", editoptions: { size: "10", maxlength: "15"} },
                            { name: 'Marca', index: 'Marca', width: 80, editable: true, edittype: "text", editoptions: { size: "5", maxlength: "10"} },
                            { name: 'Modelo', index: 'Modelo', width: 80, editable: true, edittype: "text", editoptions: { size: "10", maxlength: "25"} },
                            { name: 'NumerodeSerie', index: 'NumerodeSerie', width: 80, editable: true, edittype: "text", editoptions: { size: "10", maxlength: "15"} },
                            { name: 'TipoEquipo', index: 'TipoEquipo', width: 100, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipodeRed/ListaTiposEquipo/'} }
                           ],
                caption: 'Listado de Equipos de Red',
                onCellSelect: function (rowid, iCol, cellcontent, e) {
                    if (rowid && rowid !== lastsel) {
                        $('#list').restoreRow(lastsel);
                        lastsel = rowid;
                    }
                    $('#list').editRow(rowid, true, iCol);
                },
                autowidth: true,
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#pager',
            });

            $('#list').jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: true },
            { url: '/EquipodeRed/EditData/',
            },
            { url: '/EquipodeRed/AddData',
            },
            { url: '/EquipodeRed/DeleteData/',
            },
            { closeAfterSearch: true,
              reloadAfterSubmit: true
            }

          );

        });

            $("#displaydropdown").change(function () {
                var display = $("#displaydropdown option:selected").val();
                if (display == '1') 
                {
                    $('#list').hideCol('Marca', 'Modelo');
                }
                else if (display == '2') {
                    $('#list').hideCol('DireccionMac');
                }
                else if (display == '3') {
                    $('#list').hideCol('Descripcion, NumerodeSerie');
                }
            });
        });
    });
</script>
<h2>Equipos de Red</h2>

<table width="100%">
    <tr>
        <td>Tipo de Equipo :</td>
        <td><% =Html.DropDownList("TipoId", (SelectList)ViewData["tiposdeEquipo"], "--Seleccione--", new { @id = "displaydropdown" })%> </td> 
    </tr>
    <tr>
        <td colspan="2"><input type="submit" value="Mostrar" /></td>
    </tr>
</table>

    <br />
    <br />


 <table id="list" class="scroll" cellpadding="0" cellspacing="0" width="100%"></table>  
 <div id="pager" class="scroll" style="text-align: center;"></div>

EDIT 2: Matt Thank you very much, especially for being patient ... I realized I was using the showcol and hidecol completely wrong, so I had to change this part of code:

$("#displaydropdown").change(function () {
                var display = $("#displaydropdown option:selected").val();
                if (display == '1') 
                {
                    $('#list').hideCol('Marca', 'Modelo');
                }
                else if (display == '2') {
                    $('#list').hideCol('DireccionMac');
                }
                else if (display == '3') {
                    $('#list').hideCol('Descripcion, NumerodeSerie');
                }
            });

for this one:

$("#displaydropdown").change(function () {
                var display = $("#displaydropdown option:selected").val();
                if (display == '1') 
                {
                    $('#list').hideCol('Marca');
                    $('#list').hideCol('Modelo');
                    $('#list').showCol('Id');
                    $('#list').showCol('Descripcion');
                    $('#list').showCol('DireccionMac');
                    $('#list').show开发者_开发知识库Col('NumerodeSerie');
                    $('#list').showCol('TipoEquipo');
                }
                else if (display == '2') {
                    $('#list').hideCol('DireccionMac');
                    $('#list').showCol('NumerodeSerie' );
                    $('#list').showCol('Id');
                    $('#list').showCol('Descripcion');
                    $('#list').showCol('Marca');
                    $('#list').showCol('Modelo');
                    $('#list').showCol('TipoEquipo');
                }
                else if (display == '3') {
                    $('#list').hideCol('Descripcion')
                    $('#list').hideCol('NumerodeSerie');
                    $('#list').showCol('Id');
                    $('#list').showCol('Marca');
                    $('#list').showCol('Modelo');
                    $('#list').showCol('TipoEquipo');
                    $('#list').showCol('DireccionMac');
                }
            });

And now all works fine...!! thanks again.. ;)

Admittedly, I've only been doing web development for a very short time, so there might be a much better approach to use. But one approach is that you could use jQuery to handle the "on change" to the dropdownlist.

Say you've got some dropdownlist that might look like:

@Html.DropDownListFor(model => model.Display, 
 new SelectList(Model.Displays, "Name", "Name", new {@id= "displaydropdown"})

and then you could use the jQuery change handler to do something upon the switching of the selected item in the list:

$("#displaydropdown").change(function(){
    // The on-change code goes in here.
});

And then you could utilize the jqGrid "hideCol" and "showCol" functions to hide/show column data. Those calls look like:

$('#myTableId').hideCol('someColumn');
$('#myTableId').showCol('anotherColumn');

Initially you could create your colModel for the grid with all the columns you might ever show and then use those hideCol and showCol functions to adjust the display based on the selected grid display.

So, maybe something like:

$("#displaydropdown").change(function(){
    var display = $("#displaydropdown option:selected").val();
    if (display == 'A') // or whatever
    {
       $('#myTableId').hideCol('someColumn');
       $('#myTableId').showCol('anotherColumn');
    }
    else if (display == 'B')
    {
       $('#myTableId').showCol('someColumn');
       $('#myTableId').showCol('anotherColumn');
    }
});

Anyhow, that's the basic idea. It probably could use some improvement and it does push the display logic into that jQuery function - there might be a much better and more elegant solution than mine out there - but the idea should work. Hope it helps.