CODEWITHSUNDEEP
jqueryjqgrid
Wildan Maulana
Wildan Maulana

Reputation: 153

jqGrid with dynamic colModel?

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 ?

Upvotes: 4

Views: 34900

Answers (6)

suneelsarraf
suneelsarraf

Reputation: 11

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

Upvotes: 0

suneelsarraf
suneelsarraf

Reputation: 11

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----------

Upvotes: 1

Andrew DeLisa
Andrew DeLisa

Reputation: 51

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

Upvotes: 5

Justin Ethier
Justin Ethier

Reputation: 134167

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?

Upvotes: 1

solkim
solkim

Reputation: 99

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

Upvotes: 1

Daff
Daff

Reputation: 44205

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.

Upvotes: 2

Related Questions