1

I want to add a column field inside backgrid to display img and other information related to that user.

var columns = [

    { name: "id", label: "Id", cell: "integer",editable: false },

    { name: "active_image", label: "Image", cell: "uri",editable: false },

    { name: "worker_id", label: "Worker", cell: "string",editable: false },

    { name: "city", label: "City", cell: "string",editable: false }

    ];
Mathias
  • 6,777
  • 2
  • 20
  • 32
moss
  • 214
  • 1
  • 2
  • 12

1 Answers1

2

I would recommend you to create new image cell type. However, the simplest solution is to extend the basic Backgrid.Cell:

{
  name: 'active_image',
  label: 'Image',
  editable: false,
  cell: Backgrid.Cell.extend({
    render: function() {
      var src = this.model.get(this.column.get('name'));
      this.$el.html($('<img>').attr('src', src));
      return this;
    }
  })
}

The render function here is rather simplified (and not tested), just to give the idea of howto.

pekkast
  • 309
  • 2
  • 4
  • I tried to implement as per your recommendation but its still not working any how thanks for the guide. – moss Apr 17 '14 at 07:35
  • Its working Thank you so much for help { name: 'primary_photo', label: 'Image', editable: false, cell: Backgrid.Cell.extend({ render: function() { var src = this.model.get(this.column.get('Image')); //this.$el.html($('').attr('src', src)); var path = {{MEDIA_URL}}+this.model.get('primary_photo'); //alert(path); this.$el.html($('').attr('src', path)); return this; } }) }, – moss Apr 17 '14 at 09:32