How can we load data in jsgrid (dropdown), when from another jsgrid which is filled updated by user.
Get items from the first grid:
var items = $("#grid1").jsGrid("option", "data");
And set them when needed (e.g. in onItemUpdated and onItemInserted callbacks) with fieldOption method.
$("#grid2").jsGrid("fieldOption", "mySelectField", "items", items)
Related
How do I check if a particular field or column of a subgrid is business recommend or not? I want to do this using a web resource. Also due to some requirements, I will have to use the execution context of the form where the subgrid is present and not of the subgrid itself.
It is a little tricky because at the time that the form loads, the subgrid does not have data. So you have to use the Form's load event to attach a load event to the subgrid.
This is described in this MS Docs Page. You can do this like
function attachGridEvent(executionContext)
{
var formContext = executionContext.getFormContext();
var gridContext = formContext.getControl("gridCategories");
// We have the grid, now add a "load" event handler
gridContext.addOnLoad(MyGridLoadedEvent);
}
Now you've got a 'load' event for your grid so you can iterate through its rows and examine its data
I haven't been able to get this to work for subgrids that don't contain data
I get the first row in the sub grid. Once I have that we can loop through each of the row's attributes. Each attribute has the following methods:
getName Returns the logical name of the attribute of a selected grid
row.
getRequiredLevel Returns a string value indicating whether a
value for the attribute is required or recommended.
setRequiredLevel Sets whether data is required or recommended for the
attribute of a selected grid row before the record can be saved.
getValue Retrieves the data value for an attribute.
setValue Sets the
data value for an attribute.
MS Docs Page
I'm using some modern browser features (map, =>) but this code should work for you
function MyGridLoadedEvent(evt)
{
var gridContext = evt.getEventSource();
var rows = gridContext.getGrid().getRows();
if (rows.getLength() > 0)
{
let rowAttributes = rows.getByIndex(0).getAttribute();
let mappedResults = rowAttributes.map(x => x.getName() + " : " + x.getRequiredLevel());
alert(mappedResults);
}
}
I have nested grid in kendo and I'm using the batch editing process in which all changes on the given row, which is which the parent row or the sub row will be saved all at once using the kendo command.
I can make it work for non nested grid. But for nested grid, it will only save the data on the parent row. Was there a workaround for this?
Thank you.
Detail grid is whole new widget inside of parent grid. You have to configure it's dataSource with correct transport methods separatly.
Still, if you want to save all grids on your page you can use this function (works perfectly in my project):
function SaveAll(){
$(".k-widget.k-grid").each(function (index, value) {
var grid = $(this).data("kendoGrid");
grid.dataSource.sync();
});
}
Or with saveChanges() method:
function SaveAll(){
$(".k-widget.k-grid").each(function (index, value) {
var grid = $(this).data("kendoGrid");
grid.saveChanges();
});
}
I have a Grid bound to a DataSource via MVVM.
I select a row in the Grid, accordingly I use this:
var grid = e.sender;
var rowSelected = grid.dataItem(grid.select());
this.set("currentAccount", rowSelected);
Where "currentAccount" holds the currently selected row. Also, "currentAccount" is bound to a Form to be edited by user.
Now, when I do changes on the form fields, they are not being automatically reflected on Grid. I need to call grid.refresh() for the changes to show on grid. With further debugging, I noticed that the datasource defined inside the viewmodel and that is used for Grid, is not firing it's Change event!
However, when user presses a button "Add new record", the following is used to create a new empty model inside the datasource, setting this new model returned by .add() function to be the "currentAccount":
var newRow = this.get("accRegDatasource").add( this._makeAccountModel( 0 ) );
this.set("currentAccount", newRow);
var row = input_map.grid().find(" tr[data-uid='" + newRow.uid + "']");
input_map.kendoGrid().select(row);
Above, I am adding a new empty row. Once I start editing the Form fields, automatically they are being reflected on the Grid without having to call grid.refresh. Even the datasource defined in the viewmodel is firing it's change event.
Any idea why this behavior?
Thanks
I have a slickGrid which is populated with data, and have a first checkbox column added via:
if (info.includeSelectCheckbox) {
var checkboxSelector = new Slick.CheckboxSelectColumn({
cssClass:"slick-cell-checkboxsel"
});
info.columns.splice(0, 0, checkboxSelector.getColumnDefinition());
}
grid = new Slick.Grid(elem, dataView, info.columns, options);
if (info.includeSelectCheckbox) {
grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow:false}));
grid.registerPlugin(checkboxSelector);
var columnpicker = new Slick.Controls.ColumnPicker(info.columns, grid, options);
}
I also have a filter textbox, which filters the data in the grid by different criteria.
The problem is, when I select the checkbox for some items in the grid and then filter the grid, then selected checkboxes either stay on the old indexes, but matching different records, or are gone from the grid and don't reappear when I the remove filtering.
I'd like to have the checkbox selections independent of the filtering, so whenever I play with the filter the selected items stay selected until I manually uncheck them.
I also tried to add checkboxes via the regular column formatter, but the selection is gone when I start filtering.
You need to call dataView.syncGridSelection(grid).
See https://github.com/mleibman/SlickGrid/wiki/DataView#synchronizing-selection--cell-css-styles.
Add toolbar button is used to add new row to jqgrid.
Add form which appears contains all filed vlaues empty.
How to set add form field values from column values from row which was current/selected when add command was issued ?
json remote data is used. Or if this is simpler, how to call server method passing current/selected row to retrieve default values for add form from server ?
jqgrid contains also hidden columns. If possible values from hidden columns from current row should also sent to add controller if add form is saved.
Update
I tried to use Oleg great suggestion by using
afterShowForm: function(formID) {
var selRowData,
rowid = grid.jqGrid('getGridParam', 'selrow');
if (rowid === null) {
// todo: how to cancel add command here
alert('Please select row');
return;
}
selRowData = grid.jqGrid('getRowData', rowid);
if (selRowData === null) {
alert('something unexpected happened');
return;
}
$('#' + 'Baas' + '.FormElement', formID).val(selRowData.Baas);
}
Application keeps add form open after saving. After first save Baas field is empty. It looks like afterShowForm event runs only once, not after every save. How to fix this so that multiple rows with default values can added without closing add form?
How to cancel or not allow Add command if there is no selected row ?
If you need to make some initialization actions only for Add form you can use at least two approaches:
the usage of defaultValue property as function inside of editoptions. The callback function defaultValue can provide the value for the corresponding field of the Add form based of the data from selected row. For optimization purpose you can read the data from the current selected row once in the beforeInitData callback/event. You can just read the data which you need or make an synchronous call to the server to get the information which you need. The only disadvantage of the usage of defaultValue property is that it uses jQuery.val method to set the default value for all fields of Add form with exception 'checkbox' edittype. For the checkboxs jqGrid set checked property of the checkbox of false, 0, no, off or undefined are not found in the value returned by defaultValue property. So the approach will not work for other edittypes. For example it can fail for the custom edittype.
the usage of beforeShowForm or afterShowForm. Inside of the callback functions you can set any value of the form. You can find the filed of the corresponding column of the grid by id of the field which is the same as the value of name property of the corresponding column.
Like you already knows you can get the id of the current selected row with respect of getGridParam and get the data from the selected row
var selRowData, rowid = grid.jqGrid('getGridParam', 'selrow');
if (rowid !== null) {
// a row of grid is selected and we can get the data from the row
// which includes the data from all visible and hidden columns
selRowData= grid.jqGrid('getGridParam', 'selrow');
}
where grid is jQuery object like $('#list') which selects the main <table> element of the grid.
In the demo you can see how works the first approach described above.