I have a panel (Categories) which contains child "questions" (input boxes).
The Panels are displaying fine, but each Panels content: property can include more the one question.
var oPanel = new sap.m.Panel({
expandable: true,
expanded: false,
headerText: oData.results[0].CategoryDesc,
id: "Panel" + index,
content: _.each(oViewData.categories, function(result, index2) {
new sap.m.Input("iCategory" + index + index2, {
});
})
});
oPanel.placeAt("panelContent");
I'm retrieving the data fine, but the content won't render. I'm getting the error message:
The renderer for class sap.ui.core.Control is not defined or does not define a render function! Rendering of __control0 will be skipped! -
Is it possible to use _each (underscoreJs) in the content property? If not, what are my alternatives?
you can push your data to an array and use it in the content area:
var oPanelContent = [];
_.each(oViewData.categories, function(result, index2) {
oPanelContent.push(new sap.m.Input("iCategory" + index + index2, {
})
);
var oPanel = new sap.m.Panel({
expandable: true,
expanded: false,
headerText: oData.results[0].CategoryDesc,
id: "Panel" + index,
content: oPanelContent
})
});
oPanel.placeAt("panelContent");
Related
I am currently having an error while using sap.m.Input, with the suggestion items
when I click on the list of suggestion:
controller
ch: function() {
var filters = [];
var TBLot = sap.ui.getCore().byId("idTableLot");
var item = sap.ui.getCore().byId("prd").getSelectedKey();
var filterL = new Filter("DCI", FilterOperator.EQ, item.toUpperCase());
var filterWhs = new Filter("Magasin", FilterOperator.EQ, GlobalWarehouse);
filters.push(filterL);
filters.push(filterWhs);
// ...
},
view
var oItemTemplateP = new sap.ui.core.ListItem({
key: "{ItemName}",
additionalText: "{U_CMC_RP_CDC}",
text: "{ItemName}"
});
new sap.m.Input({
id: "prd",
autocomplete: true,
showSuggestion: true,
enableSuggestionsHighlighting: true,
suggestionItems: {
path: "/itm",
template: oItemTemplateP
},
change: [oController.ch, oController]
});
You must be using an old version of UI5. The method getSelectedKey was introduced in 1.44. To see which UI5 version the app is running with, press Ctrl+Shift+Left Alt+P.
I am trying to develop an SAPUI5 app but I can't add a specific text before the value in a table column.
onInit : function() {
var oModel = new sap.ui.model.json.JSONModel('add json file ');
sap.ui.getCore().setModel(oModel,'products');
}
In the View I am creating a table and binding all records:
var oTable = new sap.m.Table("productsTable",{
inset: true,
columns: [
//image
new sap.m.Column({
hAlign: "Left",
width: "100px",
demandPopin: true,
popinDisplay: "Block",
minScreenWidth: sap.m.ScreenSize.Medium
}),
]
});
var oTemplate = new sap.m.ColumnListItem({
type: sap.m.ListType.Active,
cells: [
new sap.m.Text({
text: "Title :{products>description} ",
//visible :false,
}),
]
});
oTable.bindAggregation("items","products>App",oTemplate); // Here bind all record
return new sap.m.Page({
title: "App Name",
content: [oTable],
showNavButton: true,
navButtonPress: function() {
oController.navigation();
},
footer: new sap.m.Bar({
contentLeft: [
new sap.m.Text({text: "Smart",})
]
}),
});
My desired output is:
But it's displayed this way:
As #Qualiture said in the comment this looks like you need to enable the complex binding syntax.
You can do that by setting the binding syntax mode explicitly using
data-sap-ui-bindingSyntax="complex" or implicitly by specifying the compatibility version of 1.26 or edge: data-sap-ui-compatversion="edge".
Try add slash (/) caracter before the property.
Sample:
"Title :{products>/description} "
OR
Maybe your binding is incorrect, try this
...
text: { path: "{products>/description}", //with or without slash (/)
formatter: function(desc) {
return "Title" + desc;
}
}
...
How can I get index of pressed ColumnListItem? I want to get and pass to controller method.
View code:
var oTable = new sap.m.Table({
id: "Countries",
mode: sap.m.ListMode.None,
columns: [ new sap.m.Column({
width: "1em",
header: new sap.m.Label({
text: "Name"
})
})
]
});
var template = new sap.m.ColumnListItem({
id: "first_template",
type: "Navigation",
visible: true,
selected: true,
cells: [ new sap.m.Label({
text: "{name}"
})
],
press: [oController.pressListMethod]
});
oTable.bindItems("/eventos", template, null, null);
oPage.addContent(oTable);
Controller code:
pressListMethod: function(index){
var oData = sap.ui.getCore().getModel().getProperty("/eventos/"+index+"/name");
alert(oData);
}
You shouldn´t rely on the index since the index in the table can differ from the index in your model (e.g. due to filtering and sorting).
You can read the bindingContext of the pressed ListItem like this:
pressListMethod: function(event){
var bindingContext = event.getSource().getBindingContext();
}
The bindingContext is an artificial object containing the related model and a path of the object within the model.
You can then read properties of your object like this:
var name = bindingContext.getProperty("name");
To get the whole object you can do it like this:
var myObject = bindingContext.getObject();
To get exact value of product
SelectedRowContext.getObject('PRODUCT_ID')
To get Name of product
SelectedRowContext.getObject('NAME')
I'm working on an application that will allow people to select which data fields they would like a form to have. I had it working but when I tried to move the form fields into a table for a bit of visual structure I'm running into a problem.
// Now print the form to a new div
array.forEach(selectedFields, function(item, i) {
var l = domConstruct.create("label", {
innerHTML: item + ': ',
class: "dataFieldLabel",
for: item
});
var r = new TextBox({
class: "dataField",
name: item,
label: item,
title: item
});
var a = domConstruct.toDom("<tr><td>" + l + r + "</td></tr>");
domConstruct.place(a, "displayDataForm");
When I run the code I can select the fields I want but instead of textboxes being drawn on the screen text like:
[object HTMLLabelElement][Widget dijit.form.TextBox, dijit_form_TextBox_0]
[object HTMLLabelElement][Widget dijit.form.TextBox, dijit_form_TextBox_1]
Is printed to the screen instead. I think this is because I am passing domConstruct.place a mixture of text and objects. Any ideas about how to work around this? Thanks!
Try this :
require(["dojo/_base/array", "dojo/dom-construct", "dijit/form/TextBox", "dojo/domReady!"], function(array, domConstruct, TextBox){
var selectedFields = ["Foo", "Bar", "Baz"];
array.forEach(selectedFields, function(item, i) {
var tr = domConstruct.create("tr", {}, "displayDataForm"),
td = domConstruct.create("td", {}, tr),
l = domConstruct.create("label", {
innerHTML: item + ': ',
'class': 'dataFieldLabel',
'for': item
}, td, 'first'),
r = new TextBox({
'class': 'dataField',
name: item,
title: item
}).placeAt(td, 'last');
});
});
This assumes you have this in your html :
<table id="displayDataForm"></table>
Don't forget to quote "class" and "for" as these are part of javascript's grammar.
The domConstruct functions will not work with widgets. You can create the html and then query for the input node and create the test box.
var root = dom.byId("displayDataForm");
domConstruct.place(root,
lang.replace(
'<tr><td><label class="dataFieldLabel" for="{0}>{0}:</label><input class="inputNode"></input></td></tr>',
[item])
);
query('.inputNode', root).forEach(function(node){
var r = new TextBox({
'class': "dataField",
name: item,
label: item,
title: item
});
});
Craig thank you for all your help, you were right except that in the call to domConstruct.place the first argument is the node to append and the second argument is the refNode to append to. Thank you.
// Now print the form to a new div
array.forEach(selectedFields, function(item, i) {
var root = dom.byId("displayDataForm");
domConstruct.place(lang.replace(
'<tr><td><label class="dataFieldLabel" for="{0}">{0}: </label><input class="dataField"></input></td></tr>',
[item]), root
);
query('.dataField', root).forEach(function(node) {
var r = new TextBox({
'class': "dataField",
name: item,
label: item,
title: item
});
});
});
I have a requirement to enable drag and drop from a kendo-ui tree view to a templated list view.
I've tried the following:
1.Enabling dragAndDrop on the treeview and configuring the listview as a kendoDropTarget
2.Disabling dragAndDrop on the treeview and instead configuring that control as kendoDraggable to the listview configured as a kendoDropTarget
<div>
<div id="treeview">
</div></div>
<div id="favorites-window" style="height:185px;width:1170px">
<div class="report-reader" style="height:185px;width:1170px;overflow:auto">
<div id="listView"></div>
</div>
</div>
$("#favorites-window").kendoWindow({
width: "1180",
height: "185",
resizable: false,
draggable: false,
actions: ["Custom"],
title: "Favorites"
});
$("#listView").kendoListView({
selectable: "single",
navigatable: false
}).kendoDropTarget({
drop: function (e) {
console.log(e);
var item = getObjects(nucleusTreeJsonData, 'text', e.draggable.hint.text());
$("#listView").data("kendoListView").dataSource.add(item);
}
});
var inlineDefault = new kendo.data.HierarchicalDataSource({
data: [
{ text: "Furniture", items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
] },
{ text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
] }
]
});
$("#treeview").kendoTreeView({
dragAndDrop: true,
dataSource: inlineDefault,
dataTextField: "text"
});
//.kendoDraggable({
// container: $("#tree-pane"),
// hint: function () {
// return $("#treeview").clone();
// },
// dragstart: draggableOnDragStart
//});
$("#treeview").data("kendoTreeView").bind("dragstart", function (e) {
if ($(e.sourceNode).parentsUntil(".k-treeview", ".k-item").length == 0) {
e.preventDefault();
}
});
/*$("#treeview").data("kendoTreeView").bind("drop", function (e) {
e.preventDefault();
var copy = this.dataItem(e.sourceNode).toJSON();
if (e.dropPosition == "over") {
//var item = getObjects(nucleusTreeJsonData, 'text', e.sourceNode.textContent);
$("#listView").data("kendoListView").add(copy);
}
});*/
$('ul.k-group.k-treeview-lines div').children().css('font-weight', 'bold').find('div').css('font-weight', 'normal');
I'm not having much luck with it. Please take a look at my fiddle. Any suggestions would be greatly appreciated
http://jsfiddle.net/OhenewaDotNet/JQBZN/16/
I know this is an old question but I had it, too, so I went ahead and figured it out using this fiddle.
http://jsfiddle.net/JQBZN/74/
This is really really basic and is probably architected awfully but I think it at least demonstrates the key point(s):
$("#treeview").kendoTreeView({
dragAndDrop: true,
dataSource: inlineDefault,
dataTextField: "text",
drag: function (e) {
/* Manually set the status class. */
if (!$("#treeview").data('kendoTreeView').dataItem(e.sourceNode).hasChildren && $.contains($('#favorites-window')[0], e.dropTarget)) {
e.setStatusClass('k-add');
} else {
e.setStatusClass('k-denied');
}
},
drop: function (e) {
if (e.valid) {
/* Do your adding here or do it in a drop function elsewhere if you want the receiver to dictate. */
}
e.preventDefault();
}
});
If the KendoUI tool set isn't doing what you want it to do, you may find it easier to do what you want to do with jQuery UI. They're both implementing the same jQuery core library.
If you go with jQuery UI, it's simply a matter of binding 'draggable' to the element you want to drag, and 'droppable' to your targets. From there, you can wire up handlers to do pretty much anything you want.
I've set up a simple jsFiddle that demonstrates how this would work:
http://jsfiddle.net/e2fZk/23/
The jQuery code is really simple:
$(".draggable").draggable();
$(".container").droppable({
drop: function (event, ui) {
var $target = $(this);
var $source = ui.draggable;
var newUrl = $source.find("input").val();
alert("dropped on " + $target.attr("id") + ", setting URL to " + newUrl);
$target.find("#imageDiv").html("<img id='myImage' />")
.find("#myImage").attr("src", newUrl);
}
});
The API documentation is here:
Draggable
Droppable