How to remove datagrid data when a button is clicked, which is outside the grid.
[Bindable]
private var ac:ArrayCollection=new ArrayCollection([{artist: "John", album:"AAA", price:"100.01", selected: false},
{artist: "Jai", album:"BBB", price:"101.01", selected: false}, {artist: "Jack", album:"CCC", price:"110.01", selected: false}]);
<s:DataGrid id="myDG" width="50%" height="50%" dataProvider="{ac}"
>
<s:columns>
<s:ArrayCollection>
<s:GridColumn dataField="artist" headerText="ARTIST"/>
<s:GridColumn dataField="album" headerText="ALBUM"/>
<s:GridColumn dataField="price" headerText="PRICE" >
<s:itemEditor>
<fx:Component>
<s:ComboBoxGridItemEditor>
<s:dataProvider>
<s:ArrayList>
<fx:String>100</fx:String>
<fx:String>200</fx:String>
<fx:String>300</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:ComboBoxGridItemEditor>
</fx:Component>
</s:itemEditor>
</s:GridColumn>
</s:ArrayCollection>
</s:columns>
</s:DataGrid>
i need to have a button outside the grid.data is from dataprovider
private function button1_clickHandler(event:MouseEvent):void{
ac.removeItemAt(myDG.selectedIndex);
}
public function deletefromgrid():void {
if (dg.selectedIndex >= 0) {
ac.removeItemAt(dg.selectedIndex);
}
}
Related
If you notice there is no anchors when you load the page :
http://alvarotrigo.com/multiScroll/
but if you scroll down and up again :
/multiScroll/#first appears.
I need ' #first ' on first page load not when I scroll so I can use afterLoad function on page load.
Fiddle https://jsfiddle.net/oadfcjt2/8/
$('#myContainer').multiscroll({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
menu: false,
afterLoad: function(anchorLink, index){
if(index == 1){
alert("first");
}
}
});
Any help?Thank you.
Use the afterRender callback for it.
$('#myContainer').multiscroll({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
menu: false,
afterLoad: function (anchorLink, index) {
afterLoadActions(anchorLink, index);
},
afterRender: function () {
var activeSection = $('.ms-left').find('.ms-section.active');
var activeAnchor = activeSection.data('anchor');
afterLoadActions(activeAnchor, activeSection.index());
}
});
function afterLoadActions(anchorLink, index) {
if (index == 1) {
alert("first");
}
}
My question is related to Filipe Figueiredo's query (see: Blackberry 10 Cascades - Images inside Text Area)
My Cascades BB10 App requires a search-ahead drop-down with the ability to have multiple items selected and displayed as Tag Fields. Look & feel and behavior same as BB10 email composer's "To" address field - but with different data (e.g. country names).
Questions:
Is there a way to do this using Cascades components / controls?
(FlowListLayout does not meet exact requirements)
Can we achieve this using QML + javascript?
Or is there a way using C++ and QML for achieving this?
Is there a Component market Place for procuring custom controls for Cascades?
My development is stalled. Please help.
It should be possible. This is a prototype. It doesn't work well, but it's an idea. This is how it looks:
Code (yeah, it's bad. but it should work out of the box):
import bb.cascades 1.2
Page {
Container {
ListView {
id: tagList
dataModel: tagModel
layout: FlowListLayout {
headerMode: ListHeaderMode.None
}
preferredHeight: 200
function itemType(data, indexPath) {
return (data.add == 1 ? 'add' : '');
}
function mload(text) {
myList.load(text);
}
function showDropDown() {
myList.visible = true;
}
listItemComponents: [
ListItemComponent {
type: "add"
Container {
id: myAdd
TextField {
id: searchBox
preferredWidth: 300
onTextChanging: {
myAdd.ListItem.view.mload(searchBox.text);
}
onFocusedChanged: {
if (focused)
myAdd.ListItem.view.showDropDown();
}
}
}
},
ListItemComponent {
Container {
background: Color.create("#660000FF")
leftPadding: 10
rightPadding: 10
topPadding: 10
bottomPadding: 10
leftMargin: 10
bottomMargin: 10
Label {
id: country
textStyle.fontSize: FontSize.Medium
text: ListItemData.country
}
}
}
]
onTriggered: {
//todo: make it possible to remove a tag
console.log("item touched.. yay!")
}
attachedObjects: [
ArrayDataModel {
id: tagModel
}
]
}
ListView {
id: myList
visible: false
dataModel: mdataModel
preferredHeight: 400
attachedObjects: [
ArrayDataModel {
id: mdataModel
}
]
onTriggered: {
var selected = dataModel.data(indexPath);
var tmp = new Object();
tmp.country = selected;
tagModel.insert(tagModel.size() - 1, tmp);
console.log("removing: " + (tagModel.size() - 1 ) + " at size " + tagModel.size())
visible = false;
}
function load(text) {
var cities = [ "Slovenia", "Italy", "Slovakia", "Croatia", "Sweden", "Norway", "Poland", "Finland", "Spain",
"Indonesia", "Ireland" ]
var tmp = [];
for (var i = 0; i < cities.length; i ++)
if (cities[i].toLowerCase().indexOf(text.toLowerCase()) >= 0)
tmp.push(cities[i]);
mdataModel.clear();
mdataModel.insert(0, tmp);
}
function insertEdit() {
var edit = new Object();
edit["add"] = "1";
tagModel.insert(tagModel.size(), edit);
}
}
}
onCreationCompleted: {
myList.load("");
myList.insertEdit(); // insert item with TextField
}
}
I'm new to jQuery UI.
I'm trying to create a selectable jQuery UI tooltip. The tooltip is associated with the links on a page.
When the link is surrounded by just text, it works fine. But when there are few links next to each other, the functionality overlaps and tooltips don't show smoothly anymore.
you can find the code on http://jsfiddle.net/zumot/Hc3FK/2/
Below the JavaScript code
$("[title][data-scan]").bind("mouseleave", function (event) {
event.stopImmediatePropagation();
var fixed = setTimeout('$("[title][data-scan]").tooltip("close")', 100);
$(".ui-tooltip").click(function () {
alert("I am clickable");
return false;
});
$(".ui-tooltip").hover(
function () {
clearTimeout(fixed);
},
function () {
$("[title][data-scan]").tooltip("close");
});}).tooltip({
items: "img, [data-scan], [title]",
content: function () {
var element = $(this);
if (element.is("[data-scan]")) {
var text = element.attr("href");
return "<a href='http://www.google.com'>You are trying to open a tooltip <span>" + text + "</span></a>";
}
if (element.is("[title]")) {
return element.attr("title");
}
if (element.is("img")) {
return element.attr("alt");
}
},
position: {
my: "right center",
at: "left center",
delay: 200,
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}});
My attempt to fix the issue was by making the variable fixed global (to make it accessible by other jQuery UI properties), and on Open event, hide any other previously opened tooltips and clear the timeout id saved in fixed variable.
You can find the solution here http://jsfiddle.net/zumot/dVGWB/
, though to see the code working properly, you'll have to run it directly on your browser.
Here's the snapshort of the fixed code.
// Make the timeout id variable global
var fixed = 0;
$("[title][data-scan]").tooltip({
items: "img, [data-scan], [title]",
content: function () {
var element = $(this);
if (element.is("[data-scan]")) {
var text = element.attr("href");
return "<a href='http://www.google.com'>You are trying to open a tooltip <span>" + text + "</span></a>";
}
if (element.is("[title]")) {
return element.attr("title");
}
if (element.is("img")) {
return element.attr("alt");
}
},
open: function (event, ui) {
// When opening a new div, hide any previously opened tooltips first.
$(".ui-tooltip:not([id=" + ui.tooltip[0].id + "])").hide();
// clear timeout as well if there's any.
if (tf > 0) {
clearTimeout(tf)
};
},
position: {
my: "right center",
at: "left center",
delay: 200,
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
}).bind("mouseleave", function (event) {
// stop defeulat behaviour
event.stopImmediatePropagation();
fixed = setTimeout('$("[title][data-scan]").tooltip("close")', 100);
$(".ui-tooltip").hover(
function () {
clearTimeout(tf);
}, function () {
$("[title][data-scan]").tooltip("close");
})
});
Is there a way to customize jQuery UI spinner, so that A-Z letters (or any custom range) is possible?
Yes, this is possible. Here's a simple example using A-Z, adapted from the provided time example:
$.widget("ui.alphaspinner", $.ui.spinner, {
options: {
min: 65,
max: 90
},
_parse: function(value) {
if (typeof value === "string") {
return value.charCodeAt(0);
}
return value;
},
_format: function(value) {
return String.fromCharCode(value);
}
});
Usage:
$("#my-input").alphaspinner();
Example: http://jsfiddle.net/4nwTc/1/
The above example creates a new widget called alphaspinner that inherits from spinner. You can do this for just one spinner with the following:
$(function() {
var spinner = $("#alpha-spinner").spinner({
min: 65,
max: 90
}).data("spinner");
spinner._parse = function (value) {
if (typeof value === "string") {
return value.charCodeAt(0);
}
return value;
};
spinner._format = function (value) {
return String.fromCharCode(value);
}
});
Example: http://jsfiddle.net/4nwTc/2/
I built up on Andrews code and built a spinner widget that takes a string array for input.
You can see the solution here.
I am getting tooltip on mouse hover by each row for current column but I am unable to get next column tooltip on continue hover on same row.
But I can get it if I hover on another row & again hover any column of the previous row by using:
listeners:{
'itemmouseenter': function (view, record, item, index, e, eOpts) {
var gridColums = view.getGridColumns();
var column = gridColums[e.getTarget(this.view.cellSelector).cellIndex];
Ext.fly(item).set({ 'data-qtip': 'Des:' + column.dataIndex });
}
}
Can anyone show me what I'm missing or point me in the right direction?
I have an easy one, using the renderer function:
{
xtype : 'gridcolumn',
dataIndex : 'status',
text : 'Status',
renderer : function(value, metadata) {
metadata.tdAttr = 'data-qtip="' + value + '"';
return value;
}
}
I was looking through this. I could manage to get the tool tip for each cell by doing something like this:
Ext.getCmp('DynamicDemandGrid').getView().on('render', function(view) {
view.tip = Ext.create('Ext.tip.ToolTip', {
// The overall target element.
target: view.el,
// Each grid row causes its own seperate show and hide.
delegate: view.cellSelector,
// Moving within the row should not hide the tip.
trackMouse: true,
// Render immediately so that tip.body can be referenced prior to the first show.
renderTo: Ext.getBody(),
listeners: {
// Change content dynamically depending on which element triggered the show.
beforeshow: function updateTipBody(tip) {
var gridColums = view.getGridColumns();
var column = gridColums[tip.triggerElement.cellIndex];
var val=view.getRecord(tip.triggerElement.parentNode).get(column.dataIndex);
tip.update(val);
}
}
});
});
Let me know if it helps
{
text: name,
width: 80,
dataIndex: dataIndex,
sortable: true,
listeners: {
afterrender: function ()
{
Ext.create('Ext.ToolTip',
{
target: this.getEl(),
anchor: direction | "top",
trackMouse: true,
html: this.text
});
}
}
}