I have a Kendo Grid where one of the columns is a Boostrap progress bar. It is animated and represents a file upload.(the width value is modified with angular)
Once the item is done I remove the item with the remove function like this"
Grid.dataSource.remove(item);
However all the rest of items in the grid get refreshed somehow and the progress bars go back to zero and get refilled. So if an item in the list is at 70%, it will go back to zero and get refilled quickly.
It happens very fast in a split second but it just looks bad.
Is it possible to stop the refresh of other items and only remove a single item in the datasource?
Here is what has been working for me, as long as you have selected the row you want to remove.
var grid= $("#Grid").data("kendoGrid");
grid.removeRow(grid.select());
If you have not manually selected it, you can do it via js:
grid.select(-1); //this cleans the current selection
var tr = $("#Grid").find("tbody").find("tr")[index]; // 0 based index of the item you want to select
grid.select(tr);
Try that and let me know if it helped
Related
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).
Please see this pen
I am attempting to synchronize the select menu's with the filters in the sales by branch chart.
if you filter the chart the select menu has its filters changed but if you try the other way the multi-select fails to work correctly after removing the first filter.
has anyone made anything similar work.
I have a feeling that I am doing something stupid.. cause this should not be this hard
here is the on change for the select menu
$('#branchselect').selectpicker('refresh')
$('#branchselect').on("change",function(){
console.log("on chanage")
var filters = [];
//fromonchange =true;
$.each($("#branchselect option:selected"), function(){
filters.push($(this).val());
});
console.log(" on change dd Filters")
console.log(filters)
console.log("on change chart filters")
console.log(salesbybranch.filters())
bfilter =[]
bfilter[0] = filters
salesbybranch.filter(bfilter)
dc.redrawAll()
});
I don't see what is causing the select to start acting like a single select unless it is the toggle nature of how the chart filters work?
The easiest way to see the difference in behavior is to note that both the select and the chart start with all items selected. then start deselecting/selecting items in the chart and note that the select stays in sync.
reload the page and then try the same from the select after the second branch is deselected all items but the last clicked item are deselected.
I have a Kendo ListView bound to an Observable object and all is working well.
I'm able to:
Add items to the list
Edit existing items by using the edit template below
Delete items
One oddity though is when I switch an item to edit view and click Cancel it resets all data back to the original data. So if I started with one item with say name and amount fields, I edit the item and change the amount, then add two more items to the list all is well. But then I click edit on any of the items and immediately click cancel, from here it removes all the additional items I added and resets the data for the first item back to what it was at the beginning.
Why would the cancel action do that?
This dojo snippet shows the exact problem I'm having: http://dojo.telerik.com/IKowo
Kendo version 2016.3.1118
EDIT:
One further development, I found a forum post on Telerik stating that you have to have an ID column and a schema:model:id setup otherwise things won't work as expected.
I've updated the dojo snippet as follows: http://dojo.telerik.com/IKowo/2
Since adding the ID to the mix it looks like the amounts aren't being affected by the cancel button but the newly added items still get removed.
Follow the example provided here by telerik
//Binding Listview to local data array & Perform CRUD
http://dojo.telerik.com/eWih/2
The Only Requirement for the cancel event not deleting the new Items is:
The id field should be kept 0 when adding the new item to the datasource
It should be incremented / Updated in the datasource transport.create event (REQUIRED)
happy coding!
I want to allow the user to color selected cells by clicking a button (say, red, green and blue buttons).
To get the selected cells I found this code:
$('div#example1').handsontable(options);
//get the instance using jQuery wrapper
var ht = $('#example1').handsontable('getInstance');
//Return index of the currently selected cells as an array [startRow, startCol, endRow, endCol]
var sel = ht.getSelected();
//'alert' the index of the starting row of the selection
alert(sel[0]);
But I can't run this code when clicking a button, because the selection "disappear" after clicking and before the function starts to run.
I try following this instruction but I need a workaround this issue.
please add outsideClickDeselects: false, to your options in constructor and you can perform the 'ht.getSelected()' method.
How about using the afterSelectionEnd event to store the selection in a hidden field?
Then when pressing the button, you highligh/color the cells using the hidden selection info.
Would that work?
I have a grid like this:
To edit a line, the user chooses one from the grid an click the "pen" icon. Then, the record is displayed in the form.
To save the form, choose the save button link. Ok.
Now I need to update the line in the grid.
I get this working, doing the follow in javascript:
$.post(this.href,
sf,
function (response) {
$("#form-edicao").html(response);
var $grid = $("#Grid").data("tGrid");
$grid.rebind(); //==this line update the grid
});
But this approach updates all the grid, return to the first page...
I need to update just one line.
In common table grids, I replace some html elements. How to do this in this mysterious grid?
Taking a look at the Client-side API of the Grid component I think that using .ajaxRequest() instead might be what you're looking for. .rebind() resets the state (page number, filter/sort expressions etc.) while .ajaxRequest() shouldn't.