I have try to set a culture to Ireland Currency '€' to the footerTemplate. But it always set the US '$' Currency in footerTemplate.
Sample column:
{
field: "IEGrantTotalAvg",
title: "%",
type: "number",
filterable: false,
format: "{0:c3}",
attributes: { "class": "right-align" },
footerTemplate: function (data) {
return "<div style='white-space:initial;float:right'>" + " " + kendo.toString((Avg == null ? 0 : Avg), "c3") + "</div>";
}
}
Thanks in advance!
You will need to set the current culture in Kendo. See documentation here. Note that you will also need to include the respective culture script to the page.
I have created a JS Fiddle showing currency formatting with culture en-IE in the footer template.
Related
Can you tell me how to set a footer template on Angular UI grid when group feature is enabled ?
Here is the Plunker.
I have tried like this.But it's not working.I need to set a Total Properties on the Balance column.
footerCellTemplate: '<div class="ui-grid-cell-contents">Total Properties
{{customTreeAggregationFinalizerFn: function (aggregation) {
aggregation.rendered = aggregation.value; }}} </div>', treeAggregationType:
uiGridGroupingConstants.aggregation.COUNT
Update :
This is working when for simple aggregation where without Groping.But how can I use it with the Grouping ?
{ field: 'balance', footerCellTemplate: '<div class="ui-grid-cell-
contents">Total Properties {{col.getAggregationValue() | number:2 }}</div>',
aggregationType: uiGridConstants.aggregationTypes.count}
You can just set aggregationLabel property on the column to add the "Total Properties"
{ name: 'balance', width: '45%', cellFilter: 'currency', treeAggregationType: uiGridGroupingConstants.aggregation.AVG, customTreeAggregationFinalizerFn: function( aggregation ) {
aggregation.rendered = aggregation.value;
},aggregationLabel : "Total Properties : " }
Is there any possibility of showing more than one label in the category axis?
I need to show two fields from my data source in my category axis(And,yes there is no multi category axis. I need to show multiple fields on the same category axis. Please help if I'm missing out searching for any related topic.
Thanks in advance.
You can use label templates on the categoryAxis labels:
categoryAxis: {
field: 'submitTime',
majorGridLines: {
visible: false
},
labels: {
visible: true,
template: ' #= FormatLabel(dataItem) # '
}
},
In this example the template is passing the dataItem to a function which builds the desired string:
function FormatLabel(dataItem){
var tg = dataItem.TargetGroup;
var st = dataItem.submitTime.replace(" ", "\n");
return tg + "\n" + st;
}
DEMO
In your series, you can define the template on the label to display pretty much anything you want from the item it is bound to.
series: [
{
field: 'totalVisits',
name: 'Total Visits',
labels: {
visible: true,
template: ' #= dataItem.month # \n Total Visits : #= dataItem.totalVisits # \n Unique Visitors : #= dataItem.uniqueVisitors # '
}
}
],
See working sample at Kendo Dojo
If you need a bit more functionality, you can set that template to a function, and return whatever you want from it.
series: [
{
field: 'totalVisits',
name: 'Total Visits',
labels: {
visible: true,
template: chartSeriesTemplate
}
}
],
function chartSeriesTemplate(e) {
return kendo.format("{0} \n Total Visits:{1}\n Unique Visitors:{2} \n Ratio :{3}", e.dataItem.month, e.dataItem.totalVisits, e.dataItem.uniqueVisitors, (parseInt(e.dataItem.uniqueVisitors) / parseInt(e.dataItem.totalVisits)).toFixed(2));
}
See working sample at Kendo Dojo
Documentation for series template at Kendo Docs
I have a KendoUI Grid bound using Angular and I'd like to implement a custom action dropdown command or template column on each row. I need to track the dropdown change event for any of the rows when the grid is in display mode, not edit mode. The dropdown is effectively just a list of all of the name properties of the grid rows that I want to user to be able to select to move the row after another existing row.
For instance, say I have this data:
Id Name Position
A Red 1
B Blue 2
C White 3
I'd like each row to display a dropdown column while in display mode (so it acts like a row command). The dropdown would contain the names Red,Blue,White with corresponding values. When a user picks one of those colors, I will change the position of that row to the row position after the color selected. It's basically a row reorder dropdown instead of using drag and drop.
My other option is to show a couple of template columns with a move up/move down metaphor to do the switch but that gets a little cumbersome when you want to move a row more than a couple of positions.
Any ideas?
Ok, I did some more searching and found out a way to do this although it's not 100% of the way there yet. I also found a way to bind the dropdown to the data that populates the grid
The other thing I found when doing it this way is it is painfully slow in rendering the grid now.
<div id="mainGrid" kendo-grid="mainGrid" k-options="mainGridOptions"></div>
//grid columns
$scope.mainGridOptions = {
dataSource: {
transport: {
read: function (e) {
gridcolumnService.getGridColumns().success(function (data) {
e.success(data);
});
},
},
},
columns: [
{ field: "Name" },
{ field: "ColumnSettings.Type", title: "Type" },
{ field: "ColumnSettings.PrimaryKey", title: "Primary Key", template: '<input type="checkbox" #= ColumnSettings.PrimaryKey ? "checked=checked" : "" # disabled="disabled" ></input>' },
{ field: "ColumnSettings.Title", title: "Title" },
{ field: "ColumnSettings.Editable", title: "Editable", template: '<input type="checkbox" #= ColumnSettings.Editable ? "checked=checked" : "" # disabled="disabled" ></input>' },
{ field: "ColumnSettings.Visible", title: "Visible", template: '<input type="checkbox" #= ColumnSettings.Visible ? "checked=checked" : "" # disabled="disabled" ></input>' },
{ field: "LookupDataCommandId", title: "Lookup", template: '#= LookupDataCommandId ? "Yes" : "" #' },
{ template: '<select id="reorder-dropdown" kendo-drop-down-list k-on-change="exchangeRows(dataItem, kendoEvent)" k-data-source="reorderData()" k-data-text-field="\'Name\'" k-data-value-field="\'GridColumnId\'"></select>' },
{ template: '<a kendo-button k-icon="\'pencil\'" ng-click="editGridColumn(dataItem.GridColumnId)">Edit</a>', width: 100 }
]
};
$scope.reorderData = function() {
return $scope.mainGrid.dataSource.data();
};
$scope.exchangeRows = function (fromRow, e) {
$log.log(fromRow.GridColumnId, e.sender.dataItem().GridColumnId);
};
I'm using the new Angular UI Grid (that is planned to replace ng-grid).
My data needs some formatting before it's displayed in the table. For instance, my server returns an attribute named "status" as a number, but I want to display it as a nice name.
If status=1 display "Todo", if status=2 display "Doing" etc.
How can this be done in UI Grid?
The preferred method now is to use a cellFilter, rather than a custom template. Custom templates are OK, but they impose more workload on upgrade - you have to check whether new features require modifications to your template.
There is a reasonable example of filters in the tutorials: http://ui-grid.info/docs/#/tutorial/201_editable
Note the cellFilter: 'mapGender' on the gender column, and the filter itself defined further below in the tutorial:
.filter('mapGender', function() {
var genderHash = {
1: 'male',
2: 'female'
};
return function(input) {
if (!input){
return '';
} else {
return genderHash[input];
}
};
})
First step, add a cellTemplate to the column:
$scope.gridOptions.columnDefs = [
{field:'status', displayName: 'Status',cellTemplate: 'statusTemplate.html'}
];
The Template-File should look like this (COL_FIELD is the actual field):
<div style="text-align: center">{{COL_FIELD==1 ? 'Todo' : 'Doing'"}}</div>
Hope, you got the idea! :)
The shortest way is use CellTemplate with appScopeProvider:
vm.gridOptions = {
columnDefs: [
{
field: 'status',
cellTemplate: '<div>{{grid.appScope.formatStatus(row)}</div>'
}
],
appScopeProvider: {
formatStatus: function (row) {
return row.entity.status === 1 ? 'Todo' : 'Doing';
},
}
}
I have an ext js grid like below:
var grid = new Ext.grid.GridPanel({
columns: [
{header: 'Account Id',dataIndex:'accountId' },
{header: 'Account NUmber',dataIndex:'accountNumber' }
]
})
Now I need to show Account Id column as a column of radio buttons. So from the grid user can select one Account Id and submit. When the user reloads the page, that account id should be preselected.
I need some help on how to proceed on this. Do I need to write a renderer on Account Id column? Or is there an easier way.
EDIT: I did like this:
{header: 'Account Id',dataIndex:'accountId',renderer: function(value) {
return "<input type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
}},
What is the syntax to add an onclick event or onchange event to the radio group?
Building off the previous answer, yes, I think using a renderer for your column is the correct solution. I think you should go about the click event differently than J. Bruni suggested though. I'd recommend a click listener on your grid panel that checks if you clicked a radio button, and delegates to a method in your GridPanel.
Something like this:
MyRadioGrid = Ext.extend(Ext.grid.GridPanel, {
columns: [
{header: 'Account Id',dataIndex:'accountId', renderer: function(value) {
return "<input type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
}},
{header: 'Account NUmber',dataIndex:'accountNumber' }
],
afterRender: function() {
MyRadioGrid.superclass.afterRender.apply(this, arguments);
this.el.on('click', this.checkRadioClick, this);
},
checkRadioClick: function(event) {
if (event.getTarget('input[type="radio"]')) {
//radio clicked... do something
}
}
});
You did well on showing Account Id column as a column of radio buttons, by using a renderer function.
Regarding the onclick event for these, you may simply add the onclick attribute in the HTML tag:
return "<input onclick='my_function()' type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";