I am doing an inline add using Kendo Grid, but on the server side I am actually creating multiple records. The DataSourceRequest sends back all the newly created rows, but only one is added to the grid. The other added records may not show up in the grid at all until the grid is forced to query for the data again.
Is there a way for me to add multiple rows at once?
If not, is there a way to re-query the data and put all newly added models at the top?
In my controller function that creates the new records, I am returning the following. "models" contains all of the newly created records:
return this.Json(models.ToDataSourceResult(request, this.ModelState), JsonRequestBehavior.AllowGet);
I also have a similar issue when updating a row since the server may actually update multiple rows. Since "models" contains multiple models, the first one in the list may or may not be the actual model selected to be updated, so sometimes a different edited model will replace the model that was selected to be updated in the grid.
Thanks,
Rob
I ended up using the kendo grid datasource insert method to add any records returned by my controller that were not already in the grid. I did this in the RequestEnd event for the datasource.
In order for this to work for inline adds, I needed to make sure the first model in the list returned by the controller was always the model being added by the grid. For some reason the initial model being added does not have an ID until the dataBinding event is reached which occurs after the RequestEnd event. So on adds, I simply ignore the first model in the results because it is already in the grid.
Also, when editing rows that are manually inserted into the datasource and then cancelling the edit, the grid removes them from the datasource. I had to block this using the preventDefault() function in the DataBinding event when a "remove" action was encountered directly after editing a row that I manually inserted into the datasource.
Related
I have a case where updating and saving certain columns in an Interactive Grid row result in some other rows being updated. By default, only the changed row will be refreshed and further changes to (now updated) rows would result in Current version of data in database has changed error. I managed to solve this issue by hooking a Dynamic Action on custom interactivegridsave (which fires after changes have been saved in Interactive Grid). The action itself is Execute JavaScript Code that executes this (note that region_static_id is a placeholder):
apex.region("region_static_id").widget().interactiveGrid("getActions").invoke("refresh");
This will fetch all the records correctly (including the updated ones) and redraw the Interactive Grid. Id'like the changes becoming visible without the redraw. I thought of iterating through the rows, updating each one of them by id using the row-refresh action, but I have no idea how it works (or at least how to invoke it properly). This action should be available as it is properly listed in a list of available actions that I get when i execute this:
apex.region("region_static_id").widget().interactiveGrid("getActions").list().forEach(function(a){console.log("Action Label: "+a.label+", Name: "+a.name+(a.choice!==undefined?", Choice: "+a.choice:""));});
So, the question is:
How can I refresh rows by invoking a row-refresh action in Interactive Grid?
Alternatives that refresh rows (preferably by specifying the row id) are also welcome.
After further research I found an alternative way (which I'm not sure how hackish or stable it is, but it works). It seems you can refresh rows by getting the data grid model, which you then use to fetch all of the its records by using:
var model = apex.region("predmet_dg").widget().interactiveGrid("getViews").grid.model;
model.fetchRecords(model._data);
This way refreshes the data without causing the grid redraw.
http://demos.telerik.com/aspnet-mvc/grid/editing-custom
Hope this is clear.
I have a view that includes a grid with an existing application. The grid needs to load only after selecting some other inputs in the view. Using one of the "template" approaches like the above example works if you know what the list will contain ahead of time. The grid databinds when the view is rendered, and any ClientTemplate is rendered then. So, rebinding the grid doesnt seem to affect the dropdownlist since it has already been rendered.
However, the contents of the dropdownlist cant be known until the user starts adding items to the grid, so its only then that I to need define whats going to be in the dropdownlist, not from the very beginning when the grid is initially displayed.
How do I define or populate the dropdownlist when the grid is binding or as a result of the read action?
[update]
This is the grid column in question, where now Ive setup the column to have its own datasource, but the action GetSystemItemCodes never gets invoked. There is a read action on the grid itself (not shown), but since the template has already rendered when the grid is displayed the first time, it doesnt matter what I do to update the viewdata, its already been rendered.
columns.Bound(rdetail => rdetail.ItemCode).Title("Item Code").ClientTemplate((#Html.Kendo().DropDownList()
.DataSource(datasrc => datasrc.Read(read => read.Action("GetSystemItemCodes", "SalesVoucher")))
.HtmlAttributes(new { id = "itemCodeDropDown" })
.OptionLabel("- Select Item Code - ")
.DataValueField("ItemCodeID")
.DataTextField("ItemCodeValue")
.Name("itemCodeDropDown")
.Events(e => e.Change("OnItemCodeChange"))
.ToClientTemplate()).ToHtmlString()).Width(230);
I think my next approach will be to filter the dropdown with items being returned when adding a new row.
So suppose my question is at this point is: when defining a datasource for an individual column this way, when does its read action get called? Right after the read action on the grid ? How manually cause the column datasource to refresh or rebind?
I have a data table that represents data like this:
after clicking the edit marker (pencil icon) i can edit some fields. The fields need to be validated and if it fails the fields have to reset. I do this in the managed bean of the view using p:ajax event="rowEditInit" to save the attributes before saving and ajax event="rowEdit"to do the actual validation. if validation fails i return the previously saved values. if validation is correct i save the data to the database and load the collection again. Then i
RequestContext.getCurrentInstance().update("vesselBalticSegmentCreateForm")
to reload the view.
Doesnt matter if the validation fails and i set the values back or it succeeds and i save/reload data the table breaks becoming like this:
seems to load only the edited row. and loads both edit/list modes.
any ideas what i'm doing wrong?
The primeFaces RowEdit functionality already updates the row, also updating the table does by design not work (not sure if it is intentional, but that is just how it is). I know there is a duplicate of this Q/A on stackoverflow, I just do not seem to be able to find it. Someone might be able to create a patch/workaround, e.g. try on the prerenderview event to remove the id's of id's in the individual row that was edited. I don't have the time to try to create one.
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
}
});
I use two grids at one PHP page.
Is there any way to get data from the first grid (i.e. after click row) and pre-fill it into the add new row form in the second grid?
thank you for any suggestion Petr
I am not sure that I correct understand what you mean under the "pre-filling". But how I understand you question you can do following:
With respect of onSelectRow event which you define on the first grid you will receive the id of selected row as the parameter. Inside of the onSelectRow event handle you can call getRowData to get full information about the data of selected row. Then using addRowData for example you can add new row in the second grid.