I am using ng-grid from following link:http://angular-ui.github.io/ng-grid/
My MVC Controller function return data in json format which includes
date like this
:
"RunDate":"\/Date(1439577000000)\/","RunDate":"\/Date(1441391400000)\/" etc....
My View:
<div ng-grid="gridOptions" style="min-height:420px"></div>
My Grid options in js:
$scope.gridOptions = {
data: 'myData',
enablePaging: true,
showFooter: true,
columnDefs: [{ field: "RunDate", displayName: "Run Date", width: 120, cellFilter: "date:'yyyy-MM-dd'" }],
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions
};
I want date to be display in this format:06/April/2015
Can anybody help me with this???
You need to apply custom filter on you variable while binding data. Do use cellTemplate of column level.
Code
$scope.gridOptions = {
data: 'gridData',
columnDefs: [{
field: 'RunDate',
displayName: 'Run Date',
cellTemplate： '<span> {{row.entity.RunDate | date:\'dd-MMM-yyyy\'}}</span>'，
},
....
]
});
Use Angular date filter, like this:
{{row.entity.RunDate | date:'dd-MMM-yyyy'}}
You need to change the date formatting on your gridOptions
The correct date format you need is
dd/MMM/yyyy
$scope.gridOptions = {
data: 'myData',
enablePinning: true,
columnDefs: [
{ field: 'RunDate',displayName: 'Run Date', cellFilter: 'date:\'dd/MMM/yyyy\'' },
]
};
...........
});
Check this link for an example
Related
how can I add class_list or set attribute for every td in column when using [yajra ] (https://github.com/yajra/laravel-datatables) datatable
You do it in the javascript. I have a datatable with the css id of "claims-table". I want to add classes to the first column, which in my case is called "id". My code is below. Look at the "columns" to see that I'm adding classes and returning the column as an href.
$(function() {
$('#claims-table').DataTable({
processing: true,
serverSide: true,
searching: false,
ajax: '/claims-table',
columns: [
{data: 'id', name: 'id', render: function(data,type,row) {
data = '<a class="claim_info underline_td" claim_id="'+data+'" href="/#">Claim ID '+data+'</a>';
return data;
}},
{data: 'order_id', name: 'order_id'},
{data: 'name', name: 'name'},
{data: 'status_description',name: 'status_description'}
]
});
});
I have an grid with date column in which I applied a filterable option and i did not get any results when I filter.
My grid:
var element = $("#grid").kendoGrid({
dataSource: {
data: gridDataSource,
schema: {
model: {
fields: {
Date: { type: "date", editable: false },
}
}
}
},
scrollable: true,
filterable : true,
columns: [
{
"field": "Date", "title": "Date", "format": "{0:MM/dd/yyyy}", filterable : {ui: function (e) {e.kendoDatePicker({format: "MM/dd/yyyy"})}}, width: "100px" }],
});
Probably is missing .data("kendoGrid"); in end of kendogrid() declaration.
For convinience I did an working example.
Hope this help
ps: Filter by 1966/01/27 in example to check.
I want to export all data in my jqxgrid into json and send it to another page via AJAX.
My problem is when I click export button, the data in the grid and data before export was not the same. It change float number to Interger. Here is my code:
Javascript:
$('#export_bt').on('click', function(){
var row = $("#jqxgrid").jqxGrid('exportdata', 'json');
$('#debug').html(row);
console.log(row);
});
var tableDatas = [
{"timestamp":"06:00:00","A":99.49,"B":337.77,"C":155.98},
{"timestamp":"07:00:00","A":455.67,"B":474.1,"C":751.68},
{"timestamp":"08:00:00","A":1071.02,"B":598.14,"C":890.47}
];
var tableDatafields = [
{"name":"timestamp","type":"string"},
{"name":"A","type":"number"},
{"name":"B","type":"number"},
{"name":"C","type":"number"}
];
var tableColumns = [
{"text":"Times","datafield":"timestamp","editable":"false","align":"center","cellsalign":"center","width":150},
{"text":"A","datafield":"A","editable":"false","align":"center"},
{"text":"B","datafield":"B","editable":"false","align":"center"},
{"text":"C","datafield":"C","editable":"false","align":"center"}
];
function setTableData(table_data,table_column,table_datafields)
{
sourceTable.localdata = table_data;
sourceTable.datafields = table_datafields;
dataAdapterTable = new $.jqx.dataAdapter(sourceTable);
$("#jqxgrid").jqxGrid({columns:table_column});
$("#jqxgrid").jqxGrid('updatebounddata');
$('#jqxgrid').jqxGrid('sortby', 'timestamp', 'asc');
$("#jqxgrid").jqxGrid('autoresizecolumns');
for(var i=0;i<table_column.length;i++){
$('#jqxgrid').jqxGrid('setcolumnproperty',table_column[i].datafield,'cellsrenderer',cellsrenderer);
}
}
var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
if (value||value===0) {
return value;
}
else {
return '-';
}
};
var sourceTable ={ localdata: '', datatype: 'array'};
var dataAdapterTable = new $.jqx.dataAdapter(sourceTable);
dataAdapterTable.dataBind();
$("#jqxgrid").jqxGrid({
width: '500',
autoheight:true,
source: dataAdapterTable,
sortable: true,
columnsresize: false,
selectionmode: 'none',
columns: [{ text: '', datafield: 'timestamp', width:'100%' , editable: false, align:'center'}]
});
setTableData(tableDatas,tableColumns,tableDatafields);
Html:
<div id="jqxgrid"></div>
<button id="export_bt">Export</button>
<div id="debug"></div>
http://jsfiddle.net/jedipalm/jHE7k/1/
You can add the data type in your source object as below.
datafields: [{ "name": "timestamp", "type": "number" }]
And also I suggest you to apply cellsformat in your column definition.
{ text: 'timestamp', datafield: 'timestamp', cellsalign: 'right', cellsformat: 'd' }
The possible formats can be seen here.
Hope that helps
You can export data in very fast way just like it is id jqxGrid with
var rows = $("#jqxGrid").jqxGrid("getrows");
It will be json array.
I have to obtain the date value from the database which is given in the format
YYYY-MM-DD and display in the jqxgrid in the same format,,,
I have used the following code:
text : ‘Start Date’, id: ‘startDatePopUp’,datafield : ‘startDate’, columntype: ‘datetimeinput’, cellsformat: ‘YYYY-MM-DD’, align : ‘center’, width : 150, cellsalign : ‘center’,
but it is being displayed in the grid as YYYY-MM-DD 00:00:00.0
how will I display the date value in the format YYYY-MM-DD in the jqxgrid??
Thanks & Regards,
ssp
In the source try adding the following attributes.
{ name: 'LastLoginDate', type: 'date', format: 'd' },
Then in the Cell definition.
{ text: 'Last Activity', datafield: 'LastLoginDate', cellsformat: 'yyyyy-MM-dd' },
Try adding the 'format' in the source like
var source={
datafield:[
{ name: 'startDate',type:'date',format:'yyyy/MM/dd' }
]
}
here's a working sample for you .....
https://jsfiddle.net/Vinod1/by6duep4/10/
and this is the specific part of the sample code.
{
text: 'Date',
datafield: 'date',
filtertype: 'date',
cellsalign: 'right',
width: '100',
cellsformat: 'yyyy/MM/dd' }
I have a class (Person) with 4 properties : Id, FirstName, LastName, Code.
I show a person list in a jqgrid. I'd like a link column with this format (the code has this format 2011.0001)
/Person/Detail/Code => /Person/Code/2011.0001
But I have this with the code below :
/Customer/Detail?Code=2
I tried this :
colModel: [
{ name: 'Code', index: 'Code', formatter: 'showlink', formatoptions: { baseLinkUrl: '/Customer/Detail', idName: 'Code' }},
{ name: 'LastName', index: 'LastName', align: 'left' },
{ name: 'FirstName', index: 'FirstName', align: 'left' }
],
How can I correct this ?
Thanks,
Update1, Data format
[
{"Id":1,"FirstName":"AAAA","LastName":"AA","Code":"2011.0001"},
{"Id":3,"FirstName":"BBBB","LastName":"BB","Code":"2011.0003"}
]
You can try to use the custom formatter in the form
formatter: function (cellvalue, options, rowObject) {
return '' + cellvalue + '';
}
instead of predefined formatter 'showlink':
formatter: 'showlink', formatoptions: {baseLinkUrl:'/Customer/Detail', idName:'Code'}
You can easy receive /Customer/Detail?Code=2011.0001 if you have unique data in the 'Code' column and if you would add key: true to the column definition. In the case the Id value from the JSON input will be ignored and the value from the 'Code' column will be used as the rowid. If you do need to have the href value in the form /Customer/Detail/Code/2011.0001 or instead of /Customer/Detail?Code=2011.0001 you will need use custom formatter as I described before.