cloudflarearchive / backgrid

Finally, an easily stylable semantic HTML data grid widget with a Javascript API that doesn't suck.
http://backgridjs.com
MIT License
2.01k stars 325 forks source link

UriCell with the href = value of the column #461

Closed kim2014 closed 10 years ago

kim2014 commented 10 years ago

Hi All, I defined one of the cell in my backgrid as Backgrid.UriCell and the href has the value of the column and I want to change the href of the column but don't know how. Any help is greatly appreciated. Thanks Kim

wyuenho commented 10 years ago

Why would you want to change the href to a different value from the model? Do you mean changing the display value?

kim2014 commented 10 years ago

I want to have display value (Title) different from href. For example I have the sessionId = 'My123456' so the display value is 'My123456' but I want to have my href value is 'user/session/My12345'. Can I have override render function for UriCell? If so where I can place this override render function. Should I have this render in the model? Thanks, Kim

kim2014 commented 10 years ago

Yes, Would like to display value different from href value. For example the display is “session1234” but would like to have the href value as “userId/session/session1234” so when the user clicks on this UriCell the page will display for “userId/session/session1234”. Where should I place this render function:

render: function () {

this.super.render.apply(this, arguments):

this.$('a').attr({'href': 'whateveruwant'});

return this;

};

Thanks Joanne

From: Jimmy Yuen Ho Wong [mailto:notifications@github.com] Sent: Sunday, March 02, 2014 3:00 AM To: wyuenho/backgrid Cc: Joanne Pham Subject: Re: [backgrid] UriCell with the href = value of the column (#461)

Why would you want to change the href to a different value from the model? Do you mean changing the display value?

— Reply to this email directly or view it on GitHubhttps://github.com/wyuenho/backgrid/issues/461#issuecomment-36451325.

wyuenho commented 10 years ago

First of all, the session ID should never appear in the URL for security reasons.

If you must, you need to subclass a UriCell

var MyUriCell = Backgrid.UriCell.extend({
  render: function () {
    this.constructor.__super__.render.apply(this, arguments);
    this.$("a").attr({href: "yourURI"});
    return this;
  }
});
kim2014 commented 10 years ago

It didn't work for me. I added this code in my model.js and then use subclass App.Cells.CustomUriCell in the view but it didn't work Note: I had backbonejs’ version 1.1.0.

Error Message : Uncaught TypeError: Object # has no method '_ensureElement' in backbone.js:990

-- Model js

(function () {
    'use strict';
    // Name space 
    window.App = {
        Models: {},
        Collections: {},
        Views: {},
        Cells: {}

    };

   App.Cells.CustomUriCell = Backgrid.UriCell.extend({
           render: function () {
              this.__super__.render.apply(this, arguments);
              this.$("a").attr({href: "TestingURL"});
              return this;
          }
    });

     App.Models.IfMapAccount = Backbone.Model.extend({
        idAttribute: "userId",
        // Default attributes for the device
        defaults: {
             userId: '',
             publisherId: '',
             passwordHash: ''

        },

In my view - view.js

createIfMapAccountGrid: function () {
            this.model.fetch({reset: true});
            var gridContainer = this.$el;

            var columns1 = [{
                name: "id", // The key of the model attribute
                label: "ORDER", // The name to display in the header
                editable: false, // By default every cell in a column is editable, but *ID* shouldn't be

                // Backgrid.Extension.SelectRowCell lets you select individual rows
                cell: "select-row",

                // Backgrid.Extension.SelectAllHeaderCell lets you select all the row on a page
                headerCell: "select-all"
            },  {

                name: "publisherId", // The key of the model attribute
                label: "Publisher 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:  App.Cells.CustomUriCell
wyuenho commented 10 years ago

Ok. You need to stop cross-posting.

I just edited my answer.