Identify whether current selected row is in the master or child table

[stevejacobsen]

I want to be able to select a row in the master or detail table and then click a button in the tool bar that will identfy which table/row was clicked and then perform actions based on that information. How do I identify which table is currently selected. I saw this code that will give me the rowdata but can't figure out how to determine which table is selected.

  var selected = [],
                                sel = this.selection({type: 'row', method: 'getSelection'});

                        for (var i = 0; i < sel.length; i++) {
                            selected.push(sel[ i ].rowData['id']);
                        }
                        console.log(selected);

[paramvir]

selectChange event can be used to save the tables wherein the selections are made.

http://paramquery.com/pro/api#event-selectChange

var tables = [];

Code: [Select]

selectChange: function(){
  tables.push(this);
}


[stevejacobsen]

I have a 'selectChange' for both the master and the detail. When either one is clicked I'm trying to set a global variable 'rowData' to the rowData of the current selection. This works for me for the master table but the detail table isn't setting the global variable 'rowData'.

$(function () {

    rowData = [];

    var colM = [
        {title: "", minWidth: 25, width: 30, type: "detail", resizable: false, editable: false},
        {title: "Date", width: 130, dataIndx: "service_date", align: "center"},
        {title: "Location", width: 200, dataIndx: "location", align: "center"},
        {title: "Leader", width: 90, dataIndx: "leader", align: "center"},
            ];
    var dataModel = {
        location: "remote",
        dataType: "JSON",
        recIndx: "id",
        url: "utilities/ajax_get_services_data_JSON.php",
        getData: function (dataJSON) {
            var data = dataJSON.data;
            if (data && data.length) {
                data[0]['pq_detail'] = {'show': true};
            }
            return {curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data};
        }
    };

    var grid = $("#services_grid").pqGrid({
        postRenderInterval: 200,
        width: 1550,
        height: 700,
        resizeable: true,
        dataModel: dataModel,
        colModel: colM,
        wrap: false,
        hwrap: false,
        numberCell: {show: false},
        flex: {one: true},
        title: "Praise Song Organizer - Services List",
        virtualX: true, virtualY: false,
        hoverMode: null,
        trackModel: {on: true},
        editor: {type: 'textbox', select: true, style: 'outline:none;'},
        validation: {icon: 'ui-icon-info'},
        selectionModel: {type: 'cell'},
        pageModel: {type: 'local', rPP: 10},
        scrollModel: {flexContent: true},
        //make rows editable based upon the class.
        editable: function (ui) {
            return this.hasClass({rowIndx: ui.rowIndx, cls: 'pq-row-edit'});
        },
        selectChange: function (ui) {
            var sel = this.selection({type: 'cell', method: 'getSelection'});
            rowData = sel[0].rowData;
            console.log('master - rowData', rowData);
            rowIndx = sel[0].rowIndx;
        },
        create: function (evt, ui) {
            this.widget().pqTooltip();
        },
        detailModel: {
            cache: true,
            collapseIcon: "ui-icon-plus",
            expandIcon: "ui-icon-minus",
            init: function (ui) {
                var rowData = ui.rowData,
                        detailobj = gridDetailModel($(this).pqGrid('instance'), rowData),
                        $grid = $("<div></div>").pqGrid(detailobj);
                return $grid;
            }
        },
        toolbar: {
            items: [
                {
                    type: 'button',
                    icon: 'ui-icon-pencil',
                    label: 'View / Edit',
                    listener: function (ui) {
                        $("#services_grid").pqGrid("saveState");
                        console.log('button - rowData', rowData);
                        if (typeof rowData !== 'undefined') {
                            switch (rowData['tablename']) {
                                case "songs":
                                    // edit song
                                    songs_edit(rowData['song_id']);
                                    break;
                                case "services":
                                    // edit service
                                    var grid = this;
                                    service_edit(rowIndx, grid, true);
                                    break;
                                default:
                                    break;
                            }
                        } else {
                            alert('Select a song or service to edit!');
                        }
                    }
                }
            ]
        }
    });
    var gridDetailModel = function (gridMain, rowData) {
        return {
            postRenderInterval: 200,
            width: 1450,
            height: 'flex',
            showTop: false,
            showBottom: false,
            editable: true,
            sortModel: {
                //type: 'remote',
                single: false,
                sorter: [{dataIndx: 'song_order', dir: 'up'}],
                space: true
            },
            selectChange: function () {
                var sel = this.selection({type: 'cell', method: 'getSelection'});
                rowData = sel[0].rowData;
                console.log('detail - rowData', rowData);
                rowIndx = sel[0].rowIndx;
            },
            dataModel: {
                location: "remote",
                dataType: "json",
                method: "GET",
                recIndx: "id",
                error: function () {
                    //gridMain.rowInvalidate({rowData: rowData});
                },
                url: "/utilities/ajax_get_services_song_detail.php?serviceid=" + rowData.id
            },
            colModel: [
                {title: "Order", width: 85, dataIndx: "song_order", dataType: "integer", editable: true},
                {title: "Title", width: 140, dataIndx: "title", editable: false},
                {title: "Artist", width: 140, dataIndx: "artist", editable: false},
                {title: "Arrangement", width: 95, dataIndx: "arrangement", editable: false},
                {title: "Key", width: 150, dataIndx: "key", editable: false},
                {title: "Time", width: "100", align: "center", dataIndx: "time_signature", editable: false},
                {title: "BPM", width: "100", align: "right", dataIndx: "bpm", editable: false}
               
            ],
            refresh: function (evt, ui) {
                if (ui.source != "flex") {
                    this.flex();
                }
            },
            numberCell: {show: false},
            title: "Song Selections"
        };
    };
});

