This is based on slickgrid example 1. I would like to have the button inside slickgrid call another instance of slickgrid in another modal. At the moment i am unable to interact with the button inside the grid aside from getting it to display.
Here is my fiddle JSfiddle
{id: "newgrid", name: "newgrid", field: "newgrid", width: 80, sortable: true, formatter:reportFormatter}
function reportFormatter(row, cell, value, columnDef, dataContext) {
return "<button class='show-report'>show</button>";
}
Ive tried to use
myGrid.onClick.subscribe(function(e,args) {
if ($(e.target).hasClass('show-report')) {
alert("hello");
}
});
Use the onClick subscribe like this instead (and also right after it has been instantiated)
grid.onClick.subscribe(function(e,args) {
if ($(e.target).hasClass('show-report')) {
alert("hello");
}
});
Since the grid instance is like this
grid = new Slick.Grid("#myGrid", data, columns, options);
Related
I am trying to style a cell with a particular background color if the 'oldValue' and 'newValue' are not equal in the 'onCellValueChanged' handler.
var gridOptions = {
columnDefs: columnDefs,
rowData: rowData,
onCellValueChanged: function(params) {
if(params.oldValue !== params.newValue) {
params.colDef.cellStyle = function(params) {
return { backgroundColor: 'green'};
}
}
}
};
When I am editing the cell value to a new value, I don't see the style change being applied on tabbing out or clicking any other cell. Rather, I have to click back on the edited cell again and click outside after that to see the style being applied. I am not sure what is happening, can someone guide me here. I am also adding the demo
Bind it to your template
<ag-grid-angular (cellValueChanged)="onCellValueChanged($event)">
</ag-grid-angular>
I'm trying to add a new empty line in ui-grid. I've tried looking in different tuto and example, but all that I found didn't reply to my spec, and I wasn't able to adapt it to what I'm looking for.
In fact I'm looking how to add a new empty line in an existing ui-grid neither using a button outside the grid nor a button in the rowfooter.
I'm looking to add a abutton in the grid like the + button shown in the screen shot below
or may be render automatically a new empty line when the rendering the ui-grid and a new one when all rows were filled.
I tried doing that using function in cell template but it's not working.
any help is really appreciated
The first option sounds like more of a CSS issue to me. Essentially, the add button would use some sort of font library containing a +, and you would need to position it in the corner of the grid. Perhaps looking at the grid footer would be a starting place. It sounds like you've seen the basics of creating an add row button here: http://ui-grid.info/docs/#/tutorial/112_swapping_data
The second option (render automatically a new empty line when the rendering the ui-grid and a new one when all rows were filled) requires a JavaScript approach.
The basic logic I followed is:
(Assume) Some data loads from somewhere in a backend (in this sample, it's a simulated load returning a promise as $http or $resource would).
After that data is loaded, we append a new row. We wait for the data first; otherwise we'd not be pushing the new row to the correct location.
Upon completion of the edit action, we set a timeout to ensure subsequent edits on other cells do not keep firing a new row. If the timeout is reached, we append a new row. If a subsequent edit action occurs, and a timeout promise exists (for adding a new row), we cancel it. Once no edit actions occur, and the timeout is reached, we push the new row.
To ensure that we are only taking action when our "extra row" is modified, when we create a row, a reference is maintained to the current row such that we can evaluate whether or not a received event is of interest (var newRowTimeoutPromise).
The core logic in code is below, with a sample implementation in Plnkr:
var extraRow = null,
addNewTimeoutMillis = 2000,
newRowTimeoutPromise = null;
loadData().then(function(data) {
$scope.gridOpts.data = data;
}).finally(function() {
// add initial empty row, and set our reference to it
extraRow = addEmptyRow($scope.gridOpts.data);
})
$scope.gridOpts = {
showGridFooter: true,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
// listen for cell edit completion
gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {
// test if the edited row was the "extra row"
// otherwise, and edit to any row would fire a new row
// Set a timeout so we don't create a new row if the user has
// not finished their edit(s) on other fields
newRowTimeoutPromise = $timeout(function() {
if (rowEntity == extraRow) {
// add a new empty row, and set our reference to it
extraRow = addEmptyRow($scope.gridOpts.data);
newRowTimeoutPromise = null;
}
}, addNewTimeoutMillis);
})
// Listen for cell edit start, and cancel if we have a pending new
// row add. Otherwise, each time you finish the edit on a cell,
// this will fire.
gridApi.edit.on.beginCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {
if (newRowTimeoutPromise != null) {
$timeout.cancel(newRowTimeoutPromise);
}
})
}
};
http://plnkr.co/edit/IMisQEHlaZDCmCSpmnMZ?p=preview
I used jQuery to fetch and change style of specific cell elements of the cell template.
Here is a helpful Fiddle
Here is the controller script : -
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope',
function($scope) {
$scope.gridOptions = {};
$scope.Add = function() {
$scope.gridOptions.data.push( { firstName: ' ',lastName:'',company:'' });
$(".ui-grid-coluiGrid").prevObject["0"].activeElement.style.display="none";
$(".ui-grid-cell")[$scope.gridOptions.data.length-2].style.display="inline";
};
$scope.gridOptions.onRegisterApi = registerGridApi;
function registerGridApi(gridApi) {
$scope.gridApi= gridApi
};
$scope.gridOptions.columnDefs = [{
name: 'firstName',
field: 'firstName',
}, {
name: 'lastNamer',
field: 'firstName'
}, {
name: 'ShowScope',
cellTemplate: '<button id="btb" ng-click="grid.appScope.Add()">+</button>'
}];
$scope.gridOptions.data = [{ yourdata}];
}
]);
To make it work properly 2 more things have to be done
Use cellContentEditable to make the rows editable
In order to disable display style of cell template button that appears on cells corresponding to rows of already existing data,you could use angular foreach or a for loop to iterate through these rows and disable style(I tried using renderContainers but it always returns the length of rendered rows outside Add functions as 0).
I have a working plunker over here.
http://plnkr.co/edit/Vnn4K5DcCdiercc22Vry?p=preview
In columnDefs, I have defined a separate column for add:
{
name: 'add',
displayName: '',
enableCellEdit: false,
enableColumnMenu: false,
width: '3%',
cellTemplate: '<div class="ui-grid-cell-contents" ng-click="grid.appScope.addRow()"><span ng-click="grid.appScope.addRow()">Add</span></div>'
}
And
$scope.addRow= function(){
var newlist = {"remarks":'',"testName":''};
$scope.gridOptions.data.push(newlist);
}
Update: A second plunker with bootstrap icons for add/remove
http://plnkr.co/edit/FjsA2r?p=preview
I have two kendo grids (A, B) ...B its loaded by clicking in A and the its data source its loaded by a property of selected row in A ..
A.accounts
dataSource: {
data: this.gridA.dataItem(this.gridA.select()),
},
My problem its that in B I have to change a property using the grid, but when the property its changed the grid its reloaded and if i have 1000 rows when I change the property in the grid (anyrow, 999 i.e), the scroll back to the beginning
...I have read and try to understand it, but a can't fix it... according to the official documentation, the row selected by
var row = this.gridApprovals.select();
var caBean = this.gridApprovals.dataItem(row);
Its a ObservableObject, so, when I try to change a property, some method (of ObservableOject) it's making this behaviour, and the grid its reloaded, its iterating every data source item...
EDITED:
I forgot to mention.. its important keep the relation between the changes of the B grid and its relation in A slection..
Here is a Dojo Project http://dojo.telerik.com/uYemI/2
How about this?
http://dojo.telerik.com/#Stephen/aNije
I removed the k-rebind attribute and instead wire up the dataSource inside your setCarsGrid() method:
$scope.setCarsGrid = function() {
var row = this.brandGrid.select();
var brand = this.brandGrid.dataItem(row);
var brandObj=brand.toJSON();
var dataSource = new kendo.data.DataSource({
data: brand.cars,
schema:{
model:{
fields:{
id:{editable:false},
model:{editable:false},
color:{type:"string"}
}
},
parse: function(response) {
$.each(response, function(idx, elem) {
elem.id = elem.id+10;
//if you put a break point here, every time you try to edit 'color' field.. will be stop because datasourse is iterated again
console.log("Grid has been reloaded and the editable field 'color' can be edited :'( the id property has been added +10")
});
return response;
}
}
});
// This first time this is called, the carsGrid has not been initialized, so it doesn't exist.
// But subsequent times, we just need to set the new datasource.
if (this.carsGrid) {
this.carsGrid.setDataSource(dataSource);
}
$scope.carsGridOptions = {
dataSource: dataSource,
selectable:true,
editable: true,
columns: [{
field: "id",
},{
field: "model",
},{
field: "color",
}]
};
}
Essentially, I am just separating initialization of the GRID from the setting of the grid's DATASOURCE.
The first time through, you set up the grid options AND set the dataSource and then subsequent times through, we just set the grid to the new dataSource.
This avoids the k-rebind behaviour...which I believe is documented: http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-update-upon-option-changes
This approach is not suitable for dataBound widgets because those widgets are recreated on each change of their data—for example, after paging of the Grid.
Note, I don't really know angular so there may be a better way to organize this code, but it works.
I can hide a regular column in Kendo UI...
var grid = $("#MyGrid").data("kendoGrid");
grid.hideColumn("Id");
but I cannot seem to hide a command column such as this one...
columns.Command(command =>
{
command.Custom("Edit").Text("<span class=\"glyphicon glyphicon-pencil\"></span>").SendDataKeys(true).Click("ShowEditModal");
});
Thanks in advance!
You need to add the field property to your command column.
{ field: "coms", command: ["edit", "destroy"], title: " ", width: "250px" }
The hideColumn/showColumn actions use either the column number or column field "name".
Kendo API Reference
So, for example, using a button, you can do either:
$('#hide-col1').click(function () {
var col = grid.columns[4];
//var col = "coms";
if (col.hidden) {
grid.showColumn(col);
} else {
grid.hideColumn(col);
}
});
Or
$('#hide-col2').click(function () {
grid.hideColumn("coms");
});
Here's a working example: http://dojo.telerik.com/#nsnadell/uTeZu
If you wanted to only use the field property for a Show/Hide toggle, you'll need to put the field values in an array that has the same order as your columns and write a couple functions. But, not sure if that is a requirement for you.
Asked this question yesterday but not getting any response to posting it again in diffrent words-
I have two columns with summary row-
var cols = [
{ id: 'myCol1', header: 'Price1', dataIndex: 'PRICE1', type: 'float', width: 50, summaryType: 'sum' },
{ id: 'myCol2', header: 'Price2', dataIndex: 'PRICE2', type: 'float', width: 50, summaryType: 'sum' },
];
I want to add cellclick event to these summary row so that on click I can open a new window
If I use cellclick event of grid, it works for all cells except this summary row.
Is there any other event which I can use so that I would be able to click on it.
UPDATE:
I have used following listener which is not working for summary row
listeners: {
cellclick: function(grid, rowIndex, cellIndex) {
// do whatever
},
scope: this
}
As far as I know, there's no built-in event for summary row click. What you can do is add a listener to the cell element itself.
You can do that easily by using the delegate option of the listener. But this option is only available for DOM elements events, so we also have to use the element option to hook our event on the grid's body element (alternatively, you can use something like myGrid.getEl().on({ ... })).
Here's an example of listeners that you would add directly to your grid's config:
listeners: {
scope: this
,click: {
element: 'body'
// Would have been great to use '.x-grid-row-summary .x-grid-cell',
// but delegate only accept a *simple selector* which, seemingly,
// means just one class...
,delegate: '.x-grid-cell'
,fn: function(e, target) {
// Remove the condition if you want to catch all cells. You won't
// have all the arguments that are available in the cellclick
// event, though.
if (Ext.fly(target).up('tr').is('.x-grid-row-summary')) {
// The cellIndex is assigned by the table view when it render the
// cell element.
alert('Click on summary cell at index ' + target.cellIndex);
}
}
}
}
Unfortunately, this kind of code relies on class names and the cellIndex property that are set by Ext, and that may change in the future... Keep that in mind when you upgrade the lib!
I am not sure about the code u have used adding event for row click, but still i am adding this code to grid panel hope it helps,sry if u have tried already.. I have edited this below will do i believe..
listeners: {
cellclick: function(iView, iCellEl, iColIdx, iRecord, iRowEl, iRowIdx, iEvent) {
var fieldName = iView.getGridColumns()[iColIdx].dataIndex;
console.log(fieldName );
}
}