Getting Group Number for ExpandGroup function

[njaParticipant]

Hi,
I have been working on customizing my groupsrenderer code to provide users with a button to select the rows inside the group. I would also like to expand the group when they click the button. (This is so they can review the selected items and deselect them if necessary. I am using selectionmode: checkbox.)

Obviously the button calls a function to select the rows in the group (since you can’t do this inside the groupsrenderer code). Works fine.

My problem is how to get the group number for the expand code. $(“#jqxgrid”).jqxGrid(‘expandgroup’, GROUPNUMBER);

I guess what I am looking along the lines of $(“#jqxgrid”).jqxGrid(‘groupnumber’, GROUPNAME);

I have been looking through the documentation, but haven’t seen anything yet. Is the group number available in the groupsrenderer function?

I am open to other ways to accomplish the overall functionality… for example if there is a way to set the expand or close setting for a group inside the groupsrenderer function.

thanks,
nja

Here is my groupsrenderer function.

           var groupsrenderer = function (text, group, expanded, data) {
                if (data.groupcolumn.datafield == 'NameOne') {
                    var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);
                    var text = data.groupcolumn.text + ': ' + number;
                    
                    if (data.subItems.length > 0) {                   
                        //var aggregate = this.getcolumnaggregateddata(data.groupcolumn.datafield, ['sum'], true, data.subItems);
                        var aggregate = this.getcolumnaggregateddata('LineItemOneAmount', ['sum'], true, data.subItems);
                        var match = this.getcolumnaggregateddata('vraMatchFound', ['sum'], true, data.subItems);                     
                    }
                    if (typeof aggregate != "undefined" && match != "undefined"){
                        if (aggregate.sum >= 10 ){
                            var strIdsObject = new Array();
                            for(var i=0;i<data.subItems.length;i++){
                                strIdsObject.push(data.subItems[i].uid);
                            }	
                            return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + ', </span>' + '<span class="' + toThemeProperty('jqx-grid-groups-row') + '">' + "Total" + ' (' + aggregate.sum + ')' + '</span><button onclick="window.myApp.selectGroupRows(\'' + strIdsObject +  '\');">Click me</button></div>';

                        }
                        else if (match.sum > 0 ){
                            var strIdsObject = new Array();
                            for(var i=0;i<data.subItems.length;i++){
                                strIdsObject.push(data.subItems[i].uid);
                            }	
                            return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + ', </span>' + '<span class="' + toThemeProperty('jqx-grid-groups-row') + '">' + "Total" + ' (' + aggregate.sum + ')' + ' (Disbursement Match Found)</span><button onclick="window.myApp.selectGroupRows(\'' + strIdsObject +  '\');">Click me</button> </div>';

                        }
                        else {
                            return '<div class="' + toThemeProperty('jqx-grid-groups-row-details') + '" style="position: absolute;"><span>' + text + ', </span>' + '<span class="' + toThemeProperty('jqx-grid-groups-row-details') + '">' + "Total" + ' (' + aggregate.sum + ')' + '</span></div>';
                        }                      
                    }
                }
                else {
                    return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + '</span>';
                }
            }

Here is my select function.

            window.myApp = {};
            window.myApp.selectGroupRows = function (rowids) {
                var rowarray = rowids.split(',');
                var count = rowarray.length;
                for (var i = 0; i < count; i++) {
                    var rowUid = rowarray[i];
                        $('#jqxgrid').jqxGrid('selectrow', rowUid);
                }

                //var groupnum = $("#groupnum").val();
                $("#jqxgrid").jqxGrid('expandgroup', 17);
                
            };

This the whole page, but it spaghetti code – I apologize in advance.

@{
    ViewBag.Title = "Disbursement Release";
}
<style type="text/css">
    .problem {
        background-color: #fd4c4c;
    }

    .hold {
        background-color: #fcfc85;
    }

    .void {
        background-color: #a4a0a0;
    }

    .parked {
        background-color: #caefc7;
    }

    .cubs {
        background-color: #e3f2fd;
    }
</style>

<!-- refactor into bundles -->
<script src="~/Scripts/moment.js"></script>

@section scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            // have we made any edits
            var isDirty = true;

            $('.btn-click-action').click(function(){
                alert("Button clicked from class: "); //+e.currentTarget.id);

            });

            
            window.myApp = {};
            window.myApp.selectGroupRows = function (rowids) {
                var rowarray = rowids.split(',');
                var count = rowarray.length;
                for (var i = 0; i < count; i++) {
                    var rowUid = rowarray[i];
                        $('#jqxgrid').jqxGrid('selectrow', rowUid);
                }

                //var groupnum = $("#groupnum").val();
                $("#jqxgrid").jqxGrid('expandgroup', 17);
                
            };

            // ================= capture browser close if formula unsaved... ================== //
            window.onbeforeunload = function () {
                var shallIAlertUser = isDirty; //get boolean value
                if (shallIAlertUser) {
                    //this will alert user
                    return 'Are you sure?';
                }
                else {
                    try{
                        // refresh grid and close window
                        window.opener.refreshButton.click();

                        //this will close the window
                        window.onbeforeunload = undefined;
                    }
                    catch(e){
                        //catch and just suppress error from failed refresh button click
                        // for example, if the window was closed
                        //this will close the window
                        window.onbeforeunload = undefined;
                    }
                }
            };

            // java debug function
            function dump(obj) {
                var out = '';
                for (var i in obj) {
                    out += i + ": " + obj[i] + "\n";
                }

                alert(out);
            }

            // remove footer for better screen printing
            $("#genericFooter").hide();

            // set theme for all jqWidgets on the page
            var theme = 'bootstrap';

            // ==================  TOOLBAR BUTTONS ========================//

            $("#previewButton").jqxButton({ height: '28px', theme: theme });
            $("#saveButton").jqxButton({ height: '28px', theme: theme });
            $("#clearFiltersButton").jqxButton({ height: '28px', theme: theme });
            $("#showAllButton").jqxButton({ height: '28px', theme: theme });
            $("#reloadButton").jqxButton({ height: '28px', theme: theme });

            // fb 267
            $("#aging120Button").jqxButton({ height: '28px', theme: theme });
            $("#aging90Button").jqxButton({ height: '28px', theme: theme });
            $("#aging60Button").jqxButton({ height: '28px', theme: theme });

            // ============= Add Aging Filters  ================
            $("#aging120Button").click(function () {
                // get today minus 120 days...
                var now = moment();
                var ageddate = now.subtract(120, 'days').calendar();

                // build the filter
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 0;
                var filtervalue = ageddate; //'02/04/2016';
                var filtercondition = 'LESS_THAN_OR_EQUAL';
                var filter1 = filtergroup.createfilter('datefilter', filtervalue, filtercondition);
                filtergroup.addfilter(filter_or_operator, filter1);

                // add the filter.
                $("#jqxgrid").jqxGrid('addfilter', 'DocumentDate', filtergroup);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');

            });

            $("#aging90Button").click(function () {
                // get today minus 90 days...
                var now = moment();
                var ageddate = now.subtract(90, 'days').calendar();

                // build the filter
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 0;
                var filtervalue = ageddate; //'02/04/2016';
                var filtercondition = 'LESS_THAN_OR_EQUAL';
                var filter1 = filtergroup.createfilter('datefilter', filtervalue, filtercondition);
                filtergroup.addfilter(filter_or_operator, filter1);

                // add the filter.
                $("#jqxgrid").jqxGrid('addfilter', 'DocumentDate', filtergroup);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');

            });

            $("#aging60Button").click(function () {
                // get today minus 60 days...
                var now = moment();
                var ageddate = now.subtract(60, 'days').calendar();

                // build the filter
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 0;
                var filtervalue = ageddate; //'02/04/2016';
                var filtercondition = 'LESS_THAN_OR_EQUAL';
                var filter1 = filtergroup.createfilter('datefilter', filtervalue, filtercondition);
                filtergroup.addfilter(filter_or_operator, filter1);

                // add the filter.
                $("#jqxgrid").jqxGrid('addfilter', 'DocumentDate', filtergroup);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');

            });

            // ============= CLEAR FILTERS ================
            $("#clearFiltersButton").click(function () {
                $('#jqxgrid').jqxGrid('clearfilters');

            });

            // ============= SHOW ALL BUTTON CLEAR FILTERS, REMOVE GROUPING  ================
            $("#showAllButton").click(function () {
                $('#jqxgrid').jqxGrid('clearfilters');

                //param String. The expected parameter is the column's datafield.
                //$('#jqxgrid').jqxGrid('removegroup', 'NameOne');

                var groups = $.extend({}, $("#jqxgrid").jqxGrid('groups'));
                $.each(groups, function () {
                    $("#jqxgrid").jqxGrid('removegroup', this);
                });

            });

            //======================  RELOAD DATA SET ===================
            $("#reloadButton").click(function () {
                // have we made any changes?
                if (isDirty) {
                    $('#myModal').modal({ keyboard: false });

                    $('#okaytocontinue').on('click',function(evt) {
                        // get groups
                        var groups = $.extend({}, $("#jqxgrid").jqxGrid('groups'));

                        $('#jqxgrid').jqxGrid('showloadelement');
                        $('#jqxgrid').jqxGrid('updatebounddata');

                        // reapply groups
                        $.each(groups, function () {
                            $("#jqxgrid").jqxGrid('addgroup', this);
                        });

                        // close the modal
                        $('#myModal').modal('hide');

                    });

                }
                else {
                    // get groups
                    var groups = $.extend({}, $("#jqxgrid").jqxGrid('groups'));

                    //Clear any filters and reload the data
                    $('#jqxgrid').jqxGrid('clearfilters');
                    $('#jqxgrid').jqxGrid('updatebounddata');

                    // reapply groups
                    $.each(groups, function () {
                        $("#jqxgrid").jqxGrid('addgroup', this);
                    });

                }

            });

            // =================== SAVE, PREVIEW, EXPORT, and MARK PARKED =================
            $("#saveButton").click(function () {
                // get rows, call save, queue and then display results
                var rows = $('#jqxgrid').jqxGrid('getboundrows');
                var rowsToSend = JSON.stringify(rows);

                var url = "/DisbursementRecords/saveDisbursmentRecords/";
                $.post(url, { records: rowsToSend}, function(data) {
                    $("#resultMessage").html(data.message);
                    if (data.success) {
                        $('#jqxgrid').jqxGrid('updatebounddata', 'cells' );
                        isDirty = false;
                    }
                });

            });

            $("#previewButton").click(function () {
                //$("#jqxGrid").jqxGrid('exportdata', 'json', 'jqxGrid', true, null, true, http://www.myserver.com/save-file.php);
                //The first parameter of the export method determines the export's type - 'xls', 'xml', 'html', 'json', 'pdf', 'tsv' or 'csv'.
                //The second parameter is the file's name. If you don't provide a file name, the Grid will export the data to a local variable.
                //    For example:  var data = $("#jqxgrid").jqxGrid('exportdata', 'json');
                //The third parameter is optional and determines whether to export the column's header or not. Acceptable values are - true and false. By default, the exporter exports the columns header.
                //The fourth parameter is optional and determines the array of rows to be exported. By default all rows are exported. Set null, if you want all rows to be exported.
                //The fifth parameter is optional and determines whether to export hidden columns. Acceptable values are - true and false. By default, the exporter does not export the hidden columns.
                //The sixth parameter is optional and determines the url of the export server. By default, the exporter is hosted on a jQWidgets server.
                //The last parameter is optional and determines the char set.
                //$("#jqxgrid").jqxGrid('exportdata', 'xls', 'TRV-DISB-@ViewBag.Year-@ViewBag.Month-@ViewBag.Day', true, null, false, '@ViewBag.ExportURL');

                // have we made any changes?
                if (isDirty) {
                    $('#myModal').modal({ keyboard: false });

                    $('#okaytocontinue').on('click',function(evt) {
                        $("#jqxgrid").jqxGrid('exportdata', 'xls', 'TRV-HELD-DISB-@ViewBag.Year-@ViewBag.Month-@ViewBag.Day', true, null, false, '@ViewBag.ExportURL');

                        // close the modal
                        $('#myModal').modal('hide');

                    });

                }
                else {
                    // no changes go ahead
                    $("#jqxgrid").jqxGrid('exportdata', 'xls', 'TRV-HELD-DISB-@ViewBag.Year-@ViewBag.Month-@ViewBag.Day', true, null, false, '@ViewBag.ExportURL');

                }

            });

            // ===== Note Popup Editor ===============
            $("#vraNote").jqxInput({ theme: theme });
            $("#vraNote").width(250);
            $("#vraNote").height(200);

            // initialize the popup window and buttons.
            $("#popupWindow").jqxWindow({
                width: 290, height: 300, resizable: true,  isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01
            });
            //$("#popupWindow").on('open', function () {
            //    $("#vraNote").jqxInput('selectAll');
            //});

            $("#Cancel").jqxButton({ theme: theme });
            $("#Save").jqxButton({ theme: theme });
            // update the edited row when the user clicks the 'Save' button.
            $("#Save").click(function () {
                if (editrow >= 0) {
                    var note = $("#vraNote").val();
                    var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
                    //$('#jqxgrid').jqxGrid('updaterow', rowID, row);
                    $("#jqxgrid").jqxGrid('setcellvalue', rowID, "vraNote", note);
                    $("#popupWindow").jqxWindow('hide');
                }
            });

            // ============ CREATE THE GRID ===================//
            // prepare the data, each datafield should have a “type” field – “string”, “number”, “bool” or “date”.
            var urlToGoTo = '/DisbursementRecords/getHeldDisbursements/'
            var source = {
                type: "POST",
                datatype: "json",
                datafields: [
                    { name: 'DisbursementRecordId', type: 'number' },
                    { name: 'ExportRecordID', type: 'number' },
                    { name: 'DocumentDate', type: 'date' },
                    { name: 'DocumentType', type: 'string' },
                    { name: 'CompanyCode', type: 'string' },
                    { name: 'PostingDate', type: 'date' },
                    { name: 'Period', type: 'number' },
                    { name: 'Currency', type: 'string' },
                    { name: 'Reference', type: 'string' },
                    { name: 'DocumentHeaderText', type: 'string' },
                    { name: 'DocumentID', type: 'string' },
                    { name: 'LineItemOnePostingKey', type: 'string' },
                    { name: 'LineItemOneAccount', type: 'string' },
                    { name: 'Language', type: 'string' },
                    { name: 'NameOne', type: 'string' },
                    { name: 'NameTwo', type: 'string' },
                    { name: 'NameThree', type: 'string' },
                    { name: 'NameFour', type: 'string' },
                    { name: 'Street', type: 'string' },
                    { name: 'PostalOfficeBoxNumber', type: 'string' },
                    { name: 'PostalOffficeBoxZip', type: 'string' },
                    { name: 'City', type: 'string' },
                    { name: 'ZipCode', type: 'string' },
                    { name: 'Country', type: 'string' },
                    { name: 'State', type: 'string' },
                    { name: 'TaxCodeOne', type: 'string' },
                    { name: 'TaxCodeTwo', type: 'string' },
                    { name: 'LineItemOneAmount', type: 'number' },
                    { name: 'LineItemOneBusinessArea', type: 'string' },
                    { name: 'LineItemOneBaselineDate', type: 'date' },
                    { name: 'LineItemOneFund', type: 'string' },
                    { name: 'LineItemTwoPostingKey', type: 'string' },
                    { name: 'LineItemTwoAccount', type: 'string' },
                    { name: 'LineItemTwoCostCenter', type: 'string' },
                    { name: 'LineItemTwoWBS', type: 'string' },
                    { name: 'LineItemTwoFundCenter', type: 'string' },
                    { name: 'LineItemTwoAmount', type: 'number' },
                    { name: 'LineItemTwoBusinessArea', type: 'string' },
                    { name: 'LineItemTwoFund', type: 'string' },
                    { name: 'LineItemOneAssignment', type: 'string' },
                    { name: 'LineItemOneLineItemText', type: 'string' },
                    { name: 'LineItemTwoAssignment', type: 'string' },
                    { name: 'LineItemTwoLineItemText', type: 'string' },
                    { name: 'LineItemOneTaxCode', type: 'string' },
                    { name: 'LineItemOneCheck', type: 'string' },
                    { name: 'PaymentMethod', type: 'string' },
                    { name: 'PaymentSupplement', type: 'string' },
                    { name: 'vraSourceID', type: 'number' },
                    { name: 'vraSourceName', type: 'string'},
                    { name: 'vraStatusID', type: 'number' },
                    { name: 'vraStatusCode', type: 'string' },
                    { name: 'vraNote', type: 'string' },
                    { name: 'vraExportDate', type: 'date' },
                    { name: 'vraSentDate', type: 'date' },
                    { name: 'vraCreatedUserID', type: 'string' },
                    { name: 'vraCreatedBy', type: 'string' },
                    { name: 'vraCreatedDate', type: 'date' },
                    { name: 'vraMatchFound', type: 'number'}
                ],
                url: urlToGoTo
            };

            // load adapter from our ajax source
            var dataAdapter = new $.jqx.dataAdapter(source);

            // setup grid bindings, etc.
            $("#jqxgrid").bind('bindingcomplete', function () {
                var localizationobj = $("#jqxgrid").jqxGrid('gridlocalization');
                localizationobj.thousandsseparator = "";

                // apply localization.
                $("#jqxgrid").jqxGrid('render');

                // hide empty address fields
                addfilter();

            });

            var cellclass = function (row, column, value, data) {
                // Determine what styles to apply
                // what is the default class?
                var cssClass = "";
                var holdid = @ViewBag.HoldId;
                var voidid = @ViewBag.VoidId;
                var parkedid = @ViewBag.ParkedId;

                if (typeof data !== 'undefined') {

                    if(typeof data.vraSourceName != 'undefined'){
                        // check if line from cubs, override with record statuses
                        if ( data.vraSourceName.toLowerCase() == 'cubs') { cssClass = 'cubs';}

                        // next check if status is hold
                        if ( data.vraStatusID == holdid) { cssClass = 'hold';}

                        // next check if status is void
                        if ( data.vraStatusID == voidid) { cssClass = 'void'; }

                        // next check if status is parked
                        if ( data.vraStatusID == parkedid) { cssClass = 'parked'; }

                        // next check if status is not actually set
                        if ( data.vraStatusID == 0) { cssClass = 'problem'; }
                    }
                }

                return cssClass;
            }

            var toThemeProperty = function (className) {
                return className;
            };

            var groupsrenderer = function (text, group, expanded, data) {
                if (data.groupcolumn.datafield == 'NameOne') {
                    var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);
                    var text = data.groupcolumn.text + ': ' + number;
                    
                    if (data.subItems.length > 0) {                   
                        //var aggregate = this.getcolumnaggregateddata(data.groupcolumn.datafield, ['sum'], true, data.subItems);
                        var aggregate = this.getcolumnaggregateddata('LineItemOneAmount', ['sum'], true, data.subItems);
                        var match = this.getcolumnaggregateddata('vraMatchFound', ['sum'], true, data.subItems);
                        dump(this);
                    }
                    //else {
                    //    var rows = new Array();
                    //    var getRows = function (group, rows) {
                    //        if (group.subGroups.length > 0) {
                    //            for (var i = 0; i < group.subGroups.length; i++) {
                    //                getRows(group.subGroups[i], rows);
                    //            }
                    //        }
                    //        else {
                    //            for (var i = 0; i < group.subItems.length; i++) {
                    //                rows.push(group.subItems[i]);
                    //            }
                    //        }
                    //    }
                    //    getRows(data, rows);
                    //    var aggregate = this.getcolumnaggregateddata(data.groupcolumn.datafield, ['sum'], true, rows);
                    //}
                    //return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + ', </span>' + '<span class="' + toThemeProperty('jqx-grid-groups-row-details') + '">' + "Total" + ' (' + aggregate.sum + ')' + '</span></div>';
                    if (typeof aggregate != "undefined" && match != "undefined"){
                        if (aggregate.sum >= 10 ){
                            var strIdsObject = new Array();
                            for(var i=0;i<data.subItems.length;i++){
                                strIdsObject.push(data.subItems[i].uid);
                            }	
                            return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + ', </span>' + '<span class="' + toThemeProperty('jqx-grid-groups-row') + '">' + "Total" + ' (' + aggregate.sum + ')' + '</span><button onclick="window.myApp.selectGroupRows(\'' + strIdsObject +  '\');">Click me</button></div>';

                        }
                        else if (match.sum > 0 ){
                            var strIdsObject = new Array();
                            for(var i=0;i<data.subItems.length;i++){
                                strIdsObject.push(data.subItems[i].uid);
                            }	
                            return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + ', </span>' + '<span class="' + toThemeProperty('jqx-grid-groups-row') + '">' + "Total" + ' (' + aggregate.sum + ')' + ' (Disbursement Match Found)</span><button onclick="window.myApp.selectGroupRows(\'' + strIdsObject +  '\');">Click me</button> </div>';

                        }
                        else {
                            return '<div class="' + toThemeProperty('jqx-grid-groups-row-details') + '" style="position: absolute;"><span>' + text + ', </span>' + '<span class="' + toThemeProperty('jqx-grid-groups-row-details') + '">' + "Total" + ' (' + aggregate.sum + ')' + '</span></div>';
                        }                      
                    }
                }
                else {
                    return '<div class="' + toThemeProperty('jqx-grid-groups-row') + '" style="position: absolute;"><span>' + text + '</span>';
                }
            }

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                width: '100%',
                height: '98%',
                groupable: true,
                groups: ['NameOne'],
                groupsrenderer: groupsrenderer,
                groupsexpandedbydefault: true,
                sortable: true,
                filterable: true,
                autoshowloadelement: true,
                showfiltermenuitems: true,
                autoshowfiltericon: true,
                showsortmenuitems: false,
                columnsresize: true,
                theme: theme,
                altrows: true,
                enabletooltips: true,
                enableellipsis: true,
                showaggregates: true,
                showstatusbar: true,
                statusbarheight: 27,
                selectionmode: 'checkbox',
                //selectionmode: 'singlerow',
                //editmode: 'click',
                editable: true,
                handlekeyboardnavigation: function (event) {
                    var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
                    if (key == 37) {
                        // get our current position....
                        var position = $('#jqxgrid').jqxGrid('scrollposition');
                        var left = position.left;
                        var top = position.top;

                        //param Number. Top position.
                        //param Number. Left position.
                        $('#jqxgrid').jqxGrid('scrolloffset', top, (left - 200));
                        return true;
                    }
                    else if (key == 39) {
                        // get our current position....
                        var position = $('#jqxgrid').jqxGrid('scrollposition');
                        var left = position.left;
                        var top = position.top;

                        //param Number. Top position.
                        //param Number. Left position.
                        $('#jqxgrid').jqxGrid('scrolloffset', top, (left + 200));
                        return true;
                    }
                    else if (key == 112) {
                        //F1 key pressed.. open nav/edit tips
                        // show modal dialog box
                        $('#myNavEditTipModal').modal({ keyboard: false });

                        return true;

                    }
                },
                columns: [
                     { text: 'Rec Id', datafield: 'ExportRecordID', width: 70, aggregates: ['count'], cellclassname: cellclass, editable: false, pinned: true},
                     { text: 'VRA ID', datafield: 'DisbursementRecordId', width: 60, hidden: false, editable: false, cellclassname: cellclass, pinned: true},
                     { text: 'vraExportDate', datafield: 'vraExportDate', width: 110, hidden: true, editable: false, },
                     { text: 'vraSentDate', datafield: 'vraSentDate', width: 110, hidden: true, editable: false, },
                     { text: 'vraCreatedUserID', datafield: 'vraCreatedUserID', width: 110, hidden: true, editable: false, },
                     { text: 'vraCreatedBy', datafield: 'vraCreatedBy', width: 110, hidden: true, editable: false, },
                     { text: 'vraCreatedDate', datafield: 'vraCreatedDate', width: 110, hidden: true, editable: false, },
                     { text: 'From Id', datafield: 'vraSourceID', width: 50, cellclassname: cellclass, hidden: true, editable: false, },
                     { text: 'From', datafield: 'vraSourceName', width: 60, cellclassname: cellclass, editable: false, },
                     { text: 'StatusID', datafield: 'vraStatusID', width: 50, cellclassname: cellclass, hidden: false, editable: false, },
                     { text: 'Match', datafield: 'vraMatchFound', width: 50, cellsformat: 'f0', cellclassname: cellclass, hidden: false, 
                     aggregates: ['sum'], editable: false, },                                          
                     { text: 'Status', datafield: 'vraStatusCode', width: 50, cellclassname: cellclass,
                         cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
                             return newvalue.toUpperCase();
                         }
                     },
                     {
                         text: 'Note', datafield: 'vraNote', columntype: 'button', hidden: false, width: 80, cellclassname: cellclass, cellsrenderer: function () {
                             return "Note";
                         }, buttonclick: function (row) {
                             // open the popup window when the user clicks a button.
                             editrow = row;
                             var offset = $("#jqxgrid").offset();
                             $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                             // get the clicked row's data and initialize the input fields.
                             var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                             $("#vraNote").val(dataRecord.vraNote);

                             // show the popup window.
                             $("#popupWindow").jqxWindow('open');

                         }
                     },
                     { text: 'Doc Date', datafield: 'DocumentDate', width: 75, cellsformat: 'MM/dd/yy', cellclassname: cellclass, editable: false,},
                     { text: 'Doc Type', datafield: 'DocumentType', width: 70, cellclassname: cellclass, editable: false,},
                     { text: 'Comp Code', datafield: 'CompanyCode', width: 70, cellclassname: cellclass,editable: false, },
                     { text: 'Post Date', datafield: 'PostingDate', width: 85, cellsformat: 'MM/dd/yy', cellclassname: cellclass, },
                     { text: 'Period', datafield: 'Period', width: 50,cellclassname: cellclass, },
                     { text: 'Currency', datafield: 'Currency', width: 70, cellclassname: cellclass, editable: false,},
                     { text: 'Reference', datafield: 'Reference', width: 90, cellclassname: cellclass, editable: false,},
                     { text: 'Doc Header', datafield: 'DocumentHeaderText', width: 110, cellclassname: cellclass, editable: false,},
                     { text: 'Doc Id', datafield: 'DocumentID', width: 50, cellclassname: cellclass, editable: false,},
                     { text: 'Post Key', datafield: 'LineItemOnePostingKey', width: 60, cellclassname: cellclass, editable: false,},
                     { text: 'Account', datafield: 'LineItemOneAccount', width: 110, cellclassname: cellclass, editable: false, },
                     { text: 'Language', datafield: 'Language', width: 80, hideable: true, cellclassname: cellclass, editable: false,},
                     { text: 'Name One', datafield: 'NameOne', width: 300, cellclassname: cellclass, },
                     { text: 'Name Two', datafield: 'NameTwo', width: 90, cellclassname: cellclass, },
                     { text: 'Name Three', datafield: 'NameThree', width: 90, cellclassname: cellclass, },
                     { text: 'Name Four', datafield: 'NameFour', width: 90, cellclassname: cellclass, },
                     { text: 'Street', datafield: 'Street', width: 210, cellclassname: cellclass, },
                     { text: 'PO Box', datafield: 'PostalOfficeBoxNumber', width: 90, cellclassname: cellclass, },
                     { text: 'PO Box Zip', datafield: 'PostalOffficeBoxZip', width: 90, cellclassname: cellclass, },
                     { text: 'City', datafield: 'City', width: 150, cellclassname: cellclass, },
                     { text: 'Zip', datafield: 'ZipCode', width: 85, cellclassname: cellclass, },
                     { text: 'Country', datafield: 'Country', width: 70, cellclassname: cellclass, },
                     { text: 'State', datafield: 'State', width: 70, cellclassname: cellclass, },
                     { text: 'Tax Code 1', datafield: 'TaxCodeOne', width: 80, cellclassname: cellclass, editable: false, },
                     { text: 'Tax Code 2', datafield: 'TaxCodeTwo', width: 80, cellclassname: cellclass, editable: false,},
                     {
                         text: 'Amount 1', datafield: 'LineItemOneAmount', width: 100, cellsformat: 'f2', cellsalign: 'right', editable: false,
                         aggregates: [{
                             'Total': function (aggregatedValue, currentValue, column, record) {
                                 var total = parseFloat(record['LineItemOneAmount']);
                                 if (isNaN(total)) {
                                     total = 0.00;
                                 }
                                 return aggregatedValue + total;
                             }
                         }],
                         aggregatesrenderer: function (aggregates) {
                             var renderstring = aggregates["Total"];
                             return '<span class="allViewSummary">' + renderstring + '</span>';
                         }, cellclassname: cellclass,
                     },
                     { text: 'Bus Area 1', datafield: 'LineItemOneBusinessArea', width: 70, cellsalign: 'right', cellclassname: cellclass,editable: false, },
                     { text: 'BaseLine Date 1', datafield: 'LineItemOneBaselineDate', width: 90, cellsformat: 'MM/dd/yy',cellclassname: cellclass, editable: false, },
                     { text: 'Fund 1', datafield: 'LineItemOneFund', width: 90, cellclassname: cellclass, editable: false, },
                     { text: 'Post Key 2', datafield: 'LineItemTwoPostingKey', width: 110, cellclassname: cellclass, editable: false,},
                     { text: 'Account 2', datafield: 'LineItemTwoAccount', width: 90, cellclassname: cellclass, editable: false, },
                     { text: 'Cost Center 2', datafield: 'LineItemTwoCostCenter', width: 90, cellclassname: cellclass,  editable: false,},
                     { text: 'WBS 2', datafield: 'LineItemTwoWBS', width: 70, cellclassname: cellclass, editable: false,},
                     { text: 'Fund Center 2', datafield: 'LineItemTwoFundCenter', width: 90, cellclassname: cellclass, editable: false,},
                     {
                         text: 'Amount 2', datafield: 'LineItemTwoAmount', width: 100, cellsformat: 'f2', cellsalign: 'right', editable: false,
                         aggregates: [{
                             'Total': function (aggregatedValue, currentValue, column, record) {
                                 var total = parseFloat(record['LineItemTwoAmount']);
                                 if (isNaN(total)) {
                                     total = 0.00;
                                 }
                                 return aggregatedValue + total;
                             }
                         }],
                         aggregatesrenderer: function (aggregates) {
                             var renderstring = aggregates["Total"];
                             return '<span class="allViewSummary">' + renderstring + '</span>';
                         }, cellclassname: cellclass,
                     },
                     { text: 'Bus Area 2', datafield: 'LineItemTwoBusinessArea', width: 90, cellsalign: 'right', cellclassname: cellclass, editable: false, },
                     { text: 'Fund 2', datafield: 'LineItemTwoFund', width: 90, cellclassname: cellclass, editable: false,},
                     { text: 'Assignment 1', datafield: 'LineItemOneAssignment', width: 120, cellclassname: cellclass, editable: false,},
                     { text: 'Item Text 1', datafield: 'LineItemOneLineItemText', width: 210, cellclassname: cellclass, },
                     { text: 'Assignment 2', datafield: 'LineItemTwoAssignment', width: 120, cellclassname: cellclass, editable: false,},
                     { text: 'Item Text 2', datafield: 'LineItemTwoLineItemText', width: 210, cellclassname: cellclass, editable: false,},
                     { text: 'Tax Code 1', datafield: 'LineItemOneTaxCode', width: 90, cellclassname: cellclass, editable: false,},
                     { text: 'Check 1', datafield: 'LineItemOneCheck', width: 90, cellclassname: cellclass,  editable: false,},
                     { text: 'Pay Method', datafield: 'PaymentMethod', width: 90, cellclassname: cellclass,  editable: false, },
                     { text: 'Pay Supp', datafield: 'PaymentSupplement', width: 90,  cellclassname: cellclass, },
                ]
            });

            $('#jqxgrid').on('rowselect', function (event)
            {
                // event arguments.
                var args = event.args;
                // row's bound index.
                var rowBoundIndex = args.rowindex;

                // row's data. The row's data object or null(when all rows are being selected or unselected with a single action). If you have a datafield called "firstName", to access the row's firstName, use var firstName = rowData.firstName;
                //var rowData = args.row;

                $("#jqxgrid").jqxGrid('setcellvalue', rowBoundIndex, "vraStatusCode", 'D');

            });

            $('#jqxgrid').on('cellvaluechanged', function (event) {
                // if status changes change color for row...
                var rowBoundIndex = args.rowindex; // row's bound index.
                var datarow = $("#jqxgrid").jqxGrid('getrowdata', rowBoundIndex);
                var disburseid = @ViewBag.DisburseId;
                var holdid = @ViewBag.HoldId;
                var voidid = @ViewBag.VoidId;
                var parkedid = @ViewBag.ParkedId;

                if (event.args.datafield == "vraStatusCode" )
                {
                    switch(args.newvalue) {
                        case 'D':
                            $("#jqxgrid").jqxGrid('setcellvalue', rowBoundIndex, "vraStatusID", disburseid);
                            break;
                        case 'H':
                            $("#jqxgrid").jqxGrid('setcellvalue', rowBoundIndex, "vraStatusID", holdid);
                            $("#jqxgrid").jqxGrid('setcellvalue', rowBoundIndex, "ExportRecordID", 0);
                            break;
                        case 'V':
                            $("#jqxgrid").jqxGrid('setcellvalue', rowBoundIndex, "vraStatusID", voidid);
                            $("#jqxgrid").jqxGrid('setcellvalue', rowBoundIndex, "ExportRecordID", 0);
                            break;
                        case 'P':
                            $("#jqxgrid").jqxGrid('setcellvalue', rowBoundIndex, "vraStatusID", parkedid);
                            $("#jqxgrid").jqxGrid('setcellvalue', rowBoundIndex, "ExportRecordID", 0);
                            break;
                        default:
                            $("#jqxgrid").jqxGrid('setcellvalue', rowBoundIndex, "vraStatusID", 0);
                            $("#jqxgrid").jqxGrid('setcellvalue', rowBoundIndex, "ExportRecordID", 0);
                            break;

                    }
                    //$('#jqxgrid').jqxGrid('selectrow', rowBoundIndex);
                }

                // we have edited a cell value
                isDirty = true ;

            });

            // ===============  HELPER FUNCTIONS ==================

            function loadNewDateData(){
                $('#jqxgrid').jqxGrid('showloadelement');

                // get the date from the calendar
                var jsDate= $('#jqxCalendar').jqxCalendar('getDate');
                var curr_date = (jsDate.getDate()); // < 10 ? '0' : '') + jsDate.getDate();
                var curr_month = (jsDate.getMonth() + 1); // < 9 ? '0' : '') + (jsDate.getMonth() + 1);
                var curr_year = jsDate.getFullYear();
                var fdate =  curr_month + "-" + curr_date + "-" + curr_year;

                //If you want to load different source, then set the “source” property to point to new dataAdapter instance.
                // http://localhost:49506/DisbursementRecords/getDataSet?dsdate=10-02-2015

                var urlToGoTo = '/DisbursementRecords/getHeldDisbursements?dsdate=' + fdate;
                var newSource = {
                    type: "GET",
                    datatype: "json",
                    datafields: [
                        { name: 'DisbursementRecordId', type: 'number' },
                        { name: 'ExportRecordID', type: 'number' },
                        { name: 'DocumentDate', type: 'date' },
                        { name: 'DocumentType', type: 'string' },
                        { name: 'CompanyCode', type: 'string' },
                        { name: 'PostingDate', type: 'date' },
                        { name: 'Period', type: 'number' },
                        { name: 'Currency', type: 'string' },
                        { name: 'Reference', type: 'string' },
                        { name: 'DocumentHeaderText', type: 'string' },
                        { name: 'DocumentID', type: 'string' },
                        { name: 'LineItemOnePostingKey', type: 'string' },
                        { name: 'LineItemOneAccount', type: 'string' },
                        { name: 'Language', type: 'string' },
                        { name: 'NameOne', type: 'string' },
                        { name: 'NameTwo', type: 'string' },
                        { name: 'NameThree', type: 'string' },
                        { name: 'NameFour', type: 'string' },
                        { name: 'Street', type: 'string' },
                        { name: 'PostalOfficeBoxNumber', type: 'string' },
                        { name: 'PostalOffficeBoxZip', type: 'string' },
                        { name: 'City', type: 'string' },
                        { name: 'ZipCode', type: 'string' },
                        { name: 'Country', type: 'string' },
                        { name: 'State', type: 'string' },
                        { name: 'TaxCodeOne', type: 'string' },
                        { name: 'TaxCodeTwo', type: 'string' },
                        { name: 'LineItemOneAmount', type: 'number' },
                        { name: 'LineItemOneBusinessArea', type: 'string' },
                        { name: 'LineItemOneBaselineDate', type: 'date' },
                        { name: 'LineItemOneFund', type: 'string' },
                        { name: 'LineItemTwoPostingKey', type: 'string' },
                        { name: 'LineItemTwoAccount', type: 'string' },
                        { name: 'LineItemTwoCostCenter', type: 'string' },
                        { name: 'LineItemTwoWBS', type: 'string' },
                        { name: 'LineItemTwoFundCenter', type: 'string' },
                        { name: 'LineItemTwoAmount', type: 'number' },
                        { name: 'LineItemTwoBusinessArea', type: 'string' },
                        { name: 'LineItemTwoFund', type: 'string' },
                        { name: 'LineItemOneAssignment', type: 'string' },
                        { name: 'LineItemOneLineItemText', type: 'string' },
                        { name: 'LineItemTwoAssignment', type: 'string' },
                        { name: 'LineItemTwoLineItemText', type: 'string' },
                        { name: 'LineItemOneTaxCode', type: 'string' },
                        { name: 'LineItemOneCheck', type: 'string' },
                        { name: 'PaymentMethod', type: 'string' },
                        { name: 'PaymentSupplement', type: 'string' },
                        { name: 'vraSourceID', type: 'number' },
                        { name: 'vraSourceName', type: 'string'},
                        { name: 'vraStatusID', type: 'number' },
                        { name: 'vraStatusCode', type: 'string' },
                        { name: 'vraNote', type: 'string' },
                        { name: 'vraExportDate', type: 'date' },
                        { name: 'vraSentDate', type: 'date' },
                        { name: 'vraCreatedUserID', type: 'string' },
                        { name: 'vraCreatedBy', type: 'string' },
                        { name: 'vraCreatedDate', type: 'date' },
                    ],
                    url: urlToGoTo
                };

                // load adapter from our updated ajax source and assign to grid
                var newDataAdapter = new $.jqx.dataAdapter(newSource);
                $("#jqxgrid").jqxGrid({source: newDataAdapter});

                setTimeout( function() {
                    // code that must be executed after pause
                    $('#jqxgrid').jqxGrid('hideloadelement');

                }, 2000 );

            }

            function filterByStatus(status) {

                $('#jqxgrid').jqxGrid('clearfilters');

                // filter out all but rows for disbursement
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 0;
                var filtervalue = status;
                var filtercondition = 'contains';
                var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                filtergroup.addfilter(filter_or_operator, filter1);
                // add the filters.
                $("#jqxgrid").jqxGrid('addfilter', 'vraStatusCode', filtergroup);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');

            }

            function addfilter() {

                // first filter
                var filtergroup1 = new $.jqx.filter();
                var filter_or_operator1 = 1;
                var filtervalue1 = '';
                var filtercondition1 = 'NOT_EMPTY';
                var filter1 = filtergroup1.createfilter('stringfilter', filtervalue1, filtercondition1);
                filtergroup1.addfilter(filter_or_operator1, filter1);
                $("#jqxgrid").jqxGrid('addfilter', 'Street', filtergroup1);

                // next filters
                var filtergroup2 = new $.jqx.filter();
                var filter_or_operator2 = 1;
                var filtervalue2 = 'V';
                var filtercondition2 = 'DOES_NOT_CONTAIN';
                var filter2 = filtergroup2.createfilter('stringfilter', filtervalue2, filtercondition2);
                filtergroup2.addfilter(filter_or_operator2, filter2);
                $("#jqxgrid").jqxGrid('addfilter', 'vraStatusCode', filtergroup2);

                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');
            }

        });
    </script>

}

