How to load dropdown list for local header filtering about local data

[Hidehiro Ishii]

Hi Team,

I want to use Local header filtering with dropdown list.
But I can not find out a sample code about a location of dataModel is 'local'.
I will show my source code as follows.
The dropdown list which I want load date is dataIndx:sakuseisha.
Please show me a sample code in this case.

Regards,
Koichi

PQGrid Pro:4.0.2
WordPress:4.9.1

<script>
    $(function () {

        function generateordersdata() {
            // prepare the data
            var data = new Array();

            <?php
                $data = array();
                $i = 0;

                $newslist = get_posts( array(
                    'post_type' => 'product_forum', //特定のカスタム投稿タイプスラッグを指定
                    'posts_per_page' => -1 //取得記事件数
                ));

                foreach( $newslist as $post ):setup_postdata( $post );
                    $row = array();
                    $row["number"] = $i;

                    $row["link"] = get_permalink();
                    $row["title"] = get_the_title();
                    $row["sakuseibi"] = get_the_date();
                    $row["sakuseisha"] = get_the_author();

                    $data[$i] = $row;
                    $i++;
                endforeach; wp_reset_postdata();
            ?>

            data = <?php echo json_encode($data); ?>;
            return data;
        }

        var colM = [
            { title: "Title", width: 130, dataIndx: "title", dataType: "stringi", },
       { title: "Author", width: 150, dataIndx: "sakuseisha", dataType: "stringi",
      filter: { type: "select",
          condition: 'equal',
          prepend: { '': '--Select--' },
          valueIndx: "sakuseisha",
          labelIndx: "sakuseisha",
          listeners: ['change']
           }
       },
            { title: "Date", width: 80, dataIndx: "sakuseibi", dataType: "stringi", },
   ];

        var dataM = {
            location: "local",
            sorting: "local",
            dataType: "JSON",
            method: "GET",
            data: generateordersdata(),
        };

        var groupM = {
            on: true,
            dataIndx: ['cat'],
            collapsed: [true],
            dir: ['up'],
            header: false,
            headerMenu: false,
            title: [
                "{0} ({1})",
                "{0} - {1}"
            ]
        };

        var obj = {
            height: 600,
            toolbar: {
                cls: "pq-toolbar-search",
                items: [

                    {
                        type: 'textbox',
                        label: 'Filter: ',
                        attr: 'placeholder="Enter your keyword"',
                        cls: "filterValue",
                        listener: { keyup: filterhandler }
                    },

                    {
                        type: 'select', cls: "filterColumn",
                        listener: filterhandler,
                        options: function (ui) {
                            var CM = ui.colModel;
                            var opts = [{ '': '[ All Fields ]'}];
                            for (var i = 0; i < CM.length; i++) {
                                var column = CM;
                                var obj = {};
                                obj[column.dataIndx] = column.title;
                                opts.push(obj);
                            }
                            return opts;
                        }
                    },

                ],
            },
            colModel: colM,
            groupModel: groupM,
            dataModel: dataM,
            sortModel: {
                single: false,
                sorter: [{ dataIndx: 'cat', dir: 'up' }, { dataIndx: 'title', dir: 'up'}],
                space: true,
                multiKey: null
            },
            scrollModel: { autoFit: true },
            numberCell: { show: false, resizable: true, title: "#" },
            filterModel: { mode: 'OR', on: true, header: true, type: "local" },
            selectionModel: { type: '', mode: 'single'},
            showTitle: false,
            resizable: true,
            virtualX: true,
            virtualY: true,
            hwrap: false,
            wrap: false,
            columnBorders: false,
            editable: false,
            hoverMode: "row",
        };

        var $grid = $("#PQ_Grid").pqGrid(obj);

        $( "#PQ_Grid" ).pqGrid({
            rowDblClick: function( event, ui ) {
                var url = ui.rowData['link'];
                if ( url.substring(0,4) == "http" ) {
                    window.open(url);
                }
            }
        });

    });

</script>

[paramvir]

There are couple of examples on header filtering with local data and dropdown lists.

https://paramquery.com/pro/demos/filter_header_local

In the above example, Shipping Via and Shipping Region have dropdown lists.

The options in the dropdown are taken from data of grid in load event:

Code: [Select]

load: function(){
                var grid = this;

                //load shipregion and shipvia dropdowns.
                var filter = grid.getColumn({ dataIndx: "ShipRegion" }).filter;               
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["ShipCountry", "ShipRegion"] });

                filter = grid.getColumn({ dataIndx: "ShipVia" }).filter;               
                filter.cache = null;
                filter.options = grid.getData({ dataIndx: ["ShipVia"] });

                //and initalize OrderDate header filter.
filter = grid.getColumn({ dataIndx: "OrderDate" }).filter;
filter.init = pqDatePicker;
            },


[Hidehiro Ishii]

Hi Team,

Thank you for your answer.
According to API Document, the event of "load" is that triggered after the pqGrid has loaded the remote data (Not local data).
So I think it is not fit a sample code which you show.
Please check my dataModel:dataM.
And show me a sample code for local data.

Regards,
Koichi

[paramvir]

Please use create instead of load event and call refreshHeader() in the end.

Rest is same.

Please check Shipping Via dropdown filter in this example: http://jsfiddle.net/gLsoyp2r/

[Hidehiro Ishii]

Hi Team,

Thank you for your quick response.
The example is very good!
So I have created a dropdown list for my environment.
Thank you for your great cooperation.

Best　Regards,
Koichi