Develop Reference

How to trigger sort function in custom v-data-table column headers?

I have a v-data-table that groups items. When using a custom header with v-slot like below - how do I enable the built in sort functionality that's on the default header?
is there a way I can trigger the built in sort function with my sortThisColumn function, or any other way? At the moment, my table headings are unclickable.
<v-app class="v-app-custom" v-if="myItems.length > 0">
<div class="section">
<v-data-table
:headers="headers"
:items="myItems"
:items-per-page="30"
hide-default-footer
hide-default-header
item-key="uuid"
group-by="mentor_id"
class="mentor-table"
>
<template v-slot:header="{ props }">
<thead class="v-data-table-header">
<tr>
<th
class="text-start"
v-for="header in props.headers"
:key="header.value"
:style="{ width: `${header.width}px` }"
#click="sortThisColumn(header.value)"
>
<span>{{ header.text }}</span>
<v-icon v-if="header.sortable" color="white" small>{{
sort[header.value] == "desc"
? "fa-chevron-down"
: "fa-chevron-up"
}}</v-icon>
</th>
</tr>
</thead>
</template>
<template
v-slot:group.header="{ group, props, headers }"
sort-icon="fa-chevron-down"
>
Table headers:-
headers: [
{
text: "Status",
value: "status",
width: 82,
sortable: false,
},
{ text: "Type", value: "type", width: 140, sortable: true },
{ text: "Creator", value: "creator", width: 140, sortable: true },
{ text: "Date", value: "due_date", width: 141, sortable: true },
{ text: "Mentor", value: "mentor", width: 141, sortable: true },
],

Check this codesanbox I made: https://codesandbox.io/s/stack-70975751-p9msn?file=/src/components/CustomSorting.vue
You can define a custom sorting function in your headers array like this. I've done this in the past to add a custom sort to one of my date columns.
headers: [
{
text: 'Date',
value: 'date',
align: 'center',
sort: (a, b) => {
var date1 = a.replace(/(\d+)\/(\d+)\/(\d+)/, '$3/$2/$1')
var date2 = b.replace(/(\d+)\/(\d+)\/(\d+)/, '$3/$2/$1')
return date1 < date2 ? -1 : 1
}
}
]
Knowing this, you could do something like this in your case.
data: (vm) => ({
headers: [
{
text: 'Date',
value: 'date',
sort: (a,b) => {
return vm.myCustomSort(a,b)
}
},
]
})

Set checkbox selected in Vue

