EzDevInfo.com

backbone, access parent view from child view?

In general, how to access parent view from a child view in Backbone?

Specifically, in Backgrid.js, is there a way to access parent row from a cell?

Custom function fails to trigger on backgrid:exitEditMode

I am using backgridjs for one of my upcoming projects , i want to call a custom callback function on backgrid:exitEditMode , i tried something like this below

//Sample code snippet

var Columns = new Backgrid.Columns({
    name: "bookingID", 
    label: "ID",
    cell: "string"
});

Columns.on("backgrid:exitEditMode", function () {
    alert('test')
});

But the callback function fails to trigger on exiting a cell from the edit mode, am i doing something wrong? Any help would be greatly appreciated

P.S : I am beginner in backbonejs

How to add a custom delete option for backgrid rows

i have developed editable grid using backgrid and it looks good also. following is my output :

when i select the check box and click on delete icon, then the selected rows are deleted.

now i also would like to have the delete option on each row so that the user can delete the row directly.

How to put delete icon on each row.??

Backgrid integration

How I would use backgrid within a backbone.marionette application?

displaying nested attributes in backgrid

I have a json object in the following format:

{
    properties:{
                  url:"http://..."
               }
}

And I want to display the url in a Backgrid grid. However, I can't figure out how to change the name attribute of the column such that it accesses the nested url. I have tried the following examples to no avail:

{
    name: "properties.url",
    label: "URL",
    cell: "uri"
}

And

{
    name: "properties[url]",
    label: "URL",
    cell: "uri"
}

It seems like a simple enough thing to do but I can't find an answer.

how to delete "select-all" and "select-row" in backgrid.js?

js and i am new to it i am done with show data in grid ,now i add select-all header cell and cell as select-row now i am not getting how to delete checked row from server and how can i make html del button for it.which will connect to it?

here is my java scripts which i am using:--

<%= stylesheet_link_tag    "bootstrap.min" %>
        <%= stylesheet_link_tag    "backgrid" %>
        <%= stylesheet_link_tag    "backgrid-filter" %>
        <%= stylesheet_link_tag    "backgrid-paginator" %>
        <%= stylesheet_link_tag    "backgrid-select-all.min" %>
<%= javascript_include_tag "jquery-1.4.2.min.js"%>
    <%= javascript_include_tag "underscore.js"%>
    <%= javascript_include_tag "backbone.js"%>
    <%= javascript_include_tag "lunr.js"%>
    <%= javascript_include_tag "backgrid.js"%>
    <%= javascript_include_tag "backbone-pageable.js"%>
    <%= javascript_include_tag "backgrid-filter.js"%>
    <%= javascript_include_tag "backgrid-paginator.js"%>        
    <%= javascript_include_tag "backgrid-select-all.min.js"%>

and backgrid modal and grid code:-

var Territory = Backbone.Model.extend({});

var PageableTerritories = Backbone.PageableCollection.extend({
  model: Territory,
  url: urlvariable,
  state: {
    pageSize: 15
  },
  mode: "client" // page entirely on the client side
});




var pageableTerritories = new PageableTerritories();
var columns = [{

    // name is a required parameter, but you don't really want one on a select all column
    name: "",

    // 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: "FirstName",
  label: "First Name",
  // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
  cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
}, {
  name: "LastName",
  label: "Last Name",
  cell: "string" // An integer cell is a number cell that displays humanized integers
}, {
  name: "PatientId",
  label: "Patient Id",
  cell: "uri" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
  name: "RoomNumber",
  label: "Room Number",
  cell: "string" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
  name: "AdmissionDate",
  label: "Admission Date",
  cell: "date" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
  name: "DischargeDate",
  label: "Discharge Date",
  cell: "date" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
  name: "MeasureCategory",
  label: "MeasureCategory",
  cell: "string" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}];
// Set up a grid to use the pageable collection
var pageableGrid = new Backgrid.Grid({
  columns: columns,
  collection: pageableTerritories
});

// Render the grid
$("#grid").empty();

var $example2 = $("#grid");

$example2.append(pageableGrid.render().$el)

// Initialize the paginator
var paginator = new Backgrid.Extension.Paginator({
  collection: pageableTerritories
});

// Render the paginator
$example2.append(paginator.render().$el);

// Initialize a client-side filter to filter on the client
// mode pageable collection's cache.
var filter = new Backgrid.Extension.ClientSideFilter({
  collection: pageableTerritories.fullCollection,
  fields: ['FirstName']
});

