3
 
1
​
2
<div id="grid_custom_editing" style="margin:auto;"></div>
3
​

70
 
1
​
2
    $(function () {
3
        //optional function used to create pqSelect and auto open it.
4
        function initSelect(ui) {
5
            ui.$cell.find("select").pqSelect();
6
            setTimeout(function () {
7
                ui.$cell.find("select").pqSelect('open');
8
            })
9
        }
10
        var colModel = [
11
            { title: "Ship Country", dataIndx: "ShipCountry", width: 120,
12
                editor: {
13
                    type: "select",
14
                    init: initSelect,
15
                    options: []
16
                }
17
            },
18
            {
19
                title: "Shipping Via",
20
                dataIndx: "ShipVia",
21
                width: 110,
22
                editor: {
23
                    type: 'select',
24
                    init: initSelect,
25
                    valueIndx: "value",
26
                    labelIndx: "text",
27
                    options: [],
28
                    //mapIndices: { "text": "ShipVia", "value": "ShipViaId" }
29
                },
30
                //render required to display options text corresponding to value stored in the cell.
31
                render: function (ui) {
32
                    var option = ui.column.editor.options.find(option => option.value == ui.cellData);
33
                    return option? option.text: "";
34
                }
35
            },
36
            { title: "Order ID", width: 100, dataIndx: "OrderID", editable: false }
37
        ];
38
        
39
        $("#grid_custom_editing").pqGrid({
40
            colModel: colModel,
41
            create: function (evt, ui) {
42
                var grid = this,
43
                    column;
44
​
45
                //fetch options for ShipCountry column from server.
46
                $.getJSON("/pro/demos/getCountries", function (response) {
47
                    column = grid.getColumn({ dataIndx: 'ShipCountry' });
48
                    column.editor.options = response;
49
                });
50
​
51
                //fetch options for ShipVia column from server.
52
                $.getJSON("/Content/ShipVia.json", function (response) {
53
                    column = grid.getColumn({ dataIndx: 'ShipVia' });
54
                    column.editor.options = response;
55
                });
56
            },
57
            dataModel: {
58
                dataType: "JSON",
59
                location: "remote",
60
                method: "GET",
61
                url: "/content/invoice.json"
62
            },
63
            historyModel: { checkEditable: false },
64
            numberCell: { show: false },
65
            resizable: true,
66
            scrollModel: { autoFit: true },
67
            title: "Shipping Orders <b>(Custom editing)</b>"
68
        });
69
    });
70
​

​x
 
1
​
2
    .pq-grid .pq-editor-focus
3
    {
4
        outline:none;
5
        border:1px solid #bbb;    
6
        border-radius:6px;
7
        background-image: linear-gradient(#e6e6e6, #fefefe);
8
​
9
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6e6e6', endColorstr='#fefefe'); 
10
        background: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#fefefe)); 
11
        background: -moz-linear-gradient(top,  #e6e6e6,  #fefefe); /* for firefox 3.6+ */           
12
    }
13
​

28
 
1
​
2
    namespace ParamQuery.Helpers
3
    {
4
        public class Lists
5
        {
6
            public static readonly IList<string> Countries 
7
                = new List<string> {
8
                { "USA" },
9
                { "Afghanistan"},
10
                { "Akrotiri"},
11
                .....
12
                .....
13
                { "Zambia"},
14
                { "Zimbabwe"}
15
            };
16
        }                                
17
    }
18
    //get list of countries for autocomplete
19
    public String getCountries(String term)
20
    {
21
        term = (term == null) ? "" : term;
22
        JavaScriptSerializer js = new JavaScriptSerializer();
23
        var countries = (from a in ParamQuery.Helpers.Lists.Countries
24
                            where a.ToUpper().Contains(term.ToUpper())
25
                            select a).ToList();
26
        return js.Serialize(countries);            
27
    }
28
​

24
 
1
​
2
$countries = array(            
3
    "USA",
4
    "Afghanistan",
5
    "Akrotiri",
6
    .....
7
    .....
8
    { "Zambia"},
9
    { "Zimbabwe"}
10
);
11
//get list of countries for autocomplete
12
if(isset($_GET['getCountries'])){
13
    $term = isset($_GET['term'])? $_GET['term']:'';
14
    if($term){
15
        echo json_encode(array_filter($countries, function($country) use ($term){
16
            //return true if $term exist in the $country.
17
            return ( strpos($country, $term) !== false );
18
        }));
19
    }
20
    else{
21
        echo json_encode($countries);
22
    }
23
}
24
​