I am trying to display a result det data on a table and a chart together. For exampIe: A user gives a value as an input and a query has to be made to the server to filter the table based on the user input and give nbacj the result set.
I am implementing a filter on the table and then bind the filtered result set to the table. I write the below code which works fine.
var oModel = new sap.ui.model.odata.ODataModel( "../TEST_ODATA.xsodata",false);
oTable.setModel(oModel);
var oFilter=new sap.ui.model.Filter("SUPPLIERID",sap.ui.model.FilterOperator.EQ,oInput1.getValue());
oTable.getBinding("rows").filter(oFilter);
var NumberOfRows = oTable.getBinding("rows").iLength;
oTable.setTitle("Title1" + "(" + NumberOfRows + ")");
oTable.placeAt("content");
Now I need to bind ofilter to a chart too and I write the following code which does not work.
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions : [{axis : 1, name : 'SUPPLIERID', value : "{SUPPLIERID}"},{axis : 2, name : 'MATERIALNUMBER', value : "{MATERIALNUMBER}"}],
measures : [{name : 'Result', value : '{Result}'}],
data : {
path : "/service_path"
}});
var oStackChart = new sap.viz.ui5.StackedColumn({
width : "80%",
height : "400px",
plotArea : {'colorPalette' : d3.scale.category20().range()},
title : {visible : true,text : 'Title2'},
dataset : oDataset});
oStackChart.setModel(oModel);
var oFilter=new sap.ui.model.Filter("SUPPLIERID",sap.ui.model.FilterOperator.EQ,oInput1.getValue());
oStackChart.getBinding("rows").filter(oFilter);
oStackChart.placeAt("content");
Can anyone suggest the change in my code to do so. Kindly help.
Thanks
You can add the filters to the FlattenedDataset like:
var oDataset = new FlattenedDataset({ // required by "sap/viz/ui5/data/FlattenedDataset"
dimensions: aDimensions,
measures: aMeasures,
data: {
path: sEntity,
filters: [ oFilter ],
parameters: {
select: 'ProductID,UnitPrice,Quantity'
}
}
});
Note I used parameters to reduce the columns returned.
Related
I want to delete data by row in my table sapui5 but have an error. I have table with id name "tableKelompokPeserta".
code:
deleteButton2 : function(){
var oTable = this.getView().byId("tableKelompokPeserta");
oTable.attachRowSelectionChange(function(oEvent){
var currentRowContext = oEvent.getParameter("rowContext");
var selData = extModel.getProperty("template", currentRowContext);
console.log(selData);
sap.m.MessageToast.show(currentRowContext);
});
},
onInit : function (){
var router = sap.ui.core.UIComponent.getRouterFor(this);
var uri = "http://172.16.50.202:8081/id/co/taspen/joinDevelopment/modules/tks_mantab/service.xsjs?cmd=get";
var jsonMod = new sap.ui.model.json.JSONModel(uri,true);
var oTable = this.getView().byId("tableKelompokPeserta");
oTable.setModel(jsonMod);
var oColumn1 = new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text: "KODE KELOMPOK",
textAlign : "Center"}),
template : new sap.ui.commons.TextField().bindProperty("value", "KODE_KELOMPOK"),
sortProperty : "KODE_KELOMPOK",
filterProperty : "KODE_KELOMPOK"
});
var oColumn2 = new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text: "NAMA",
textAlign : "Center"}),
template : new sap.ui.commons.TextField().bindProperty("value", "NAMA"),
sortProperty : "NAMA",
filterProperty : "NAMA"
});
var oColumn3 = new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text: "MINIMAL USIA MASUK",
textAlign : "Center"}),
template : new sap.ui.commons.TextField().bindProperty("value", "MINIMAL_USIA_MASUK"),
sortProperty : "MINIMAL_USIA_MASUK",
filterProperty : "MINIMAL_USIA_MASUK"
});
var oColumn4 = new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text: "MAKSIMAL USIA MASUK",
textAlign : "Center"}),
template : new sap.ui.commons.TextField().bindProperty("value", "MAKSIMAL_USIA_MASUK"),
sortProperty : "MAKSIMAL_USIA_MASUK",
filterProperty : "MAKSIMAL_USIA_MASUK"
});
var oColumn5 = new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text: "TERUSAN",
textAlign : "Center"}),
template : new sap.ui.commons.TextField().bindProperty("value", "TERUSAN"),
sortProperty : "TERUSAN",
filterProperty : "TERUSAN"
});
var oColumn6 = new sap.ui.table.Column({
label : "ACTION",
template : new sap.ui.commons.Button({
icon : "sap-icon://edit",
tooltip : "{KODE_KELOMPOK}",
press : function(){
var id = this.getTooltip();
}
})
});
oTable.addColumn(oColumn1);
oTable.addColumn(oColumn2);
oTable.addColumn(oColumn3);
oTable.addColumn(oColumn4);
oTable.addColumn(oColumn5);
oTable.addColumn(oColumn6);
oTable.bindRows("/d/results");
}
I have 6 columns and I want to get "KODE_KELOMPOK" column selected row (single selection only). I want when click deletebutton2, I get "KODE_KELOMPOK" (from oColumn1). and how to disable multiple row in sapui5? Thank you.
Regards,
Bobby
For your first question, in your deleteButton2 event handler, use the oEvent object to get the row of the pressed delete button:
deleteButton2 : function(oEvent){
var sValue = oEvent.getSource().getParent().getBindingContext().getProperty("KODE_KELOMPOK");
}
sValue will contain the value of the KODE_KELOMPOK model property for the selected row.
For your second question, list selection mode can be set using the mode property of the List control. Supported values can be found here. SingleSelectMaster seems to be good for you.
I have following code for jQuery DataTables:
Contact.DataTable = $('#otable').DataTable( {
"ajax": {
"url" : '/Contact/' + Contact.id,
"dataSrc": function(check) {
return check.data;
},
},
"responsive": true,
"columns": [
{ "data": "id"},
{ "data": "category", "sClass": "category" },
{ "data": "name", "sClass": "name" },
{ "data": "lname" },
{
"render": function ( data, type, method, meta ) {
return Contact.saveContact(method);
}
},
]
} );
Datatable - dropdown - inline edit:
$('#otable tbody').on('click', '.category', function () { //second column
var row = this.parentElement;
if(!$('#otable').hasClass("editing")){
$('#otable').addClass("editing");
var data = Contact.DataTable.row(row).data();
var $row = $(row);
var thiscategory = $row.find("td:nth-child(2)");
var thiscategoryText = thiscategory.text();
thiscategory.empty().append($("<select></select>",{
"id":"category" + data[0],
"class":"in_edit"
}).append(function(){
var options = [];
$.each(Categories, function(key, value){
options.push($("<option></option>",{
"text":value,
"value":value
}))
})
return options;
}));
$("#category" + data[0]).val(thiscategoryText)
}
})
;
For changing values in dropdown
$('#otable tbody').on("change", ".in_edit", function(){ //Inline editing
var val = $(this).val();
$(this).parent("td").empty().text(val);
$('#otable').removeClass("editing");
});
Below code for saving new values(after inline edit) while clicking save:
$('#divsave').on("click", ".saveContact", function() {
var data = Contact.DataTable.row($(this).closest('tr')).data();
// Here I have to get new values after inline editing - but getting old values
});
My problem is : while clicking edit, in 'data', I am getting old values in the row of datatable, not the modified value after inline edit
datatable view - 1:
datatable - dropdown in column:
datatable after inline editing:
What I need: Save modified row while clicking 'save' image - currently it saves older value before inline editing(datatable view - 1)
When using dataTables it is generally a very bad idea to manipulate the DOM <table> or any content by "hand" - you should always go through the dataTables API.
Thats why you are getting "old values" - you have manipulated the content of the <table>, or so it seems - dataTables are not aware of those changes.
In a perfect world you should refactor the setup completely (i.e to use the API) but I guess you can solve the issue by using invalidate() on the row being changed in order to refresh the dataTables internals :
$('#otable tbody').on("change", ".in_edit", function(){ //Inline editing
var val = $(this).val();
$(this).parent("td").empty().text(val);
//add this line to refresh the dataTables internals
Contact.DataTable.row($(this).parent("tr")).invalidate();
//
$('#otable').removeClass("editing");
});
I am trying to recreate a excel like feel using HandsOnTable and RuleJS. I am able to put in formulas where the calculations use cell values from the same table but cannot find a way to compute with cells from different tables.
In my example(see http://jsfiddle.net/satyamallyaudipi/3sct2h8q/81/ , I have been trying to compute the value of a Addl Costs cell in lineItem1 Table from Customer $ Targets in "Target" Table as in
=0.5*(B$2 from Target table)
Here is my html
<div id="target_Table" ></div>
<div id="lineItem_Table" ></div>
Here is the relevant javascript code
$(document).ready(function () {
var targetContainer = document.getElementById('target_Table');
var lineItemContainer = document.getElementById('lineItem_Table');
var targetData = [
["","2016","2017","2018","2019","2020","2021","2022","2023","2024","2025","Total"],
["Customer $ Targets:",500000,600000,700000,800000,900000,1000000,1100000,1200000,1300000,1400000,0],
["Customer % Targets:",0.55,0.56,0.57,0.58,0.58,0.59,0.59,0.60,0.6,0.6,0]];
var lineItemData = [
["","Total","2016","2017","2018","2019","2020","2021","2022","2023","2024","2025"],
["Qty","=SUM(C2:L2)",1500,2400,3000,3000,2100,0,0,0,0,0],
["Addl Cost", "=0.005*B$2","=0.005*C$2", ="0.005*D$2", "=0.005*E$2", "=0.005*F$2", "=0.005*G$2", "=0.005*H$2", "=0.005*I$2", "=0.005*J$2", "=0.005*K$2","=0.005*:L$2"]];
^-I would like this to be targetData B column
var target = new Handsontable(targetContainer, {
data: targetData,
....
});
var lineItem1 = new Handsontable(lineItemContainer, {
data: lineItemData,
.....
});
Here is the full jsfiddle http://jsfiddle.net/satyamallyaudipi/3sct2h8q/81/. Is it even possible to do this with HandsOnTable?
Hi I'm nearly finished with my small task of populating select dropdowns then outputting a relevant number. The select a company etc works.
Here's my JSFiddle: http://jsfiddle.net/3MK3D/1/
I need to now generate the appropriate companies in the select dropdown dependent on which sector is selected. I've created a new javascript array for personal companies.
I've thought of maybe doing something like this and passing the correct variable to the appropriate function but not really sure how to implement it:
var companiesArray;
$('#sector').on('change', function(e){
var optionSelected = $("option:selected", this);
var sectorSelected = this.value;
if( sectorSelected == 'business' ) {
companiesArray = 'insurancecompanies';
} else if( sectorSelected == 'personal' ) {
companiesArray = 'personalcompanies';
} else {
}
});
There is probably a better way?
Use a companies object that has your sector select values as keys to the relevant arrays:
var companies = {
business : [
{
name : 'Advent',
property : '01242 674 674',
fleet : '',
motortrade : ''
},
{
name : 'Allianz',
property : '0844 412 9988',
fleet : '0800 587 5858',
motortrade : ''
},
// other insurance companies
],
personal : [
// personal companies
]
}
Then:
$('#sector').on('change', function(e){
var optionSelected = $("option:selected", this);
var sectorSelected = this.value;
var companyArray = companies[sectorSelected];
// iterate over companyArray and create the relevant option objects for #company
});
The documentation provides an example:
aContainer = Ember.ContainerView.create({
childViews: ['aView', 'bView', 'cView'],
aView: Ember.View.create(),
bView: Ember.View.create(),
cView: Ember.View.create()
});
This is really neat, however if I want to write a function that adds views when called, how do I name each view that I create? for example:
aContainer = Ember.ContainerView.create({
childViews: [],
newView: function( input ){
var newView = BaseView.create({ field: input });
this.get('childViews').pushObject( newView );
}
});
this seem to push an anonymous view into the container. Any thoughts on how to name it?
For example, it'd be neat to have a snippet that says:
newView: function( input ){
var name = 'view_' + this.get('childViews').get('length') + 1
var newView = BaseView.create({ field: input, meta: name })
this.get('childViews').pushObject( newView );
}
Thank you.
I don't think there's a meta attribute to add named views. But you can always just assign them yourself.
newView: function( input ){
var name = 'view_' + this.get('childViews.length') + 1
var newView = BaseView.create({ field: input });
this.get('childViews').pushObject( newView );
this.set(name, newView);
}