// Render the filter
$example2.prepend(filter.render().$el);

// Add some space to the filter and move it to the right
filter.$el.css({float: "right", margin: "20px"});

// Fetch some data
pageableTerritories.fetch({reset: true});
}

backgrid filter, custom template?

I am trying to change the of Backgrid.Extension.ClientSideFilter

template: _.template('<div class="input-prepend input-append"><span class="add-on"><i class="icon-search"></i></span><input type="text" <% if (placeholder) { %> placeholder="<%- placeholder %>" <% } %> name="<%- name %>" /><span class="add-on"><a class="close" rel='nofollow' href="#">&times;</a></span><span class="add-on"><div class="red" id="<%- idDivCantidadResultados %>"></div></span></div>'),

but i don't know how to change.

Backgrid wont render date values from database

Im new to backGrid and im very impressed with what it can do so far.

I have successfully got some data from my Database back to my web-app in JSON and all renders ok with the exception of a date column which will throws an error:

Object 1361561820000 has no method 'trim' Heres is the column:

var columns = [{
name: "dateTime",
label: "Date/Time",
cell: 'date'
}];

This will render ok on the page when cell is set to 'string' but obviously this doesnt display in date format..

Is there anyway around this?

Previously i used a standard html table and parsed the date column with: $.format.date(get('dateTime'), 'dd/MM/yyyy hh:mm:ss' but i seem unable to apply this now,

Any help much appreciated

Backgrid catching a select-all events

(Let me preface with I am new to Backbone and Backgrid.) I am using Backgrid and select-all extension and I was having issues "catching" the event that the select all fires in my containing/parent view. I want to show a details view when a row is selected in the master grid. So, I need the select event in the grid to bubble up to the parent view so it can show the details in another view.

var view = Backbone.View.extend({
    el: '.grid',
    initialize: function () {

        var columns = [{
            name: "id",
            label: "ID",
            editable: false,
            cell: "string"
        }, {
            name: "",
            label: "Action",
            cell: "select-row"
        }];

        var grid = new Backgrid.Grid({
            columns: columns,
            collection: this.collection
        });

        $("#backgrid").append(grid.render().$el);
    });
});

Now I am thinking I want to add something like this to the view

events: {
"backgrid:select": "<name of the function i want to call>"
}

But that doesn't seem to work. Any help would be appreciated.

How to implement delete per row for backgrid

I've been trying to implement a "delete" button for backgrid rows. A solution seems to be described here:

How to add a custom delete option for backgrid rows

However, I don't seem to get it working. Here is what I tried:

var DeleteCell = Backgrid.Cell.extend({
    template: _.template('<button>Delete</button>'),
    events: {
      "click": "deleteRow"
    },
    deleteRow: function (e) {
      console.log("Hello");
      e.preventDefault();
      this.model.collection.remove(this.model);
    },
    render: function () {
      this.el.html(this.template());
      this.delegateEvents();
      return this;
    }
});

and then using it like

var columns = [{
        name: "id", // The key of the model attribute
        label: "ID", // The name to display in the header
        editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
        renderable: false,
        // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
        cell: Backgrid.IntegerCell.extend({
            orderSeparator: ''
        })
    }, {
        name: "weight",
        label: "Hello",
        cell: DeleteCell
    },{
        name: "datemeasured",
        label: "DateMeasured",
        // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
        cell: "datetime" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
    },{
        name: "weight",
        label: "Weight",
        cell: "number" // An integer cell is a number cell that displays humanized integers
    }];

what I get is an error:

TypeError: this.el.html is not a function
[Break On This Error]   

this.el.html(this.template());

Any suggestions?

Thanks & cheers

How to hide backgrid column?

Hi friends. I'm using backgrid in my project. I want to hide Id column from backgrid. Here is my code.

var columns = [
{ name: "id", label: "Id", cell: "integer", editable: false },
{ name: "payment_date", label: "Payment Date", cell: "date" ,editable: false },
{ name: "number_of_task", label: "Total Task", cell: "integer" ,editable: false },
{ name: "amount", label: "Amount", cell: "integer" ,editable: false }
];

How to fetch JSON data and update html using BackboneJs?

I am using BackgridJs which uses Backbonejs to fill up a grid with data.

This is how my code looks like now:

