Related
I have a Kendo Grid and the data is bound with results from a webApi. Below is a snapshot of the code. This is used to render the Kendo Grid. Now in the JSON result there could be cases where the field 'nominalVoltage' will not be there. In other words some results may return the field, some may not. In case the field is not returned the code fails. I will get error like field is undefined.
Can this be handled anyway while loading Kendo grid controls?
$scope.columns = [{
field: 'businessCode',
title: 'Business Code',
width: '120px',
}, {
field: 'nominalVoltage',
title: 'Nominal Voltage',
width: '120px'
}];
var options = {
dataSource: {
data: data
},
width: '100%',
resizable: true,
sortable: true,
scrollable: true,
reorderable: true,
dataBinding: function (e) {
var pageSizes = e.sender.dataSource.pageSize() || 20;
},
pageable: {
pageSize: pageSize,
pageSizes: [5, 10, 20, 50, 100, 200],
refresh: true
},
columns: $scope.columns
};
You could apply a conditional template attribute on the grid column which requires validation:
field: 'nominalVoltage',
title: 'Nominal Voltage',
width: '120px',
template: "#if(nominalVoltage) {#:nominalVoltage#} else{'Oops nothing found'}#"
Or the template as a function,
template: validateNominalVoltage
function validateNominalVoltage(dataItem) {
return dataItem.nominalVoltage ? dataItem.nominalVoltage : 'Oops nothing found';
}
Usually this method is used to modify how data is being displayed i.e. bolding content, using an external HTML template but in your case this will work fine for checking if the nominalVoltage attribute contains a value before displaying.
You can set a schema for your data.
schema: {
model: {
businessCode: { type: "string" },
nominalVoltage: { type: "number" },
}
}
You can define template like below
//field: 'nominalVoltage', // do not include it
template: function(data) {
return data.nominalVoltage ? data.nominalVoltage : "";
},
title: 'Nominal Voltage',
width: '120px'
I am using materialize data table in my application, using which I have implemented fixed header functionality. This is working fine for default page scroll bar.
Fixed Header with default scroll bar
HTML Code:
<div id="tblContainer" class="material-table z-depth-3 hoverable">
<table id="myTable" class="highlight"></table>
</div>
JS Code:
$(document).ready(function(){
var data2 = {
"results": [{"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1",
"Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
{"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"}
]
};
$('#myTable').dataTable({
data: data2.results,
"order": [],
"bSort": false,
"bInfo": false,
"paging": false,
"searching": false,
columns: [
{ data: 'Name', title: "Name" },
{ data: 'Amount', title: "Amount" },
{ data: 'Profit', title: "Profit" },
{ data: 'Loss', title: "Loss" },
{ data: 'Age', title: "Age" },
{ data: 'Address', title: "Address"},
{ data: 'Loss', title: "Loss" },
{ data: 'Age', title: "Age" },
{ data: 'Address', title: "Address"}
],
"columnDefs": [
{ "width": "200px", "targets": [0] },
{ "width": "100px", "targets": [1] },
{ "width": "100px", "targets": [2] },
{ "width": "100px", "targets": [3,6] },
{ "width": "100px", "targets": [4,7] },
{ "width": "200px", "targets": [5,8] }
],
"fixedHeader": {
header: true
}
});
});
But when I set width for table and used custom scrolling means fixed header is not changing based on scroll.
Fixed Header with custom scroll bar
In the above code, I changed my HTML part like this and added this css. But fixed header is not working.
HTML Code:
<div class="row">
<div class="col s8 m5">
<div id="tblContainer" class="material-table z-depth-3 hoverable">
<table id="myTable" class="highlight"></table>
</div>
</div>
</div>
CSS Code:
#myTable_wrapper {
overflow-x:auto;
}
I have attached my two example JSFiddle here. How to achieve fixed header for custom scoll bar in materialize data table?
Apparently datatables' fixed header does not support scoll-x at all. I tried one or two moths ago, but couldn't find a solution. Read the topic here
Yet, i managed to solve this by changing my page design. I did not use a fixed header. But put my table at the top of the div, meaning no search box or pagination or anything on top of the table. Just like your first JSFiddle example.
After that, i gave an height to scrollY, and my header became fixed. What i mean is;
get rid of
"fixedHeader": {
header: true
}
and put these lines instead.
"ScrollX": true,
"scrollCollapse": true,
"sScrollY": 400
Try this on JSFiddle
Also, you can make the height dynamic, like:
"sScrollY": calcDataTableHeight(),
And function
var calcDataTableHeight = function() {
h = $('#wrapper').height() - 150;
return h;
};
you can play with the numbers, but dont forget to declare the function before initiating it.
I'm trying to get my javascript to use a dynamic value for "displayStart". I'm getting the data from a php script that returns JSON.
Here is my js:
balance.list = function () {
$('#balance').dataTable({
processing: true,
ajax: {
url: 'php/list.php',
dataSrc: 'data'
},
dom: '<"top"flp<"clear">>rt<"bottom"ip<"clear">>',
pageLength: 50,
autoWidth: false,
displayStart: '100',
columns: [
{
width: "10%",
data: "date"
}, {
width: "5%",
data: "checknum"
}, {
width: "75%",
data: "description"
}, {
width: "5%",
data: "debit"
}, {
width: "5%",
data: "credit"
}, {
width: "5%",
data: "balance"
}]
});
};
instead of
displayStart: '100',
I want it be something like:
displayStart: displayStart.displayStart,
But I'm setting the dataSrc to data, which is another branch of the JSON
And here is the JSON data:
{
"displayStart":"100",
"data": [
{
"date":"2015-03-27",
"checknum":null,
"description":null,
"debit":"50.00",
"credit":"0.00",
"balance":"500.00"
},
{
"date":"2015-03-28",
"checknum":null,
"description":null,
"debit":"0.00",
"credit":"250.00",
"balance":"750.00"
}
]
}
I've messed around with the ajax portion using a success/error function, but then it doesn't continue on to finish the table.
How do I set the value?
You can change the page after the data has been loaded by adding two event handlers after you DataTables initialization code as shown below.
// Handles DataTables AJAX request completion event
$('#balance').on('xhr.dt', function( e, settings, json){
$(this).data('is-loaded', true);
});
// Handles DataTables table draw event
$('#balance').on('draw.dt', function (){
if($(this).data('is-loaded')){
$(this).data('is-loaded', false);
var api = $(this).DataTable();
var json = api.ajax.json();
var page_start = json['displayStart'];
// Calculate page number
var page = Math.min(Math.max(0, Math.round(page_start / api.page.len())), api.page.info().pages);
// Set page
api.page(page).draw(false);
}
});
I am going to use JqGrid for many different web pages.
And I have some custom formatter, and custom edittype
for example, I want to use datepicker to edit dates
so, instead of using colModel's edittype as custom, and provide custom functions to do that, I would like "if possible" to write an extension to jqgrid edittype, so I can just write "date", and I will write an extension to replace it with the datepickeer.
As I said, it is for re-usability, so instead of doing custom edit type for every web page/jqgrid, I could do it only once in that place.
Is there any documentation on how to extend jqgrid?
I would start with custom formatter. jqGrid support predefined formatters like formatter: "integer", formatter: "date". You can "register" your custom formatter and unformatter as one more value which you can use. For example if you want to register formatter: "myCheckbox" you need define $.fn.fmatter.myCheckbox as formetter function and $.fn.fmatter.myCheckbox.unformat as unformatter function.
$.extend($.fn.fmatter, {
myCheckbox: function (cellValue, options, rowObject) {
// the code of the custom formatter is here
...
}
});
$.extend($.fn.fmatter.myCheckbox, {
unformat: function (cellValue, options, elem) {
// the code of the custom unformatter is here
...
}
});
The code from here uses Font Awesome 4.x and register new formatter: "checkboxFontAwesome4". "Registering" of custom formatters can simplify your code.
The next feature. jqGrid supports column templates starting with version 3.8.2 jqGrid (see the old answer). It allows you to define common settings used in colModel as one object and to use template property in colModel. For example if you have many columns which contains numbers you can define for example numberTemplate object as
var numberTemplate = {
formatter: "number", align: "right", sorttype: "number", width: 60,
searchoptions: {
sopt: ["eq", "ne", "lt", "le", "gt", "ge"]
}
};
then you can define tree columns "tax", "amount" and "total" as
colModel: [
...
{ name: "tax", template: numberTemplate },
{ name: "amount", template: numberTemplate },
{ name: "total", width: 70, template: numberTemplate },
...
]
In the way you defines columns where all the properties from numberTemplate will be applied in the columns. The default width: 60 defined in numberTemplate will be overwritten to the value width: 70 for the column "total".
The usage of column templates allows you to define once in your code templates for dates which uses jQuery UI Datepicker for example and uses in every column of every grid of your project just the corresponding reference on the template.
The current version of jqGrid on github supports "registering" of templates as strings. So the next version (higher as 4.6.0), which I hope will be soon released, will support the following syntax:
$.extend($.jgrid, {
cmTemplate: {
myNumber: {
formatter: "number", align: "right", sorttype: "number",
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }
}
}
});
(in the example I didn't included width in the template)
colModel: [
...
{ name: "tax", width: 52, template: "number" },
{ name: "amount", width: 75, template: "number" },
{ name: "total", width: 60, template: "number" },
....
]
See the pull request for more details.
As with any jQuery plugin, you can extend the plugin with $.extend() like this:
(function($) {
var extensionMethods = {
// ...
};
$.extend(true,$.jgrid, extensionMethods);
})(jQuery);
Hi I am not able to get the data from JSON loaded on to grid,
HEre is my code for the grid wich displays the stock prices for the stock for a user :
$(document).ready(function () {
// $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>");
jQuery("#jqTable").jqGrid({
url:jqDataUrl,
datatype: "json",
mtype: "POST",
height: 250,
// Specify the column names
colNames: ["SYMBOL", "LAST", "CHANGE", "%CHANGE","HIGH/LOW"],
// Configure the columns
colModel: [
{ name: "SYMBOL", index: "SYMBOL", width: 200, align: "left" },
{ name: "LAST", index: "LAST", width: 200, align: "left" },
{ name: "CHANGE", index: "CHANGE", width: 200, align: "left" },
{ name: "%CHANGE", index: "%CHANGE", width: 200, align: "left"},
{ name: "HIGH/LOW", index: "HIGH/LOW", width: 200, align: "left"}
],
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
cell: "cell",
id: "id",
},
multiselect: false,
// paging: true,
// rowNum:10,
// rowList:[10,20,30],
pager: $("#jqTablePager"),
loadonce:true,
caption: "WatchList"
}).navGrid('#jqTablePager',{edit:false,add:true,del:true});
}
});
But when i try and run the code i am not able to get the contents on to the table (but the grid loads with no content)
And My json is of the form :
{
total: "1",
page: "1",
records: "2",
rows :
[
{id:"1", cell:["cell11", "cell12", "cell13","cell13","cell13"]},
{id:"2", cell:["cell21", "cell22", "cell23","cell13","cell13"]}
]
}
Please help me solve the problem
UPDATE:
I discovered that if you do not put repeatitems:true option into json reader, jqGrid assumes that you are using json dot notation. When you put it into jsonReader, your data is properly loaded. Here is working example: http://jsfiddle.net/a5e5F/3/
Old version:
I played a lot with your jqgrid code, and it seems that there is a bug in this version of jqGrid, which causes your jsonReader not to work. It reads data directly, ignoring root element and assuming that your data is array of json objects in format
{propertyName1:'PropertyValue1', propertyName2:'PropertyValue2', ...}
You can see what I mean on http://jsfiddle.net/a5e5F/2/
If you replace data:rows with data:data (your format of data), it does not load data. Maybe you should try to change your json data to use real json format (with properties named as columns)?
I have been trying a ton of stuff, changing column names to check for issue in #Barmar's coment, which I also thought it is the cause.