Search code examples
javascriptember.jsjqgridember-data

Use Ember store and model as source data for JqGrid


I'd like to use data already populated in my Ember store in a JqGrid. Any hints on how to achieve this in a better way?

I've found that model objects from the store are not compatible with the array of javascript objects suitable for JqGrid, so I had to create the appropriate array.

This is how I pass the model to the component in a template:

{{myComponent data=model}}

And here is how I prepare the jqGrid data:

...
export default Ember.Component.extend({
    didInsertElement: function(){
        var myEmberData = this.get('data'); 
        var myJqGridData = myEmberData.map(item => {
            return $.extend({id:item.id},item._internalModel._data);
        }
        ...
        //use myEmberData as local data for JqGrid
        this.$("#gridId").jqGrid({
            datatype: "local", 
            data: myJqGridData,
        ...
    }
});

Solution

  • Instead of accessing 2 private properties it would be better if you'd use .getProperties() method and explicitly specify data that you need:

    const myEmberData  = this.get('data'); 
    const myJqGridData = myEmberData.map(
        item => item.getProperties('id', 'firstProperty', 'secondProperty') // ... etc.
    );