<div class="row">
    <div class="col-md-10 col-md-offset-1">
        <div style="width: 88%">
            <div id="resultMessage">
                @Html.Raw(ViewBag.Result)
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <br />
        <span class="lead pull-left" title="Press F1 for navigation and editing tips.">Release Held Disbursements</span>

        <button id="reloadButton" class="pull-right" style="margin-left:5px;" title="Reload disbursements data set for this date. All Change will be lost! Please Save first if changes have been made.">Reload</button>
        <button id="clearFiltersButton" class="pull-right" style="margin-left:5px;" title="Clear all grid filters.">Clear All Filters</button>
        <button id="showAllButton" class="pull-right" style="margin-left:5px;" title="Show all Held items.">Show All</button>

        <button id="aging120Button" class="pull-right" style="margin-left:5px;" title="Filter data set Doc Date > 120 days.">Age 120 Days</button>
        <button id="aging90Button" class="pull-right" style="margin-left:5px;" title="Filter data set Doc Date > 90 days.">Age 90 Days</button>
        <button id="aging60Button" class="pull-right" style="margin-left:15px;" title="Filter data set Doc Date > 60 days.">Age 60 Days</button>

        <button id="previewButton" class="pull-right" style="margin-left:5px;" title="Export data set in Excel.">Export</button>
        <button id="saveButton" class="pull-right" style="margin-left:5px;" title="Save your work for later.">Save</button>

    </div>