<!DOCTYPE html>
<html>
  <head>
    <title>Terminal</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel='nofollow' href="../css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" rel='nofollow' href="../js/backgrid/lib/backgrid.css" />
    <script src="../js/backgrid/assets/js/jquery.js"></script>
    <script src="../js/backgrid/assets/js/underscore.js"></script>
    <script src="../js/backgrid/assets/js/backbone.js"></script>
    <script src="../js/backgrid/lib/backgrid.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <div class="btn-group">
    <a class="btn btn-ledger dropdown-toggle" data-toggle="dropdown" rel='nofollow' href="#">
    Ledger
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
    <li><a tabindex="-1" rel='nofollow' href="#">With Margin</a></li>
    <li><a tabindex="-1" rel='nofollow' href="#">Without Margin</a></li>
    </ul>
    </div>
    <div class="btn-group">
    <a class="btn btn-company-code dropdown-toggle" id = "company_code" data-toggle="dropdown" rel='nofollow' href="#">
    Company Code
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
    <li><a tabindex="-1" rel='nofollow' href="#">DHA</a></li>
    <li><a tabindex="-1" rel='nofollow' href="#">HAC</a></li>
    <li><a tabindex="-1" rel='nofollow' href="#">DHA</a></li>
    </ul>
    </div>
    <div class="btn-group">
    <a class="btn btn-cost-centre dropdown-toggle" data-toggle="dropdown" rel='nofollow' href="#">
    Cost centre
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
    <li><a tabindex="-1" rel='nofollow' href="#">ALL</a></li>
    <li><a tabindex="-1" rel='nofollow' href="#">NSE-EQ</a></li>
    </ul>
    </div>
    <div class="btn-group">
    <a class="btn btn-type dropdown-toggle" data-toggle="dropdown" rel='nofollow' href="#">
    Type
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
    <li><a tabindex="-1" rel='nofollow' href="#">CLNT</a></li>
    <li><a tabindex="-1" rel='nofollow' href="#">GENL</a></li>
    <li><a tabindex="-1" rel='nofollow' href="#">MARG</a></li>
    </ul>
    </div>

    <button type="submit" id = "submit" class="btn btn-success">
                <i class="icon-circle-arrow-right icon-large"></i> Submit
    </button>

    <div id="example-1-result" class="backgrid-container"></div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../static/js/bootstrap.min.js"></script>

    <script>

    var Territory = Backbone.Model.extend({});

var Territories = Backbone.Collection.extend({
  model: Territory
  //url: "examples/territories.json"
});

//var territories = new Territories();
var territory1 = new Territory({ name: "How Bizarre", pop: 20 });
var territory2 = new Territory({ name: "How ", pop: 21 });
var territories = new Territories([territory1,territory2]);
var columns = [{
  name: "id", // The key of the model attribute
  label: "ID", // The name to display in the header
  editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
  // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
  cell: Backgrid.IntegerCell.extend({
    orderSeparator: ''
  })
}, {
  name: "name",
  label: "Name",
  // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
  cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
}, {
  name: "pop",
  label: "Population",
  cell: "integer" // An integer cell is a number cell that displays humanized integers
}, {
  name: "percentage",
  label: "% of World Population",
  cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
  name: "date",
  label: "Date",
  cell: "date",
}, {
  name: "url",
  label: "URL",
  cell: "uri" // Renders the value in an HTML anchor element
}];

// Initialize a new Grid instance
var refreshgrid = function(){
    var grid = new Backgrid.Grid({
      columns: columns,
      collection: territories
    });

    // Render the grid and attach the root to your HTML document
    $("#example-1-result").append(grid.render().$el);
}
// Fetch some countries from the url
//territories.fetch({reset: true});


    $(".dropdown-menu li").click(function(){
    $(this).closest('.btn-group').children('a').text($(this).text())
});

    $('#submit').on('click', function(event) {
        url = '/ledger/data'
        company_code = $("#company_code").text();

 // event.preventDefault(); // To prevent following the link (optional)
 $.post( url, { name: "John", time: "2pm" },function(data){
    ledgerData = JSON.parse(data);

    refreshgrid();
 });
      //$.post(url,function(response){
      //  alert(response);
      //});
});
    </script>
  </body>
</html>

When I get the JSON data in the Post request, I am not able to figure out how to feed it to the grid during the refreshgrid() call.

In most Backbonejs examples, the url is in the Model itself, but for me, the url keeps changing after every submit. So, how do I get the data and feed it to the grid?

