cannot able to change the background color of the selected item in listview.
i tried to understand this.but the solution was in angular where i'm not getting how to use that in javascript.
Issues changing the background colour of the currently selected item in a ListView - Nativescript/Angular2
onItemTap: function (args) {
console.log('Item with index: ' + args.index + ' tapped');
args.object.backgroundColor = "#3489db";
},
here i can change background of complete listview.
playground sample.
https://play.nativescript.org/?template=play-js&id=KZeq3j
i want only the selected item to get its background to change.
I have updated the playground for you here. args.object gives you the listview itself.
onItemTap: function (args) {
for (var i = 0; i < this.countries.length; i++) {
this.countries[i].bgColor = "#FFFFFF";
}
console.log(this.countries[args.index])
this.countries[args.index].bgColor = "#3489db";
args.object.refresh();
},
Related
I'm trying to copy a specific cell from an Interactive Grid (which is in Display Only mode, if that matters), and instead of copying the cell I'm in, I'm copying the whole row. I can't seem to find any way to copy just the cell.
APEX versión: Application Express 19.1.0.00.15
Thank you beforehand.
Oracle Apex does not enable copy functionality to interactive report by purpose.
To enable it, you need to use even handler for copy event. This handler should be on the body or document. It can be achieved through Dynamic Action :
Event: Custom
Custom Event: copy
Selection Type: jQuery Selector
jQuery Selector: body
Then add one JavaScript true action with below code:
var text, i, selection, gridSel;
var event = this.browserEvent.originalEvent; // need the clipboard event
// we only care about copy from a grid cell ignore the rest
if ( !$(document.activeElement).hasClass("a-GV-cell") ) {
return;
}
var view = apex.region("emp").widget().interactiveGrid("getCurrentView"); //change "emp" to you IG static id
if ( view.internalIdentifier === "grid") {
text = "";
selection = window.getSelection();
gridSel = view.view$.grid("getSelection");
for (i = 0; i < gridSel.length; i++) {
selection.selectAllChildren(gridSel[i][0]);
text += selection.toString();
if (gridSel[i].length > 1) {
selection.selectAllChildren(gridSel[i][1]);
text += " \t" + selection.toString();
}
text += "";
}
selection.removeAllRanges();
event.clipboardData.setData('text/plain', text);
event.preventDefault();
}
The above will copy the current grid selection to the clipboard when the user types Ctrl+C while in a grid cell.
I wonder if the below javascript can be modified in order to trigger 'toggle' actions of interactive grid such 'selection-mode'.
apex.region( "[region static ID] " ).call( "getActions" ).lookup( "[action name]" );
Reference:
https://docs.oracle.com/en/database/oracle/application-express/20.1/aexjs/interactiveGrid.html
If someone is interested, I managed to find the solution.
Go on Interactive Grid's attributes--> JavaScript Initialization Code
and add the following code that creates a button that copies the selected cell.
function(config) {
let $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup3 = toolbarData.toolbarFind("actions3");
toolbarGroup3.controls.push({type: "BUTTON",
label: "Copy cell",
icon: "fa fa-copy is-blue",
iconBeforeLabel: true,
iconOnly: false,
disabled: false,
action: "custom-event" // instead of specific action eg "selection-copy", create a custom event
});
config.initActions = function( actions ) {
actions.add( {
name: "custom-event",
action: function(event, focusElement) {
actions.lookup('selection-mode').set(false); // select cell instead of the whole row
apex.region( "users_id" ).widget().interactiveGrid( "getActions" ).invoke( "selection-copy" ); // copy the selection
actions.lookup('selection-mode').set(true); // select again the whole row (important in case of master-detail grids)
}
} );
}
config.toolbarData = toolbarData;
return config;
}
CKEditor v4.8 Question with SharedSpaces. I am dynamically generating the Editors (with content replacing the DIV tags - inline editing) in a loop based on SQL rows.
I would like to only load/call the editor.ui.addButton and addRichCombo once outside of the loop. Is this possible?
for (var i = 0; i < retrievedRecords.length; i++) {
var documentBlock = retrievedRecords[i];
// This next line creates each inline editor with all custom buttons and combo every time through the loop
// Can I just load the custom buttons and combo once and all new editors use that 1 toolbar?
createInlineEditor('myID_' + i, content, id);
var refToEditor = document.getElementById('myID_' + i);
divContainer.appendChild(refToEditor);
}
sharedspace plugin works little different than you would think. It doesn't share the same toolbar between editors, but it's the space between the top and bottom toolbars. I know it could sound little complicated so I'm adding some image to illustrate it:
There are some important reasons why it works like that, but the most obvious is that you can have different plugins for your editors with configured sharedspace plugin and they change the appearance of the toolbar e.g. by additional buttons. If you could share the same toolbar you could get not working buttons for different editors.
IMO the best thing you can do to simplify your code is sharing configuration object between editors.
var config = {
on: {
pluginsLoaded: function( evt ) {
evt.editor.ui.addButton( 'MyBold', {
label: 'My Bold',
command: 'bold',
toolbar: 'basicstyles,1'
} );
}
}
};
for (var i = 0; i < retrievedRecords.length; i++) {
var documentBlock = retrievedRecords[i];
var editor = createInlineEditor('myID_' + i, content, id, config);
var refToEditor = document.getElementById('myID_' + i);
divContainer.appendChild(refToEditor);
}
I am making a webpage with a "time line" style, it's navigated horizontally but has a fixed menu with an element that slides along a bar when you click on every element.
Now I was using a blueprint of vertical timeline that also moved the element across the bar when you got to the element by scrolling normally
http://www.webdesigncrowd.com/demo/slider-timeline-menu-12.2.13/
Now, I am using a page-wrap div to keep the elements within a certain boundary along with a css style for the body to stack elements horizontally.
When I click on ever it takes me to the correct page like normal, and the bar element works as intended, but the feature for it to work when the linked element moves into view doesn't seem to work anymore
This is the original JS code
// Scroll Spy
$(window).scroll(function() {
var top = $(window).scrollTop() + 100; // Take into account height of fixed menu
$(".container").each(function() {
var c_top = $(this).offset().top;
var c_bot = c_top + $(this).height();
var hash = $(this).attr("id");
var li_tag = $('a[href$="' + hash + '"]').parent();
if ((top > c_top) && (top < c_bot)) {
if (li_tag.hasClass("active")) {
return false;
} else {
li_tag.siblings().andSelf().removeClass("active");
li_tag.addClass("active");
$(".menu ul li.active a").slideToPos();
}
}
});
});
And this is what I edited to try to make it work on a Horizontal display.
// Scroll Spy
$(window).scroll(function() {
var left = $(window).scrollLeft() + 1300; // Take into account height of fixed menu
$(".container").each(function() {
var c_Left = $(this).offset().left;
var c_bot = c_left + $(this).width();
var hash = $(this).attr("id");
var li_tag = $('a[href$="' + hash + '"]').parent();
if ((left > c_Left) && (left < c_bot)) {
if (li_tag.hasClass("active")) {
return false;
} else {
li_tag.siblings().andSelf().removeClass("active");
li_tag.addClass("active");
$(".menu ul li.active a .navut").slideToPos();
}
}
});
});
Now I have tried using the original one without change too, but that feature is still not working.
I thank you guys in advance.
I am handling the change event of the kendo ui grid.
In the event handler, I would like to get the cell that was clicked that invoked the change event. I need the cell in order to scan its contents.
Any thoughts?
It's actually very well documented in the documentation: http://docs.telerik.com/kendo-ui/api/web/grid#events-change
Here's the example code if you have the grid configured for multiple cell selection (selectable: "multiple, cell"):
change: function(e) {
var item;
var selected = this.select(); //get selected cell(s)
for (var i = 0; i < selected.length; i++) {
item = this.dataItem(selected[i].parentNode); //get selected cell's dataItem
}
}
In order to select the table cell that was clicked to edit, simply use e.container. There are a number of options given from the event handler. Here's a few:
change: function (e) {
//jQuery object containing the cell
var cell = e.container;
//jQuery object containing the input
var field = cell.find("input");
//value in the input
var fieldVal = field.val();
//or, on one line:
fieldVal = e.container.find("input").val();
//also, if you happen to want the data model for that row
var model = e.model;
}
I change the color of some cells in the gridComplete: function(){ . This override the hover or selected color. I want to make the hover and selected colors the highest level. i.e. if I selected a colored row, it changes to the selected color.
I suppose your question continues your previous question about the the color of the some cells. I created another demo which code is longer as my previous example from my answer to your previous question.
The main problem with the setting of the color of the cell (<td> element) is that the class of cell has of course higher priority as the classes of row because by the definition of the row classes was no "!important" attribute used. So to be able to make the selected of hovered cell be exactly like other standard cells one have to remove the cell class which changes its color. After "unselecting" or "unhovering" the corresponding row one should restore the removed cell class (the 'ui-state-error ui-state-error-text' classes). I implemented this behavior with the following code:
var grid = $("#list");
var saveErrorStateInData = function(ptr) {
var redCells = $("td.ui-state-error",ptr);
if (redCells.length > 0) {
var errorCells=[];
$.each(redCells,function(index, value) {
errorCells.push(value);
$(value).removeClass("ui-state-error ui-state-error-text");
});
$(ptr).data('errorCells',errorCells);
}
};
var restoreErrorStateFromData = function(ptr) {
var errorCells = $(ptr).data('errorCells');
if (errorCells && typeof errorCells.length !== "undefined"
&& errorCells.length>0) {
$.each(errorCells,function(index, value) {
$(value).addClass("ui-state-error ui-state-error-text");
});
}
};
grid.jqGrid({
// all jqGrid parameters
beforeSelectRow: function(rowid, e) {
var selrowid = $(this).getGridParam('selrow');
restoreErrorStateFromData($("#"+selrowid)[0]);
ptr = $(e.target).closest("tr.jqgrow");
saveErrorStateInData(ptr);
return true;
}
}).bind('mouseover',function(e) {
var ptr = $(e.target).closest("tr.jqgrow");
if($(ptr).attr("class") !== "subgrid") {
$(ptr).addClass("ui-state-hover");
saveErrorStateInData(ptr);
}
return false;
}).bind('mouseout',function(e) {
var ptr = $(e.target).closest("tr.jqgrow");
var selrowid = grid.getGridParam('selrow');
$(ptr).removeClass("ui-state-hover");
if (ptr.length === 1 && ptr[0].id !== selrowid) {
restoreErrorStateFromData(ptr);
}
return false;
});
On the demo you will see how all this work.
Sorry for answering this old question, but I hope someone else might find it useful. After searching quite a while for a solution, I came up with this:
Add a dummy class (with no styles) to the column using the jqGrid colmodel option 'classes'.
Add a style setting the background using a selector like this:
tr.jqgrow:not(.ui-state-hover):not(.ui-state-highlight) td.mydummycol {
background-color: #ffd !important;
}
This way the background is only applied if the row is not selected or in the hover state.