Author Topic: Column Model not being followed correctly  (Read 2830 times)

stevejacobsen

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 46
    • View Profile
Column Model not being followed correctly
« on: September 27, 2016, 02:26:50 am »
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.

Quote

   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

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 46
    • View Profile
Re: Column Model not being followed correctly
« Reply #1 on: September 27, 2016, 05:13:50 am »
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:

Quote
    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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: Column Model not being followed correctly
« Reply #2 on: September 27, 2016, 05:17:15 am »
It's title instead of Title in column definition.

stevejacobsen

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 46
    • View Profile
Re: Column Model not being followed correctly
« Reply #3 on: September 27, 2016, 05:49:28 am »
It's the easy things I spend the most time on..... Thanks!