Thanks to the answer from "Words Like Jared" at Angularjs + kendo-ui treeview, I got my treeview working and everything was fine. Until - someone wanted to update/filter the treeview based on checkboxes and the like. My problem is that the tree does not update to reflect the change in the datasource made in the controller.
Based on the jsfiddle in the answer mentioned above, I have created one to show my problem.
http://jsfiddle.net/rajeshmathew/LwDs5/
if ($scope.showLimitedRecords) {
$scope.thingsOptions = {dataSource: $scope.things2}
} else {
$scope.thingsOptions = { dataSource: $scope.things1 };
}
Checking the checkbox does not affect the tree.
I am a newbie to AngularJS and angular-kendo, and I am wondering if this kind of an update is even supposed to work. I might be going at this the wrong way. Any help/suggestions are much appreciated.
Thanks!
You could create the data source explicitly and then set the data using its API:
$scope.thingsOptions = {
dataSource: new kendo.data.HierarchicalDataSource({
data: $scope.things1
})
}
$scope.toggleFlag = function () {
if ($scope.showLimitedRecords) {
$scope.thingsOptions.dataSource.data($scope.things2);
} else {
$scope.thingsOptions.dataSource.data($scope.things1);
}
}
(updated demo)
Related
We have an Ag-Grid table with row selection via the built in checkbox functionality. The check boxes are conditionally displaying via the isRowSelectable options:
isRowSelectable: function (rowNode) {
return rowNode.data ? rowNode.data.published === false : true;
}
The published column is being updated as part of a modal called from another column. A redrawRows is being called when the modal is closed:
modal.result.then(() => {
const row = params.api.getDisplayedRowAtIndex(params.rowIndex as number);
//this.gridApi?.redrawRows([row] as any);
this.gridApi?.redrawRows();
});
The display values in the row are being updated when the modal is closed, however, the checkbox is not appearing when the published value is set to false. If I hang a breakpoint in Dev Tools the isRowSelectable code does not appear to be hit.
Any suggestions would be much appreciated.
Cheers,
-John
Can you try this and see if it works?
let itemsToUpdate = [];
let data = rowNode.data;
// modify data fields
// Ex: data.field1 = "new value";
itemsToUpdate.push(data);
this.gridApi.applyTransaction({update: itemsToUpdate});
https://www.ag-grid.com/javascript-data-grid/data-update-transactions/
Use refreshCells
this.gridApi?.refreshCells({force:true});
https://www.ag-grid.com/react-data-grid/view-refresh/#redraw-rows
I have been searching the internet for answer but I am not having any luck. I would like to know if it is possible to only show Kendo detail rows after 19 rows of data? I have a very odd requirement and I'm not sure it can be done. However if there is a solution out there, is there a small example I can see? Or a resource I have not found yet?
As a note a side note I am using Kendo with AngularJS.
Thank you in advance!
AnthonyFastcar
This may not be the best way to do this but I just hid the detail icon for the rows. I used the dataBound event.
dataSource: yourDataSouce,
dataBound: function(e) {
var grid = this,
grid2 = $('#yourGrid').data('kendoGrid');
grid.tbody.find("tr[role='row']").each(function () {
var index = $(this).index();
if (index < 19) {
$(this).find('.k-i-expand').removeClass('k-i-expand');
}
})
}
Additionally if you are trying to use a column, say an ID column you can do it like the below.
dataSource: yourDataSouce,
dataBound: function(e) {
var grid = this,
grid2 = $('#yourGrid').data('kendoGrid'),
grid.tbody.find("tr[role='row']").each(function () {
var data = grid.dataItem(this);
if (data.yourColumnID < 19) {
$(this).find('.k-i-expand').removeClass('k-i-expand');
}
})
}
I hope this helps anyone else who runs into the same issue.
I'm trying to implement server-side filtering for ag-grid
on grid ready event I configure datasource object:
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
var that = this;
params.api.setDatasource({
getRows(params) {
that._fetchData(data => params.successCallback(data));
}
});
}
the datasource is called and data gets displayed. but when I change filtering -- nothing happens. here is a sandbox to demo: https://codesandbox.io/s/wkop8pj6kl (https://gist.github.com/evgeny-t/90ef8e37fe747549a1d8203ef806df9e)
is it possible to do within the community version? What did I miss?
Please, add enableServerSideFilter flag to AgGridReact
You can also use enableServerSideSorting flag if required.
This thread helped me (https://github.com/ag-grid/ag-grid/issues/2237)
I'm new to angular, and I can't get any proper answer for that :( Please help
I need to get the selected row's data, then pass it to another page.
When configuring gridOptions you can register to ui-grid's API and get the selected rows:
Controller
private getGridOptions() {
return {
onRegisterApi: (gridApi: uiGrid.IGridApi) => {
this.selectedRows = gridApi.selection.getSelectedRows();
}
};
}
More on interaction with ui-grid's API - http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions
I need help with a script to add an "active" class to a div when a hidden checkbox is checked. This all happening within a somewhat complex form that can be saved and later edited. Here's the process:
I have a series of hidden checkboxes that are checked when a visible DIV is clicked. Thanks to a few people, especially Dimitar Christoff from previous posts here, I have a few simple scripts that handle everything:
A person clicks on a div:
<div class="thumb left prodata" data-id="7"> yadda yadda </div>
An active class is added to the div:
$$('.thumb').addEvent('click', function(){
this.toggleClass('tactive');
});
The corresponding checkbox is checked:
document.getElements("a.add_app").addEvents({
click: function(e) {
if (e.target.get("tag") != 'input') {
var checkbox = document.id("field_select_p" + this.get("data-id"));
checkbox.set("checked", !checkbox.get("checked"));
}
}
});
Now, I need a fourth ( and final ) function to complete the project (using mootools or just plain javascript, no jQuery). When the form is loaded after being saved, I need a way to add the active class back to the corresponding div. Basically reverse the process. I AM trying to figure it out myself, and would love to post an idea but anything I've tried is, well, bad. I thought I'd at least get this question posted while I work on it. Thanks in advance!
window.addEvents({
load: function(){
if (checkbox.checked){
document.getElements('.thumb').fireEvent('click');
}
}
});
Example: http://jsfiddle.net/vCH9n/
Okay, in case anyone is interested, here is the final solution. What this does is: Create a click event for a DIV class to toggle an active class onclick, and also correlates each DIV to a checkbox using a data-id="X" that = the checkbox ID. Finally, if the form is reloaded ( in this case the form can be saved and edited later ) the final piece of javascript then sees what checkboxes are checked on page load and triggers the active class for the DIV.
To see it all in action, check it out here: https://www.worklabs.ca/2/add-new/add-new?itemetype=website ( script is currently working on the third tab, CHOOSE STYLE ). You won't be able to save/edit it unless you're a member however, but it works:) You can unhide the checkboxes using firebug and toggle the checkboxes yourself to see.
window.addEvent('domready', function() {
// apply the psuedo event to some elements
$$('.thumb').addEvent('click', function() {
this.toggleClass('tactive');
});
$$('.cbox').addEvent('click', function() {
var checkboxes= $$('.cbox');
for(i=1; i<=checkboxes.length; i++){
if(checkboxes[i-1].checked){
if($('c_'+checkboxes[i-1].id))
$('c_'+checkboxes[i-1].id).set("class", "thumb tactive");
}
else{
if($('c_'+checkboxes[i-1].id))
$('c_'+checkboxes[i-1].id).set("class", "thumb");
}
}
});
// Add the active class to the corresponding div when a checkbox is checked onLoad... basic idea:
var checkboxes= $$('.cbox');
for(i=1; i<=checkboxes.length; i++){
if(checkboxes[i-1].checked){
$('c_field_tmp_'+i).set("class", "thumb tactive");
}
}
document.getElements("div.thumb").addEvents({
click: function(e) {
if (e.target.get("tag") != 'input') {
var checkbox = document.id("field_tmp_" + this.get("data-id"));
checkbox.set("checked", !checkbox.get("checked"));
}
}
});
});