i´m trying to do a component in laravel 9 and vueJS 3. And my component have a datatable and for this i´m using vue-good-table-next but i can´t show it in my blade i don´t know that i´m doing wrong.
in my web browser return this:
[Vue warn]: There is already an app instance mounted on the host container.
If you want to mount another app on the same host container, you need to unmount the previous app by calling `app.unmount()` first.
in my webpack.mix.js i have this:
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
in my app.js i have this:
require('./bootstrap');
import { createApp } from "vue";
import datatableFisios from "./components/datatableFisios.vue";
createApp({
components: {
datatableFisios,
},
}).mount("#app");
and my component it´s
<template>
<div>
<vue-good-table :columns="columns" :rows="rows"/>
</div>
</template>
<script>
export default {
name: 'datatableFisios',
mounted(){
console.log(`The initial count is.`)
},
data(){
return {
columns: [
{
label: 'Name',
field: 'name',
},
{
label: 'Age',
field: 'age',
type: 'number',
},
{
label: 'Created On',
field: 'createdAt',
type: 'date',
dateInputFormat: 'yyyy-MM-dd',
dateOutputFormat: 'MMM do yy',
},
{
label: 'Percent',
field: 'score',
type: 'percentage',
},
],
rows: [
{ id:1, name:"John", age: 20, createdAt: '',score: 0.03343 },
{ id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
{ id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
{ id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
{ id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
{ id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
],
};
},
};
</script>
PD: it´s first time that i´m doing datatables with VUE, if anybody know any library better than this, say me please.
thanks for readme. and soyy for my bad english.
To resolve my problem i had to update vue-js-loader with this command npm update vue-loader with this i can mount my component and to do my datatable with vue-good-table-next
Problem is that when I choose multiple checkbox and filter for something all checkbox selected returns to normal all checkbox's (un-checked)
my question is : Can I do the checked some checkbox's and filter for something without do any changes on my rows checked
please check photos in below :
1 - Checked some rows
2 - filter some rows where contains 'ss'
3 - here my problem, after press ok on filter get rows without
checked
when i'm using kendo ui v.2018 see image
please help me!!
Thanks UW.
Try setting the persistSelection property of your grid to true.
$("#grid").kendoGrid({
columns: [
{ selectable: true, width: "50px" },
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33},
{ id: 3, name: "Jim Doe", age: 30 },
{ id: 4, name: "Jack Doe", age: 33}
],
schema: {
model: { id: "id" }
}
},
filterable: true,
pageable: {
pageSize: 2
},
persistSelection: true
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<div id="grid">
I need some help. When creating dashboard I know that it need to fill parts object
parts: {
portlet: {
viewTemplate: {
layout: 'fit',
html: 'messafe from portlet'
}
},
portlet2: {
viewTemplate: {
layout: 'fit',
html: 'message from portlet2'
}
}
}
also I know that I can use them below to render parts
defaultContent: [{
type: 'portlet',
title: 'Test1',
columnIndex: 0,
height: 500
}, {
type: 'portlet2',
title: 'Test2',
columnIndex: 1,
height: 300
}, {
type: 'portlet',
title: 'Test3',
columnIndex: 1,
height: 300
}, {
type: 'portlet',
title: 'Test4',
columnIndex: 2,
height: 350
}, {
type: 'portlet',
title: 'Test5',
columnIndex: 3,
height: 350
}]
now my question is now add(do all this job) programmatically? for example I want to create new component on button click
I use ui-router and ui-grid in a project.
I receive a TypeError when I switch the state to a different view which contains a ui-grid.
I did not had this issue without the ui-router. I've experimented with a single html-page that contained a ui-grid. No problems there. When I implemented the ui-router the TypeError occured.
I've added a demo on plunkr. http://plnkr.co/edit/FzsxLDNGRWQrpGUKNHBa?p=preview
As you can see in the following piece of code in my app.js, my module gets populated with dependencies for ui-router and ui-grid.
var app = angular.module('app', [
'ui.router',
'ui.grid'
]);
If you switch to the second view in this demo, you will see an empty ui-grid. Chrome developper tools report the TypeError.
You are referring the View2Controller as vm in your template but the gridOptions is add in the $scope, just change the $scope.gridOptions to vm.gridOptions and it will work.
vm.gridOptions = {
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
},
data: 'vm.customers',
columnDefs: [
{
field: 'status', name: '', width: 50, sort: {
direction: uiGridConstants.DESC,
priority: 0
}
},
{
field: 'member', name: 'M', width: 50, type: 'boolean',
cellTemplate: '<input type="checkbox" ng-model="row.entity.lid" >'
},
{
field: 'company', name: 'Company', width: 200, minWidth: 200, maxWidth: 600
},
{ field: 'creationDate', name: 'Date', width: 120, cellClass: 'right-align', type: 'date' },
]
};
http://plnkr.co/edit/mpRYJZKEnwPIRefPQc9J?p=preview
I am new for sencha touch. I need to add , update a data record detail. But I don't have any idea. Here is my sample code
View.js
Ext.define('bluebutton.view.BlueButton.Loyalty', {
extend: 'Ext.Container',
xtype: 'loyaltycard',
requires: [
'bluebutton.view.BlueButton.TransactionList',
'bluebutton.view.BlueButton.MemberPopUp',
'bluebutton.view.BlueButton.MemberDetail',
'Ext.ux.keypad.Keypad',
'Ext.Img'
],
config: {
// iconCls: 'add_black',
// title :'Loyalty Point',
styleHtmlContent: true,
cls: 'styledContent',
//
layout: 'hbox',
border: 3,
ui: 'round',
defaults: {
margin : '10 10 10 10',
padding : 10
},
items :[
{
flex: 1,
cls :'containerRadious' ,
xtype :'container',
items :[
{
xtype: 'fieldset',
title: 'Welcome, new member ~<i><u>Kenny</u></i>',
defaults: {
labelWidth: '35%',
style: 'font-size:1.0em'
},
items: [
{
xtype: 'image',
src: 'resources/images/user3.png',
height: 100,
margin:20
},
{
xtype: 'textfield',
name : 'Name',
label: 'Name',
value :'Kenny Chow',
readOnly: true
},
{
xtype: 'textfield',
name : 'Age',
label: 'Age',
value :'20',
readOnly: true
},
{
xtype: 'textfield',
name : 'Point Available',
label: 'Point Available',
value :'50',
id :'pointAvalaible',
readOnly: true
},
{
xtype: 'textfield',
name : 'Last Visited',
label: 'Last Visited',
value :'27/12/2012 11:53 AM',
readOnly: true
},
{
xtype:'button',
text: 'Add',
handler: function() {
}
},
{
xtype:'button',
text: 'Delete',
handler: function() {
}
},
{
xtype:'button',
text: 'update',
handler: function() {
}
}
]
}
]
},
{
flex: 2,
xtype :'container',
cls :'containerRadious' ,
items :[
{
centered : true,
xtype :'keypad',
margin : '30',
}
]
}
],
}
});
Model.js
Ext.define('bluebutton.model.BlueButton.MemberList', {
extend: 'Ext.data.Model',
config: {
idProperty: 'memberModel',
fields: [
{ name: 'memberId' },
{ name: 'name' },
{ name: 'messages' },
{ name: 'imgUrl' },
{ name: 'age' },
{ name: 'address' },
{ name: 'pointAvalaible' },
{ name: 'lastVisited' },
]
}
});
Store.js
Ext.define('bluebutton.store.BlueButton.MemberList', {
extend: 'Ext.data.Store',
requires: [
// 'bluebutton.model.BlueButton.MemberList'
],
config: {
grouper: {
groupFn: function (record) {
return record.get('name')[0];
}
},
proxy: {
type: 'ajax',
api: {
create : 'index.php?r=show/add',
read : 'index.php?r=show/read',
update : 'index.php?r=show/update',
destroy: 'index.php?r=show/delete'
}
},
model :'memberModel',
storeId :'memberStore',
autoLoad:false,
pageSize: 5,
clearOnPageLoad: false,
data: [{
memberId: 'Kenny',
name: 'Kenny Chow',
imgUrl: 'resources/images/user3.png',
age: '20',
address:'The Business Centre , 61 Wellfield Road , Roath, Cardiff, CF24 3DG',
pointAvalaible :'10',
lastVisited: '26/11/2012, 11:52 AM',
}, {
memberId: 'Anthony',
name: 'Anthony Tan',
imgUrl: 'resources/images/user3.png',
age: '21',
address:'3 Edgar Buildings , George Street , Bath , England , BA1 2FJ',
pointAvalaible :'45',
lastVisited: '27/11/2012, 09:52 AM'
},
{
memberId: 'Nicholas',
name: 'Nicholas Chen',
imgUrl: 'resources/images/user3.png',
age: '22',
address: '91 Western Road , Brighton ,East Sussex ,England ,BN1 2NW ',
pointAvalaible :'30',
lastVisited: '30/11/2012, 15:52 PM'
},
{
memberId: 'Admin2',
name: 'Admin2',
imgUrl: 'resources/images/user3.png',
age: '30',
address: '50 Eestern Road , Brighton ,West Sussex ,England ,BN1 34W ',
pointAvalaible :'120',
lastVisited: '01/12/2012, 15:52 PM'
},
{
memberId: 'Ahmad',
name: 'Ahmad Mohamad',
imgUrl: 'resources/images/user3.png',
age: '25',
address:'Office 33 ,27 Colmore Row ,Birmingham, England ,B3 2EW',
pointAvalaible :'32',
lastVisited: '30/11/2012, 18:52 PM'
}
,
{
memberId: 'AronTan',
name: 'Tan Wan Hua',
imgUrl: 'resources/images/user3.png',
age: '26',
address:'Office 33 ,27 Colmore Row ,Birmingham, England ,B3 2EW',
pointAvalaible :'32',
lastVisited: '30/11/2012, 18:52 PM'
},
{
memberId: 'Justin',
name: 'Wong Choon Wah',
imgUrl: 'resources/images/user3.png',
age: '25',
address:'Office 33 ,27 Colmore Row ,Birmingham, England ,B3 2EW',
pointAvalaible :'32',
lastVisited: '30/11/2012, 18:52 PM'
},
{
memberId: 'User5',
name: 'User2',
imgUrl: 'resources/images/user3.png',
age: '25',
address:'Office 33 ,27 Colmore Row ,Birmingham, England ,B3 2EW',
pointAvalaible :'32',
lastVisited: '30/11/2012, 18:52 PM'
}
]
}
});
Please provide me some example
I suspect you need to get started using Jersey for implementing the server side code.
Here's what I would suggest:
Start listing down the services that you would need. (Add/ Update data record detail)
Have a look at this tutorial by mkyong for getting started with Jersey.
Implement the first cut which works.
Try to improve and iterate by reading more about Jersey features (Annotations, POJO Mapping, ExceptionMapper etc.)