I'm trying to do something similar to this:
https://demos.telerik.com/kendo-ui/grid/filter-multi-checkboxes
I'm using something like this with kendo MVVM:
<div id="grid"></div>
<div class="box wide">
<div data-role="grid"
data-filterable="{ mode: 'row' , cell: { showOperators: false, operator: 'contains' } }"
data-sortable="true"
data-columns="[
{ 'field': 'TaskId', 'title': 'Actions', 'width': 100, filterable: false, template: viewModel.GenerateEditTemplate, sortable: false },
{ 'field': 'IsCompleted', 'title': 'Completed', 'type' : 'boolean', 'width': 125, filterable: { messages: { isFalse: 'No', isTrue: 'Yes' } } },
{ 'field': 'Title', 'title': 'Title', 'width': 250, 'type' : 'string', filterable: { multi: true, dataSource: [{ Title: 'title1' }, { Title: 'title2' }] } },
{ 'field': 'Hours', 'title': 'Estimated Hours', 'width': 110, 'type' : 'number', filterable: { cell: { showOperators: false, operator: 'contains' } } },
{ 'field': 'CreatedBy', 'title': 'Created By', 'width': 150, filterable: { cell: { showOperators: false, operator: 'contains', template: viewModel.UserFilter } } }
]"
data-bind="source: TaskDataSource, events: { dataBound: OnDataBound }">
</div>
</div>
After that, the only filter displayed in the header is the input that allows me to filter the column but not the expected dropdown with the given data source.
Does anyone know if there is a limitation with KendoMVVM that doesn't allow me to use the multi-option into the filterable but it works on that KendoGrid configuration?
Thanks a lot
Related
I am using KTDatatable. it works like a charm in desktop view. but when I view the table on the mobile screen, only first two-column is being shown. Code:
<div class="kt-datatable"></div>
<script>
function listing(){
$('.kt-datatable').KTDatatable({
translate: {
records: {
processing: '{{"Please wait"|__}}...',
noRecords: '{{"No records found"|__}}'
},
toolbar: {
pagination: {
items: {
default: {
first: '{{"First"|__}}',
prev: '{{"Previous"|__}}',
next: '{{"Next"|__}}',
last: '{{"Last"|__}}',
more: '{{"More pages"|__}}',
input: '{{"Page number"|__}}',
select: '{{"Select page size"|__}}'
},
info: "{{"Displaying"|__}} {{ '{{' }}start{{ '}}' }} - {{ '{{' }}end{{ '}}' }} {{"of"|__}} {{total}} {{"records"|__}}"
}
}
}
},
// layout definition
layout: {
scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
footer: false, // display/hide footer
},
// column sorting
sortable: true,
pagination: true,
search: {
input: $('#generalSearch'),
delay: 400,
},
data: {
type: 'remote',
source: {
read: {
url: '{{url("api/dashboardpayments")}}'
},
},
pageSize: 10, // display 20 records per page
serverPaging: true,
serverFiltering: true,
serverSorting: true,
},
// columns definition
columns: [
{
field: "id",
title: "{{'#'|__}}",
sortable: true,
width: 100
},
{
field: "amount",
title: "{{'Amount'|__}}",
sortable: false,
width: 'auto',
},
{
field: "trxId",
title: "{{'trxId'|__}}",
sortable: false,
width: 'auto'
},
{
field: "for",
title: "{{'Service'|__}}",
sortable: false,
width: 'auto'
},
{
field: "created_at_date",
title: "{{'Date'|__}}",
sortable: false,
width: 'auto',
},
{
field: "Actions",
width: 100,
title: "{{'Actions'|__}}",
sortable: false,
overflow: 'visible',
template: function (data) {
var output = '' +
'<div class="btn-group btn-group">'+
'<a href="javascript:;" data-id='+data.id+' class="btn btn-brand btn-sm btn-icon confirmPayment" data-skin="dark" data-toggle="kt-tooltip" data-placement="top" title="{{"OK"|__}}"><i class="fa fa-check"></i></button>';
'</div>';
return output;
},
}
]
});
$('body').tooltip({selector: '[data-toggle="kt-tooltip"]'});
}
</script>
I am trying a lot of possible ways of custom CSS. But no luck. Any idea?
To make this work you can add the following:
rows: {
autoHide: false
},
AND
// layout definition
layout: {
scroll: true, // enable/disable datatable scroll both horizontal and vertical when needed.
footer: false, // display/hide footer
header: true,
},
I just put autoHide:false in a column definition. i.e:
columns: [
{
field: "id",
title: "{{'#'|__}}",
sortable: true,
width: 100,
autoHide: false
}
]
I forced to change my nearly finished project developed on Filemaker to Open Source due to licensing issues. So I have to learn PHP, Javascript and all that stuff while programming. I am struggling now for 2 weeks with this issue. I have a php file with my JS Grid table which is also visible:
My code for the table:
$(document).ready(function() {
$('#contacts_table').jsGrid({
width: "100%",
height: "457px",
pageLoading: false,
filtering: true,
inserting: true,
editing: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 10,
pageButtonCount: 2,
confirmDeleting: true,
noDataContent: "Not found",
deleteConfirm: "Do you really want to delete data?",
controller: {
loadData: function (filter) {
return $.ajax({
type: "GET",
url: "fetch_contacts_supplier_JS_Grid.php",
data: filter,
dataType: "json"
});
},
},
fields: [
{name: "Id", type: "number", width: 10, visible: false},
{name: "SupplierId",type: "number", width: 10, visible: false},
{name: "Title", type: "text", width: 10, validate: "required"},
{name: "Name", type: "text", width: 30, validate: "required"},
{name: "Surname", type: "text", width: 30, validate: "required"},
{name: "Position", type: "text", width: 20, validate: "required"},
{name: "Phone", type: "text", width: 30},
{name: "Mobile", type: "text", width: 30},
{name: "Fax", type: "text", width: 30},
{name: "Email", type: "text", width: 30},
{name: "Active", type: "checkbox", width: 10, validate: "required"},
{ type: "control", width: 10}
]
});
});
My code for the DB select (which works) fetch_contacts_supplier_JS_Grid.php:
if($method == 'GET') {
If ($statement = $link->prepare("SELECT * FROM suppliers_contacts WHERE _fk_SuppliersID = 1")) {
if ($statement->execute()) {
$result = $statement->get_result(); // fetchAll(PDO::FETCH_ASSOC);
while($row = $result->fetch_assoc()) {
$new_array[] = array(
'Id' => $row['_pk_SuppliersContactsID'],
'SupplierId' => $row['_fk_SuppliersID'],
'Title' => $row['Title'],
'Name' => $row['Name'],
'Surname' => $row['Surname'],
'Position' => $row['Job_Position'],
'Phone' => $row['PhoneFixed'],
'Mobile' => $row['PhoneCell'],
'Fax' => $row['PhoneFax'],
'Email' => $row['Email'],
'Active' => $row['Active']
);
}
}
header("Content-Type: application/json");
echo json_encode($new_array);
} ELSE {
echo $link->error;
}
}
The array I get in the console:
[{"Id":1,"SupplierId":1,"Title":"Mr.","Name":"Jens","Surname":"Dietzel","Position":"Owner","Phone":"145754","Mobile":"86868","Fax":"4368843","Email":"jens#jd-sd.com.na","Active":"checked"},{"Id":2,"SupplierId":1,"Title":"Mrs.","Name":"Karen","Surname":"Mann","Position":"Manager","Phone":"24525","Mobile":"745754","Fax":"544","Email":"karen#test.de","Active":"checked"}]
But the table shows not found. What am I doing wrong?
In Extension grid paging and filtering is not working..please help me out.In this code if i replace store with simplestore and ds.load() with ds.loadData(mydata) then simple grid is working but paging is not working.but i have seen some samples according to these i have converted my code..but after that its not working at all.
Ext.onReady(function () {
var myData = [
['Apple', 29.89, 0.24, 0.81, '9/1 12:00am'],
['Ext', 83.81, 0.28, 0.34, '9/12 12:00am'],
['Google', 71.72, 0.02, 0.03, '10/1 12:00am'],
['Microsoft', 52.55, 0.01, 0.02, '7/4 12:00am'],
['Yahoo!', 29.01, 0.42, 1.47, '5/22 12:00am']
];
var ds = new Ext.data.Store({
pageSize: 2,
proxy: {
type: 'pagingmemory',
reader: { type: 'array' }
},
fields: [
{ name: 'company' },
{ name: 'price', type: 'float' },
{ name: 'change', type: 'float' },
{ name: 'pctChange', type: 'float' },
{ name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' }
]
});
var colModel = new Ext.grid.ColumnModel([
{ header: "Company", width: 120, sortable: true, dataIndex: 'company' },
{ header: "Price", width: 90, sortable: true, dataIndex: 'price' },
{ header: "Change", width: 90, sortable: true, dataIndex: 'change' },
{ header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange' },
{ header: "Last Updated", width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
]);
var grid = new Ext.grid.GridPanel({ frame: true, height: 200, width: 600,ds: ds, cm: colModel, bbar: new Ext.PagingToolbar({
store: ds,
pageSize: 2,
displayInfo: true
})
});
ds.load();
grid.render(Ext.getBody());
});
I have a kendo Grid that I create like this:
function drawInvoiceTable() {
invoiceTable = $('#invoiceGrid').kendoGrid({
sortable: true,
pageable: true,
dataSource: {
data: getData(),
pageSize: 10,
schema: {
model: {
id: 'test',
fields: {
active: false
}
}
}
},
columns: [
{ template: "<input type='checkbox' id='chkInvoices' class='invoiceDisplay' name='chkInvoices' #= active ? checked='checked' : '' #/>", width: 30 },
{ field: 'accountNumber', title: 'Account', attributes: { 'class': 'accountnumber' }, sortable: true },
{ field: 'transactionDate', title: 'Trans Date', attributes: { 'class': 'transdate' }, width: 100, sortable: true },
{ field: 'TransType', title: 'Type', attributes: { 'class': 'transType' }, width: 60, sortable: true },
{ field: 'TransReferenceNumber', title: 'Reference Number', attributes: { 'class': 'refnumber' }, width: 135, sortable: true },
{ field: 'transactionDebitAmount', title: 'Amount', attributes: { 'class': 'amount' }, width: 90, sortable: true },
{ field: 'openBalance', title: 'Balance', width: 90, attributes: { 'class': 'balance' }, template: '#= kendo.format("{0:p}", openBalance) #', sortable: true },
{ field: 'discountAmount', title: 'Discount', format: "{0:c}", attributes: { 'class': 'discount', 'data-format': 'c' }, width: 90, sortable: false },
{ field: 'discountApplied', title: 'Discount Applied', width: 95, attributes: { 'class': 'discapplied' }, sortable: false },
{ field: 'paymentApplied', title: 'Payment Applied' , width: 95, attributes: { 'class': 'paymentapplied' }, sortable: false },
{ field: 'discountDate', title: 'Discount Date', attributes: { 'class': 'discountDate' } },
{ field: 'dueDate', title: 'Due Date', width: 90, sortable: true }
]
});
grid = $('#invoiceGrid').data('kendoGrid');
dataSource = grid.dataSource;
data = dataSource.data();
}
How can I have the values in some of my columns formatted with the dollar sign and allow up to 2 decimal such as $12541.23 ?
In the column definition use format: "{0:c2}":
{ field:"price", title:"Price", format:"{0:c2}" },
c stands for currency and 2 is the number of decimals
You would want to set the column.format to "{0:c2}"
"c2" is the number format (currency, 2 decimal places) which is defined here.
I need to display a checkbox for column "Active" and when I change the selection to be to able to make an ajax request, to update the database.
Some sample code will help me a lot.
Thanks.
Please check this link: Extjs Grid plugins.
You can check sources for second grid.
Also you need listen 'selectionchange' event for selection model of the grid - so you'll have selected rows and then you can submit a request to server or whatever you need.
If you need specific column (not the first one) - you can check this link: Checkbox in the grid
And I think this is same here too: how to add checkbox column to Extjs Grid
This is example from one of my projects:
Ext.define('Magellano.view.news.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.newslist',
store: 'News',
remoteSort: false,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Online',
id: 'online-button',
enableToggle: true,
icon: '/images/light-bulb.png',
pressed: true,
handler: onItemToggle
}, { text: 'Preview',
id: 'preview-button',
enableToggle: true,
pressed: true
}],
initComponent: function() {
this.selModel = Ext.create('Ext.selection.CheckboxModel', {
singleSelect: false,
sortable: false,
checkOnly: true
});
this.columns = [
{ text: '', width: 28, renderer: function(val) { return "<img src='/images/star-empty.png' height='16' width='16'></img>"}},
{ text: 'Date', width: 60, dataIndex: 'newstime', renderer: renderDate},
{ text: 'Agency', width: 60, dataIndex: 'agency', renderer: function(val) { return val;}},
{ text: 'Category', width: 60, dataIndex: 'category', renderer: function(val) { return val;}},
{ text: 'Title', flex: 1, dataIndex: 'title',
renderer: function(val) { return Ext.String.format('<b>{0}</b>', val); }
}
];
this.title = "News from " + Ext.Date.dateFormat(new Date(), "j M Y");
this.callParent(arguments);
}
}
The important part is that in the initComponent you create the selection model:
this.selModel = Ext.create('Ext.selection.CheckboxModel', {
singleSelect: false,
sortable: false,
checkOnly: true
});