Free-JQGrid editable subgrid example/reference?

I am sure this is an easy question, thank you very much for any direction.

I am having some trouble figuring out how to add edit controls to a subgrid, using free-jqgrid. I have the parent grid set up and has working controls.  I have the subgrid correctly displaying data but It seems I am not adding the subgrid controls correctly. Do yall know any examples i can reference to set up an editable subgrid?
Justin HullAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chinmay PatelChief Technical NinjaCommented:
Hi Justin,

Just so that there is no confusion - JQGrid is not free at all. From JQGrid's licensing page: http://guriddo.net/?page_id=103334

If you want to use this product for a personal, school or non-profit project, then you can use it for free under the Creative Commons Attribution-Non-Commercial 3.0 License.

Now coming to your question, please post your existing code on https://JSFiddle.net so that it becomes easy to test/debug.

Regards,
Chinmay.
0
Justin HullAuthor Commented:
I am sorry for the concussion, when I am saying free-jqGrid I am referring to the branch by Oleg Kiriljuk https://github.com/free-jqgrid.

I can try to upload my page to jsfiddle but i dont think it will work with the data from database and what not. I can paste my working grid in a code block here, i dont have a problem with my current grid workign i was just looking for a way to add the edit controls to the subgrid.

$(function () {
    $("#jqGrid").jqGrid({
        url: "/Home/GetItems",
        postData: {
            closeType: function () { return $("#CloseTypeForm").val(); },
            month: function () { return $("#month").val(); },
            year: function () { return $("#year").val(); }
        },
        datatype: 'json',
        mtype: 'POST',
        colNames: ['ID', 'ISID', 'Application / Key Task', 'Owner','Proxy Owner', 'Complete','Comments', 'Details'],
        colModel: [
            { key: true, hidden: true, name: 'ItemID', index: 'ItemID', editable: false },
            { key: false, hidden: true, name: 'ISID', index: 'ISID', editable: false },
            {
                key: false, name: 'Item', index: 'Item', editable: false, search: false, sort: false, viewable: false, formatter: 'showlink', formatoptions: {
                    baseLinkUrl: function (options) {
                        return "/home/TaskDetails/" + encodeURIComponent(options.rowid);
                    },
                    idName: null
                }
            },
            { key: false, name: 'Owner', index: 'Owner', editable: true, filter: true },
            { key: false, name: 'ProxyOwner', index: 'ProxyOwner', editable: true },
            { key: false, name: 'Complete', index: 'Complete', editable: false },
            { key: false, name: 'ItemComments', index: 'ItemComments', editable: true },
            {
                key: false, hidden: true, name: 'ItemID', label: 'Details', search: false, sort: false, viewable: false, formatter: 'showlink', formatoptions: {
                    baseLinkUrl: function (options) {
                        return "/home/TaskDetails/" + encodeURIComponent(options.rowid);
                    },
                    idName: null
                }
            }
        ],
        pager: jQuery('#jqControls'),
        rowNum: 20,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        multiselect: false,
        sortname: "ItemID",
        caption: 'Close Checklist',
        emptyrecords: 'No Records are Available to Display',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false
        },
        autowidth: true,
        subGrid: true,
        subGridRowExpanded: function (subgrid_id, row_id) {
            var sg_tableID = subgrid_id + "_t";
            jQuery("#" + subgrid_id).html("<table id='" + sg_tableID + "' class'scroll'></table>");
            jQuery("#" + sg_tableID).jqGrid({
                url: "/Home/GetTaskSubList/" + row_id,
                datatype: "json",
                mtype: 'get',
                colNames: ['ID', 'Task', 'Task Status', 'Task Validator', 'Proxy Validator', 'Task Comments'],
                colModel: [
                    { key: true, hidden: true, name: 'ItemID', index: 'ItemID' },
                    { key: false, name: 'Task', index: 'Task', editable: true },
                    { key: false, name: 'TaskStatus', index: 'TaskStatus', editable: true },
                    { key: false, name: 'TaskValidator', index: 'TaskValidator', editable: true },
                    { key: false, name: 'ProxyValidator', index: 'ProxyValidator', editable: true },
                    { key: false, name: 'TaskComments', index: 'TaskComments', editable: true }
                ],
                height: '100%',
                autowidth: true,
                rowNum: 10,
                cellEdit: true,
                cellsubmit: "/Home/GetItems",
                idPrefix: "s_" + row_id + "_",
                jsonReader: {
                    records: "records",
                    repeatitems: false
                }
            });
        }
    }).navGrid('#jqControls', { edit: true, add: false, del: false, search: false, refresh: true },
        {
            zIndex: 100,
            url: '/Home/EditItemStatus',
            closeOnEscape: true,
            closeAfterEdit: true,
            recreateForm: true,
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        },
        {
            zIndex: 100,
            url: '/Summary/Create',
            closeOnEscape: true,
            closeAfterAdd: true,
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        },
        {
            zIndex: 100,
            url: '/Summary/Delete',
            closeOnEscape: true,
            closeAfterDelete: true,
            msg: "Are you sure?",
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        });

Open in new window

0
Chinmay PatelChief Technical NinjaCommented:
Hi Justin,

The version you are talking about is still a branch from JqGrid. I am not sure if it can be labelled as Free or not but I am ok if you are ok with it. My job is to flag anything that can hurt people I provide advice to.

Now, you are right, without sample data it will be absolute nightmare to debug this in Fiddle.

However, I was checking around a bit on original JQGrid documentation and I found this:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing

Ideas is, you have two separate grids, so you can setup a method that can take additional parameter i.e. grid Id

jQuery("#grid_id").jqGrid({
...
   onSelectRow: function(id, gridId){
     if(id && id!==lastSel){ 
        jQuery('#'+gridId).restoreRow(lastSel); 
        lastSel=id; 
     }
     jQuery('#'+gridId).editRow(id, true); 
   },
...
});

Open in new window


And if you need specific subgrid examples to look at, you can find them here: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid

Regards,
Chinmay.
0
Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Justin HullAuthor Commented:
Thank you very much for the reply.   I ended up using the form edit using the grid as a subgrid option. http://www.trirand.com/blog/jqgrid/jqgrid.html > advanced > grid as subgrid.

I am having one issue with the subgrid edits, it seems that when i select a row and then the edit button it does not always edit the correct row . I would assume my issue is with the row id in the subgrid but im not fully understanding how to correct it. I thought that idprefix would correct it but that did not seem to be the case. If you could take a look I would be grateful.

my subgrid
subGrid: true,
        subGridRowExpanded: function (subgrid_id, row_id) {
            var sg_tableID = subgrid_id + "_t";
            var pager_id = "p_" + sg_tableID;
            $("#" + subgrid_id).html("<table id='" + sg_tableID + "' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
            jQuery("#" + sg_tableID).jqGrid({
                url: "/Home/GetTaskSubList/" + row_id,
                postData: {
                    month: function () { return $("#month").val(); },
                    year: function () { return $("#year").val(); }
                },
                datatype: "json",
                colNames: ['ID', 'TSID', 'Task', 'Task Status', 'Task Validator', 'Proxy Validator', 'Task Comments'],
                colModel: [
                    { key: true, hidden: true, name: 'ItemID', index: 'ItemID' },
                    { key: false, hidden: true, name: 'TSID', index: 'TSID', editable:true },
                    { key: false, name: 'Task', index: 'Task', editable: true },
                    { key: false, name: 'TaskStatus', index: 'TaskStatus', editable: false },
                    { key: false, name: 'TaskValidator', index: 'TaskValidator', editable: true },
                    { key: false, name: 'ProxyValidator', index: 'ProxyValidator', editable: true },
                    { key: false, name: 'TaskComments', index: 'TaskComments', editable: true }
                ],
                rowNum: 10,
                autowidth: true,
                pager: pager_id,
                sortname: "ItemID",
                sortorder: "asc",
                idPrefix: "s_" + row_id + "_"
            });
jQuery('#' + sg_tableID).jqGrid('navGrid', "#" + pager_id, { edit: true, add: false, del: false },
                {
                    zIndex: 100,
                    url: '/Home/EditTasksubList',
                    closeOnEscape: true,
                    closeAfterEdit: true,
                    recreateForm: true,
                    afterComplete: function (response) {
                        if (response.responseText) {
                            alert(response.responseText);
                        }
                    }
                }
            )

Open in new window

0
Justin HullAuthor Commented:
I was able to get this working, with a few additional settings and fixing typos. Thank you for your help
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Justin HullAuthor Commented:
Thank you
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jqGrid

From novice to tech pro — start learning today.