I am beginner in vue and web developing. I make my app with Laravel and Vue.
I have this code:
created: function () {
let self = this;
self.setActive('tab1');
axios.get(this.$apiAdress + '/api/tasks/create?token=' + localStorage.getItem("api_token"))
.then(function (response) {
self.documentDircionary = response.data.documentDircionary;
self.selectedDocumentDircionary = response.data.selectedDocumentDircionary;
}).catch(function (error) {
console.log(error);
self.$router.push({path: '/login'});
});
<template v-for="(option) in documentDircionary">
<div class="form-group form-row" :key="option.name">
<CCol sm="12">
<input type="checkbox" name="selectedDocuments[]" :id="option.value" /> {{ option.label }}
</CCol>
</div>
</template>
This code show me inputs - and it's work fine.
I have problem with set selected attribute for selected checkbox.
In array selectedDocumentDircionary results from api:
"selectedProducts": [1,2,43]
How can I set checked for only this checkbox, witch selectedProducts?
Please help me

You can use :checked attribute to marked the checkbox checked as per the selectedProducts you have.
Working Demo :
const app = new Vue({
el: '#app',
data() {
return {
selectedProducts: [1, 2, 43],
documentDircionary: [{
name: 'checkbox1',
value: 1,
label: 'Checkbox 1'
}, {
name: 'checkbox2',
value: 2,
label: 'Checkbox 2'
}, {
name: 'checkbox3',
value: 3,
label: 'Checkbox 3'
}, {
name: 'checkbox4',
value: 4,
label: 'Checkbox 4'
}, {
name: 'checkbox43',
value: 43,
label: 'Checkbox 43'
}]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<div id="app">
<template v-for="option in documentDircionary">
<div :key="option.name">
<input type="checkbox" name="selectedDocuments[]" :id="option.value" :checked="selectedProducts.includes(option.value)" /> {{ option.label }}
</div>
</template>
</div>

You can set :checked based on if the id of the current element is in the array:
<template v-for="(option) in documentDircionary">
<div class="form-group form-row" :key="option.name">
<CCol sm="12">
<input type="checkbox" name="selectedDocuments[]" :id="option.value" :checked="selectedProducts.includes(option.value)" /> {{ option.label }}
</CCol>
</div>
</template>

How to update v-data-table data in real time?

I am developing a node and electron application. I'm using vuetify to generate the table (v-data-table) that loads data from an oracle database.
The data changes according to the value of input, but the table does not update!
When input values change: process.env.ANO_SEM = input.val()
then i call loadData() function
process.env.ANO_SEM is used as parameter for sql query in getEventos() function
My code:
$('#input').keyup(e => {
if (e.keyCode == 13) {
process.env.ANO_SEM = $('#input').val()
loadData()
}
})
// Get data from BD
async function getEventos() {
const sql = await fs
.readFileSync(path.join(process.env.ROOT_PATH, 'src/db/sql/get-evento.sql'))
.toString()
return await db.getData(sql, [process.env.ANO_SEM])
}
async function loadData() {
let data = await getEventos()
console.log(data) // the data aways change, but the table never update
new Vue({
el: '#app',
methods: {
rowClick(idEvento) {
require(path.join(process.env.CTRL_PATH, './evento/evento-ctrl.js'))(
window.$,
idEvento
)
}
},
data: function() {
return {
selectedItem: 'Sample',
pagination: {
sortBy: 'ID'
},
headers: [
{ text: 'ID', value: 'ID', align: 'center', width: '10%' },
{ text: 'Descrição', value: 'DESCRICAO', align: 'left', width: '60%' },
{ text: 'Período', value: 'PERIODO', align: 'left', width: '20%' },
{
text: 'Data Impressão',
value: 'DATA_IMPRESSAO',
align: 'left',
width: '10%'
}
],
eventos: data
}
}
})
}
my html:
<div id="app" class="table-eventos">
<v-app>
<v-data-table
:headers="headers"
:items="eventos"
:rows-per-page-items="[100]"
item-key="name"
class="elevation-1"
>
<!-- :pagination.sync="pagination" -->
<template slot="items" slot-scope="props">
<tr #click="rowClick(props.item.ID)">
<td class="text-xs-left">{{ props.item.ID }}</td>
<td class="text-xs-left">{{ props.item.DESCRICAO }}</td>
<td class="text-xs-left">{{ props.item.PERIODO }}</td>
<td class="text-xs-left">{{ props.item.DATA_IMPRESSAO }}</td>
</tr>
</template>
</v-data-table>
</v-app>
</div>

So basically what happens in your code is you load your vue into #app, this get rendered and your new #app element looks different - but still get linked to your new vue and rendered - but this time vue somehow fails.
long story short - put your render element into a static template that you can rerender:
i made a simple example from your sketch:
Vue.config.productionTip = false;
const mockData = Array.from({length: 100}, (_, i) => [{
DATA_IMPRESSAO: `mock${i}`,
PERIODO: `mock${i}`,
DESCRICAO: `mock${i}`,
ID: `mock${i}`,
}])
let nonReactiveIndex = Math.floor(Math.random()*mockData.length)
setInterval(() =>
new Vue({
template: "#example",
vuetify: new Vuetify(),
mounted() {
nonReactiveIndex = Math.floor(Math.random()*mockData.length)
console.log("mounted", nonReactiveIndex);
},
data() {
return {
headers: [
{ text: "ID", value: "ID", align: "center", width: "10%" },
{ text: "Descrição", value: "DESCRICAO", align: "left", width: "60%" },
{ text: "Período", value: "PERIODO", align: "left", width: "20%" },
{
text: "Data Impressão",
value: "DATA_IMPRESSAO",
align: "left",
width: "10%"
}
],
eventos: mockData[nonReactiveIndex]
};
},
}
).$mount('#app'), 2000)
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app" class="table-eventos">
</div>
<template id="example">
<v-app>
<v-data-table
:headers="headers"
:items="eventos"
:rows-per-page-items="[100]"
item-key="name"
class="elevation-1"
>
<!-- :pagination.sync="pagination" -->
<template slot="items" slot-scope="props">
<tr #click="rowClick(props.item.ID)">
<td class="text-xs-left">{{ props.item.ID }}</td>
<td class="text-xs-left">{{ props.item.DESCRICAO }}</td>
<td class="text-xs-left">{{ props.item.PERIODO }}</td>
<td class="text-xs-left">{{ props.item.DATA_IMPRESSAO }}</td>
</tr>
</template>
</v-data-table>
</v-app>
</template>
It is a better design to implement everything into the vue component and let vue handle reactivity:
Vue.config.productionTip = false;
const mockData = Array.from({length: 100}, (_, i) => [{
DATA_IMPRESSAO: `mock${i}`,
PERIODO: `mock${i}`,
DESCRICAO: `mock${i}`,
ID: `mock${i}`,
}])
new Vue({
template: "#example",
vuetify: new Vuetify(),
mounted() {
console.log("mounted", this.reactiveIndex);
},
data() {
return {
reactiveIndex : Math.floor(Math.random()*mockData.length),
headers: [
{ text: "ID", value: "ID", align: "center", width: "10%" },
{ text: "Descrição", value: "DESCRICAO", align: "left", width: "60%" },
{ text: "Período", value: "PERIODO", align: "left", width: "20%" },
{
text: "Data Impressão",
value: "DATA_IMPRESSAO",
align: "left",
width: "10%"
}
],
};
},
computed: {
eventos(){ return mockData[this.reactiveIndex] }
},
methods: {
load(){
this.reactiveIndex = Math.floor(Math.random()*mockData.length)
console.log(this.reactiveIndex)
}
}
}
).$mount('#app')
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app" class="table-eventos">
</div>
<template id="example">
<v-app>
<v-btn #click="load">load</v-btn>
<v-data-table
:headers="headers"
:items="eventos"
:rows-per-page-items="[100]"
item-key="name"
class="elevation-1"
>
<!-- :pagination.sync="pagination" -->
<template slot="items" slot-scope="props">
<tr #click="rowClick(props.item.ID)">
<td class="text-xs-left">{{ props.item.ID }}</td>
<td class="text-xs-left">{{ props.item.DESCRICAO }}</td>
<td class="text-xs-left">{{ props.item.PERIODO }}</td>
<td class="text-xs-left">{{ props.item.DATA_IMPRESSAO }}</td>
</tr>
</template>
</v-data-table>
</v-app>
</template>

I took the liberty of setting up the project structure with vue-cli and also added mock data and a text-field, let me know if you have any doubts, I'm pretty sure you'll get the point, clone the public repo, run
npm install
and then
npm run serve
https://github.com/sdpotts93/vue-simple-table

Returning variables from a Vue.js directive

Vue.js has a built-in directive called v-for which is used to literate over list.
HTML code
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
Script code
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
Here, by using the v-for directive, the elements in items array are returned as variables named item. Here, the variables returned by this v-for directive, can be used in the html DOM. How do I create such a custom directive which returns a variable to the html DOM?
Note: I did search for v-for directives source code in the source code of vuejs, but could not find. Please help me to get this as I am very new to vuejs. Thank you.
Edit:
What I currently have?
There are 3 similar input groups for inputting 'First Name', 'Last Name' and 'Address' respectively. Each input field has label, state, disabled, value, and max properties which are stored in a inputOptions array.
<!-- HMTL -->
<b-input-group :prepend="inputOptions.firstName.label">
<b-form-input
:state="inputOptions.firstName.state"
v-model="inputOptions.firstName.value"
:disabled="inputOptions.firstName.disabled"
:maxlength="inputOptions.firstName.max"
></b-form-input>
</b-input-group>
<b-input-group :prepend="inputOptions.lastName.label">
<b-form-input
:state="inputOptions.lastName.state"
v-model="inputOptions.lastName.value"
:disabled="inputOptions.lastName.disabled"
:maxlength="inputOptions.lastName.max"
></b-form-input>
</b-input-group>
<b-input-group :prepend="inputOptions.address.label">
<b-form-input
:state="inputOptions.address.state"
v-model="inputOptions.address.value"
:disabled="inputOptions.address.disabled"
:maxlength="inputOptions.address.max"
></b-form-input>
</b-input-group>
//Script
inputOptions: {
firstName: {
label: 'First Name',
state: true,
value: 'Foo',
disabled: true,
max: 45
},
lastName: {
label: 'Last Name',
state: true,
value: 'Bar',
disabled: true,
max: 45
},
address: {
label: 'Address',
state: false,
value: 'Foo, Bar.',
disabled: true,
max: 255
},
}
What I needed to achieve
For each input-group field, it is needed to provide the property names one by one. Assume that I have created a vue directive called mydirective and code is simplified as follows.
<!-- HMTL -->
<b-input-group v-mydirective="inputOptions.firstName as myProperty" :prepend="myProperty.label">
<b-form-input
:state="myProperty.state"
v-model="myProperty.value"
:disabled="myProperty.disabled"
:maxlength="myProperty.max"
></b-form-input>
</b-input-group>
<b-input-group v-mydirective="inputOptions.lastName as myProperty" :prepend="myProperty.label">
<b-form-input
:state="myProperty.state"
v-model="myProperty.value"
:disabled="myProperty.disabled"
:maxlength="myProperty.max"
></b-form-input>
</b-input-group>
<b-input-group v-mydirective="inputOptions.address as myProperty" :prepend="myProperty.label">
<b-form-input
:state="myProperty.state"
v-model="myProperty.value"
:disabled="myProperty.disabled"
:maxlength="myProperty.max"
></b-form-input>
</b-input-group>
//Script
inputOptions: {
firstName: {
label: 'First Name',
state: true,
value: 'Foo',
disabled: true,
max: 45
},
lastName: {
label: 'Last Name',
state: true,
value: 'Bar',
disabled: true,
max: 45
},
address: {
label: 'Address',
state: false,
value: 'Foo, Bar.',
disabled: true,
max: 255
},
}

HTML
In your template, iterate over the multiple inputOptions using v-for like:
<div id="app">
<b-input-group v-for="option in inputOptions" :key="option.label" :option="option" />
</div>
SCRIPT
Create custom components for the group, input, and label, like:
Vue.component('b-label', {
props: ['label'],
template: '<div>{{ label }}</div>'
})
Vue.component('b-form-input', {
props: ['state', 'value', 'disabled', 'maxlength'],
template: '<input type="text" :value="value" />'
})
Vue.component('b-input-group', {
props: ['option'],
template:
`<div>
<b-label :label="option.label" />
<b-form-input
:state="option.state"
v-model="option.value"
:disabled="option.disabled"
:maxlength="option.max" />
</div>`
})
FIDDLE
Here is a demo on JSFiddle
This is a basic example of how to use components. Whatever transformations you need to do to the strings can be done in the associated components, via computed properties or methods. You can see a demo by clicking the link where I use a computed property to transform the labels into lowercase. That should be enough to get you going.

How Can I Hide Kendo UI Grid Columns using JavaScript, React, Angular, Vue or ASP.NET MVC

I'm working on a HTML5 and JavaScript website.
Is it possible to have a hidden column in Kendo UI Grid and access the value using JQuery?

Using JavaScript
See the Kendo UI API reference.
Hide a column during grid definition
You can add hidden: true:
$("#gridName").kendoGrid({
columns: [
{ hidden: true, field: "id" },
{ field: "name" }
],
dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
Hide a column by css selector
$("#gridName").find("table th").eq(1).hide();
Hide a column by column index
var grid = $("#gridName").data("kendoGrid");
grid.hideColumn(1);
Hide a column by column name
var grid = $("#gridName").data("kendoGrid");
grid.hideColumn("Name");
Hide a column by column object reference
var grid = $("#gridName").data("kendoGrid");
grid.hideColumn(grid.columns[0].columns[1]);
Using React
See the Kendo UI for React API reference
Hide a column during grid definition
You can set show: false:
class App extends React.Component {
columns = [
{
title: 'Product Id',
field: 'ProductID',
show: false
},
{
title: 'Product Name',
field: 'ProductName',
show: true
},
{
title: 'Unit Price',
field: 'UnitPrice',
show: true
}
]
constructor() {
super();
this.state = {
columns: this.columns,
show:false
};
}
render() {
return (
<div>
<Grid data={products} >
{this.state.columns.map((column, idx) =>
column.show && (<Column key={idx} field={column.field} title={column.title} />)
)}
</Grid>
</div>
);
}
}
Using Angular
See the Kendo UI for Angular API reference
Hide a column during grid definition
You can add [hidden]="true"
#Component({
selector: 'my-app',
template: `
<kendo-grid [data]="gridData" [scrollable]="scrollable" style="height: 200px">
<kendo-grid-column [hidden]="true" field="ID" width="120">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name" width="200">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
</kendo-grid-column>
</kendo-grid>
`
})
Programmatically hide a column
#Component({
selector: 'my-app',
template: `
<div class="example-config">
<button (click)="restoreColumns()" class="k-button">Restore hidden columns</button>
</div>
<kendo-grid [data]="gridData" style="height:400px">
<ng-template ngFor [ngForOf]="columns" let-column>
<kendo-grid-column field="{{column}}" [hidden]="hiddenColumns.indexOf(column) > -1" >
<ng-template kendoGridHeaderTemplate let-dataItem>
{{dataItem.field}}
<button (click)="hideColumn(dataItem.field)" class="k-button k-primary" style="float: right;">
Hide
</button>
</ng-template>
</kendo-grid-column>
</ng-template>
</kendo-grid>
`
})
export class AppComponent {
public gridData: any[] = sampleCustomers;
public columns: string[] = [ 'CompanyName', 'ContactName', 'ContactTitle' ];
public hiddenColumns: string[] = [];
public restoreColumns(): void {
this.hiddenColumns = [];
}
public hideColumn(field: string): void {
this.hiddenColumns.push(field);
}
}
Using Vue
See the Kendo UI for Vue API reference
Hide a column during grid definition
You can add :hidden="true"
<kendo-grid :height="600"
:data-source-ref="'datasource1'"
:pageable='true'>
<kendo-grid-column field="ProductID" :hidden="true"></kendo-grid-column>
<kendo-grid-column field="ProductName"></kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" :width="120" :format="'{0:c}'"></kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="Units In Stock" :width="120"></kendo-grid-column>
</kendo-grid>
Using ASP.NET MVC
See the Kendo MVC API reference
Hide a column during grid definition
#(Html.Kendo().Grid<Something>()
.Name("GridName")
.Columns(columns =>
{
columns.Bound(m => m.Id).Hidden()
columns.Bound(m => m.Name)
})
)
Using PHP
See the Kendo UI for PHP API reference
Hide a column during grid definition
<?php
$column = new \Kendo\UI\GridColumn();
$column->hidden(true);
?>

As #Nic says there are multiple ways of hiding a column but I'm gonna assume that you are using KendoUI methods for hiding it. I.e: set the column hidden to true or programmatically invoke hideColumn.
If so, you should remember that you model might have fields that are not displayed or not even mapped in columns but they exist and you can still access them.
If we have the following Grid definition:
var grid = $("#grid").kendoGrid({
dataSource: ds,
selectable: true,
...
columns :
[
{ field: "Id", hidden: true },
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 200, title: "Last Name" }
]
}).data("kendoGrid");
Where I've declared a column Id as hidden. I still can access the value of Id by going to the model using:
// I want to access the Id for row 3
var row = $("tr:eq(3)", "#grid");
// Retrieve the item from the grid using dataItem method
var item = $("#grid").data("kendoGrid").dataItem(row);
// Show Id
alert("Id is " + item.Id);
Runnable example
var grid = $("#grid").kendoGrid({
dataSource: [
{ Id: 1, FirstName: "John", LastName: "Smith" },
{ Id: 2, FirstName: "Jane", LastName: "Smith" },
{ Id: 3, FirstName: "Jack", LastName: "Smith" },
{ Id: 4, FirstName: "Joseph", LastName: "Smith" },
{ Id: 5, FirstName: "Jeff", LastName: "Smith" },
],
selectable: true,
columns :
[
{ field: "Id", hidden: true },
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 200, title: "Last Name" }
]
}).data("kendoGrid");
$("#show").on("click", function(e) {
var row = grid.select();
if (row) {
var item = grid.dataItem(row);
alert ("The ID is :" + item.Id);
} else { 
alert("Select a row");
}
});
#grid {
width : 490px;
}
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
Select row and click <button id="show" class="k-button">Here</button> to show hidden Id.
<div id="grid"></div>