2

I am trying to replicate one example of Jqgrid filter in vf page. I need help in how to bind Account object data in place of random data. Below is the code -

https://stackoverflow.com/a/12875703/315935

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery-ui-multiselect/1.13.6/jquery.multiselect.css" />
<style type="text/css">
    html, body { font-size: 75%; }
    .ui-multiselect-menu { font-size: 1.2em; }
    .ui-jqgrid .ui-jqgrid-htable .ui-search-toolbar th { height: auto }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery-ui-multiselect/1.13.6/jquery.multiselect.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.src.js"></script>

<script type="text/javascript">
//<![CDATA[
    /*global $ */
    /*jslint unparam: true, plusplus: true, browser: true */
    $(function () {
        'use strict';
        var myData = [
                { id: "1",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                { id: "2",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "3",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                { id: "4",  invdate: "2007-10-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                { id: "5",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "6",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                { id: "7",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
                { id: "8",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "9",  invdate: "2007-09-01", name: "test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                { id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
                { id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                { id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
            ],
            $grid = $("#list"),
            myDefaultSearch = "cn",
            getColumnIndexByName = function (columnName) {
                var cm = $(this).jqGrid('getGridParam', 'colModel'), i, l = cm.length;
                for (i = 0; i < l; i += 1) {
                    if (cm[i].name === columnName) {
                        return i; // return the index
                    }
                }
                return -1;
            },
            modifySearchingFilter = function (separator) {
                var i, l, rules, rule, parts, j, group, str, iCol, cmi, cm = this.p.colModel,
                    filters = $.parseJSON(this.p.postData.filters);
                if (filters && filters.rules !== undefined && filters.rules.length > 0) {
                    rules = filters.rules;
                    for (i = 0; i < rules.length; i++) {
                        rule = rules[i];
                        iCol = getColumnIndexByName.call(this, rule.field);
                        cmi = cm[iCol];
                        if (iCol >= 0 &&
                                ((cmi.searchoptions === undefined || cmi.searchoptions.sopt === undefined)
                                    && (rule.op === myDefaultSearch)) ||
                                (typeof (cmi.searchoptions) === "object" &&
                                    $.isArray(cmi.searchoptions.sopt) &&
                                    cmi.searchoptions.sopt[0] === rule.op)) {
                            // make modifications only for the 'contains' operation
                            parts = rule.data.split(separator);
                            if (parts.length > 1) {
                                if (filters.groups === undefined) {
                                    filters.groups = [];
                                }
                                group = {
                                    groupOp: 'OR',
                                    groups: [],
                                    rules: []
                                };
                                filters.groups.push(group);
                                for (j = 0, l = parts.length; j < l; j++) {
                                    str = parts[j];
                                    if (str) {
                                        // skip empty '', which exist in case of two separaters of once
                                        group.rules.push({
                                            data: parts[j],
                                            op: rule.op,
                                            field: rule.field
                                        });
                                    }
                                }
                                rules.splice(i, 1);
                                i--; // to skip i++
                            }
                        }
                    }
                    this.p.postData.filters = JSON.stringify(filters);
                }
            },
            dataInitMultiselect = function (elem) {
                setTimeout(function () {
                    var $elem = $(elem), id = elem.id,
                        inToolbar = typeof id === "string" && id.substr(0, 3) === "gs_",
                        options = {
                            selectedList: 2,
                            height: "auto",
                            checkAllText: "all",
                            uncheckAllText: "no",
                            noneSelectedText: "Any",
                            open: function () {
                                var $menu = $(".ui-multiselect-menu:visible");
                                $menu.width("auto");
                                return;
                            }
                        },
                        $options = $elem.find("option");
                    if ($options.length > 0 && $options[0].selected) {
                        $options[0].selected = false; // unselect the first selected option
                    }
                    if (inToolbar) {
                        options.minWidth = 'auto';
                    }
                    $elem.multiselect(options);
                    $elem.siblings('button.ui-multiselect').css({
                        width: inToolbar ? "98%" : "100%",
                        marginTop: "1px",
                        marginBottom: "1px",
                        paddingTop: "3px"
                    });
                }, 50);
            };

        $grid.jqGrid({
            datatype: 'local',
            data: myData,
            colNames: ['Client', 'Date', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
            colModel: [
                {name: 'name', width: 65},
                {name: 'invdate', width: 80, align: 'center', sorttype: 'date',
                    formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
                {name: 'amount', width: 75, formatter: 'number', align: 'right'},
                {name: 'tax', width: 52, formatter: 'number', align: 'right'},
                {name: 'total', width: 65, formatter: 'number', align: 'right'},
                {name: 'closed', width: 80, align: 'center', formatter: 'checkbox',
                    edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'},
                    stype: 'select',
                    searchoptions: {
                        sopt: ['eq', 'ne'],
                        value: 'true:Yes;false:No',
                        attr: {multiple: 'multiple', size: 3},
                        dataInit: dataInitMultiselect
                    }},
                {name: 'ship_via', width: 100, align: 'center', formatter: 'select',
                    edittype: 'select',
                    editoptions: {
                        value: 'FE:FedEx;TN:TNT;IN:Intim',
                        defaultValue: 'Intime',
                        multiple: true
                    },
                    stype: 'select',
                    searchoptions: {
                        sopt: ['eq', 'ne'],
                        value: 'FE:FedEx;TN:TNT;IN:Intim',
                        attr: {multiple: 'multiple', size: 4},
                        dataInit: dataInitMultiselect
                    }},
                {name: 'note', width: 100, sortable: false}
            ],
            rowNum: 10,
            rowList: [5, 10, 20],
            pager: '#pager',
            gridview: true,
            ignoreCase: true,
            rownumbers: true,
            sortname: 'invdate',
            viewrecords: true,
            sortorder: 'desc',
            caption: "Demonstrate the usage of Eric Hynds's jQuery UI MultiSelect Widget",
            height: '100%',
            beforeRequest: function () {
                modifySearchingFilter.call(this, ',');
            }
        });
        $grid.jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: false}, {}, {}, {}, {
            multipleSearch: true,
            multipleGroup: true,
            recreateFilter: true
        });
        $grid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch: myDefaultSearch});
    });
//]]>
</script>

1

1 Answer 1

1

Use a remote action in a global class to return a serialized list. You can then set the returned json to myData

// apex

global class xGlobal {

@RemoteAction 

 global static string get_account( string mCode) {  

       list <Account> acctList = [Select id,name from account where xyzCode__c=: mCode];

  return  JSON.serialize(acctList); 
}
 }

component or page

// define remote action

<javascript>

 corpx.get_acct_remote_action = '{!$RemoteAction.xGlobal.get_account}';

javascript somewhere in page or elsewhere

var codeFilter = 'new';

 Visualforce.remoting.Manager.invokeAction(corpx.get_acct_remote_action,  codeFilter , 
      function(result_acctList, event) {
     try{
     myData = result_acctList;
     // bind the grid -- whatever
      }
    catch(){}

  </javascript>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .