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
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 Kendo UI timeline view controller and I want to set events from a different datasource, which will be a JavaScript array. I tried to set array to kendoScheduler datasource but event was not bound to the controller and when I double click on timeline it gives an event popup which has unwanted fields which I can't remove. Please find the sample below.
http://dojo.telerik.com/#lilan123/UPuDE/3
I found the solution for this
var scheduler = $("#schedulerTimeLine").data("kendoScheduler");
var dataSource = new kendo.data.SchedulerDataSource({
data: WorkPlanElementList
});
scheduler.setDataSource(dataSource);
I have a grid that has child grid for each item, when i add a new item to the main grid, there is a stub for the child (with the toolbar etc and an empty grid for the child), I would like to hide the child grid when adding new one, i know i need the edit event, i just dont know how to get reference to the detailgrid for the item that the row was just created for input.
edit event has e.sender, e.container, e.model, first 2 reference the main grid of course as the event is raised by the main grid
The required behavior is not supported out of the box, however you can for example attach click event handler to the expanding arrows in the Grid. In the event handler you can prevent the expanding if current model is new. Please check the example below:
//Change Employees with your grid name
//the grid should have model ID defined
$("#Employees table").on("click", ".k-hierarchy-cell a", function (e) {
dataItem = $("#Employees").data("kendoGrid").dataItem($(e.srcElement).closest("tr"));
//check if is new record
if (dataItem.isNew()) {
e.preventDefault();
e.stopImmediatePropagation();
}
})
UPDATE (as requested): The above code should be executed in script tag (wrapped in document "ready" event handler) which is placed just after the Grid initialization code.
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.
Is the dataSource.changed event working?
After my Kendo UI grid is instantiated, I am binding the change event per the documentation here:
http://docs.kendoui.com/api/framework/datasource#change
//To set after initialization
dataSource.bind("change", function(e) {
// handle event
});
I am doing this:
// initialize
$("#grid").kendoGrid({
dataSource: dataSource,
blah blah blah
)
});
// end of initialization
// bind afterwards
var grid = $('#grid').data('kendoGrid');
grid.dataSource.bind("change", function (e) {
dataChanged();
});
//also tried a setTimeout:
// bind afterwards
setTimeout(function () {
var grid = $('#grid').data('kendoGrid');
grid.dataSource.bind("change", function (e) {
dataChanged();
});
}, 350);
function dataChanged() {
// handle "change" whatever that means -- documentation definition is hazy
// does reassigning the data array constitute a change?
// does changing the value of a particular item in the data array
// constitute a change?
// does removing an item from the data array constitute a change?
var grid = $("#grid").data("kendoGrid");
grid.refresh();
}
But my dataChanged() function is not called when I do either of these things:
var grid = $('#grid').data('kendoGrid');
grid.dataSource.data()[1]["deptname"] = 'XXX';
or
grid.dataSource.data = aDifferentArray;
I am not sure exactly what the 'changed' event is listening for. What, precisely, is supposed to trigger it?
If I create a completely new dataSource, and assign it to the grid that already has a dataSource, I don't see how that would trigger an existing data source's changed event. Such an event (the grid noticing that its dataSource has been replaced with a different one) would be a grid-level event, not a dataSource-level event, right?
The important thing to note is that the data backing the DataSource is an ObservableArray, and that the data items in that array are converted to ObservableObjects.
The change event of the datasource is fired under 2 conditions:
The data ObservableArray changes (a record is inserted, deleted). An example of this would be using the DataSource.add() or DataSource.remove() functions.
If a property changed event bubbles up to the DataSource from one of the ObservableData objects in the array. However, just like the rest of the Kendo MVVM framework, the notification that a property changed only occurs when its .set("propertyName", value) function is called.
This is why grid.dataSource.data()[1]["deptname"] = 'XXX'; is not triggering the change event. If you change it to: grid.dataSource.data()[1].set("deptname", 'XXX'); then it should start to work. Basically, think of the change event as being fired in response to an MVVM property change fired from the data observable object.
As for changing the data array grid.dataSource.data = aDifferentArray; I'm actually not sure if that will or should trigger a change. I've never tried that.