I am just learning the basics of backgrid.js. So when I attempt to replicate the code on the main page Backgrid.js, I am unable to render a grid due to a particular error when passing in an array of objects for the columns. I believe I am using proper format
var columns = [
{ name: "name", label: "Name", cell: "string" },
{ name: "address", label: "Address", cell: "string" },
{ name: "tel", label: "Phone", cell: "integer" },
{ name: "email", label: "Email", cell: "string" },
{ name: "type", label: "Contact Type", cell: "string" }
];
The error Uncaught TypeError: Object [object Object] has no method 'listenTo' occurs in the process of initializing the grid at this step:
var grid = new Backgrid.Grid({
columns: columns,
collection: this.collection
});
Is there an issue with how I am initializing the grid?
The issue was with the version of backbone.js I was using. I reccommend using the proper version of libraries.
Backgrid.js depends on 3 libraries to function:
jquery >= 1.7.0, underscore.js ~ 1.4.0, and backbone.js ~ 0.9.10.
Here's a simple structure on how to use it.
HTML
<div id="container"></div>
JS
$(function(){
/** Columns definition */
var columns = [
{ name: "name", label: "Name", cell: "string" },
{ name: "address", label: "Address", cell: "string" },
{ name: "tel", label: "Phone", cell: "integer" },
{ name: "email", label: "Email", cell: "string" },
{ name: "type", label: "Contact Type", cell: "string" }
];
/** Model instance */
var mdl = Backbone.Model.extend({});
/** Collection instance */
var col = Backbone.Collection.extend({
model: mdl
});
/** Test array of JSON (usually coming from a server) */
var json = [
{"name": "Goose", "address": "a 1st address", "tel": 25500100, "email": "w#test.net","type": 1},
{"name": "Ducky", "address": "a 2nd address", "tel": 25500123, "email": "w#test1.net","type": 2}
];
/** Create the Grid */
var grid = new Backgrid.Grid({
columns: columns,
collection: new col(json)
});
/** Add the Grid to the container */
$("#container").append(grid.render().$el);
});
Related
In my project, I have an antd table. In that table, I'm listing athletes. When I click on the athlete's name, I should be navigated to the athlete profile page.
Route for athlete profile /athletes/{id}
But with the table, I can't get any value for this id.
Here is my data source
[
{
email: "x#x.com",
firstName: "X",
id: 402,
lastName: "X"
},
{
email: "y#y.com",
firstName: "Y",
id: 403,
lastName: "Y"
},
{
email: "z#z.com",
firstName: "Z",
id: 404,
lastName: "Z"
}
]
And following is the code for the column object
const columns = [
{
title: "First Name",
dataIndex: "firstName",
className: "col-first-name",
render: (text) => (
<Link to={"/athletes/" + ???}>{text}</Link>
),
},
{
title: "Last Name",
dataIndex: "lastName",
className: "col-last-name"
},
{
title: "Email",
dataIndex: "email",
className: "col-email",
}
];
(I have added "???" where the id should be, in the above code)
Is there any way to add the id property into the ? Can anyone help me with this?
react-router version - "^5.1.2"
antd version - ^3.25.3
You need to pass another parameter inside render which is record which contains all data about that specific row. Something like this:
const columns = [
{
title: "First Name",
dataIndex: "firstName",
className: "col-first-name",
render: (text,record) => (
<Link to={"/athletes/" + record.id}>{text}</Link>
),
},
{
title: "Last Name",
dataIndex: "lastName",
className: "col-last-name"
},
{
title: "Email",
dataIndex: "email",
className: "col-email",
}
];
I created this demo for reference: https://stackblitz.com/edit/react-ym57ax?file=index.js
The render function receive three parameters: first one is retrieved using the dataIndex, second one is the complete record and last one is the index.
You can use:
const columns = [{
title: "First Name",
dataIndex: "firstName",
className: "col-first-name",
render: (text, record) => (
<Link to={`/athletes/${record.id}`}>{text}</Link>
),
}, {
title: "Last Name",
dataIndex: "lastName",
className: "col-last-name"
}, {
title: "Email",
dataIndex: "email",
className: "col-email",
}];
Hello i'm trying to use ng-options to get a grouping of countries by region. It only works by repeating the group name in every row. Is it possible to do it using the following json :
$scope.countries = [
{ region: "americas", countries: [{ value: "usa", key: "1" }, { value: "mexico", key: "2" }] },
{ region: "Africa", countries: [{ value: "3", key: "Algeria" }, { value: "4", key: "Morocco" }, { value: "5", key: "Tunisia" }] },
];
ng-options is pretty locked down in it's definition, so you'll probably need to loop through your countries array and add the region, something like:
$scope.countries_with_regions = [];
$scope.countries.forEach(function(region){
region.countries.forEach(function(country){
country.region = region.region;
$scope.countries_with_regions.push( country );
});
});
then you can do your ng-options with the countries_with_regions
You data structure fo countries needs to be like
countries = [{value : 3, key: "algeria", region : "africa"}, ...]
for the ng-options to be able to "group by" region.
I use kendo ui grid with angular. I want the grid to be updated with every change in the array (of any property). Meaning, if my data is:
this.rowData = [{ id: "1", name: "A", age: "16" }, { id: "2", name: "B", age: "42" }];
and the age is changed from 16 to 17 I want the grid to be updated automatically.
I understand that I can use ObservableArray and when updating the observable the grid will be updated but I don't want the entire application to know the observable. I want to be able to update the original rowData and affect the grid. Any suggestions of how I do that?
I thought that adding a template to a row or a specific column with angular binding will help but it didn't, here is an example of it:
function Controller(GridConstants) {
this.rowData = [{ id: "1", name: "A", age: "16" }, { id: "2", name: "B", age: "42" }];
this.gridDataSource = new kendo.data.DataSource({
data: new kendo.data.ObservableArray(this.rowData),
schema: {
model: { id: "id" }
}
});
this.gridOptions = {
dataSource: this.gridDataSource,
selectable: "row",
columns: [
{
field: "name",
title: "Name"
},
{
field: "age",
title: "Age",
template: "<label>{{dataItem.age}}</label>"
}
],
selectable: "single"
};
}
You can try ng-bind instead:
template: "<label ng-bind='dataItem.age'></label>"
var rowDataObservable = new kendo.data.ObservableArray(this.rowData);
...
data: rowDataObservable,
...
//and you need work with rowDataObservable, this will work
rowDataObservable[0].age = 17;
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 }
];
add a renderable: false attribute. See renderable here http://wyuenho.github.io/backgrid/api/index.html#!/api/Backgrid.Column
Simply remove the column definition. You don't need a column definition for each addribute in your data; you only need the column definition of attributes you want visible in the table.
var columns = [
{ 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 }];
The attribute renderable:false didn't work for me hence used below as workaround
var HideCell = Backgrid.HideCell = Backgrid.Cell.extend({
/** #property */
className: "hide-cell",
initialize: function () {
Backgrid.Cell.prototype.initialize.apply(this, arguments);
},
render: function () {
this.$el.hide();
return this;
}
});
use in column as cell "hide"
var columns = [
{ name: "id", label: "Id", cell: HideCell, editable: false }
];
I'm trying to render a table view with four columns, 'name', 'birthday', 'gender', 'married', but
a) they columns aren't showing up at all
b) I'm not even sure if I am passing them correctly, because when I console.log table.options the columns property is rendered as "empty":
Object {columns: Array[0], emptyContent: "no entries", onItemClick: function, sortable: false, onSort: null}
I've tried this:
var table = new Backbone.UI.TableView({
model: people,
columns: [
{ title: "Name", content: 'name' },
{ title: "Gender", content: "gender" } },
{ title: "Birthday", content: "birthday" } },
{ title: "Married", content: "married" } }
]
});
And this:
var table = new Backbone.UI.TableView({
model: people,
options: {
columns: [
{ title: "Name", content: 'name' },
{ title: "Gender", content: "gender" },
{ title: "Birthday", content: "birthday" },
{ title: "Married", content: "married" }
]
}
});
The source code change is adding the options as mu is too short said. Change the initialize method of the Backbone.UI.TableView object to be the following within the source code:
initialize : function(options) { //add parameter
Backbone.UI.CollectionView.prototype.initialize.call(this, arguments);
$(this.el).addClass('table_view');
this._sortState = {reverse : true};
this.options = _.extend({}, this.options, options); //Add this line
}
I'm sure there might be a better place to put this but I'm just going through tutorials to learn some advanced backbone stuff considering the documentation does not match the current version I would shy away from using the library in production as of right now. Hopefully it is fixed in the future.