</div>

<div class="row">
    <div class="full-screen-grid" style="position: absolute; left: 26px; width: 96%; height: 80%; z-index:1;">
        <div id="jqxgrid"></div>

    </div>
</div>

<div id="popupWindow">
    <div>Note:</div>
    <div style="overflow: hidden;">
        <table>
            <tr>
                @*<td align="left"><input id="vraNote" /></td>*@
                <td align="left"><textarea id="vraNote"></textarea></td>
            </tr>
            <tr>
                <td style="padding: 10px;" align="right">
                    <input style="margin-right: 5px;" type="button" id="Save" value="Okay" />
                    <input id="Cancel" type="button" value="Cancel" />
                </td>
            </tr>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Unsaved Changes</h4>
            </div>
            <div class="modal-body">

                <p class="alert alert-info">
                    There are unsaved changes. <strong>Do you want to cancel or continue?</strong>
                </p>
                <p class="alert alert-info">
                    <strong>Watch Out!</strong> If you click the Continue button you could lose your unsaved changes.
                </p>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
                <button type="button" id="okaytocontinue" class="btn btn-default">Continue</button>
            </div>
        </div>
    </div>
</div>

@*Navigation and Editing Tips Modal => id=myNavEditTipModal*@
@Html.Partial("_NavEditTipsPartial")

[Peter StoevKeymaster]

Hi nja,

We have no API for taking a group number by group’s name. We have API to get the count of groups: var groups = $(‘#jqxGrid’).jqxGrid(‘getrootgroupscount’); and the group details by its index: var group = $(‘#jqxGrid’).jqxGrid(‘getgroup’, 0);

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts