Skip to main content

jqGrid: Handling array data !!!

This post is primarily a personal reference. I also consider this a tribute to Oleg, who was fundamental in improving my understanding of the jqGrid internals - the way it handles source data types, which if I may say led him in discovering a bug in jqGrid.

If you are working with local array data as the source for jqGrid, meaning you will get the data from the server but want the jqGrid not to talk to the server anymore, and want to have custom handling of the edit functionality/form and delete functionality, it is not going to be straightforward - you need to have a decent understanding of how jqGrid works, and you should be aware of the bug Oleg pointed in our discussion. I repeat this is all about using jqGrid to manage array data locally, no posting to server when you edit or delete, which is where the bug is.

$('#grid').jqGrid('navGrid',
    '#pager', {
        recreateForm: true,

        add: false,
        search: false,
        refresh: false,

        edit: true,
        edittext: 'Edit',
        editicon: 'ui-icon-tag',
        editurl: 'clientArray',

        del: true,
        deltext: 'Delete'
    }, { // edit options
        editCaption: 'Fix Error Record',
        url: 'clientArray',
        recreateForm: true,
        closeAfterEdit: true,
        reloadAfterSubmit: false,
        beforeShowForm: function (form) {
            $('#editmod' + gridId).addClass('grid-dialog');
            // You can disable or alter certain fields in the form if you need.
        },
        processing: true, // very important or the custom handling will not work!

        // Edit - Custom handling of submit button in the edit form
        onclicksubmit: function (options, postdata) {
            var gridId = 'grid';

            var idInPostdata = this.id + "_id";
            if (postdata[COL_MODEL_ROW_NO] == undefined & amp; & amp; postdata[idInPostdata] != undefined) {
                postdata[COL_MODEL_ROW_NO] = postdata[idInPostdata];
            }

            var clone = jQuery.extend(true, {}, postdata);
            $(gridSelector).jqGrid('setRowData', postdata[COL_MODEL_ROW_NO], clone);

            for (var d_index = 0, d_length = this.p.data.length; d_index & lt; d_length;
                ++d_index) {
                var p_data_row = this.p.data[d_index];

                if (p_data_row[INDEX_ROW] == postdata[COL_MODEL_ROW_NO]) {
                    var dataObject = this.p.data[d_index];
                    dataObject[INDEX_NAME] = postdata[COL_MODEL_NAME];
                    dataObject[INDEX_AGE] = postdata[COL_MODEL_AGE];
                    dataObject[INDEX_STATE] = postdata[COL_MODEL_STATE];
                    break;
                }
            }

            if (options.closeAfterEdit) {
                $.jgrid.hideModal('#editmod' + gridId, {
                    gb: '#gbox_' + gridId,
                    jqm: options.jqModal,
                    onClose: options.onClose
                });
            }

            options.processing = true;
            return {};
        }
    }, {}, // add options,
    { // delete options
        processing: true, // very important, else the custom handling will not work!

        // Custom handling of the delete functionality.
        // Prevents posting to the server but handles everything locally.
        onclickSubmit: function (options, id) {
            var grid = $('#grid');
            var gridData = this.p.data;
            var selectedRows = this.p.multiselect ? this.p.selarrrow : [this.p.selrow];

            for (var index = 0, length = selectedRows.length; index & lt; length; ++index) {
                var rowId = selectedRows[index];

                for (var pd_index = 0, pd_length = gridData.length; pd_index & lt; pd_length;
                    ++pd_index) {
                    var gd_row = gridData[pd_index];
                    if (gd_row[INDEX_ROW_NO] == rowId) {
                        gridData.splice(pd_index, 1);
                        break;
                    }
                }
            }

            // Refresh grid to previous page if the current page is the
            // last page in the grid; so that when all records of the
            // last page are deleted, we show the previous page.
            if (this.p.page === this.p.lastpage) {
                grid.jqGrid('setGridParam', {
                    page: this.p.page - 1
                });
            }

            // Refresh the grid to load the changes
            grid.trigger('reloadGrid');

            $.jgrid.hideModal('#delmod' + gridId, {
                gb: '#gbox_' + gridId,
                jqm: options.jqModal,
                onClose: options.onClose
            });

            options.processing = true;
            return {};
        }
    }, {} // search options
);

Hope this post helps any poor soul battling the same or similar problem. You should definitely check out the question I had originally raised at StackOverflow.com, and the interesting discussion thereon.
Post a Comment

Popular posts from this blog

Passing CComPtr By Value !!!

This is about a killer bug identified by our chief software engineer in our software. What was devised for ease of use and write smart code ended up in this killer defect due to improper perception. Ok, let us go!CComPtr is a template class in ATL designed to wrap the discrete functionality of COM object management - AddRef and Release. Technically it is a smart pointer for a COM object.void SomeMethod() { CComPtr siPtr; HRESULT hr = siPtr.CoCreateInstance(CLSID_SomeComponent); siPtr->MethodOne(20, L"Hello"); }Without CComPtr, the code wouldn't be as elegant as above. The code would be spilled with AddRef and Release. Besides, writing code to Release after use under any circumstance is either hard or ugly. CComPtr automatically takes care of releasing in its destructor just like std::auto_ptr. As a C++ programmer, we must be able to appreciate the inevitability of the destructor and its immense use in writing smart code. However there is a difference between …

out, ref and InvokeMember !!!

When I was working on the .NET reflection extravaganza thing that I explained in my previous column, i learnt one another interesting thing, that is about the Type.InvokeMember. How will pass out or ref parameters for the method invoked using Type.InvokeMember ? If you are going to invoke a method with the prototypeint DoSomething(string someString, int someInt);then you would use InvokeMember like this:-object obj = someType.InvokeMember("DoSomething",
BindingFlags.Public | BindingFlags.NonPublic | BindingFlags.Instance,
null,
this,
new object[] {"Largest Integer", 1});or use some variables in the new object[] {...}. But what do you with the args if DoSomething takes out or ref parameters ?int DoSomething(out string someString, ref int someInt);Something like this will not work string someText = string.Empty;
int someInt = 0;
object obj = someType.InvokeMember("DoSomething",
BindingFlags.Public | BindingFlags.NonPublic …

Offering __FILE__ and __LINE__ for C# !!!

THIS POST USES SYNTAXHIGHLIGHTER AND HAS ISSUES RENDERING CODE ONLY IN CHROME
Not the same way but we could say better.
Visual Studio 2012, another power packed release of Visual Studio, among a lot of other powerful fancy language features, offers the ability to deduce the method caller details at compile time.
C++ offered the compiler defined macros __FILE__ and __LINE__ (and __DATE__ and __TIME__), which are primarily intended for diagnostic purposes in a program, whereby the caller information is captured and logged. For instance, using __LINE__ would be replaced with the exact line number in the file where this macro has been used. That sometimes beats the purpose and doesn't gives us what we actually expect. Let's see.

For instance, suppose you wish to write a verbose Log method with an idea to print rich diagnostic details, it would look something like this.
void LogException(const std::string& logText, const std::string& fileName, …