Column Model not being followed correctly

[stevejacobsen]

I have a page with nested grids on it. On the master grid I have a button to that calls the code below that I will be using as a popup to select new detail records. The problem that I am having is on the popup it is not following the directives correctly, for the title of the columns it is using the json field name, and it is not using the proper width. I was able to verify that it is following the datatype.

I thought my variables might be clashing with the grids on the main page, so I changed them from colModel to songcolModel and dataModel to songdataModel but that didn't seem to make a difference.

   function addsongtoservice(rowIndx, grid) {
        var songcolModel = [
            {Title: "Title", dataType: "string", dataIndx: "title"},
            {Title: "Artist", dataType: "string", dataIndx: "artist"},
            {Title: "Arrangement", dataType: "string", dataIndx: "arrangement"},
            {Title: "Key", dataType: "string", dataIndx: "key", width: 75},
            {Title: "Time", dataType: "string", dataIndx: "time_signature", width: 75},
            {Title: "BPM", dataType: "integer", dataIndx: "bpm", width: 75},
            {Title: "Uses", dataType: "integer", dataIndx: "count", width: 75},
            {Title: "Last Used", dataType: "date", dataIndx: "last", width: 150}
        ];

        var songdataModel = {
            location: "remote",
            dataType: "JSON",
            url: "utilities/ajax_get_addsong_data_JSON.php",
            getData: function (dataJSON) {
                var data = dataJSON.data;
                return {data: data};
            }
        };

        var obj = {
            width: "1000",
            height: "1000",
            selectionModel: {type: 'cell'},
            dataModel: songdataModel,
            colModel: songcolModel,
            autoSizeInterval: 0,
            scrollModel: {autoFit: true},
            dragColumns: {enabled: false},
            toggle: function (evt, ui) {
                $("#popup").dialog({
                    closeOnEscape: ui.state !== 'max'
                });
                //fix for IE               
                if (ui.state === 'max') {
                    $(".ui-dialog,.ui-widget-overlay").css('position', 'static');
                } else {
                    $(".ui-dialog,.ui-widget-overlay").css('position', 'absolute');
                }
            }
        };
        $("#popup")
                .dialog({
                    height: 800,
                    width: 700,
                    //width: 'auto',
                    modal: true,
                    open: function (evt, ui) {
                        $("#grid_popup").pqGrid(obj);
                    },
                    close: function () {
                        $("#grid_popup").pqGrid('destroy');
                    },
                    show: {
                        effect: "blind",
                        duration: 500
                    }
                });
    }

[stevejacobsen]

I've modified what I am working with and it seems that it is now only the Title that is not working correctly. It is still using the actual field names rather than the text that it should. I am now able to size the fields correctly and I have also used 'center' and that works.

I did add some filters and they are not displaying.

Here is my current code:

    function addsongtoservice(rowIndx, grid) {


        var obj = {
            width: "1200", //auto width
            height: "100%-30", //height in %age
            selectionModel: {type: 'cell'},
            autoSizeInterval: 0,
            scrollModel: {autoFit: true},
            dragColumns: {enabled: false},
            create: function (evt, ui) {
                var grid = this,
                        column;
                $.getJSON("utilities/ajax_songs_getkeys_JSON.php", function (response) {
                    column = grid.getColumn({dataIndx: 'key'});
                    column.filter.cache = null;
                    column.filter.options = response;
                    grid.refreshHeader();
                });
                $.getJSON("utilities/ajax_songs_gettime_JSON.php", function (response) {
                    column = grid.getColumn({dataIndx: 'time_signature'});
                    column.filter.cache = null;
                    column.filter.options = response;
                    grid.refreshHeader();
                });
            },
            toggle: function (evt, ui) {
                $("#popup").dialog({
                    closeOnEscape: ui.state !== 'max'
                });
                //fix for IE               
                if (ui.state === 'max') {
                    $(".ui-dialog,.ui-widget-overlay").css('position', 'static');
                } else {
                    $(".ui-dialog,.ui-widget-overlay").css('position', 'absolute');
                }
            }
        };

        obj.colModel = [
            {Title: "Title", dataType: "string", dataIndx: "title", width: 300,
                filter: {type: 'textbox', condition: 'contain', listeners: ['keyup']}
            },
            {Title: "Artist", dataType: "string", dataIndx: "artist", width: 200,
                filter: {type: 'textbox', condition: 'contain', listeners: ['keyup']}
            },
            {Title: "Arrangement", dataType: "string", dataIndx: "arrangement", width: 200,
                filter: {type: 'textbox', condition: 'contain', listeners: ['keyup']}
            },
            {Title: "Key", dataType: "string", dataIndx: "key", width: 50, align: "center",
                filter: {type: 'select', condition: 'equal', listeners: ['change']}
            },
            {Title: "Time", dataType: "string", dataIndx: "time_signature", width: 75, align: "center",
                filter: {type: 'select', condition: 'equal', listeners: ['change']}
            },
            {Title: "BPM", dataType: "integer", dataIndx: "bpm", width: 50, align: "center",
                filter: {type: 'select', condition: 'equal', listeners: ['change']}
            },
            {Title: "Uses", dataType: "integer", dataIndx: "count", width: 50, align: "center"},
            {Title: "Last Used", dataType: "date", dataIndx: "last", width: 100, align: "center"}
        ];
        obj.dataModel = {
            location: "remote",
            dataType: "JSON",
            url: "utilities/ajax_get_addsong_data_JSON.php",
            getData: function (dataJSON) {
                var data = dataJSON.data;
                return {data: data};
            }
        };

        $("#popup")
                .dialog({
                    height: 800,
                    width: 1200,
                    modal: true,
                    open: function (evt, ui) {
                        $("#grid_popup").pqGrid(obj);
                    },
                    close: function () {
                        $("#grid_popup").pqGrid('destroy');
                    },
                    show: {
                        effect: "blind",
                        duration: 500
                    }
                });

    }

[paramvir]

It's title instead of Title in column definition.

[stevejacobsen]

It's the easy things I spend the most time on..... Thanks!