Given an initialized and displayed Kendo Grid. I want to change the value on a column when either the detailExpand or detailCollapse event occurs. How do I change a displayed value? This is an MVVM initialized grid, but it appears that changes to the data source do not update the displayed values in the grid. So much for data binding.
OnDetailCollapse: function(e) {
var self = ScenarioManager.MasterGridViewModel;
var data = e.sender.dataItem(e.masterRow);
var product = self.FindProductById(self.get('Products').data(), data.Id);
product.set('MrcDisplay', product.MrcSubTotal); // This does nothing
product.set('NrcDisplay', product.NrcSubTotal); // This does nothing
},
Related
I have a SmartTable control (with tableType="Table") in a custom app (sapui5 version 1.71).
The xml view (Main) has a filter, which when executed correctly brings the data via custom odata service and shows in the table. This part works as expected. Table threshold is set to 10k.
We are not selecting any rows on the Main view's smarttable (underlying Table has selectionMode="None").
The requirement is to have a 'summarise' button on the Main view that when pressed will show a Summary view (route navigation) with summarised information based on some columns (not keys).
How to get all the data from the Main's view smarttable?
getRows() method of the underlying table returns only visible rows.
I don't want to switch to use ui.table.Table as there are some nice features you get for free for a SmartTable.
Many thanks,
Wojciech
I had exactly same requirement. It's strange that UI5 makes it so hard to achieve something which is very basic. The code below is from my project but it gives the basic gist:
var allItems = oSmartTable.getTable().getItems();
var highestSortOrder = 1;
for (var i=0; i<allItems.length; i++) {
var anItem = allItems[i];
var sPath = anItem.getBindingContext().sPath;
var currentObject = oSmartTable.getModel().getObject(sPath);
var currentSortOrder = currentObject.SORTORDER;
if (null !== currentSortOrder) {
if (currentSortOrder > highestSortOrder) {
highestSortOrder = currentSortOrder;
}
}
}
I want my text area to be empty after I press OK button.
I have try this line this.byId("id").setValue("")
onWorkInProgress: function (oEvent) {
if (!this._oOnWorkInProgressDialog) {
this._oOnWorkInProgressDialog = sap.ui.xmlfragment("WIPworklist", "com.sap.FinalAssestments.view.WorkInProgress", this);
//this.byId("WIP").value = "";
//this.byId("WIP").setValue();
this.getView().addDependent(this._oOnWorkInProgressDialog);
}
var bindingPath = oEvent.getSource().getBindingContext().getPath();
this._oOnWorkInProgressDialog.bindElement(bindingPath);
this._oOnWorkInProgressDialog.open();
},
//function when cancel button inside the fragments is triggered
onCancelApproval: function() {
this._oOnWorkInProgressDialog.close();
},
//function when approval button inside the fragments is triggered
onWIPApproval: function() {
this._oOnWorkInProgressDialog.close();
var message = this.getView().getModel("i18n").getResourceBundle().getText("wipSuccess");
MessageToast.show(message);
},
The text area will be in popup in the fragment. I am expecting the text area to be empty.
If you instantiate your fragment like this:
sap.ui.xmlfragment("WIPworklist", "com.sap.FinalAssestments.view.WorkInProgress", this);
You can access its controls like this:
Fragment.byId("WIPworklist", "WIP").setValue(""); // Fragment required from "sap/ui/core/Fragment"
Source: How to Access Elements from XML Fragment by ID
The better approach would be to use a view model. The model should have a property textAreaValue or something like that.
Then bind that property to your TextArea (<TextArea value="{view>/textAreaValue}" />). If you change the value using code (e.g. this.getView().getModel("view").setProperty("/textAreaValue", "")), it will automatically show the new value in your popup.
And it works both ways: if a user changes the text, it will be automatically updated in the view model, so you can access the new value using this.getView().getModel("view").getProperty("/textAreaValue");.
You almost have it, I think. Just put the
this.byId("WIP").setValue("") line after the if() block. Since you are adding the fragment as a dependent of your view, this.byId("WIP") will find the control with id "WIP" every time you open the WIP fragment and set its value to blank.
You are likely not achieving it now because A. it is not yet a dependent of your view and B. it is only getting fired on the first go-around.
I am trying to set the title of my view dynamically with no success so far.
I am trying something like this:
<div data-role="view"
id="mt-details-view"
data-title="#= pageTitle #" <---- this one
data-layout="mt-main-layout"
data-init="X.details.onInit"
data-before-show="X.details.beforeShow"
data-show="X.details.onShow"
data-model="X.details.viewModel"
data-use-native-scrolling="true">
I tried using a function, tried setting a viewModel variable, tried passing the title from the view.params, tried also to set the title on the onShow function like that:
function onShow(e) {
X.debug.dbg2(e.view.id, "onShow");
viewModel.setViewParams(e.view.params);
e.view.title = e.view.params.pageTitle;
e.view.options.title = e.view.params.pageTitle;
fetchSomeDetails();
}
nothing works.
Enlighten me please!
Here is one approach you can try. After declaring your viewmodel, bind a function to its 'set' method. Within here, check whether the field being set is the page title property on the viewmodel. If it is, find the dom element holding the title text and set its html to the value being 'set':
X.details.viewModel.bind("set", function(e) {
if (e.field == "pageTitle") {
$("#mt-details-view [data-role='view-title']").html(e.value);
}
})
Whenever that property is changed on the viewmodel, you will now see it reflected on the page. However there is still the issue of setting the value in the UI initially. You can do this in your onShow function which of course happens after the view is rendered and all the dom elements have been created:
function onShow(e) {
var temp = viewModel.pageTitle;
viewModel.set("pageTitle", null);
viewModel.set("pageTitle", temp);
}
That will force the 'set' method on the viewmodel to run and the UI should then update.
Using Angular 4 (typescript), I have some code like below using ag-grid 12.0.2. All I'm trying to do is load my grid and automatically (programmatically) select the first row.
:
this.gridOptions = ....
suppressCellSelection = true;
rowSelection = 'single'
:
loadRowData() {
this.rowData = [];
// build the row data array...
this.gridOptions.api.setRowData(this.rowData);
let node = this.gridOptions.api.getRowNode(...);
// console logging here shows node holds the intended row
node.setSelected(true);
// console logging here shows node.selected == true
// None of these succeeded in highlighting the first row
this.gridOptions.api.redrawRows({ rowNodes: [node] });
this.gridOptions.api.redrawRows();
this.gridOptions.api.refreshCells({ rowNodes: [node], force: true });
First node is selected but the row refuses to highlight in the grid. Otherwise, row selection by mouse works just fine. This code pattern is identical to the sample code here: https://www.ag-grid.com/javascript-grid-refresh/#gsc.tab=0 but it does not work.
Sorry I am not allowed to post the actual code.
The onGridReady means the grid is ready but the data is not.
Use the onFirstDataRendered method:
<ag-grid-angular (firstDataRendered)="onFirstDataRendered($event)">
</ag-grid-angular>
onFirstDataRendered(params) {
this.gridApi.getDisplayedRowAtIndex(0).setSelected(true);
}
This will automatically select the top row in the grid.
I had a similar issue, and came to the conclusion that onGridReady() was called before the rows were loaded. Just because the grid is ready doesn't mean your rows are ready.(I'm using ag-grid community version 19) The solution is to setup your api event handlers after your data has loaded. For demonstration purposes, I'll use a simple setTimeout(), to ensure some duration of time has passed before I interact with the grid. In real life you'll want to use some callback that gets fired when your data is loaded.
My requirement was that the handler resizes the grid on window resize (not relevant to you), and that clicking or navigating to a cell highlights the entire row (relevant to you), and I also noticed that the row associated with the selected cell was not being highlighted.
setUpGridHandlers({api}){
setTimeout(()=>{
api.sizeColumnsToFit();
window.addEventListener("resize", function() {
setTimeout(function() {
api.sizeColumnsToFit();
});
});
api.addEventListener('cellFocused',({rowIndex})=>api.getDisplayedRowAtIndex(rowIndex).setSelected(true));
},5000);
}
Since you want to select the first row on page load, you can do onething in constructor. But your gridApi, should be initialized in OnGridReady($event) method
this.gridApi.forEachNode((node) => {
if (node.rowIndex === 0) {
node.setSelected(true);
}
It's setSelected(true) that does this.
We were using MasterDetail feature, its a nested grid and on expanding a row we needed to change the selection to expanded one.
Expanding a row was handled in
detailCellRendererParams: {
getDetailRowData: loadNestedData,
detailGridOptions: #nestedDetailGridOptionsFor('child'),
}
and withing loadNesteddata, we get params using we can select expanded row as
params.node.parent.setSelected(true)
Hope this helps.
After dojo drag and drop, once the page is submitted, I have to save the position of every item that has been placed into "targetZone". How can we save the position?
Eugen answered it here :
Dojo Drag and drop: how to retrieve order of items?
That would be the right way. If you look at the link above, you can save the resulting "orderedDataItems" object as a JSON ...
Look at the following function. It saves our DND "Lightbox" (dojo.dnd.source) to a JSON.
_it is the current raw dnd item
_it.data.item contains all your stuff you need to keep
in our case _it.data.item.label keeps the customized nodes (pictures, video, docs) as a string, we can use later to dojo.place it
it is the dnd item you want to save without dom nodes
E.g. if you drop items from a dijit tree to a arbitrary dojo dnd source / target:
_RAM or _S in our data.item we made before needs to be overwritten.
LBtoJson: function(){
var that = this;
var orderedLBitems = this.dndSource.getAllNodes().map(function(node){
var _it = that.dndSource.getItem(node.id);
var it = { data:{ item:{} }, label:'', type:'' };
if((_it.data.item._RAM)){_it.data.item._RAM={}}
if((_it.data.item._S)){_it.data.item._S={}}
it.data.item = dojo.clone(_it.data.item);
it.label = it.data.item.label[0]||it.data.item.label;
it.type = _it.type;
console.log( it );
return it;
});
var LBjson = dojo.toJson(orderedLBitems);
return LBjson;
}
By calling getAllNodes(), you'll receive a list of nodes in the order they are shown. So if you wanted to save a list in a specific order, you could do something similar to this:
var data;
var nodes = dndSrc.getAllNodes();
for(var i; i < nodes.length; i++)
{
data.push({id: nodes[i].id, order: i});
}
For more information about Dojo DnD regarding data submission, check out this article about DnD and Form Submission: http://www.chrisweldon.net/2009/05/09/dojo-drag-n-drop-and-form-submission