When I export my grid to excel,headers are like: Product Name,{{'unitsOrder'| translate}} in excel. My grid supports 2 languages and I am showing it with angularjs translate way. Any offer?
<script>
$("#grid").kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Kendo UI Grid Export.xlsx"
},
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 7
},
sortable: true,
pageable: true,
columns: [
{ width: 300, field: "ProductName", title: "<b>Product Name</b>" },
{ field: "UnitsOnOrder", title: "{{'unitsOrder'| translate}}" },
{ field: "UnitsInStock", title: "Units In Stock" }
]
});
</script>
I had a similar problem but I use i18next translation instead of angular but maybe it helps you find a solution to your case:
I use the 'excelExport' event to manually update the generated worksheet. Within the worksheet object I search for the header cells and manually trigger the translation for the text it contains:
excelExport: function(e) {
// First I loop through all rows in the worksheet
e.workbook.sheets[0].rows.forEach(function(row){
// Ignore 'data' rows (only use 'header' and 'footer')
if(row.type != 'data'){
// Loop through all cells of the row
row.cells.forEach(function(cell){
// Here I overwrite the cell value with its translation
// You have to implement translate() so it works with angular
cell.value = translate(cell.value)
});
}
});
},
You now have to write your own translate function which can handle your angular translation. As I use i18next for translations my solution won't help here (I use jquery to generate a jquery html object on which I can trigger the translation)
Related
I can't seem to figure out how to do this and google has been no help. I am using the ExtJS Spreadsheet model. I am trying to show the column with the row numbers, but I want to remove/hide the actual row numbers. I only want to keep the column that contain the row numbers. Any ideas on how I might go about doing this?
That should be easily done. As with every column, you have to add a custom renderer to the rownumberer column. So how do you get to that column?
For this, the spreadsheet selModel has a function getNumbererColumnConfig which you want to override. The unoverridden function from sources:
getNumbererColumnConfig: function() {
var me = this;
return {
xtype: 'rownumberer',
width: me.rowNumbererHeaderWidth,
editRenderer: ' ',
tdCls: me.rowNumbererTdCls,
cls: me.rowNumbererHeaderCls,
locked: me.hasLockedHeader
};
},
so, to override, you would do the following:
selModel: {
type: 'spreadsheet',
// Disables sorting by header click, though it will be still available via menu
columnSelect: true,
pruneRemoved: false,
extensible: 'y',
getNumbererColumnConfig: function() {
var me = this;
return {
xtype: 'rownumberer',
width: me.rowNumbererHeaderWidth,
renderer:function() { return ' '; },
editRenderer: ' ',
tdCls: me.rowNumbererTdCls,
cls: me.rowNumbererHeaderCls,
locked: me.hasLockedHeader
};
}
},
Tested in a Sencha fiddle
I need to display only a Date Collection object as a data source in my UI Grid.
Do I need to define a field under ColumnDefs in this case? Also, I need to include a column to delete that particular row, in this case Delete the current Date object.
How can I accomplish this? Below is my code
editor.mySeasonBreaks = {
data: "editor.mySeasons",
columnDefs:
[{ field: "????", visible: true, displayName: "Season Break" },
{
name: 'delete',
displayName: "",
cellTemplate: "<button ng-click="editor.delete(row.entity)" />"
}]
};
In the above code, editor.mySeasons is just a date array object.
Thanks in advance
You could create an object-array with your dates and define the columns as needed. This way you got more control and its easy to adjust/expand.
Now for your row-deletion I created a Plunkr thats showcases a possible solution.
As you suggest you need to add a cellTemplate that references your delete-function
cellTemplate: "<button ng-click=\"grid.appScope.delete(row)\">DELETE ROW</button>"
To access that function, you need to add it to your gridDefinition and ther property is called appScopeProvider
Possible setup would be
appScopeProvider: {
delete : function(row) {
editor.mySeasons.forEach(function(entry, index){
if(entry.myDate === row.entity.myDate) {
editor.mySeasons.splice(index, 1);
}
});
},
}
This is not recommended scenario, but you can use something like this:
$scope.myData=['2015-22-07', '2017-10-08', '2020-17-02'];
$scope.gridOptions = {
data: 'myData',
columnDefs: [
{
displayName: 'Date Array',
cellTemplate: '<div class="ngCellText ng-class="col.colIndex()">{{row.entity}}</div>'
}
]
};
You can test it here.
There are issues with sorting and probably something else.
It's better IMO to translate your array of dates to array of objects:
var res = [];
myData.forEach(function(el){
res.push({date: el});
});
Then specify column as usual:
{ field: 'date', visible: true, displayName: 'Season Break' }
I try to setup custom dropdown in Kendo UI.
I have a reference to my issue.
http://dojo.telerik.com/aFIZa/13
My issue is that I do not know how I can setup the selected text in the template attribute? I want to show the text field but save the id as a value. And I do not want to use external datasource. I would like it as inline in the json.
The code is below:
$scope.mainGridOptions = {
dataSource: $scope.dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field: "Category", title: "Category", width: "180px",
editor: function(container, options) {
var editor = $('<input kendo-drop-down-list required k-data-text-field="\'cat\'" k-data-value-field="\'id\'" k-data-source="{data:[{id: 1, cat: \'test\'}, {id: 2, cat: \'test2\'}]}" data-bind="value:Category"/>')
.appendTo(container);
$compile(editor)($scope);
editor.css("visibility", "visible");
}
, template:"selected text in the combo "
}
], editable: true
}
Ok, this was a tough one, but I think I could achieve what you want, or at least I got closer:
$scope.mainGridOptions =
{
dataSource: $scope.dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{
field: "Category", title: "Category", width: "180px",
editor: function(container, options)
{
// #1
var editor = $('<input kendo-drop-down-list required k-data-text-field="\'cat\'" k-data-value-field="\'id\'" k-data-source="{data:[{id: 1, cat: \'test\'}, {id: 2, cat: \'test2\'}]}" data-bind="value:Category,events:{ change: onChange }"/>')
.appendTo(container);
$compile(editor)($scope);
editor.css("visibility", "visible");
},
// #2
template:kendo.template($("#column-template").html())
}],
editable: true,
// #3
edit: function(e)
{
var ko = kendo.observable(
{
onChange: function(e)
{
var el = $(e.sender.element);
var ddl = el.data("kendoDropDownList");
var ds = $scope.dataSource.getByUid(el.closest("tr").data("uid"));
ds.OptionText = ddl.text();
},
});
var widget = $(e.container).find("input");
kendo.bind(widget, ko);
}
}});
Demo.
In the code you can notice 3 changes:
data-bind="value:Category,events:{ change: onChange }" Look that I have added an events object in the bind, which I declare onChange as the change event handler. We'll talk about this in the 3rd item below;
For a complex template(with javascript code and logic) I created a script content and rendered it at the template property. The template is this:
<script id="column-template" type="text/x-kendo-template">
# if (data.hasOwnProperty('OptionText')) { #
#: OptionText #
# } else { #
#: "selected text in the combo" #
# } #
</script>
In the template I simply check for the property OptionText in the model(dataSource's current item) and: if it exists, use it; else, use the default text. We'll talk about OptionText in the 3rd item, below;
Now, here I have added an edit event to the grid. In that event I created an observable object, where I define the onChange function handler. In that function I seek for the current dataSource(ds) and I add text of the selected item in the dropdownlist in it, as the property OptionText, which I use in the template above explained.
I hope this explains how it works(in fact I hate working with those binders and observables, but sometimes they are needed).
Good luck.
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 have a working sort-able grid using the ext 3.4 grid filter plugin. I would like to default the active column to filter true values. User who needs the inactive records could remove the filter. How do I specify a default filter column and value?
Thanks in advance!
colModel: new Ext.grid.ColumnModel({
defaults: {
sortable: true
// How do I specify a default filter value
//
// Only show active records unless the user changes the filter...
},
columns: [{
dataIndex:'f_uid',
id:'f_uid',
header:'ID',
hidden:true
}, {
dataIndex:'f_name',
id:'f_name',
header:'Name',
}, {
xtype:'booleancolumn',
dataIndex:'f_active',
id:'f_active',
header:'Active',
filterable:true,
trueText:'Active',
falseText:'Inactive'
}]
I realise this is an old question but it took me a while to find a solution, therefore I thought I would share.
1) The filter can be set using the value property in the filter.
filter: {
type: 'LIST',
value: ['VALUE TO FILTER']
}
2) In order to initially filter the data use the filterBy() method in the store. This could be defined in the onRender event handler.
this.getStore().load({
scope:this,
callback: function() {
// filter the store
this.getStore().filterBy(function(record, id) {
// true will display the record, false will not
return record.data.DATA_TO_FILTER == 'VALUE TO FILTER ';
});
}
});
The answer was in the Filter.js source code. The filter object within the column definition can be used to configure the default behavior.
}, {
xtype:'booleancolumn',
dataIndex:'f_active',
id:'f_active',
header:'Active',
trueText:'Active',
falseText:'Inactive',
filterable:true,
filter: {
value:1, // 0 is false, 1 is true
active:true // turn on the filter
}
}
I have encountered the same problem and I found that #John's answer is right, I can make it work with the sample http://dev.sencha.com/deploy/ext-4.0.0/examples/grid-filtering/grid-filter-local.html, for the grid-filter-local.js, just add the code like:
grid.getStore().load({
scope:this,
callback: function() {
// filter the store
grid.getStore().filterBy(function(record, id) {
// true will display the record, false will not
return record.data.size === 'small';
});
}
});
before the original code store.load(), and wipe off the store.load().
Then it will only show the record with size equals 'small' at the first load of the web page. Cheers!
I've made a universal helper class that allows you to set any default values in column definition.
https://gist.github.com/Eccenux/ea7332159d5c54823ad7
This should work with both remote and static stores. Note that this also works with filterbar plugin.
So your column item is something like:
{
header: 'Filename',
dataIndex: 'fileName',
filter: {
type: 'string',
// filename that starts with current year
value: Ext.Date.format(new Date(), 'Y'),
active:true
}
},
And then in your window component you just add something like:
initComponent: function() {
this.callParent();
// apply default filters from grid to store
var grid = this.down('grid');
var defaultFilters = Ext.create('Ext.ux.grid.DefaultFilters');
defaultFilters.apply(grid);
},