I have tried adding buttons to HBox and FlexBox dynamically
In the XML view i have did as below:
<HBox id="upperchart">
<m:Input value=" Key Code " editable='false' width='360px'/>
</m:HBox>
<FlexBox
alignItems="Start" id="lowerchart">
<FlexBox>
In the controller I tried accessing these with the ID's as
Controller:
var lowerHBox = this.getView().byId("lowerchart");
var upperHBox = this.getView().byId('upperchart');
var oHBox = new sap.m.HBox();
oHBox.addItem(new sap.m.Input({
value: "Test Data",
editable: false,
width: graphWidth*10 + 'px'
}));
upperHBox.addItem(oHBox);
var oMyFlexbox = new sap.m.FlexBox();
// I am adding Buttons to HBox dynamically
for (var i = 0; i < 5.length; i++){
oMyFlexbox.addItem(new sap.m.Button({
text: "Button",
width: allWidths[i]*10 + 'px'
}));
}
lowerHBox.addItem(oMyFlexbox);
Here the thing is When i just navigate through the page it gets created multiple times.
so i have tried to remove on first and add as again under this as:
lowerHBox.removeItem();
upperHBox.removeItem();
But this doesn't work to my luck ,
May I know how can I avoid it creating again and again or check if items already exists remove and create a new like this..
Any help or guiding links are appreciated thanks in advance.
You can remove the items of HBox here as:
lowerHBox.removeAllItems();
upperHBox.removeAllItems();
This could remove Items which I understood is one of your Q's
link to docs:
https://sapui5.hana.ondemand.com/#/api/sap.m.HBox%23methods/Summary
I Would wait for other expert's say for more efficient way :)
Related
I implemented the sap.m.Tree using below code
<Tree busyIndicatorDelay="0"
id="TreeList" select="onToggleOpenState" mode="SingleSelectMaster"
items="{treeModel>/}">
<StandardTreeItem title="{treeModel>Description}" icon="sap-icon://attachment-e-pub" />
</Tree>
Let's assume user clicks on 3.1.1.3 then I will get below breadcrumb bar
3 / 3.1 / 3.1.1 / 3.1.1.3
I have maintained nodeId as (parent~child~child~child....) to achieve breadcrumb
and below is the code for the same
onToggleOpenState: function(oEvent){
var sPath = oEvent.getParameter("listItem").getBindingContextPath();
var sNodeDesc = this._oView.getModel("treeModel").getProperty(sPath).NodeId;
var aBreadCum = sNodeDesc.split("~");
var oBreadCrumb = this._oView.byId("breadCrumb");
oBreadCrumb.removeAllLinks();
for(var i = 0; i < aBreadCum.length; i++){
if(i === (aBreadCum.length - 1)) {
oBreadCrumb.setCurrentLocationText(aBreadCum[i]);
}
else{
var oCrumbRoot = new sap.m.Link({
text: aBreadCum[i],
press: [this._crumbClick, this]
});
oBreadCrumb.addLink(oCrumbRoot);
}
}
},
_crumbClick: function (oEvent, data) {
},
I don't feel it's an appropriate way to implement the same as someone change the id (NodeId) pattern in the backend, everything will break. so is there any alternative way to do the same?
Further, if the user clicks on "3.1" in above breadcrumb, then tree should be expanded till the level 3.1 and one immediate level (all other branches should be collapsed.) like below image
any idea how to achieve this?
I am trying to have my ag-grid start editing as soon as a new item is added. It works when grid has data already but if it's the first item in the grid it does not work.
var a = $scope.gridOptions.api.updateRowData({add: [newItem]});
$scope.gridOptions.api.refreshCells({force:true}); // does not help
$scope.gridOptions.api.startEditingCell({
rowIndex: a.add[0].rowIndex,
colKey: 'Note'
});
using ag-grid version 12.0.2. Console shows nothing.
It seems like updateRowData does not automatically start a $digest loop. Adding $scope.$apply or $timeout or anything similar alleviates the problem.
The question showed AngularJS code.
Here's an example what you'd need to do, using regular Angular.
getContextMenuItems(params) {
var result = [
{
name: 'Add new row',
action: function() {
// Add a new row at the start of our agGrid's data array
params.context.rowData.unshift({});
params.api.setRowData(params.context.rowData);
params.api.refreshCells();
// Get the name of the first column in our grid
let columnField = params.column.userProvidedColDef.field;
// Highlight the left-hand cell in our new row, and start editing it
params.api.setFocusedCell(0, columnField, null);
params.api.startEditingCell({
rowIndex: 0,
colKey: columnField,
rowPinned: null
});
},
icon: '<img src="../../assets/images/icnAdd.png" width="14"/>'
}
];
return result;
}
Hope this helps.
hey guys not sure if this is a bug or theres something I'm doing wrong, or the CSS style sheets im using are making this error, but im racking my brain on how to fix this.
I have the following code bellow in a loop, ever since I put it in a loop it no longer works as setting the selected button I had a search and some one said try set selected key, I also tried this and no luck. Now I have put them both in and it sets the selected value to neither button. I'll show you screenshots of what I mean. Any ideas on fixing it would be great.
for(var i = 0; i < results.length; i++) {
//Create buttons dynamically
var segmentItemYes = new sap.m.SegmentedButtonItem({text :"Yes", press: [this.onSEYesPress, this]});
var segmentItemNo = new sap.m.SegmentedButtonItem({text :"No", press: [this.onSENoPress, this]});
var segmentedButton = new sap.m.SegmentedButton({items : [segmentItemYes, segmentItemNo]});
//TODO:Doesn't work currently - How do we set default state?
segmentedButton.setSelectedButton(segmentItemNo);
segmentedButton.setSelectedKey(segmentItemNo);
Below is the Image the top part is what I'm getting (I clicked on no to show you what exactly happens. The bottom one is with the setSelectedKey removed but still set to no. any ideas? This is in a JS controller and it gets placed in to an xml fragment if this makes a difference or not.
I got it to work as follows, by binding the selected key to a model:
var segmentItemYes = new sap.m.SegmentedButtonItem( {
text: "Yes",
key: "foo"
});
var segmentItemNo = new sap.m.SegmentedButtonItem( {
text: "No",
key: "bar"
});
var segmentedButton = new sap.m.SegmentedButton( {
items: [segmentItemYes, segmentItemNo],
selectedKey: {
path: "test>/key"
}
});
var model = new sap.ui.model.json.JSONModel({
key: "bar"
});
sap.ui.getCore().setModel(model, "test");
I have an XTemplate to display html data as shown below
var headerTmp = new Ext.XTemplate(
'<br><br><br>',
'<div class="contact-display-container" style="height:100px; width:400px">',
'<div style="font-size:12px; left:15px">Hello </div>',
'</div>',
'<br><br><br>'
);
I am referring the data in a dataview
var dataView1 = new Ext.DataView({
autoScroll: false,
tpl: headerTmp,
itemSelector: 'div.contact-display-container'
});
I am trying to display the data in a window
var win = new Ext.Window({
height:700,
width:700,
border:false,
modal:true,
title: 'Review Contact Information',
items:[{
layout : 'vbox',
items : [dataView1]
}],
buttons:[{
text: 'Cancel',
handler:function(){
win.close();
}
}]
});
win.show();
But the data "Hello" is not displayed on the window. Can you please tell me where am I going wrong.
Thanks in advance :)
A dataview should be bound to an instance of a store. Try adding a store config to your dataview.
You are overnesting items in your window. You should add dataView directly as a child item to your window. If you need an extra parent level panel, either change it's layout to something like fit or if you want to keep it as a vbox, add a flex config to the dataview.
Here's a working example:
http://jsfiddle.net/KUqM9/419/
did somebody manage to sort multiple items at once with jquery.ui.sortable?
we are working on a photo managing app.
select multiple items
drag them to a new location.
thanx
I had a similar requirement, but the solution in the accepted answer has a bug. It says something like "insertBefore of null", because it removes the nodes.
And also i tried jQuery multisortable, it stacks the selected items on top of each other when dragging, which is not what i want.
So I rolled out my own implementation and hope it will save others some time.
Fiddle Link.
Source code:
$( "#sortable" ).sortable({
// force the cursor position, or the offset might be wrong
cursorAt: {
left: 50,
top: 45
},
helper: function (event, item) {
// make sure at least one item is selected.
if (!item.hasClass("ui-state-active")) {
item.addClass("ui-state-active").siblings().removeClass("ui-state-active");
}
var $helper = $("<li><ul></ul></li>");
var $selected = item.parent().children(".ui-state-active");
var $cloned = $selected.clone();
$helper.find("ul").append($cloned);
// hide it, don't remove!
$selected.hide();
// save the selected items
item.data("multi-sortable", $cloned);
return $helper;
},
stop: function (event, ui) {
// add the cloned ones
var $cloned = ui.item.data("multi-sortable");
ui.item.removeData("multi-sortable");
// append it
ui.item.after($cloned);
// remove the hidden ones
ui.item.siblings(":hidden").remove();
// remove self, it's duplicated
ui.item.remove();
}
});
There's a jQuery UI plugin for that: https://github.com/shvetsgroup/jquery.multisortable
jsFiddle: http://jsfiddle.net/neochief/KWeMM/
$('ul.sortable').multisortable();
... or just define a 'items' option to your multisortable that way (for example) :
$('table tbody').multisortable({
items: 'tr'
});
you can use shvetsgroup/jquery.multisortable
but it will create problem.. because, that js is designed only for tags...
but customize it to use it, its very simple i'll tell you how????
at first download that .js and use it in your program...
step 1. open the js file...now edit the following lines...
$.fn.multiselectable.defaults = {
click: function(event, elem) {},
mousedown: function(event, elem) {},
selectedClass: 'selected',
items: 'li'
};
the above are lines from 107 to 112....
there you can see "items: 'li'
in that use your tag which you are used to enclose those image like if you are using, or or anything you are using like this
$.fn.multiselectable.defaults = {
click: function(event, elem) {},
mousedown: function(event, elem) {},
selectedClass: 'selected',
items: 'div' // or any tag you want...
};
and 249 to 254
selectedClass: 'selected',
placeholder: 'placeholder',
items: 'li'
};
}(jQuery);
change the line " item:'li' " with your tag like this
selectedClass: 'selected',
placeholder: 'placeholder',
items: 'div' // or anything else
};
}(jQuery);
if you are working on textboxes inside those envelopes.. you have to get rid of these lines too
// If no previous selection found, start selecting from first selected item.
prev = prev.length ? prev : $(parent.find('.' + options.selectedClass)[0]).addClass('multiselectable-previous');
var prevIndex = prev.index();
after that comment line...
add a line code that search textbox or check box or any interaction element inside it...
like this..
// If no previous selection found, start selecting from first selected item.
item.children("input").focus(); // customize this code to get your element focus...
prev = prev.length ? prev : $(parent.find('.' + options.selectedClass)[0]).addClass('multiselectable-previous');
var prevIndex = prev.index();
and also to indicate selected tags or elements... use styles like this
div { margin: 2px 0; cursor: pointer; }
div.selected { background-color: orange }
div.child { margin-left: 20px; }
actually i used div.. instead of that you can use any tag you wish...
hope will help u.... if it is not... read again.. and ask again....
wishes