Backgrid.js, is it possible to skip rendering of some rows

While it seems I can remove some rows, is it possible to skip rendering of some rows based on some filtering logic?

e.g. don't render a row where model.get('someProp') == 'X'

Getting most basic Backgrid.js example working

I am trying to get the most basic example of backgrid.js to work. In other words, an example where i can drop the source folder into my xampp/htdocs folder and run without having to do anything else.

I have tried many ways to get the code to run but i cannot get anything to show up. Here is the html page i made to try to see an example working.

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" rel='nofollow' href="bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" rel='nofollow' href="lib/backgrid.css"/>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="underscore-min.js"></script>
    <script src="backbone-min.js"></script>
    <script src="lib/backgrid.js"></script>
</head>

<body>
<div id="grid">
    <script type="text/javascript">
        var Territory = Backbone.Model.extend({});

        var Territories = Backbone.Collection.extend({
            model: Territory,
            url: "territories.json"
        });

        var territories = new Territories();

        var columns = [{
            name: "id", // The key of the model attribute
            label: "ID", // The name to display in the header
            editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
            // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
            cell: Backgrid.IntegerCell.extend({
                orderSeparator: ''
            })
        }, {
            name: "name",
            label: "Name",
            // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
            cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
        }, {
            name: "pop",
            label: "Population",
            cell: "integer" // An integer cell is a number cell that displays humanized integers
        }, {
            name: "percentage",
            label: "% of World Population",
            cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
        }, {
            name: "date",
            label: "Date",
            cell: "date"
        }, {
            name: "url",
            label: "URL",
            cell: "uri" // Renders the value in an HTML anchor element
        }];

        // Initialize a new Grid instance
        var grid = new Backgrid.Grid({
            columns: columns,
            collection: territories
        });

        // Render the grid and attach the root to your HTML document
        $("#example-1-result").append(grid.render().el);

        // Fetch some countries from the url
        territories.fetch({reset: true});
    </script>
</div>
</body>

</html>

Thanks for your time!

how to customize backgrid row

<script type="text/template" id="date-cell">
    <%= date.dateBegin %> até <%= date.dateEnd %>
    <br>
    <%= date.timeBegin %> até <%= date.timeEnd %>
</script>

<script type="text/template" id="status-cell">
    <% if (order.enable) { %>
        <% _.each(order.contacts, function(contact) { %>
            <span class="contact-type"><%= contact.value %></span>
        <% }); %>
    <% } else { %>
        <% if (order.expired) { %>
            <span class="label label-expired">Expirado</span>
        <% } else { %>
            <span class="label label-closed">Fechado</span>
        <% } %>
    <% } %>
</script>

<script type="text/javascript">
    var onRefreshGrid;

    $(function() {

        var Order,
            OrderCollection,
            orders,
            grid;

        Order = Backbone.Model.extend({});

        OrderCollection = Backbone.Collection.extend({
            modal: Order,
            url: 'http://localhost:2000/orders.php'
        });

        orders = new OrderCollection();

        var columns = [{
            name : "hash",
            label: "Cod. Pedido",
            cell : 'string',
            editable: false
          },
          {
            name : "user",
            label: "Nome",
            cell: "string",
            editable: false
          },
          {
            name : "order",
            label: "Status",
            cell : Backgrid.StringCell.extend({
                template: _.template($('#status-cell').html()),
                render: function () {
                    this.$el.html(this.template(this.model.attributes));
                    return this;
                }
            }),
            editable: false
          },
          {
            name : "date",
            label: "Data",
            cell: Backgrid.StringCell.extend({
                template: _.template(
                    $('#date-cell').html()
                ),
                render: function() {
                    this.$el.html(this.template(this.model.attributes));
                    return this;
                }
            }),
            editable: false
        }];

        // Initialize a new Grid instance
        grid = new Backgrid.Grid({
            columns: columns,
            collection: orders
        });

        // Render the grid and attach the root to your HTML document
        $('#datagrid').append(grid.render().el);

        onRefreshGrid = function () {
            orders.fetch({});
        };

        // auto execute
        onRefreshGrid();

    });
</script>

I need to add a background-color to each row (tr) according to a condition, was looking at the documentation met "Backgrid.Row.extend" what you can do, just that I need to create a base template .. that would replicate in each row (tr), just that I also have some columns costumizo as the code shows. My question is .. You can add an event to listen to each line and I can only change its attributes without disrupting the structure (html)?