I'm trying to make some records editable and others not. Even the demo isn't working.
http://w2ui.com/web/demos/#/grid/21
Will appreciate any suggestions.
Thanks,
The demo you've linked uses the old w2ui 1.4 notation, where w2ui specific properties where "directly" part of the record object.
Since w2ui 1.5rc1 you will have to encapsulate w2ui specific properties inside a w2ui object.
That means that record.editable must be written as record.w2ui.editable.
Example old notation:
record = {
recid : null, // unique record id
[field-1] : '', // field 1
[field-2] : '', // field 2
...
[field-N] : '', // field N
style : '', // additional CSS style for <tr ...> tag or for <td ...> tag if it is an object
summary : false, // indicates if it is a summary record (summary records appear on the bottom)
editable : true, // indicate is record is editable (must have column.ediable property set)
expanded : 'none', // can be true | false | 'none' | 'spinner'
changes : undefined // readonly, object with user changes by inline editing
}
Example new notation:
record = {
recid : null, // unique record id
[field-1] : '', // field 1
[field-2] : '', // field 2
...
[field-N] : '', // field N
w2ui : {
style : '', // additional CSS style for <tr ...> tag or for <td ...> tag if it is an object
class : '', // additional CSS class for <tr ...> tag or for <td ...> tag if it is an object
summary : false, // indicates if it is a summary record (summary records appear on the bottom)
editable : true, // indicate is record is editable (must have column.editable property set)
expanded : 'none', // can be true | false | 'none' | 'spinner'
changes : null, // readonly, object with user changes by inline editing
colspan : null, // colspan object, e.g. { field: 5, ...}
hideCheckBox : false, // hide checkbox for this record if grid.show.selectColumn is set
children : [], // array of record objects, can have sub children
parent_recid : null, // (internally set, id of the parent record, when children are copied to records array)
}
}
For the demo that means that the record
{ recid: 9, int: 1000, money: 3400, percent: 100, date: '2/1/2014',
style: 'background-color: #ffcccc', editable: false }
must be changed to
{ recid: 9, int: 1000, money: 3400, percent: 100, date: '2/1/2014', w2ui: {
style: 'background-color: #ffcccc', editable: false } }
Fiddle: http://jsfiddle.net/9qd3sobg/
Related
I have an agGrid populated with Employee records in JSON format from my web service.
[
{
id: 123,
firstName: 'Mike',
lastName: 'Jones',
countryId: 1001,
DOB: '1980-01-01T00:00:00',
. . .
}
I have a second web service returning a list of country codes:
[
{ id: 1000, name: 'France' },
{ id: 1001, name: 'Spain' },
{ id: 1002, name: 'Belguim' }
]
What I'm trying to do is get my agGrid to have a column showing the user's details, including the name of their country, and when they edit this cell, a list of country codes will appear, where they can select one, and it'll update the record with the id of that country.
Basic stuff, no ?
But has anyone managed to get agGrid to successfully use the "agRichSelectCellEditor" to do this successfully ?
{ headerName: 'Country', width: 120, field: 'countryId', editable: true,
cellEditor:'agRichSelectCellEditor',
cellEditorParams: {
// This tells agGrid that when we edit the country cell, we want a popup to be displayed
// showing (just) the names of the countries in our reference data
values: listOfCountries.map(s => s.name)
},
// The "cellRenderer" tells agGrid to display the country name in each row, rather than the
// numeric countryId value
cellRenderer: (params) => listOfCountries.find(refData => refData.id == params.data.countryId)?.name,
valueSetter: function(params) {
// When we select a value from our drop down list, this function will make sure
// that our row's record receives the "id" (not the text value) of the chosen selection.
params.data.countryId = listOfCountries.find(refData => refData.name == params.newValue)?.id;
return true;
}
},
My code seems to be almost correct.. it manages to:
display the country name in each row of the agGrid
display a popup, listing the country names, from our "list of countries" array
when I select an item in the popup, it successfully updates the countryId field with the (numeric) id value of my chosen country
The only problem is that at the top of the popup, it shows the countryId value, rather than the user's current country name.
Has anyone managed to get this to work ?
The only workaround I could come up with was to override the CSS on this popup and hide that top element:
.ag-rich-select-value
{
display: none !important;
}
It works... but you no longer get to see what your previously selected value was.
(I really wish the agGrid website had some decent, real-life, working Angular examples... or at least let developers post comments on there, to help each other out.)
The solution was to use a valueGetter, rather than a cellRenderer:
{
headerName: 'Country', width: 120, field: 'countryId', editable: true,
cellEditor:'agRichSelectCellEditor',
cellEditorParams: {
// This tells agGrid that when we edit the country cell, we want a popup to be displayed
// showing (just) the names of the countries in our reference data
values: listOfCountries.map(s => s.name)
},
valueSetter: function(params) {
// When we select a value from our drop down list, this function will make sure
// that our row's record receives the "id" (not the text value) of the chosen selection.
params.data.countryId = listOfCountries.find(refData => refData.name == params.newValue)?.id;
return true;
},
valueGetter: function(params) {
// We don't want to display the raw "countryId" value.. we actually want
// the "Country Name" string for that id.
return listOfCountries.find(refData => refData.id == params.data.countryId)?.name;
}
},
I hope this is useful...
I was able to get my similar situation (id:name pairs in a list, but not using Angular though) working without the problem you mentioned above, and without a valueGetter/valueSetter and only a renderer. The benefit is that you don't need to double click the cell to see the list, the cell appears as a selection box always, and you avoid a bug should the user double click the cell when the list is displayed.
The renderer is a lot clunkier than I was wanting (one line like yours) and it didn't seem that aggrid had built in support for this pretty basic function (and I already have spent enough time on this).
Anyway, this is what I had, which at least works, but keen to see further improvements on it. (You will need to at least change 2 lines for the option related code since my defaultValue object is specific to me).
The column definition:
{field: 'defaultValueID', headerName: "Default Value", cellEditor:'agRichSelectCellEditor', cellRenderer: defaultValueRenderer}
And the renderer code:
function defaultValueRenderer(params) {
var input = document.createElement("select");
// allow it to be cleared
var option = document.createElement("option");
option.innerHTML = '[None]';
option.value = null;
input.appendChild(option);
for (var i=0; i < defaultValueList.length; i++) {
var option = document.createElement("option");
option.innerHTML = defaultValueList[i].name;
option.value = defaultValueList[i].gltID;
input.appendChild(option);
}
input.value = params.value;
input.onchange = function() {
params.setValue(this.value);
params.data.defaultValueID = this.value;
}
input.style="width: 100%; height: 100%"; // default looks too small
return input;
}
Here Is Example Of agRichSelectCellEditor...
{
headerName: 'Dropdown', field: 'dropdown',
cellEditor: 'agRichSelectCellEditor',
width: 140,
editable: true,
cellEditorParams: (params) => {
values: Get All Dropdown List Like ["Hello","Hiii","How Are You?"]
},
valueSetter: (params) => {
if (params.newValue) {
params.data.dropdown= params.newValue;
return true;
}
return false;
}
}
Much simpler solution: use cellEditorParams formatValue, along with valueFormatter
{
field: 'foo',
cellEditor: 'agRichSelectCellEditor',
cellEditorParams: {
values: [1,2,3, 4, other ids... ],
formatValue: (id: number): string => this.getLabelFromId(value)
},
valueFormatter: (params: ValueFormatterParams): string => this.getLabelFromId(params.value as number)
}
I have a requirement to show PO header nodes that have columns from structure1 (fields from EKKO) when user click expand the header, it should show their items with column from structure2 (fields from EKPO).
When all rows are collapsed it is just a table with the PO header details.
I'm thinking of using tree table but my question is that is it possible for tree table to have parent node with one structure and child node with different structure?
If tree table is not possible for this requirement, Is there something else that I can use for this requirement?
Sample Layout
Thanks in advance.
Unfortunately for the tree table the columns will still have to be the same. But i think you can load the item related contents of the table as popover to the row in the header table.
You can see the UI might look like these
The code would be something like this
var oPopOver = new sap.m.Popover({
placement:sap.m.PlacementType.Vertical,
visible : true, // boolean
placement : sap.m.PlacementType.Right, // sap.m.PlacementType
showHeader : true, // boolean
title : undefined, // string
modal : false, // boolean
offsetX : 0, // int
offsetY : 0, // int
contentWidth : undefined, // sap.ui.core.CSSSize, since 1.9.0
contentHeight : undefined, // sap.ui.core.CSSSize, since 1.9.0
enableScrolling : true, // boolean
verticalScrolling : true, // boolean, since 1.15.0
horizontalScrolling : true, // boolean, since 1.15.0
content : [ new sap.m.Table() ]
});
this._oPopover = oPopOver;
Embedding the Popover to a control
sap.ui.getCore().byId("idStart1").getController()._oPopover.openBy(oEvent.getSource());
I'm using the description field to hold an value that I don't want to be displayed, is it possible to set this property to visible:false or set to width to 0?
new sap.m.Input("idAltDistInput"+refDocID+sequenceID, {value:"{AltDistrictDesc}",
description: { path : 'AltDistrictID' }
:
visible : false doesn't seem to work.
Yes you can by adding StyleClass.
sap.m.Input("id",{
//Properties
}).addStyleClass("InputDescripTionHidden");
Add following css
.InputDescripTionHidden>span{
display:none
}
Your comment above suggests that you want to store some hidden value, for later use.
Rather than "hijack" (in the nicest sense of the word) another property, you should consider using Custom Data, which is designed for this sort of thing. Here's an example.
new sap.m.List({
mode: "SingleSelectMaster",
items: {
path: "/records",
template: new sap.m.InputListItem({
label: "District",
content: new sap.m.Input({
value: "{AltDistrictDesc}",
customData: [new sap.ui.core.CustomData({
key: "DistrictID",
value: "{AltDistrictID}"
})]
})
})
},
select: function(oEvent) {
var id = oEvent.getParameter("listItem")
.getContent()[0] // the Input control
.getCustomData()[0] // the only Custom Data
.getValue();
alert("Selected District ID : " + id);
}
})
.setModel(new sap.ui.model.json.JSONModel({
records: [{
AltDistrictID: "D1",
AltDistrictDesc: "District 1"
}, {
AltDistrictID: "D2",
AltDistrictDesc: "District 2"
}]
}))
.placeAt("content");
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal"></script>
<div class="sapUiBody" id="content"></div>
(Note that for simplicity, I'm just grabbing the first content and the first custom data within that content in the select listener. You will want to do this slightly more precisely in real code.)
I have used viz chart library. I have given some drill down functionality on the column graph. For that I have to select any column of the graph to see the detail for the selected part (in the same page).
Now I want to select my first column/bar of the column graph automatically. It means when I go to the graph page, the first bar should be selected as default and the detail of the selected bar should be there.
Please help me guys.
Code:
View:
<viz:ui5.Column id="chart" selectData="goToDaily" width="auto">
<viz:plotArea>
<viz:ui5.types.VerticalBar colorPalette="#FFCC00"/>
</viz:plotArea>
<viz:title>
<viz:ui5.types.Title text="Monthly">
</viz:ui5.types.Title>
</viz:title>
<viz:dataset>
<viz:ui5.data.FlattenedDataset id="fds1" >
<viz:dimensions>
<viz:ui5.data.DimensionDefinition id="dim" axis="1" name="Month" value="{name}">
</viz:ui5.data.DimensionDefinition>
</viz:dimensions>
<viz:measures>
<viz:ui5.data.MeasureDefinition id="mea" name="Values" value="{value}">
</viz:ui5.data.MeasureDefinition >
</viz:measures>
</viz:ui5.data.FlattenedDataset>
</viz:dataset>
</viz:ui5.Column>
Controller:
Oninit:
JSONmodel = new sap.ui.model.json.JSONModel();
data1 = [ {
name : "Jan",
value : 100,
},
{
name : "Feb",
value : 150,
},
{
name : "March",
value :120,
},
{
name : "April",
value : 200,
}
];
JSONmodel.setData(data1);
sap.ui.getCore().byId("idPage3--chart").setModel(JSONmodel);
Select Data for Chart:
goToDaily:function(evt){
sap.ui.getCore().byId("idPage3--chart").selection({ctx:[{dii_a1:1}]});
}
I have tried to select month Feb as default selection, but not able to select it.
Regards,
Niket Talati
There are quite a few things incorrect in your code
You have specified an event handler for selectData but this is obviously only triggered when you first "select data". You never fire an event for data selection in your code, so the event handler will only be triggered if you click on a column manually
It seems you tried to fire the event from the event handler (which is the other way around, see previous point), but you have never implemented the fireSelectData method.
In addition, the signature of the map you tried to select is incorrect. According to the API (which is ill-formatted, I know) you need to send a whole lot more, something like this:
// ...snip...
var oSelection = {
data : [
{
target : oRect,
data : [
{
ctx : {
path : {
dii_a1 : 0,
dii_a2 : 0,
mg : 0,
mi : 0
},
type : "Measure"
},
val : 100
}
]
}
],
name : "selectData"
};
oYourChart.fireSelectData(oSelection);
// ...snip...
If you need to get an element by it's Id when using XMLViews, you should use this.getView().byId("chart") instead
Hope the above helps!
I'm trying to create grid data view from ExtJS with pagination.
Actually there's no issue when I create a simple data grid.
Then I want to create a "filter/search" function using Ext Form.
It's only work for page one. Here is my Ext Form Code below :
var winFilter = Ext.create('widget.window',{
title : 'Filter',
width : 400,
height : 200,
modal : true,
closeAction : 'hide',
items : frmFilter,
layout : 'fit',
bodyPadding: 5,
buttons:[
{
text : 'Filter',
handler: function(btn){
var win = btn.up('window');
var form = win.down('form');
tempProductID = form.getForm().findField('Product_ID').getSubmitValue();
tempDescription = form.getForm().findField('Description').getSubmitValue();
store.load({
params: {
start: 0,
limit: itemsPerPage,
productid: form.getForm().findField('Product_ID').getSubmitValue(),
description: form.getForm().findField('Description').getSubmitValue()
}
});
winFilter.hide();
}
},
{
text : 'Close',
handler: function(){
winFilter.hide();
}
}
]});
for the next page, my JSON return all data without using filtering value that I used before (Product ID and Description).
Please if any advice
Thanks bud.
params (when used as an argument of load method) are applied only once. If you want to apply these params to each request you have to modify proxy extraParams property:
Ext.apply(store.proxy.extraParams, {
productid: form.getForm().findField('Product_ID').getSubmitValue(),
description: form.getForm().findField('Description').getSubmitValue()
}, {});
store.load();
Else you can use store filter method (store.remoteFilter should be set to true):
store.filter([
{property: "productid", value: form.getForm().findField('Product_ID').getSubmitValue()},
{property: "description", value: form.getForm().findField('Description').getSubmitValue()
]);
But note that the filter part of request url has different form when filter approach is used. In this case filter part looks something like ?filter=[{'property':'productid','value':2}]&limit=10.... Whereas when params approach is used url looks something like ?productid=2&limit=10.... So when filter approach is used backend should parse filter property of request.