javascriptjqueryasp.net-mvcjsgrid

How to get items to dropdown list in a field using jsGrid?


This is a jQuery code of my sample project to get details from application side to display in front in a grid which is build by jsGrid.

$("#part_table").jsGrid({
            height: "auto",
            width: "100%",
            autoload: true,
            editing: true,
            sorting: true,
            paging: true,
            pageSize: 10,
            inserting: true,
            loadIndication: false,
            filtering: true,
            headerRowClass: 'table-green-header',
            controller: {
                loadData: function (filter) {
                    function.....
                },
                updateItem: function (item) {

                    function.....

                }
            },
            fields: [
                { name: "Id", type: "number", visible: false },
                {
                    name: "CatalogueId", type: "select", **items**: catalouges, valueField: "Id", textField: "CatalougeName", selectedIndex : -1 , title: "Catalouge Name", align: "center"
                },

                { name: "DistributorPrice", type: "number", title: "Distributor Price", align: "center", filtering: false, sorting: false },
                { name: "IsActive", type: "checkbox", filtering: false, sorting: false },
                { type: "control" }


            ],
            rowClick: function (args) {
                return false;
            },
        });

Can anyone say how to get a list of items to field by calling to application side via AJAX call ?

Thanks


Solution

  • Load items in advance and then use result in the grid field config, e.g.:

    $.ajax({
        type: "GET",
        url: "/countries/"
    }).done(function(countries) {
    
        countries.unshift({ id: "0", name: "" });
    
        $("#jsGrid").jsGrid({
            ...,
            fields: [
                ...
                { name: "country_id", title: "Country", type: "select", width: 100, items: countries, valueField: "id", textField: "name" }
            ]
        });
    
    });
    

    You can find an example in the jsgrid sample project