I am using a method per ag-grid example setting
gridOptions = {
columnDefs: [],....etc.
and reading a json file from the server that populates the fields (and columns).
// Get data from server //https://ag-grid.com/javascript-data-grid/getting-started/
fetch ('https://dev.perfectiononwheels.com/pricedataJSON/pricelistJson.json')
.then(function (response) {
return response.json();
}).then(function (data) {
// set the column headers from the data
const colDefs = gridOptions.api.getColumnDefs();
colDefs.length=0;
const keys = Object.keys(data[0])
keys.forEach(key => colDefs.push({field : key}));
gridOptions.api.setColumnDefs(colDefs);
// add the data to the grid
gridOptions.api.setRowData(data);
});
The document states that using this technique you can then set editable:true to be able to edit fields on the grid. However, I would like to set some columns (fields) as read-only, and change another to a checkbox.
I am not able to find an refernce on how to access a column to change to read-only or a checkbox.
(I was able to set these params when I defined each field in the columnDefs)
There is no direct api for this.
To change whether a column is editable, you'll have to change the editable property for the column in the columnDefs, and then call the grid api's setColumnDefs() method, passing it the updated columnDefs.
Same thing with the checkboxSelection property, to show a checkbox or not.
Related
I am using react-bootstrap-typeahead in table row for invoice items.
my json is like [{record_id:1,value="value1"},{record_id:2,value="value2"}]
on this basis I am creating bootstrap table.
in table cell I am adding typeahead select box to change the value and update my json,
when I change the value I want to update my json array with latest value in related record.
But as in onChange we only get selected array not an event object so, I am not able to find record id.
I have create one solution , I know it is not best but it works for me.
I have set state called currentLineItem and I am updating this value on "onFocus" event of react-bootstrap-typeahead. in this event I am getting an event object.
const [currentLineItem, setCurrentLineItem] = useState(null);
const selectBoxOnFocus = (event) => {
const rowId = event.target.parentNode.parentNode.parentNode.parentNode.getAttribute("data-id");
setCurrentLineItem(rowId);
};
const taxCalcChangeInRow = async (option) => {
const rowId = currentLineItem;
// my other code
};
<SelectBox {/*(this is wrapper componat of typeahead)*/}
data-id={row.id}
name="inputTaxCalc"
options={taxCalcOptions}
OnChange={taxCalcChangeInRow}
onFocus={selectBoxOnFocus}
/>
I have a classic situation - a table with two comboboxes (or, to be exact, sap.m.Select controls) and after select in the first one, I would like to have the values in the second one updated. This is my model, basically, the first combobox should contain the list of available states and once some is selected, the second sap.m.Select control should be populated by relevant cities
{
countries: [
{ country: 'France', cities: ['Paris', 'Marseille', 'Lyon']},
{ country: 'Germany', cities: ['Berlin', 'Bonn']}
]
}
The problem is that I dont know how to do it. I am able to get the id of the updated row using something like this.
onCountryChange: function (oEvent) {
const selectedItem = oEvent.getParameter("selectedItem");
var path = selectedItem.getBindingContext().getPath();
bindComboBox(path); // this should rebind the data, but not written yet
}
I know now I should rebind the data in the correct combobox, however, I don't know how to affect only that single combobox on the correct row and how to update it. Could someone advise me how to do it? The whole table is defined in the .xml view, can I do it also with a formatter or inline expression or is this scenario too difficult for that?
Thank you
You can use the bindAggregation method (from the ManagedObject) class to rebind the combo boxes' items.
onCountryChange: function (oEvent) {
const selectedItem = oEvent.getParameter("selectedItem");
var path = selectedItem.getBindingContext().getPath();
this.byId("combo2").bindAggregation("items", {
path: path + "/cities",
template: new sap.ui.core.Item({
key: "{}",
text: "{}"
})
});
}
Note: Replacing "combo2" with the id of your 2nd combo box/select control.
Edit: To get the correct combo box (assuming you have multiple created on a table, use the ID of the first combo box (oEvent.getSource().getId()) to generate the ID of the 2nd combo box. Without knowing more of the structure of the table (and how it's created) I can't offer more.
I am developing a word add-in using word JavaScript api, I need to insert some data in table format inside the content Control and placed that content control on top of document.
Please advice.
Thanks.
This should be quite a simple operation. I am assuming that by "On top" of the document you mean inserting a table where the document starts. First line.
All the insertion methods have an insertionLocation parameter that you can use for that purpose. On this case you want to do a body.isnertTable, the 3rd parameter is the insertionLocation ("start" is sent to insert at the beginning of the body of the document).
Once its inserted you can actually wrap it with a content control. Check sample below for details. I included other details, such as applying a built-in style to the inserted table.
hope this unblocks you. thx!
function insertTableAndWrapWithCC() {
Word.run(function (context) {
// We need a 2D array to hold the initial table values
var data = [["Apple", "Orange", "Pineapple"],["Tokyo","Beijing", "Seattle"]];
var table = context.document.body.insertTable(3, 3, "start", data);
table.styleBuiltIn = Word.Style.gridTable5Dark_Accent2;
//now we insert the content control on the table.
var myContentControl = table.insertContentControl();
myContentControl.title = "CC Title";
return context.sync()
})
.catch(function (e) {
console.log(e.message);
})
}
This may be a basic question, but it's my first, so please be kind :-).
I have a sap.m.table with two models, one model with transaction data (trxModel) and another model that is used to display a sap.m.select list (reasonCodeModel). The table model is set to trxModel.
The selected value key from the dropdown needs to update a value (ReasonCodeID) in the trxModel when a value from the reason code list is selected.
I can retrieve the selected key in the change event as so
var selKey = evt.getParameter("selectedItem").getKey();
Is there a simple way to find the trxModel relevant model path from the table row Select list value I've just modified? Or is it possible to bind the ReasonCodeID from the trxModel to the ReasonCodeID field in the reasonCodeModel?
Just an extra piece of info, The current row is selected and is accessible
var selItem = dtlTable.getSelectedItem();
2nd question and I guess could be kind of related, is there a way of getting the table model path based on the selected item (highlighted row) of the table? And vice a versa?
More details on Select & Table binding.
var tabTemplate = new sap.m.ColumnListItem(
{
::
new sap.m.Select(
"idReasonCodeSelect",
{
enabled : false,
change : function(evt) {
oS4View.getController().changeReasonCodeSel(evt);
}
}
),
Bind the resource code Select to the Table
// bind the reason codes to the reason code model
sap.ui.getCore().byId("idReasonCodeSelect").setModel(
oReasonCodeModel);
sap.ui.getCore().byId("idReasonCodeSelect").bindAggregation("items", "/results",
new sap.ui.core.Item({
key : "{ReasCodeID}",
text : "{ReasCodeDesc}"
}));
Per Qualiture comment, how do I bind the Select key to the table model ReasonCodeID value?
I found an approach to tackle the first part of my question above
From the change function on the Select, I can find the path of the table model using the following.
var path = evt.getSource().getParent().getBindingContext().sPath;
2nd Update:
On the selectionChange event on the table, there's a couple of options to find the associated model path or model content.
// find the model path
oModelPath = selItem.getBindingContext().getPath();
// model values
oItem = oEvent.getParameter("listItem").getBindingContext().getObject();
So my only remaining issue, While I loop through the table model results (trxModel) and I want the Select List (using setSelectedKey) to reflect the ReasonCodeID value in the trxModel.
Can you please show me how to allow editing of cells within SAPUI5 table? I am using JSON model.
look at this examples in the SDK Table.html, both of the examples show how to set a json model, set the json model as a data source of a table control, how to bind rows of the json to rows of the table, and how to bind the values to cells, once you change the cells values the new value will be reflect in the model
var employeeData = [
{lastName: "Dente", name: "Al"},
{lastName: "Friese", name: "Andy"},
{lastName: "Mann", name: "Anita"},
{lastName: "Schutt", name: "Doris}
];
//create the JSON model and set your data
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({ Employees: employeeData });
//create table
var oTable = new sap.ui.table.Table();
//add a column for lastname and bind the value to an editable textview
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Last Name"}),
template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
});
//add a column for name and bind the value to an editable textview
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "First Name"}),
template: new sap.ui.commons.TextField().bindProperty("value", "name"),
}));
oTable.setModel(oModel);
oTable.bindRows("/Employees);
First your table template objects have to be editable. For a textfield either use the setEditable(true), bindProperty('editable',true) or directly in the construtor new TextField({editalbe:true}).
If it is editable ensure you have switched on two way binding in your model. For JSON models this is the default I think. Also ensure, that there are no formatters involved, because these will destroy two way binding.
The you can check in your debugger, if the changes on the UI are transfered to the model. In general this works fine and from this point it is up to you what to do with the model (send it to some oData save service).
I had the same issue with a table that had to be editable when the value was zero and non-editable when it was greater than zero.
Value1 is my dinamic value.
Value2 is zero
<Input type="Number" editable="{parts:[{path : 'Value1'}, {path : 'Value2'}], formatter:'sap.ui.app.model.formatter.CantEditable'}"/>
Inside the formatter i defined a function called CantEditable like this.
jQuery.sap.declare("sap.ui.app.model.formatter");
sap.ui.app.model.formatter =
{
function1: (Value1, Value2)
{
//If value 1 > Value 2 return editable
if (Value1>Value2)
{
return false;
}
else
{
return true;
}
};
Since its binded to the value of these two variables. Whenever my value one changes, the editable function will check if it meets the requeriments of the function. Then it will change the value of the editable property.
My sap.m.Table demo here:
http://plnkr.co/edit/qifky6plPEzFtlpyV2vb?p=preview
I am using data-sap-ui-theme="sap_belize", you can change it to sap_bluecrystal.
The basic idea is using editable property of sap.m.Input, and enabled property of sap.m.Select.
I opened an issue of ui5 to discuss this problem: https://github.com/SAP/openui5/issues/1646