I would like to have a column in my angularjs ui-grid that displays a datetime eg"dd/MMM/yyyy hh:mm:ss".
I have found heaps of documentation on using date fields, but there seems to be nothing for datetime fields. When I use the following columnDefs, the TimeDown field renders blank.
Has anyone had any success with datetime columns?
Thanks in advance.
Damien.
$scope.gridOptions = {
enableRowSelection:true,
columnDefs: [
{ name: 'IncidentRef',displayName:'Incident', width:'20%' },
{ name: 'Areas' },
{ name: 'TimeDown', type:'datetime',cellFilter: 'datetime:"dd MMM yyyy hh:mm"'},
{ name: 'TotalNumberOff', displayName: 'Total off', width: '10%' }
]
};
Thanks S. Divya, that reference helped. The problem was the type 'datetime'. It should be 'date'. Here is the working code:
$scope.gridOptions = {
enableRowSelection:true,
columnDefs: [
{ name: 'IncidentRef',displayName:'Incident', width:'20%' },
{ name: 'Areas' },
{ name: 'TimeDown', type:'date',cellFilter: 'date:"dd MMM yyyy hh:mm"'},
{ name: 'TotalNumberOff', displayName: 'Total off', width: '10%' }
]};
Related
I have a react material-ui DataGrid.
One of the cells shows text data representing status, which I want to show in a graphical way - specifically bootstrap badge.
The DataGrid code is:
const ProcessesColumns: ColDef[] = [
{ field: 'id', headerName: 'ID' },
{ field: 'name', headerName: 'Name', width: 300 },
{ field: 'status', headerName: 'Status', width: 130 },
];
const processes = [
{
id: 1,
name: 'aaa',
status: 'Sucess',
},
{
id: 2,
name: 'bbb',
status: 'Fail',
},
{
id: 3,
name: 'ccc',
status: 'Sucess',
},
{
id: 4,
name: 'ddd',
status: 'Success',
},
{
id: 5,
name: 'eee',
status: 'Sucess',
},
{
id: 6,
name: 'fff',
status: 'Fail',
},
]
<DataGrid rows={processes} columns={ProcessesColumns} pageSize={10} />
I think you should check this
You can add a renderCell attribute on your status column definition
I think you can do it with renderCell. Here's an example of something similar, and I hope it helps.
I have a column which cells I want to format to have an icon and a value, and I created that in a format function:
const priorityFormater = (cell) => {
return (
<span>
<GrStatusGoodSmall className={taskPriorityColor(cell)} />
<span className="priority-span">{cell}</span>
</span>
);
};
Column definition:
{
field: "priority",
headerName: "Priority",
flex: 0,
minWidth: 140,
renderCell: (params) => {
return priorityFormater(params.value);
},
},
Result:
Is there any way to remove the currency prefix from react's material-table since I am using different currencies on the table, it becomes confusing to stick to just one prefix as I have a different column to display the type of currency
Any help would be appreciated, thanks
Here is a chunk of the source code for creating the table, I am getting the data from an API endpoint
<MaterialTable style={{marginLeft:'10px', marginRight:'10px'}}
title="INVOICES"
columns={[
{ title: 'Seller Name', field: 'seller' },
{ title: 'Buyer Name', field: 'buyer' },
{ title: 'Invoice No', field: 'invoice_number' },
{ title: 'Currency', field: 'currency' },
{ title: 'Amount', field: 'invoice_amount', type:'currency', currencySetting:{ currencyCode:'USD', minimumFractionDigits:0, maximumFractionDigits:2}},
{ title: 'Invoice Date', field: 'invoice_date' },
{ title: 'Eligible Date', field: 'date_eligible' },
{ title: 'Due Date', field: 'due_date' },
{ title: 'Status', field: 'status' },
]}
data={this.state.stats}
I'm not using material-table, but I played a little with it. This is the the source code of material-table where the error has created:
Intl.NumberFormat(currencySetting.locale !== undefined ? currencySetting.locale : 'en-US', {
style: 'currency',
currency: currencySetting.currencyCode !== undefined ? currencySetting.currencyCode : 'USD',
minimumFractionDigits: currencySetting.minimumFractionDigits !== undefined ? currencySetting.minimumFractionDigits : 2,
maximumFractionDigits: currencySetting.maximumFractionDigits !== undefined ? currencySetting.maximumFractionDigits : 2
}).format(value !== undefined ? value : 0);
It uses the Intl.NumberFormat standard Javascript function to format the currency. This function supports 47 country.
You can play with this function here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
For example for Hungary (my country) I can call it with:
new Intl.NumberFormat('hu', { style: 'currency', currency: 'huf' }).format(number);
So I should change the columnDefinition to:
{ title: 'Amount', field: 'invoice_amount', type:'currency', currencySetting:{ locale: 'hu',currencyCode:'huf', minimumFractionDigits:0, maximumFractionDigits:2}},
Please note, that I added a locale: 'hu' and I changed the currencyCode to 'huf'.
If your country is not in the supported countries. Try something else with similar formatting.
ShieldUI v 1.7.36 NP
URL: http://hccm.org/gala_signup_list.php
Code
HTML:
<div class="about-bottom">
<div class="col-md-12 about-left">
<div id="grid"></div>
</div>
</div>
Javascript:
$(document).ready(function() {
$('#return_btn').click(function() {
window.location = 'gala.php';
})
plgrid = $("#grid").shieldGrid({
dataSource: {
remote: {
read: {
url: "api/GetGalaSignupList",
dataType: "json",
xhrFields: {
withCredentials: false
}
}
},
noRecordsText: "There are no Registrants",
columns: [
{field:'registrant_name', title: "Registrant Name", width: "30%"},
{field: 'registrant_email', title: "Email", width: "30%"},
{field: 'registrant_phone', title: "Phone"},
{field: 'registrant_mail', title: "Address", width: "30%"},
{field: 'table_name', title: "Table Name", width: "20%"},
{field: 'numtix', title: "Num Tix", width: "20%"}
]
}
});
plgrid.show();
});
Data, <snip> data can be seen at URL
[
{
"registrant_name":"Jeff Seiler",
"registrant_email":"<snip>",
"registrant_phone":"<snip>",
"registrant_mail":"507 Las Colinas",
"ticket_type":"Individual",
"table_name":"Mr and Mrs Jeff Seiler",
"numtix":"2"
},
{
"registrant_name":"Jan Halstead",
"registrant_email":"<snip>",
"registrant_phone":"<snip>",
"registrant_mail":"115 Mason Oaks",
"ticket_type":"Individual",
"table_name":"",
"numtix":"1"
}
]
But it isn't showing the title based on the title attributes, it shows only JSON column names. What am I doing wrong to cause this? I can change my JSON but am wondering why the title attribute isn't working.
I see you are reading data remotely from an url, I think you should define a
schema of the fields used in the datasource. You can check here how they are
defined. You should point the path and data type.
https://www.shieldui.com/documentation/datasource/javascript/api/settings/schema/fields
I suspect the cause of not showing the titles is that you have not defined field schema.
I am new to this platform, I have a select option box and a another select box then the number input field. if the user select fieldName by selection and operator by selection and enter the number then the submit button to get the data from the server.
var app = angular.module("app", []);
app.controller('OutletController', function($scope, $http) {
$scope.minVal = "";
$scope.GetFullDetails = function(outlets) {
$scope.outlets = [];
$scope.err = [];
$http.get("http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus?" + $scope.minVal).
success(function(data) {
$scope.outlets = data;
}).
error(function(data) {
$scope.err = data;
});
}
});
$scope.selectField = [{
displayname: "Field Name",
valueType: "",
fieldname: ""
}, {
displayname: "Keyword",
valueType: "text",
fieldname: "keyword"
}, {
displayname: "Offer Status",
valueType: "text",
fieldname: "offerStatus"
}, {
displayname: "Start Date",
valueType: "date",
fieldname: "startDate"
}, {
displayname: "End Date",
valueType: "date",
fieldname: "endDate"
}, {
displayname: "Total Run Span",
valueType: "number",
fieldname: "totalRunSpan"
}, {
displayname: "Foot Fall",
valueType: "number",
fieldname: "footfall"
}];
$scope.selfield = $scope.selectField["0"];
//<------------------------------ Operator section ------------------------------------->//
$scope.Operators = [{
displayname: "Operator",
fieldname: ""
}, {
displayname: "Greater Than",
fieldname: "greaterThan"
}, {
displayname: "Between",
fieldname: "between"
}];
$scope.optrfield = $scope.Operators["0"];
<select name="Select Field" ng-model="selfield"
ng-options="fld as fld.displayname for fld in selectField"
ng-change="selectfld()">
</select>
<select name="Operators" ng-model="optrfield"
ng-options="opr as opr.displayname for opr in Operators"
ng-change="selectOptr()" ng-show="operat">
</select>
<input type="number" name="min number" ng-model="minVal"
placeholder="Enter Value" ng-show="minN">
Example: if the user selectfield = footfall and select the operator = greaterthan and input value of 50. after submit the data should bring from the server.
Thanks in Advance!!!
I will start with assumption on what do you want to do, since it's not so clear from your post.
You basically have an endpoint at http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus and you want to pass it parameters like minVal, selfield and optrfield?
If this is the question, then there are several possibilities.
The easiest thing you can do is to just values to your URL string.
$http.get("http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus?minVal=" + $scope.minVal + "&optrfield=" + $scope.optrfield + "&selfield="+ $scope.selfield)
or more cleanly:
$http.get(`http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus?minVal=${$scope.minVal}&optrfield=${$scope.optrfield}&selfield=${$scope.selfield}`)
Please note that minVal, optrfield and selfield that are inside the string (not your controller variables) need to match your method parameters in your server code.
Also, you can always do it like this:
var request = {
url: 'http://10.0.1.17:8080/VoucherSkout/resource/openWebApi/reports/outletStatus',
method: 'GET',
data: {
minVal: $scope.minVal,
optrfield: $scope.optrfield,
selfield: $scope.selfield
}
}
$http(request)
//rest of your code
For more information, please check out this link.
Nested property keys is working fine with default type. But it's not working with the below custom template. Why ?
Here is my fields:
vm.fields = [
{
type: 'editableInput',
key: 'profile.name.firstname',
templateOptions: {
label: 'First Name'
}
},
{
type: 'editableInput',
key: 'profile.name.lastname',
templateOptions: {
label: 'Last Name'
}
}
];
What I expected :
{
"profile": {
"name": {
"firstname": "rajagopal",
"lastname": "subramanian"
}
}
But this is what I get:
{
"profile.name.firstname": "rajagopal",
"profile.name.lastname": "subramanian"
}
My Formly Config:
formlyConfig.setType({
extends: 'input',
template: '<div><span editable-text="model[options.key]" e-name="{{::id}}"}}">{{ model[options.key] || "empty" }}</span></div>',
name: 'editableInput'
});
Here is JSBIN
Thanks in advance.
The issue is with how nested keys work with angular-formly. Basically it only works with elements that have an ng-model. The work around for you is to use the model property, and not nested keys (like this):
{
type: 'editableInput',
model: 'model.profile.name',
key: 'firstname',
templateOptions: {
label: 'First Name',
placeholder: 'Enter your First Name'
}
},
{
type: 'editableInput',
model: 'model.profile.name',
key: 'lastname',
templateOptions: {
label: 'Last Name',
placeholder: 'Enter your First Name'
}
}
Good luck!
profile.name.firstname - > profile[name][firstname]
It's my imagine.I have never used Angular