How to change Backgrid Uri Cell href attribute

Question

I am working with Backgrid along with rails , My requirement is to change href attribute in backgrid cell options , I have the following code

    var grid = new Backgrid.Grid({

     columns: [ {
      name: "location",
      cell: Backgrid.UriCell.extend({

      }),
      sortable: true,
      editable: false
     }]
    })

above code displays hyrperlink with taking href attribute as "location-name" like the following

  <a tabindex="-1" href="location-name" title="location-name" target="_blank">location-name</a>

, but I need href attribute as following

  <a tabindex="-1" href="#some-id" title="location-name" target="_blank">location-name</a>

How can I do this , please help me

Answer 1

looking through the docs (line 994 of backgrid.js) the rawValue is being directly taken from the column name and is not any sort of option that can be passed in.

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

So could you just override the render with your own?

cell: Backgrid.UriCell.extend({
 render: function () {
    this.$el.empty();
    var rawValue = //what ever you want to put in the href;
    var formattedValue = this.formatter.fromRaw(rawValue, this.model);
    this.$el.append($("<a>", {
      tabIndex: -1,
      href: rawValue,
      title: this.title || formattedValue,
      target: this.target
    }).text(formattedValue));
    this.delegateEvents();
    return this;
  }
}),

Answer 2

If you check in the docs you can see that text is being changed by the formattedValue. Therefore you should change the formatted value to change the name of the link. See uriFormatter on http://backgridjs.com/ref/formatter.html for more details.