When I'm using other "groupable" row template doesn't work in the kendo grid
But before there was no problem and now how to use the grouping together of row template
I put the code I wrote in a review do
jsfiddle :
Click here to check with jsfiddle
<script>
$(document).ready(function () {
var ds = new kendo.data.DataSource({
transport: {
read: {
url: '/api/clientssnapshot',
dataType: 'json',
type: 'get'
}
}
});
$('.table').kendoGrid({
dataSource: ds,
sortable: true,
groupable: true,
selectable: true,
navigatable: true,
height: 500,
scrollable: true,
rowTemplate: kendo.template($("#client-row-template").html().replace('class="k-alt"', '')),
altRowTemplate: kendo.template($("#client-row-template").html()),//#class="k-alt"#
dataBound: function () {
$('.spark').sparkline([1, 2, 3, 4, 5, 6, 85, 2, 1]);
//$('.spark').each(function (i, e) {
// var $this = $(this);
// //console.info($this.attr('data-inrate'));
// var arr = eval('[' + $this.attr('data-inrate') + ']');
// console.log(this);
// $this.sparkline(arr);
//});
}
});
});
</script>
<body class="menu_hover">
<script id="client-row-template" type="text/x-kendo-template">
<tr role="row" class="k-alt">
<td role="gridcell" >#= Mac #</td>
<td role="gridcell" >#= RadioName #</td>
<td role="gridcell" > #=ApName# </td>
<td role="gridcell" > #=RemoteIp# </td>
<td role="gridcell" > <a href=#"#= AccountingId #" target="_blank" > #= AccountingName # </a> </td>
<td role="gridcell" >#= TX #</td>
<td role="gridcell" >#= RX #</td>
<td role="gridcell" >#= Signal #</td>
<td role="gridcell" >#= Uptime #</td>
<td role="gridcell">
<span class="spark" data-inrate="#= InRateHistory #" > </span>
</td>
</tr>
</script>
<div class="span6 box gradient main_stting">
<div class="dataTables_filter" id="txtSearch">
<label>
Search:
<input type="text" aria-controls="DataTables_Table_0"></label>
</div>
<div class="title">
<h3></h3>
</div>
<div class="content">
<table class="table">
<colgroup>
<!-- Mac -->
<col style="width: 170px">
<col style="width: 150px">
<col style="width: 80px">
<col style="width: 160px">
<col style="width: 130px">
<col style="width: 44px">
<col style="width: 50px">
<col style="width: 50px">
<col style="width: 78px">
<!-- Usage -->
<!-- <col style="width: 100px" />-->
</colgroup>
<thead>
<tr>
<th>Mac</th>
<th>Radio</th>
<th>AP</th>
<th>Remote IP</th>
<th>Name</th>
<th>TX</th>
<th>RX</th>
<th>Signal</th>
<th>Uptime</th>
<th>Usage</th>
</tr>
</thead>
</table>
</div>
</div>
</body></html>
You can do it in your own template with a trick that was posted in this thread: http://www.telerik.com/forums/grid-grouping-problem-when-using-row-template-bug
Which contains this JSFiddle: http://jsfiddle.net/THRQV/
Here's the code from that fiddle.
Markup
<table id="grid" style="width: 100%;">
</table>
<script id="rowTemplate" type="text">
<tr>
#= new Array(this.group().length + 1).join('<td class="k-group-cell"></td>') #
<td>${Id}</td>
<td>${StatusText}</td>
<td>${CommissionTypeText}</td>
</tr>
</script>
Javascript
var localData = [
{Id: 1, StatusText: "Status 1", CommissionTypeText: "Commission 1"},
{Id: 2, StatusText: "Status 2", CommissionTypeText: "Commission 2"},
{Id: 3, StatusText: "Status 3", CommissionTypeText: "Commission 3"}
];
var dataSource = new kendo.data.DataSource( {
data: localData,
schema: {
model: {
fields: {
Id: { type: "number" },
StatusText: { type: "string" },
CommissionTypeText: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 500,
sortable: true,
filterable: true,
groupable: true,
pageable: true,
columns: [
{
field: "Id",
title: "Id",
filterable: false
},
{
field: "StatusText",
title: "StatusText"
},
{
field: "CommissionTypeText",
title: "CommissionTypeText"
}
]
});
Basically you are passing in the datasource, calling group() on it, and injecting the group cell when applicable.
When you group cells, KendoUI inserts a new cell in front of the existing but this is only done for the standard template, not for your templates.
My recommendation is switching to a template for each cell. Basically your column definition would become:
columns : [
{ field: "Mac", title: "Mac", width: 170 },
{ field: "RadioName", title: "Radio", width: 150 },
{ field: "ApName", title: "Ap", width: 80, template: '#=ApName#' },
{ field: "RemoteIp", title: "Remote IP", width: 160, template: '#=RemoteIp#' },
{ field: "AccountingName", title: "Name", width: 130, template: ' #= AccountingName # ' },
{ field: "TX", title: "TX", width: 44 },
{ field: "RX", title: "RX", width: 50 },
{ field: "Signal", title: "Signal", width: 50 },
{ field: "Uptime", title: "Uptime", width: 78},
{ field: "Usage", title: "Usage", template: '<span class="spark" data-inrate="#= InRateHistory #"> </span>' },
{ command: [ "edit" ], title: " " }
],
In addition, you simply define the grid HTML placeholder as:
<div class="table"></div>
Your JSFiddle modified here: http://jsfiddle.net/OnaBai/Dyb9Y/10/
Related
I'd want to display result by column dropdown filter. But after choose table doesn't update result.
My main goal is filter by "Компания" column and that selector must be on top of the table.
`
$(document).ready(function() {
var exampleDataTable = $('#example').DataTable({
responsive: true,
colReorder: true,
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
exportOptions: {
columns: ':visible'
}
},
'colvis'
],
language: {
buttons: {
colvis: 'Отображение столбцов'
},
"processing": "Подождите...",
"search": "Поиск:",
"lengthMenu": " _MENU_ ",
"info": "Показано с _START_ до _END_ записей из _TOTAL_",
"infoEmpty": "Записи с 0 до 0 из 0 записей",
"infoFiltered": "(отфильтровано из _MAX_ записей)",
"infoPostFix": "",
"loadingRecords": "Загрузка записей...",
"zeroRecords": "Записи отсутствуют.",
"emptyTable": "В таблице отсутствуют данные",
"paginate": {
"first": "Первая",
"previous": "<",
"next": ">",
"last": "Последняя"
},
"aria": {
"sortAscending": ": активировать для сортировки столбца по возрастанию",
"sortDescending": ": активировать для сортировки столбца по убыванию"
}
},
"iDisplayLength": 10,
"aLengthMenu": [[ 3, 10, 20, 50, 100 ,-1],[ 3, 10,20,50,100,"все"]],
stateSave: true,
"fnCreatedRow": function(nRow, aData, iDataIndex) {
$(nRow).attr('id', aData[0]);
},
'serverSide': 'true',
'processing': 'true',
'paging': 'true',
'order': [],
'ajax': {
'url': 'fetch_data.php',
'type': 'post',
'data': {
from_attr_1_l: from_attr_1_l,
from_attr_2_l: from_attr_2_l
},
},
initComplete: function () {
this.api().columns().every(function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo($(column.footer()).empty())
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
} }); });
`
<div class="container-fluid">
<div class="row">
<div class="container">
<div class="row">
<div class="col-md-8">
<table id="example" class="table">
<thead>
<th>Id</th>
<th>Номер</th>
<th>ФИО</th>
<th>Дата</th>
<th>Срок</th>
<th>Кол-во мест</th>
<th>Метка</th>
<th>ИНН</th>
<th>Телефон</th>
<th>КПП</th>
<th>Компания</th>
<th>Адрес</th>
<th>Email</th>
<th>Ответственный</th>
<th>Партнер</th>
<th>К. телефон</th>
<th>К. email</th>
<th></th>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Номер</th>
<th>ФИО</th>
<th>Дата</th>
<th>Срок</th>
<th>Кол-во мест</th>
<th>Метка</th>
<th>ИНН</th>
<th>Телефон</th>
<th>КПП</th>
<th>Компания</th>
<th>Адрес</th>
<th>Email</th>
<th>Ответственный</th>
<th>Партнер</th>
<th>К. телефон</th>
<th>К. email</th>
<th></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
I used different solutions also from https://datatables.net/examples/api/multi_filter_select.html and https://datatables.net/forums/discussion/73081/select-dropdown-list-filter but didn't work.
I addedd <tfoot> on my table and the table is like 2x bigger more than before:
<div class="container">
<table class="table table-bordered" id="users-table" style="white-space: nowrap; margin: auto;">
<thead class="table-primary">
<tr>
<th>First Name</th>
<th>Verified Status</th>
<th>User Type</th>
<th>Birthdate</th>
<th>Email</th>
<th>Fiscal ID</th>
<th>Actions</th>
</tr>
</thead>
<tfoot class="table-info">
<tr>
<th>First Name</th>
<th>Verified Status</th>
<th>User Type</th>
<th>Birthdate</th>
<th>Email</th>
<th>Fiscal ID</th>
</tr>
</tfoot>
</table>
</div>
this is the script for datables:
<script>
$(function() {
$('#users-table').DataTable({
processing: false,
serverSide: true,
columnDefs: [
{"className": "dt-center", "targets": "_all"}
],
ajax: '{{ route('admin.users-data') }}',
columns: [
{ data: 'user', name: 'user' },
{ data: 'email_verified_at', name: 'users.email_verified_at',
render: function( data, type, full, meta ) {
if (data == null) {
return "<img class=\"\" src=\"{{ asset('images/icons/no.png')}}\" style=\"width:20%\"/>";
} else {
return "<img class=\"\" src=\"{{ asset('images/icons/yes.png')}}\" style=\"width:20%\"/>";
}
}
},
{ data: 'role', name: 'roles.role' },
{ data: 'birthdate', name: 'birthdate' },
{ data: 'email', name: 'email' },
{ data: 'fiscal_id', name: 'fiscal_id' },
{ data: 'action', name: 'action', orderable: false, searchable:false }
],
initComplete: function () {
this.api().columns().every(function () {
var column = this;
var input = document.createElement("input");
$(input).appendTo($(column.footer()).empty())
.on('change', function () {
column.search($(this).val(), false, false, true).draw();
});
});
}
});
});
</script>
When I added footer on table for searching by column the size of the table change, its twice bigger and it does not accept any style on it.
Can someone explain why this is happening, thanks!
In 4 questions I've made in stavkoverflow, in all 4 of them I answered to myself...
Anyway, who is struggling with this just add this to your css:
tfoot input {
width: 100%;
}
Happy coding!
I'm try to access parent data scope in kendo grid template, is it a bad practice use "this.parentDataItem"? Or exist other ways? As final result in my example I want hide first column.
My Grid:
<div id="someGrid"
data-role="grid"
data-row-template="someTemplate"
data-bind="source: gridDataSource"
data-columns="[
{ title: 'FirstColumn', width: '100px' },
{ title: 'SecondColumn', width: '100px'},
]">
</div>
My template:
<script id="someTemplate" type="text/x-kendo-template">
<tr role="row" data-uid="${uid}">
<td class="check-row"># if(this.isFirstColumnVisible) { # InvisibleText # } #</td>
<td class="check-row">VisibleText</td>
</tr>
<script>
My model
{
isFirstColumnVisible: false,
gridDataSource: ...
}
This did the trick:
parent().parent().myProperty
i have this HTML code, I cannot make it sorted on sale column, please help how to do that, I've tried to implement this solution How to sort numeric with string values in Kendo-Grid , but still failed.
<html>
<head>
<link href="lib/kendo/styles/examples-offline.css" rel="stylesheet">
<link href="lib/kendo/styles/kendo.common.min.css" rel="stylesheet">
<link href="lib/kendo/styles/kendo.default.min.css" rel="stylesheet">
<script src="lib/js/jquery-ui-1.8.2.custom.min.js"></script>
<script src="lib/kendo/js/jquery.min.js"></script>
<script src="lib/kendo/js/kendo.web.min.js"></script>
<script src="lib/kendo/js/console.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div class="demo-section">
<table id="grid">
<thead>
<tr>
<th data-field="product">Product</th>
<th data-field="sale">Sale</th>
</tr>
</thead>
<tbody>
<tr style=display:none><td>A</td><td>6,698</td></tr>
<tr style=display:none><td>B</td><td>10,900</td></tr>
<tr style=display:none><td>C</td><td>2,300</td></tr>
<tr style=display:none><td>D</td><td>700</td></tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
pageSize: 200
},
height: 350,
sortable: true,
filterable: true,
groupable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [ {
field: "product",
width: 200
} , {
field: "sale",
sortable: {
compare: function(a, b) {
var x = a.sale.replace(/\,/g,'');
var y = b.sale.replace(/\,/g,'');
return x - y;
}
},
filterable: false,
width: 100
}
]
});
});
</script>
<style scoped="scoped">
.demo-section {
width: 800px;
}
.demo-section h3 {
margin: 5px 0 15px 0;
text-align: center;
}
</style>
</div>
</div>
</body>
</html>
The problem is that you never say that sale is actually a number so despite you remove , they are still getting strings.
You have to do:
Option 1: use kendo.parseInt to parse sale into numbers (depending on your culture it will take care of , as thousand separator).
sortable: {
compare: function(a, b) {
var x = kendo.parseInt(a.sale);
var y = kendo.parseInt(b.sale);
console.log(a.sale,x);
console.log(b.sale,y);
return x - y;
}
},
Option 2: Declare that the column is a number and say to display it with thousand separator. Then you DataSource would be:
dataSource: {
pageSize: 200,
schema: {
model: {
fields : {
sale : { type : "number" }
}
}
}
},
and you columns definition:
columns: [
{ field: "product", width: 200 } ,
{ field: "sale", filterable: false, width: 100, format : "{0:##,#}" }
]
NOTE: For this second alternative you don't need to define compare function. So your code would be:
$("#grid").kendoGrid({
dataSource: {
pageSize: 200,
schema : {
model: {
fields: {
sale: { type: "number" }
}
}
}
},
height : 350,
sortable : true,
filterable: true,
groupable : true,
pageable : {
refresh : true,
pageSizes: true
},
columns : [
{ field: "product", width: 200 } ,
{ field: "sale", filterable: false, width: 100, format: "{0:##,#}" }
]
});
Trying to mimic http://mleibman.github.io/SlickGrid/examples/example1-simple.html on http://jsfiddle.net/mejo/u5S8T/1/ but it is not working. What is wrong?
HTML:
<table width="100%">
<tr>
<td valign="top" width="50%">
<div id="myGrid" style="width:600px;height:500px;"></div>
</td>
<td valign="top">
<h2>Demonstrates:</h2>
<ul>
<li>basic grid with minimal configuration</li>
</ul>
</td>
</tr>
</table>
JavaScript:
var grid;
var columns = [
{id: "title", name: "Title", field: "title"},
{id: "duration", name: "Duration", field: "duration"},
{id: "%", name: "% Complete", field: "percentComplete"},
{id: "start", name: "Start", field: "start"},
{id: "finish", name: "Finish", field: "finish"},
{id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function () {
var data = [];
for (var i = 0; i < 500; i++) {
data[i] = {
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
}
grid = new Slick.Grid("#myGrid", data, columns, options);
})
Because you are missing references to required js files,
jquery-1.7.min.js
jquery.event.drag-2.2.js
slick.core.js
slick.grid.js