[stevejacobsen]

Nevermind! I just saw that I was reusing rowData. I gave it a new variable name and all is good.

[stevejacobsen]

I'm using this code to identify selected records in the master grid, but the detail grid doesn't have a selector. What is the best way to get the selected rowIndx on the detail grid?

var selectionArray = $("#services_grid").pqGrid("selection",
                        {type: 'row', method: 'getSelection'}
                );

[paramvir]

Detail grids are associated with corresponding rows of parent grid i.e., rowData.pq_detail.child

http://paramquery.com/forum/index.php?topic=1141

[stevejacobsen]

Here's what I'm trying but I get the error "child.selection is not a function.."

        selectChange: function () {

            var selectionArray = $("#services_grid").pqGrid("selection", {type: 'row', method: 'getSelection'});
            var rowData = selectionArray[0]['rowData'];
            var child = rowData.pq_detail.child;

            if (child) { //row has detail

                child.selection({type: 'row', method: 'removall'});
            }

        },

[paramvir]

That would be child.pqGrid("selection", {type: 'row', method: 'method_name' } );

[stevejacobsen]

That works to turn off the child selection but it fires the selectChange on the master again when the highlighted code is run. The second time it's fired the master record becomes  unselected.

If I then click on the master record a second time it stays selected. I assume because the second time around there are no child records selected and that bit of code is not executed.

Is there a way to stop it from causing selectChange to fire. I think I saw in the documentation that it will fire as a result of ui changes or code execution.

            var selectionArray = $("#services_grid").pqGrid("selection", {type: 'row', method: 'getSelection'});
            if (typeof selectionArray[0] !== 'undefined') {
                var rowData = selectionArray[0]['rowData'];
                var child = rowData.pq_detail.child;
                if (child) { //row has detail
                    var childselection = child.pqGrid("selection", {type: 'row', method: 'getSelection'});
                    child.pqGrid("selection", {type: 'row', method: 'remove', rowIndx: childselection[0]['rowIndx']});
                }
            }

[paramvir]

selections in the child grid are not supposed to fire selectChange event in master grid. Can you please share a jsfiddle demonstrating the issue.

[stevejacobsen]

http://jsfiddle.net/stevenljacobsen/0s7ynsky/

Here's the link. I have put a console.log() in both the master and detail selectChange events.

Expand the master and it fires once.

Select a detail record and they both fire.

Select the master record again, the master fires, the detail fires and then the master fires again. The second time the selection array is empty and so it is unselected in the UI as well.

The end result I'm trying to get to is to have only one record selected at any one time.

[paramvir]

It's working as per the logic of code written by you.

Please note that any call to selection API results in selectChange event of the corresponding grid. So any call to selection API of master grid results in selectChange event of master grid.

I may be able to help you if you can describe in detail/steps what you are trying to do.

[stevejacobsen]

I want to have only one record selected at any one time. I am using a tool bar and will have a button to print chord sheets. If the master record is selected it will print the chord sheets in all of the detail records, if I have only a detail record selected it will only print that one chord sheet. I have all of the printing code working. I just need to get the grids to have only one selection active at any one time.

[stevejacobsen]

Just wanted to let you know that I turned the logic around so that I have two sets of buttons in the toolbar. One for the master grid and one set for the detail grid. I just show/hide the buttons as needed and set up global variables for the buttons to act on. This is working out for me.

            // setup the service variables
            var selectionArray = $("#services_grid").pqGrid("selection", {
                type: 'row',
                method: 'getSelection'
            });
            grid = this;
            rowIndx = selectionArray[0]['rowIndx'];

            // display the service buttons
            $(".servicebutton").show();
            $(".songbutton").hide();

            // Display the service info in the title
            $("#services_grid").pqGrid({title: 'Praise Song Organizer - <b>' + selectionArray[0]['rowData']['service_date'] + ' ' + selectionArray[0]['rowData']['location'] + ' Service</b>'})