I have a treeview that can be updated by an asynchronous event, so when the event occurs and sends the new data to the treeview, it collapses. I would like to know if there is a possibility of updating it without doing a refresh of the whole component?
EDIT
Before update the data I´d like to know the itens that are expanded for after update the data keep the tree opened like before.
Related
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 have the amazing SlickGrid configured to access data asynchronously and post user changes back to the server asynchronously. In general terms, the server may modify a few fields of a row based on the user's changes. As such, after the row is updated I would like SlickGrid to refresh only that row without changing the rest of the view.
Does anyone know how to do this?
In my case, the field that changes on the server is a timestamp associated with the record that is updated by a database trigger. If the timestamp is out of date, the user has an old copy of data, and if they submit changes, they may overwrite a new copy. Since I can't find a way to trigger a refresh, the user cannot modify their own changes without refreshing the browser window (forcing a complete refresh).
You should be able to do this using grid.invalidateRow() and grid.render(). SlickGrid will re-render the affceted rows (assuming they are displayed in the currently visible viewport) without refreshing the entire page.
// Mark row 42 as changed and re-render the display
grid.invalidateRow(42);
grid.render();
For an example check out SlickGrid Example 14. (Click the Start Simulation button to see it in action)
function updateSlickgrid() {
dataView.setItems(tableName);
grid.invalidate();
}
Note : tableName could be the array or id etc.
I prefer storing all the slickgrid data in the array ex tableName = [];
Keep using the above function when it comes to displaying the data in slickgrid
I have a need to sort columns and separately I need to be able to sort fields accross columns and would like to hook into the col sort finished so that I can save the new column position and then also hook into the field sort finished event so that I can save the new field position
There is a jsFiddle showing an example here (doesn't seem to work in IE, but thats a different story!). What this shows is that when a column is dragged no alert is shown and when a field is dragged between columns the field AND column alerts are shown.
I'm using 'receive' to avoid multiple calls, one for the source and one for the target.
Any help would be really appreciated. Thanks
You should use different events to hook into, sortupdate does what you want. Because you are nesting sortables it is also important to prevent event bubbling, this is what causes your double alert. Here's an updated fiddle
By the way, when dragging a field to another column the sortupdate handler is called twice because two columns changed.
I have been looking for a while for a solution to monitor DOM node insertion/removal, without success. For example events like DOMnodeInserted are not cross-browser and are being deprecated.
I recently watched tutorials about libraries that implement MVC or MVVM patterns, like Backbone or Knockout. As such libraries monitor DOM elements, I was wondering if they could be used to monitor DOM node insertion/removal.
For example:
if I have a select element on the page, I'd like to trigger an action when a new option gets added.
if I have a table element on the page, I'd like to trigger an action when a row is added or removed.
This isn't what Knockout does, and I don't think you'll find success there.
You could do something like binding your select elements to a KO observableArray, then monitor that array for changes. But that doesn't stop someone from manually inserting a select element into the DOM.
Bottom line: for KO, you're barking up the wrong tree.
I have an ExtJS editor grid which has some columns inside. I want to modify data on a record and auto save data to DB. But I just need save data after I complete editing all cells at the current row. I've used the event "afteredit" but it fired the event right after one cell was changed.
How can I keep that event not to fire until I've completed modifying all cells? Or could you please suggest another way to do this, not use the "afteredit" event?
Thank you so much.
You might take a look at Ext.ux.grid.RowEditor. It has an afteredit event that fires when the row is done being edited.
You can find the working example at http://dev.sencha.com/deploy/dev/examples/grid/row-editor.html
Here is my question back: Do you edit all the cells in a row? A better solution would be to use a "save" button to send the updated data back to the server and save it into DB.
Now, if you insist that all cells at a row will be modified, you can do the following:
In afteredit event handler:
Get the record being edited (you can get it by event.record)
Check if all the fields have been modified in the record. This can be done by inspecting the public property modified.
If all the fields are modified, proceed with sending the updated record to server for saving into DB.
When edit event has been fired, you should check modified config to check whether all of grid columns have been modified or not. After modifying, you can send them to your back end.
I think in your case it would be easier to have a button that you click to save the grid. you could access all the modified records by calling grid.store.getModifiedRecords() and send that to your backend service and do a mass update instead of updating a single row at a time.
You could use the rowdeselect event on the selection model (assuming that you use a Ext.grid.RowSelectionModel. Inside the event handler you can check if the record has been modified and react accordingly.
var grid = // your grid
grid.getSelectionModel().on("rowdeselect", function(selModel, rowIndex, record) {
if (record.dirty) {
// record has been modified
}
});