How to customize the UriCell's render of BackGrid

Question

I have the following

name: "id", // The key of the model attribute
label: "User Id", // The name to display in the header
editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
cell:  Backgrid.UriCell.extend({
       orderSeparator: ''})
        }, {

Using the Backgrid.UriCell has

href: formattedValue,
title: formattedValue**,

Is there any way that define href has "session" + formatedValue ? In other words, how to customize the UriCell so I can define href different from title?

Answer 1

Try this:

var UriCell = Backgrid.UriCell.extend({
    render: function () {
        this.$el.empty();
        var rawValue = this.model.get(this.column.get("name"));
        var formattedValue = this.formatter.fromRaw(rawValue, this.model);
        var href = _.isFunction(this.column.get("href")) ? this.column.get('href')(rawValue, formattedValue, this.model) : this.column.get('href');
        this.$el.append($("<a>", {
          tabIndex: -1,
          href: href || rawValue,
          title: this.title || formattedValue,
          target: this.target
        }).text(formattedValue));
        this.delegateEvents();
        return this;
    }
});

Then, you can write this:

name: "id",
label: "User Id",
editable: false,
cell: UriCell,
href: function(rawValue, formattedValue, model){
  return "session" + formattedValue;
}