jqGrid with dynamic colModel?

Question

I have to create a data table simmiliar to the http://www.chartle.net/ have.

The most importang feature is :

1. Row can be added/remove dynamically (done)
2. Column can be added/remove dynamically (how can i do this ?)
3. The changed colModel can be saved in database for feature modification ..

Is this possible ?

Answer 1

jqGrid 3.6 now supports dynamically showing / hiding columns, and there is a "Column Chooser" demo on their 3.6 demo page. Is this good enough for your needs?

Answer 2

Search getColProp and setColProp in their docs: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

Answer 3

I think it is possible, but haven't tried..

If you use ASP.NET MVC: Have you tried to programmatically add the grid from the Controller as ViewData? It's an idea.

This link may get you further : http://arahuman.blogspot.com/2009/06/jqgrid-using-mvc-json-and-datatable.html

Hope it helps

Answer 4

 bindJqGrid("SetPayInvoice", feeID, datasetID, 1);

function bindJqGrid(actionController, feeID, datasetID, step)
 {
    agreementID = $("#agreementID").val();

    mappingTemplateID = $("#mappingTemplateID").val();
    invoiceID = $("#invoiceID").val();
    var action = '/PayInvoice/' + actionController + '?agreementID=' + agreementID + '&mappingTemplateID=' + mappingTemplateID + '&invoiceID=' + invoiceID + '&feeID=' + feeID + '&datasetID=' + datasetID;
    var caption = "Invoice Exception";
    $("#headerText").html(caption);
    JQGrid(caption, action);
}
function JQGrid(caption, action)
 {    $("#tblGrid").jqGrid('GridUnload');

    $.ajax({
        url: action,
        dataType: "json",
        mtype: 'POST',
        success: function (result) {
            if (result) {
                if (!result.Error && result != "" && result != undefined) {
                    $("#TotalData").html(result.records);
                    $("#divWorkflowWrapper").show();
                    $("#dvFooter").show();

                    var colData = "";
                    colData = columnsData(result.column);
                    colData = eval('{' + colData + '}');

                    $("#tblGrid").jqGrid({
                        url: action,
                        datatype: 'json',
                        mtype: 'GET',
                        colNames: result.column,
                        colModel: colData,
                        autowidth: true,
                        height: 550,
                        rowNum: 25,
                        rowList: [25, 50, 75, 100],
                        loadtext: "Loading...",
                        pager: '#tblGridpager',
                        viewrecords: true,
                        gridview: true,
                        altRows: true,
                        cellEdit: true,
                        cellsubmit: "remote",
                        cellurl: '/PayInvoice/GridSavecell',
                        beforeSelectRow: function (rowid) { return false; },
                        ondblClickRow: function (rowid, iRow, iCol) {
                            jQuery("#tblGrid").editCell(iRow, iCol, true);
                        },
                        afterEditCell: function () {
                            e = jQuery.Event("keydown");
                            e.keyCode = $.ui.keyCode.ENTER;
                            edit = $(".edit-cell > *");
                            edit.blur(function () {
                                edit.trigger(e);
                            });
                        },
                       beforeSubmitCell: function (id, cellname, value, iRow, iCol) {
                            objedit(id, cellname, value);
                            return { id: id, cellname: cellname, value: value, iRow: iRow, iCol: iCol };
                        },
                        afterSaveCell: function (id, cellname, value, iRow, iCol) {
                            objedit(id, cellname, value);
                            return { id: id, cellname: cellname, value: value, iRow: iRow, iCol: iCol };
                        },
                        caption: caption
                    });
                }
            }
            else {
                $("#divWorkflowWrapper").hide();
                $("#dvFooter").hide();
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (xhr && thrownError) {
                alert('Status: ' + xhr.status + ' Error: ' + thrownError);
            }
        }
    });
}

Answer 5

The problem is, that you can't dynamically change the jQgrid ColModel. The two options I see are:

1. Delete the whole grid and reload it with a new ColModel (if it can change entirely) using GridUnload:

   jQuery(selector).GridUnload(selector);

2. Load all possible rows and show/hide the ones you need, e.g. by using the show hide columns plugin

For saving it dynamically it should be sufficient to store the configuration data for the grid in the database as JSON.

Answer 6

function objedit(id, cellname, value) 
{

    var flag = 0;
    for (var i = 0; i < index; i++) {
        if (obj[i][0] == id && obj[i][1] == cellname) {
            obj[i] = [id, cellname, value]
            flag++;
        }
    }
    if (flag == 0) {
        obj[index] = [id, cellname, value];
        index++;
    }
}


function columnsData(Data) 
{

var formater = "";

    var str = "[";
    for (var i = 0; i < Data.length; i++) {
        if (Data[i] == "Id")
            str = str + "{name:'" + Data[i] + "', index:'" + Data[i] + "', hidden: true,}";
        else
            str = str + "{name:'" + Data[i] + "', index:'" + Data[i] + "', editable: true}";
        if (i != Data.length - 1) {
            str = str + ",";
        }
    }
    str = str + "]";
    return str;
}
//------end grid part----------