I am wondering if it is possible to customize pagination page size in Angular Ui Grid? I was looking for it in the documentation, however, I was not able to find any information about it.
The problem I have is that when I'am trying to use :
<select ng-model="gridApi.grid.options.paginationPageSize">
<option>5</option>
<option>10</option>
<option>20</option>
<option>25</option>
</select>
And when angular compile it, there is an extra option added to the Html (I guess from ng-model):
<option value="? number:20 ?"></option>
Any ideas?
Thanks
This seems to work for me:
var app = angular.module('app', ['ui.bootstrap', 'ui.grid', 'ui.grid.pagination']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.data = [
{ name: 'Alex', car: 'Toyota' },
{ name: 'Sam', car: 'Lexus' },
{ name: 'Joe', car: 'Dodge' },
{ name: 'Bob', car: 'Buick' },
{ name: 'Cindy', car: 'Ford' },
{ name: 'Brian', car: 'Audi' },
{ name: 'Malcom', car: 'Mercedes Benz' },
{ name: 'Dave', car: 'Ford' },
{ name: 'Stacey', car: 'Audi' },
{ name: 'Amy', car: 'Acura' },
{ name: 'Scott', car: 'Toyota' },
{ name: 'Ryan', car: 'BMW' },
{ name: 'Brad', car: 'Chevrolet' },
{ name: 'Leonard', car: 'Ford' },
{ name: 'Chris', car: 'Dodge' },
{ name: 'Brett', car: 'Hyundai' },
{ name: 'Jim', car: 'Kia' },
{ name: 'Fred', car: 'Nissan' },
{ name: 'Todd', car: 'Volkswagen' },
{ name: 'Gregory', car: 'Audi' },
{ name: 'Martin', car: 'BMW' },
{ name: 'Lisa', car: 'Vauxhall' },
{ name: 'Megan', car: 'Renault' },
{ name: 'Audrey', car: 'Citroen' },
{ name: 'Janelle', car: 'Pugeot' },
{ name: 'Jaquelin', car: 'Lada' },
{ name: 'Rosa', car: 'Mitsubishi' },
{ name: 'Naomi', car: 'Saturn' },
{ name: 'Brittany', car: 'BMW' },
{ name: 'Tracy', car: 'Cadillac' },
{ name: 'Chloe', car: 'Hummer' },
{ name: 'Augustus', car: 'Mercedes Benz' },
{ name: 'Lauren', car: 'Porsche' },
{ name: 'Howard', car: 'Subaru' },
{ name: 'Stan', car: 'Plymouth' },
{ name: 'Kyle', car: 'Honda' },
{ name: 'Kenny', car: 'Suzuki' },
{ name: 'Eric', car: 'Holden' },
{ name: 'Randy', car: 'Chrysler' },
];
$scope.numRows = 10;
$scope.rowHeight = 30;
$scope.headerRowHeight = 30;
$scope.gridOptions = {
data: 'data',
totalItems: $scope.data.length,
minRowsToShow: 5,
enablePaginationControls: false,
paginationCurrentPage: 1,
paginationPageSize: 10,
paginationPageSizes: [5, 10, 15, 20],
columnDefs: [
{name: 'name'},
{name: 'car'}
]
};
}]);
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script data-require="ui-bootstrap#0.13.3" data-semver="0.13.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-pagination="" ng-style="getTableStyle()"></div>
<div class="text-center" ng-show="gridOptions.totalItems > numRows">
<pagination class="pagination-sm" total-items="gridOptions.totalItems" items-per-page="gridOptions.paginationPageSize" ng-model="gridOptions.paginationCurrentPage"></pagination>
</div>
<select ng-model="gridOptions.paginationPageSize" ng-options="o as o for o in gridOptions.paginationPageSizes"></select>
</div>
<script src="app.js"></script>
</body>
</html>
Related
I have a select2 as below:
<select class="form-select" id="ds" name="ds" tabindex="1" required></select>
I populate it using:
var data = [{ id: "0", text: "" }, { id: "1", text: "List" }, { id: "2", text: "Tags" }];
$('#ds').select2({
data: data
})
I try to validate it using below, but it's not working, what did I do wrong?
$form.each(function() {
var $this = $(this);
$this.validate({
rules: {
data_source: {
required: true
}
},
messages: {
data_source: {
required: 'Data source field is required'
}
}
});
});
I followed this tutorial for adding social media cards to my site: https://www.gatsbyjs.com/tutorial/seo-and-social-sharing-cards-tutorial/
However, my url https://www.peregrinastro.com/articles/jupiter-saturn-conjunction-in-aquarius-part-1-fresh-air still returns this in twitter card validator:
INFO: Page fetched successfully
INFO: 5 metatags were found
ERROR: No card found (Card error)
I can see that I have all the metatags, so what can be the issue?
SEO component :
import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"
function SEO({ description, lang, meta, image: metaImage, title }) {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
keywords
author
url
twitter
facebook
}
}
}
`
)
const metaDescription = description || site.siteMetadata.description
const image =
metaImage && metaImage.src
? `${site.siteMetadata.url}${metaImage.src}`
: null
return (
<Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={`%s | ${site.siteMetadata.title}`}
meta={[
{
name: `description`,
content: metaDescription,
},
{
name: "keywords",
content: site.siteMetadata.keywords.join(","),
},
{
property: `og:title`,
content: title,
},
{
property: `og:description`,
content: metaDescription,
},
{
property: `og:type`,
content: `website`,
},
{
property: `og:site_name`,
content: title,
},
{
property: `og:url`,
content: site.siteMetadata.url,
},
]
.concat(
metaImage
? [
{
property: "og:image",
content: image,
},
{
property: "og:image:width",
content: metaImage.width,
},
{
property: "og:image:height",
content: metaImage.height,
},
{
name: "twitter:card",
content: "summary_large_image",
},
{
name: "twitter:image:src",
content: image,
},
]
: [
{
name: "twitter:card",
content: "summary",
},
]
)
.concat([
{
name: `twitter:creator`,
content: site.siteMetadata.twitter,
},
{
name: `twitter:title`,
content: title,
},
{
name: `twitter:description`,
content: metaDescription,
},
{
name: `twitter:site`,
content: site.siteMetadata.twitter,
},
])
.concat(meta)}
/>
)
}
SEO.defaultProps = {
lang: `en`,
meta: [],
description: ``,
}
SEO.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
image: PropTypes.shape({
src: PropTypes.string.isRequired,
height: PropTypes.number.isRequired,
width: PropTypes.number.isRequired,
}),
}
export default SEO
gatsby-config.js
const { isNil } = require("lodash")
const mapPagesUrls = {
index: "/",
}
module.exports = {
siteMetadata: {
title: `Peregrin Astrology`,
description: `astrology blog, horoscopes, mundane, historical astrology, birth chart consultations.`,
keywords: [
"astrology",
"astrologer",
"zodiac",
"signs",
"aries",
"taurus",
"gemini",
"cancer",
"leo",
"virgo",
"libra",
"scorpio",
"sagittarius",
"capricorn",
"aquarius",
"pisces",
"horoscope",
"forecast",
"mundane",
"birth chart",
],
author: `Pedro Coelho`,
url: "https://www.peregrinastro.com",
siteLanguage: "english",
twitter: "#peregrinastro",
facebook: "peregrinastro",
},
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/favicon.png`, // This path is relative to the root of the site.
},
},
{
resolve: `gatsby-source-strapi`,
options: {
apiURL: `https://astrobeats-cms.herokuapp.com`,
queryLimit: 10000, // Default to 100
contentTypes: [`article`, `category`, `author`],
//If using single types place them in this array.
},
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "fonts",
path: `${__dirname}/src/fonts/`,
},
},
{
resolve: "gatsby-plugin-web-font-loader",
options: {
google: {
families: ["Merriweather", "Montserrat", "Lato:100,300,400,700,900"],
},
},
},
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /assets/,
},
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images/`,
},
},
],
}
I am using the plugin: https://github.com/WakuwakuP/element-ui-el-table-draggable
but I only see an example to drag the fields.
<el-table-draggable handle=".handle">
<el-table :data="tableData" :header-cell-class-name="headerRow">
<div class="handle">
<el-table-column prop="date" label="Fecha" class="handle">
<template slot-scope="scope">
<!-- <div class="handle"> -->
<label class="text-thicker">{{ scope.row.date}}</label>
handle
<!-- </div> -->
</template>
</el-table-column>
</div>
<el-table-column prop="name" label="Name">
<template slot-scope="scope">
<div>
<label class="text-thicker">{{ scope.row.name}}</label>
handle
</div>
</template>
</el-table-column>
</el-table>
</el-table-draggable>
and in the model I have it like this:
data() {
return {
tableData: [{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}],
}
}
I am applying the handle class to a div that encloses but it doesn't work for me, how can I drag the columns?
this works for me
<el-table border :data="tableData" size="mini" >
<el-table-column
v-for="(item, index) in elTheadList"
:prop="dataTheadList[index]"
:label='item'
:key="`thead_${index}`"
>
</el-table-column>
</el-table>
data() {
return {
tableData: [{
date: '2016-05-01',
name: 'Cristian Millan',
address: 'Baja #11'
},{
date: '2016-05-02',
name: 'Jorge Cabrera',
address: 'Progreso #18'
},{
date: '2016-05-03',
name: 'Armando Mendivil',
address: 'Novena #12'
}],
dataTheadList: [
'date',
'name',
'address'
],
elTheadList: ['Date', 'Name', 'Address'],
}
},
mounted() {
const el = document.querySelector('.el-table__header-wrapper tr')
this.sortable = Sortable.create(el, {
animation: 180,
delay: 0,
onEnd: evt => {
const oldItem = this.dataTheadList[evt.oldIndex]
this.dataTheadList.splice(evt.oldIndex, 1)
this.dataTheadList.splice(evt.newIndex, 0, oldItem)
}
})
}
How do I remove an object from an array of objects in Knockoutjs.
I am new to knockoutjs and any help will be appreciated.
A link to Jsfiddle
Line 24 in the HTML code on jsfiddle is the click binding to delete.
Line 67 in the javascript code on js fiddle is where the function to remove an object from the array is made.
I tried to use indexOf and splice Array functions on line 68 and 69 and it worked to remove but the DOM was not being updated.
Please take a look at the function removeProduct: function (product)
Html
<div>List of Product (<span data-bind="text: products().length"></span>)
</div>
<ul data-bind="foreach: products">
<li><span data-bind="text:name"></span>
Select
</li>
</ul>
<div>List of Group Ideas</div>
<ul data-bind="foreach: GroupIdeas">
<li data-bind="text:name">
<input type="button" value="Removethis" />
<input type="button" value="vote" />
</li>
</ul>
<div>List of Group members</div>
</body>
Javascript
$(function () {
var viewModel = {
productPrice: ko.observable(89),
productQty: ko.observable(2),
products: ko.observable([
{ name: "shoe", price: "788", id: 1 },
{ name: "blouse", price: "50", id: 2 },
{ name: "dress", price: "16", id: 3 },
{ name: "lipstick", price: "88", id: 4 },
{ name: "earring", price: "4", id: 5 },
{ name: "bra", price: "96", id: 6 },
{ name: "lingeringe", price: "48", id: 7 },
{ name: "neclace", price: "36", id: 8 },
]),
GroupIdeas: ko.observable([
{ name: "shoe", price: "788", prodId: 1, selectedby: "Akuba", memId:
1, votes: 3 },
{ name: "lingeringe", price: "48", prodId: 7, selectedby: "Isaac",
memId: 2, votes: 6 },
]),
GroupMember: ko.observable([
{ name: "Akuba", relation: "friend", id: 1 },
{ name: "Isaac", relation: "Husband", id: 2 },
{ name: "Ira", relation: "Sister", id: 3 },
{ name: "Davida", relation: "Mum", id: 4 }
]),
partyPerson: ko.observable("Ida"),
partyOrganiser: ko.observable("Royce"),
//addProduct = function () { /* ... leave unchanged ... */ }
removeProduct: function (product) {
/*var indexArr = viewModel.products().indexOf(product);
viewModel.products().splice(indexArr, 1)
*/
viewModel.products().remove(product)
console.log(product);
}
};
viewModel.totalAmt = ko.computed(function () {
return this.productPrice() * this.productQty();
}, viewModel);
ko.applyBindings(viewModel);
//ko.applyBindings(giftModel);
})**
Here's your updated fiddle.
You need to make products an observable array to take advantage of the remove function.
You need to make a reference to the viewmodel before you can refer to products, so your removeProduct function has to be written after the viewmodel initialisation. Similar to how you have written totalAmt.
viewModel.removeProduct = function (product) {
viewModel.products.remove(function(item){
return item.id === product.id;
});
}
I have a ui grid that contains a directive, this directive has an isolated scope and changes it's template basing on some logic.
The problem is that, when sorting (and also when PAGING), the 'logic' of the directive seems to not be correctly "re-evaluated".
In the specific example, the rightmost column should only see some "11" while if you try to sort by id (or the other fields) you'll see some spurios '0' appearing.
this is the ui:
<div ng-app="myapp">
<div ng-controller="myctrl">
<div ui-grid="gridOptions" ng-style="gridStyle"></div>
</div>
</div>
this is the js:
var myapp = angular.module('myapp', ["ngRoute", "ui.grid"])
.controller('myctrl', function($scope) {
$scope.gridOptions = {
data: [{
id: 1,
name: "Max",
other: "pippo",
number: 1
}, {
id: 2,
name: "Adam",
other: "pluto",
number: 0
}, {
id: 3,
name: "Betty",
other: "paperino",
number: 0
}, {
id: 4,
name: "Sara",
other: "fava",
number: 1
}, {
id: 5,
name: "Favonio",
other: "favona",
number: 1
}],
columnDefs: [{
field: "id",
displayName: "ID"
}, {
field: "name",
displayName: "Name"
}, {
field: "other",
displayName: "Other"
}, {
field: "number",
cellTemplate: '<div class="ui-grid-cell-contents"><mydir data="row.entity"></mydir></div>'
}]
};
}).directive("mydir", function() {
return {
restrict: 'E',
scope: {
data: "=",
},
template: '<div><label ng-if="data.number==1">{{set}}</label></div>',
link: function(scope, iElement, iAttrs) {
scope.set = -1;
if (scope.data.number == 0) {
scope.set = 00;
} else {
scope.set = 11;
}
}
}
});
and here's a fiddle:
https://jsfiddle.net/27yrut4n/
Any hint?
In the end it's a known bug:
https://github.com/angular-ui/ui-grid/issues/4869
And I solved using watch like it's said here:
Directive rendered via UI-Grid cellTemplate rendering incorrectly