0

I am having problems binding data to my Backgrid's SelectFilter (dropdown).

Here is the code that is not working:

// Create a Backbone Model
var OccupationCategoryModel = Backbone.Model.extend({
    defaults: {
        Prefix: "",
        Title: ""
    },
    idAttribute: "Prefix",
    urlRoot: '/api/occupationcategory',
    parse: function (response) {
        return {
            'Title': response.Title,
            'Prefix': response.Prefix
        };
    }
});

// Create a Backbone Collection for the dropdown list 
var OccupationCategoryList = Backbone.Collection.extend({
    model: OccupationCategoryModel,
    url: "/api/occupationcategory",
    mode: "client", // page entirely on the client side
    parse: function (response) {
        return response;
    }
});

// Get a fresh data collection
var _categories = new OccupationCategoryList(); 

// Create the 'Select filter' dropdown
var categoryFilter = new Backgrid.Extension.SelectFilter({
    className: "backgrid-filter form-control",
    collection: somePageableCollectionNotFoundInThisCode,
    field: "OccupationID", // this 'field' is found in 'somePageableCollectionNotFoundInThisCode'
    selectOptions: _.union([{ label: "All", value: null }],
      _.map(_categories, function (o) { return { label: o.Title, value: o.Prefix }; })) // this does not work :(
});

// fetch Occupation Categories from API - this works!
_categories.fetch({
    ajaxSync: true,
    success: function () {
        console.log(_categories.models); // => 22 items (collection has been populated and verified)
    }
});

I can verify the data is in the collection correctly (see the console.log statement), but I cannot get the data into the Select-Filter (dropdown).

If I use a static JSON list (like all the 'Hello World' examples for this online) it works, like this:

    // This static list works but is un-desirable. We want to use the database. Dont ask why.
var _categories = [
      { "Prefix": "17", "Title": "Architecture and Engineering" }
    , { "Prefix": "27", "Title": "Arts, Design, Entertainment, Sports, and Media" }
    , { "Prefix": "37", "Title": "Building and Grounds Cleaning and Maintenance" }
    , { "Prefix": "13", "Title": "Business and Financial Operations" }
    , { "Prefix": "21", "Title": "Community and Social Services" }
    , { "Prefix": "15", "Title": "Computer and Mathematical" }
    , { "Prefix": "47", "Title": "Construction and Extraction" }
    , { "Prefix": "25", "Title": "Education, Training, and Library" }
    , { "Prefix": "45", "Title": "Farming, Fishing, and Forestry" }
    , { "Prefix": "35", "Title": "Food Preparation and Serving Related" }
    , { "Prefix": "29", "Title": "Healthcare Practitioners and Technical" }
    , { "Prefix": "31", "Title": "Healthcare Support" }
    , { "Prefix": "49", "Title": "Installation, Maintenance, and Repair" }
    , { "Prefix": "23", "Title": "Legal" }
    , { "Prefix": "19", "Title": "Life, Physical, and Social Science" }
    , { "Prefix": "11", "Title": "Management" }
    , { "Prefix": "43", "Title": "Office and Administrative Support" }
    , { "Prefix": "39", "Title": "Personal Care and Service" }
    , { "Prefix": "51", "Title": "Production" }
    , { "Prefix": "33", "Title": "Protective Service" }
    , { "Prefix": "41", "Title": "Sales and Related" }
    , { "Prefix": "53", "Title": "Transportation and Material Moving" }
];

Just for giggles, here is the raw JSON response from our web API:

[{"Prefix":"17","Title":"Architecture and Engineering Occupations"},{"Prefix":"27","Title":"Arts, Design, Entertainment, Sports, and Media Occs"},{"Prefix":"37","Title":"Building and Grounds Cleaning and Maintenance Occs"},{"Prefix":"13","Title":"Business and Financial Operations Occupations"},{"Prefix":"21","Title":"Community and Social Services Occupations"},{"Prefix":"15","Title":"Computer and Mathematical Occupations"},{"Prefix":"47","Title":"Construction and Extraction Occupations"},{"Prefix":"25","Title":"Education, Training, and Library Occupations"},{"Prefix":"45","Title":"Farming, Fishing, and Forestry Occupations"},{"Prefix":"35","Title":"Food Preparation and Serving Related Occupations"},{"Prefix":"29","Title":"Healthcare Practitioners and Technical Occupations"},{"Prefix":"31","Title":"Healthcare Support Occupations"},{"Prefix":"49","Title":"Installation, Maintenance, and Repair Occupations"},{"Prefix":"23","Title":"Legal Occupations"},{"Prefix":"19","Title":"Life, Physical, and Social Science Occupations"},{"Prefix":"11","Title":"Management Occupations"},{"Prefix":"43","Title":"Office and Administrative Support Occupations"},{"Prefix":"39","Title":"Personal Care and Service Occupations"},{"Prefix":"51","Title":"Production Occupations"},{"Prefix":"33","Title":"Protective Service Occupations"},{"Prefix":"41","Title":"Sales and Related Occupations"},{"Prefix":"53","Title":"Transportation and Material Moving Occupations"}]

How can I get the successful 'fetch' to populate my Select-Filter? Shouldn't it be automatic?

AussieJoe
  • 1,285
  • 1
  • 14
  • 29
  • Sorry for not going deeply into your code, but, is there a reason why your api returns json properties capitilized? It seems like you are using small letters in the parser...(I'm not so sure if this has something to do with your problem...) – MorKadosh Feb 08 '16 at 23:14
  • @MorKadosh thanks for pointing that out. I have tried all situations with upper/lowercase. It works fine with the static list, if its lower or uppercase did not matter. I updated my code so that its uniform, thank you. The problem I think it with the grid event's, and dispatching the databinding to occur (re-occur?). – AussieJoe Feb 08 '16 at 23:20
  • @MorKadosh I have come to the conclusion that this is not possible with the current state of Backgrid and will require some extension code to be written in the framework to handle this. I do not see anywhere dropdown lists being populated with JSON or Backbone models. I believe the rendering/events order is incorrect and would require some code adjustment. – AussieJoe Feb 11 '16 at 22:02

0 Answers0