I'm developing an app using the amazing angularslickgrid.
Till now, i haven't got any problem, buy I found out an strange behaviour on it.
In the ngOnInit I wrote the following code:
ngOnInit(){
this.defineGridHeaders();
this.defineGridOptions();
this.obtainData();
}
Till this moment everything works well and the grid load correctly the data including the RowSelection column.
The problem is when I try to change the columndefinition, and perfrom a reset() like this:
this.defineGridHeaders();
this.angularGrid.gridService.resetGrid();
The new colums have been loaded correctly but i lose the rowSelection column.. :(
I've tried to include the defineGridOptions() function in the middle of the defineGridHeaders() and resetGrid() but the result is the same.
In the this.defineGridHeaders() I just perfom the following:
this.columnDefinitions = [];
[...FIELDS CREATION...]
const col = {
id,
name,
field,
sortable,
filterable,
type,
editor,
formatter,
filter,
outputType,
params,
minWidth: minwidth,
width: width,
header: header,
excludeFromExport,
excludeFromGridMenu,
excludeFromQuery,
excludeFromHeaderMenu
};
this.columnDefinitions.push(col);
Could someone help me on this?
Many Thanks!
Please note that I'm the author of Angular-Slickgrid and you opened an issue with the same question on GitHub, I'll simply reply with the same answer here
a reset is a reset, so it won't keep that. But I added the Row Selection in the Grid State not that long ago, so you could get it from there (just check the Grid State/Presets - Wiki. Dynamically adding a new column can be seen in this Example 3, you should look at the code on how to make it show up correctly (you can't just add it, you need to manually trigger a dirty change call, look at the example code for that)
Also to add a bit more to this, SlickGrid Row Selection is by row index, it's not by row data. Meaning that if your data changes when you refresh or something and you keep the row selection it will not synched anymore... all that to say, just remember, it's a row index, so pay attention when you want to keep or want to reapply a row selection.
If it's just to row selection that you lose, just save it before adding a column and put back the selection after adding the column. It's simple, get the row selection (with getSelectedRows) before you change the column definitions, add your new column and then put back the selection (with setSelectedRows).
Related
I have a column in a Google spreadsheet with data validation, that makes a drop down menu available when editing existing rows. Occasionally though contributors create new rows at the bottom of the doc and this validation is lost.
I would like to keep this validatation in the column even in newly created rows (excluding the header row).
I have seen much of this discussion throughout stackoverflow and google help forums, but still cannot find a clear answer.
My hunch is that this would involve Google Apps Acript using an onEdit trigger and then either paint formatting or a combination of the confusing class DataValidationBuilder. (https://developers.google.com/apps-script/reference/spreadsheet/data-validation-builder) but I'm not sure beyond that.
While not necessarily elegant I found the following to work:
create your validation on the entire column
once that's done click the cell(s) that represent the heading, select data / validation, and then click on 'remove validation' on that single cell.
This way any newly inserted rows will inherit the validation set up on the entire column and you don't have to always be reminded that your heading isn't a valid value.
onEdit trigger which uses Range.getDataValidation() and Range.setDataValidation() to copy the rule from an existing row to the new row
While in the data validation dialog screen you can manually enter the range as "Sheet1!A:A" to apply the formula to all of column A.
This also includes new rows added afterwards
I'm not sure if this is a new feature but this worked. Set the validation as list from interval and interval as:
'sheet'!C2:C
This includes all new rows excluding title(first row)
I have a single slickgrid that uses a dataview with the row selection model. I frequently assign a completely different array to the dataview, switching the data in this grid.
I use this function to swap datasets in the grid:
function setData(dataArray, uniqueIdFieldName) {
dataView.beginUpdate();
dataView.setItems(dataArray, uniqueIdFieldName)
dataView.endUpdate();
grid.resizeCanvas();
grid.invalidate();
}
The first time I use this function (to load the initial data into an empty grid), everything works great. Every time after that, it loads the data fine but has a selection bug. I can't select the first row in the grid. However, if I select a row other than the first, the bug seems to correct itself and I can then select the first row again. When I change the data again with my function, I once again can't select the first row.
Anyone know why this is happening?
I found the problem and solution. The problem is slickgrid is keeping all the data about the active cell/row even after you completely change it's data with setItems(). The internal variable activeCell is still set to an index value, even though no cells are selected anymore. The solution is to call grid.resetActiveCell() before changing the data. So the working code looks like this:
function setData(dataArray, uniqueIdFieldName) {
grid.resetActiveCell(); //THIS LINE ADDED
dataView.beginUpdate();
dataView.setItems(dataArray, uniqueIdFieldName)
dataView.endUpdate();
grid.resizeCanvas();
grid.invalidate();
}
It seems to me that this is a bug in slickGrid. The setItems() function should reset the selection variables internally before changing the rows, since obviously the current selection is going to be null and void after resetting the items and not doing so leaves the entire selection model in a faulty state.
We are developing a web app project in that we are using Kendo UI. Is that possible to make first column title/heading as what ever we selected from drop down. For example :- If a serial number is searched , serial number should be in the first column of the search. But I am unable to get that since we defined column definition generically in sorted manner. Depending upon selection we hide rest of the column.
for example:
xxx.GridColDef = [ {
field : "serialNo",
title : "Serial No",
}, {
field : "firstname",
title : "firstname",
}, {
field : "lastnameo",
title : "lastname",
},
from the drop down if i select first name the first name should be in the first column. but i am getting first column as serial no Is there any way? without adding separate column definition for each.
Kendo version - 2012.1.322
this should be done automatically not using column re-ordering not manually
Sorry if I am not clear. What I want is
In drop down I have
Serial No
First Name
Last Name
DOB
Initially the the grid will be as below
Serial No First Name Last Name DOB
If user selects "First Name" from drop down it should be like this
First Name Serial No Last Name DOB
Hope this helps. if you need more clarification let me know . Thanks for providing solution for this.
One more thing: -
"Fiddle using your current version of Kendo 2012.1.322 " in this fiddle i am unable to select from drop down.
Updated Answer 2
The current KendoUI grid framework does not support the ability to switch columns in code. I've created a new fiddle where you don't have to completely re-order the columns in every switch case. It loops through your column definition and if the drop down value is there, it removes it from the array and places it at the first position. I don't know how your 50 columns and 8 drop downs interact so it's hard for me to give a completely accurate answer. But between the multiple suggestions on here, I hope you can come to a solution :)
I created a new tempColumn definition variable so that the original column definition is still available in it's original state.
function onSelect(e) {
var ddlVal = this.dataItem(e.item.index()).value;
var tempColumns = columnDefinitions;
$(tempColumns).each(function(index) {
if (ddlVal == this.title) {
tempColumns.splice(index, 1);
tempColumns.splice(0, 0, this);
}
});
createGrid(tempColumns);
}
New fiddle which uses spice to re-order the columns
Updated Answer
I've created a new fiddle with your current version of Kendo. You don't need to update your version because I don't believe there is any way to do this within the Kendo framework.
This solution involves re-defining your column definitions when you make a selection from the drop down and then re-create the grid.
Updated fiddle with your current version of Kendo
*For some reason, Internet Explorer doesn't play nice with jsfiddle sometimes. This example works in Firefox and Chrome but not in IE. If you can't try a different browser to see it work, plug the code into your solution and test it.
Original Answer
I've provided 2 different solutions.
1) Is it possible for you to update your version of KendoUI? If you can, then you can take advantage of the .showColumn() and .hideColumn() methods.
Here's a fiddle below using KendoUI 2012.2.710. On the select event of the drop down, you just show/hide the appropriate columns. Really easy and straight forward.
Fiddle using Kendo 2012.2.710
2) If you can't update your KendoUI version, you can alter your columnDefinition array and then re-create the grid.
In the onSelect method of the drop down list, you remove the first column from the columnDefinition array and then add in the new column object to the array. After that, you remove the content of the grid's div element and then re-create the grid.
You're still binding to the same data so you don't have to go back across the wire to get the data again.
Fiddle using your current version of Kendo 2012.1.322
~ In both cases, the code could definitely be cleaned up to suit your needs better but I just wanted to give you some base functionality to work with. Hope this helps!
I'm trying to implement inline inserting in a JQGrid. My approach thus far is:
Use addRowData to put a blank row at the end with ID=-1
Use editGridRow to edit that row
Detect on the server that this update is actually an insert because ID=-1, and return the new ID value
Suprisingly, this rube goldberg scheme works pretty well. To make it seamless, though, I'd like to silently update the ID of the row that was just added, so that the user can continue to edit the other columns. I'd rather not do a grid.trigger("reloadGrid"), because I lose focus on that row.
I've tried
grid.setRowData(-1, { MyPrimaryKeyField: newID });
but that doesn't work (it still thinks the row's ID is -1). Is there an easy way to change the primary ID of a row without reloading the whole grid?
Actually you can't change grids primary row Id by "setRowData",
but there is a simple way to do it :
$("#-1").attr('id',newId);
;-)
You could work around this by making an AJAX call to do the insert and return the new ID. Once you have the ID, call reloadGrid and then select the row using the newly returned ID. You would want to also put up a spinner while you are doing this so the user knows your page is busy. Not quite what you are asking for but it should meet your needs.
I have a Infragistics UltraGrid using a bindingSource.
If I add a new object to my binding list, it adds a row to the bottom of the grid which is fine if there's no user defined sort.
Question is if the user clicks on a column header to sort the grid, is there a way for new rows to appear in the proper sorted order instead of always on the bottom?
Re-sorting all rows on every insert is too expensive.
Seems kind of ghetto. Infragistics support also indicated that the RefreshSortPosition() method is the only choice.
// Add to binding list which will trigger a row to be added to the bound ultragrid.
this.bindingList.Add(new Person("Smith", "John"));
// Get length since we know this will always be added to the end
int length = this.ultraGrid.Rows.All.Length;
// Get it to sort
this.ultraGrid.Rows[length - 1].RefreshSortPosition();
To be a bit more efficient, you can always be clever by disable redrawing, etc and then call refresh on a bunch of rows after a batch of orders, etc...
Hope that helps. I had very little luck Googling this problem.