I'm using a Kendo UI Grid and can't get it to show data when using a JSON string. I created a fiddle here. What am I doing wrong?
<script type="text/javascript">
$(document).ready(function ()
{
$('#grid').kendoGrid(
{
scrollable: false,
data: '{"TestHeader":"This is some test data"}',
columns: [ { field: 'TestHeader' } ]
});
});
</script>
<div id="grid"></div>
This might be closer to what you want (note the changes to the data definition):
$(document).ready(function ()
{
$('#grid').kendoGrid(
{
scrollable: false,
dataSource: { data: [ { "TestHeader": "This is some test data"} ] },
columns: [ { field: 'TestHeader' } ]
});
});
Related
I have a Kendo UI Grid that has the "auto-bind" property set to false. I have also set the "pageable.alwaysVisible" property to false to hide the grid's pager when it's not needed.
The problem I'm having is that because the grid is not data bound when it first loads, the "alwaysVisible" property does not work and the pager is shown. At this stage I would expect the pager to be hidden as there is no data to be paged.
Is there anyway I can hide the pager on first load when the grid is not data bound?
It doesn't look like what you want is available out-of-the-box, but you could achieve it using a bit of CSS. This is probably a better approach than my previous answer, which in essence triggered the grid to bind itself anyway. How about hiding the pager initially until the grid is eventually bound, at which point it takes over management of the pager visibility?
<style>
#grid>.k-pager-wrap.k-grid-pager {
display: none;
}
</style>
<div id="grid"></div>
<button onclick="javascript:$('#grid').data('kendoGrid').dataSource.read()">Refresh</button>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" }
],
pageable: {
pageSize: 3,
alwaysVisible: false
},
autoBind: false
});
</script>
Example here: https://dojo.telerik.com/EBaZAjAc
This looks like a quirk of the grid when it doesn't know that it has no data yet. Perhaps you could try pushing "no data" into your datasource in the first instance? The following snippet demonstrates your problem; un-commenting the last line fixes it:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: new kendo.data.DataSource(),
pageable: {
pageSize: 5,
alwaysVisible: false
},
autoBind: false,
});
//$("#grid").data("kendoGrid").dataSource.data([]);
</script>
Example here: https://dojo.telerik.com/OZAXugOt
You can use something like this:
dataBound: function(e){
if(e.sender.dataSource.total() <= e.sender.dataSource.pageSize()){
e.sender.pager.element.hide();
} else {
e.sender.pager.element.show();
}
Take a look at this example:
http://dojo.telerik.com/OhEDo
I am using bootstrap-table by wenzhixin on Github it is this one
I want to change table settings from clickToSelect: true to clickToSelect: false on refresh
Here is my Code :
HTML
<html>
<button id="refresh"> Refresh
</button>
<table id="table">
</table>
<html>
JAVASCRIPT
$(function () {
$('#table').bootstrapTable({
method: 'get',
url:"http://139.199.18.128/Home/GetJSON2",
clickToSelect: true,
columns: [
{ checkbox: true },
{ field: "name", title: "lon"},
{ field: "customID", title: "level"}
]
});
$("#refresh").click(function () {
$("#table").bootstrapTable("refresh",
{
});
});
});
$("#table").bootstrapTable("refresh",
{ method: 'post',
url: "myUrl",
clickToSelect: false
});
I hope I can get a solution.
Thanks.
Why is the call with refreshOptions outside of refresh button handler ? Try like this:
$(function() {
$('#table').bootstrapTable({
method: 'get',
url: "http://139.199.18.128/Home/GetJSON2",
clickToSelect: true,
columns: [{
checkbox: true
},
{
field: "name",
title: "lon"
},
{
field: "customID",
title: "level"
}
]
});
$("#refresh").click(function() {
$("#table").bootstrapTable("refreshOptions", {
clickToSelect: false,
// Other options you want to override
});
});
});
EDIT
If you want only to change clickToSelect field, check this: http://jsfiddle.net/edvejew5/
If you want to disable/enable the checkboxes, check this:
http://jsfiddle.net/j9h62fk6/ ( could be much cleaner, but it's a start)
I got a JS var JSONarray that is initialized by PHP script that assign it a JSON value. I tried to use DataTables to format data and print it in readable form, but i cannot manage it to work.
PHP code is working fine and I tried the data samples from DataTables site and it worked but with this JSON it is not working.
Here are my codes:
JSONarray
var JSONarray = [{
"id": "ffd60d8e-4b2d-a693-bfcc-5959e202caa3",
"nr_faktury": "FV\/45654fgh\/fh231",
"nazwa_klienta": "klient3",
"kwota": "6045.00"
}];
JS
$(function() {
$('#example').DataTable( {
"ajax": JSONarray,
columns: [
{ title: "id" },
{ title: "nr_faktury" },
{ title: "nazwa_klienta" },
{ title: "kwota" }
]
} );
});
You can change the data source definition to use data instead of ajax since there's no Ajax call involved - you are writing out the JSONArray directly into the response when you load the page. You will also need to add a data property to the columns array. See full script below:
var JSONarray = [{
"id": "ffd60d8e-4b2d-a693-bfcc-5959e202caa3",
"nr_faktury": "FV\/45654fgh\/fh231",
"nazwa_klienta": "klient3",
"kwota": "6045.00"
}];
$(document).ready(function(){
$('#example').DataTable({
data: JSONarray, //Replace JSONarray with data source URL
columns: [
{ data: "id", title:"id" },
{ data: "nr_faktury", title: "nr_faktury" },
{ data: "nazwa_klienta", title:"nazwa_klienta" },
{ data: "kwota", title:"kwota" }
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id='example'></table>
var JSONarray = [{
"id": "ffd60d8e-4b2d-a693-bfcc-5959e202caa3",
"nr_faktury": "FV\/45654fgh\/fh231",
"nazwa_klienta": "klient3",
"kwota": "6045.00"
}];
$(document).ready(function(){
$('#example').DataTable({
"ajax": JSONarray, //Replace JSONarray with data source URL
columns: [
{ title: "id" },
{ title: "nr_faktury" },
{ title: "nazwa_klienta" },
{ title: "kwota" }
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id='example'></table>
I am trying to create a custom toolbar in KendoUI grid following this link:http://demos.telerik.com/kendo-ui/grid/toolbar-template but getting stuck with an error.
This is what I am trying to do in my code:
<div id="example">
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 150px" />
</div>
</script>
<div id="grid"></div>
<script>
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
type: "post",
dataType: "json"
}
},
schema: {
data: "Data",
total: function (response) {
return $(response.Data).length;
}
},
pageSize: 10
},
toolbar: kendo.template($("#template").html()),
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "CustomerAltID",
filterable: true
},
{
field: "CustomerID",
title: "Customer ID"
},
{
field: "CustomerName",
title: "Customer Name",
template: "<div class='customer-photo'" +
"style='background-image: url(../Content/Images/customerimg/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: CustomerName #</div>"
},
{
field: "Gender",
title: "Gender",
template: "<div class='gender-photo'" +
"style='background-image: url(../Content/Images/#:data.Gender#.jpg);'></div>"
}
]
});
var dropDown = grid.find("#category").kendoDropDownList({
dataTextField: "Gender",
dataValueField: "CustomerID",
autoBind: false,
optionLabel: "All",
dataSource: {
severFiltering: true,
transport: {
read: {
url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
type: "post",
dataType: "json"
}
},
schema: {
data:"Data"
}
},
change: function () {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "CustomerID", operator: "eq", value: parseInt(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
});
</script>
</div>
I don't know what the problem is and its been hours that I am unable to figure out the solution for it.
I am using the following versions- Jquery v-3.1 and Jquery UI-1.12
Another possibility as mentioned in this github issue is to include <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script> in html. This worked for me.
The problem is likely due to using jQuery v3.1
Kendo does not currently work with jQuery v3, officially. But it apparently can work if you also include jquery-migrate.
http://www.telerik.com/forums/jquery-3-0
The officially supported versions of jQuery are listed here:
http://docs.telerik.com/kendo-ui/intro/installation/prerequisites#supported-jquery-versions
Note that it states that Kendo R3 2016 SP2 should also work with jQuery 3.1.1.
So, you can:
use the version of jQuery that ships with/is supported by whatever
version of Kendo you use
OR use jQuery 3.1 with jquery-migrate
OR use Kendo R3 2016 SP2 and jQuery 3.1.1
and i call the datatable over the function.
Here is my function :
function drawTable(yearParameter) {
var oTable = $('#horizontal-monthly').DataTable({
processing: true,
serverSide: true,
ajax: {
url : '{!! route('adm1n.laporan-bulanan-data') !!}',
data : function (d) {
d.year = yearParameter;
}
},
columns: [
{ data: 'B_01', name: 'B_01', sortable: false },
{ data: 'B_02', name: 'B_02', sortable: false }
],
dom : '<"dt-panelmenu clearfix"lr>t<"dt-panelfooter clearfix"ip>',
});
}
And i have event change to call my function above and pass parameter on it.
How to reload the datatables? Cause right now datatables won't reload.
I try to use :
oTable.destroy();
oTable.draw();
It make datatables functionality not work. Like search, pagination etc.
Edit
Here is my change event :
$('#year-value').on('change', function(e) {
var yearParam = $('#year-value').val();
drawTable(yearParam);
});
How to handle that?
Thank you??
Please try
oTable.clear();
oTable.draw();
Also, can I see your change event? I can help you re-add the rows
UPDATE 2
Ok, you can't call DT constructor more than once. First thing what you want to do is to save DT object as global object.
function drawTable() {
if(!oTable)
{
oTable = $('#horizontal-monthly').DataTable({
processing: true,
serverSide: true,
ajax: {
url : '{!! route('adm1n.laporan-bulanan-data') !!}',
data : function (d) {
d.year = filterYearParam;
}
},
columns: [
{ data: 'B_01', name: 'B_01', sortable: false },
{ data: 'B_02', name: 'B_02', sortable: false }
],
dom : '<"dt-panelmenu clearfix"lr>t<"dt-panelfooter clearfix"ip>',
});
}
}
else
{
oTable.ajax.reload().draw();
}
$('#year-value').on('change', function(e) {
filterYearParam = $('#year-value').val();
drawTable();
});
Try this, and then I can try making your year to work.