I'm trying to build a dataview to display some pictures. These pictures I want to select (should be highlighted) and then interact with them (delete e.g.)
xtype: 'dataview',
id:'fotodataview',
scrollable: true,
inline: true,
mode: 'MULTI',
cls:'dataview-inline',
itemTpl: '<div class="img" style="background-image:url({image}); "> </div><div class="name">{name}<br/>{date}</div>',
store: dataViewStore,
listeners:{
//itemtap:'onItemTap'
}
What do I have to add to have a highlighted item? Do I have the toggle the selection on my own when tapping a item? Do I have to add a cls to simulate a selection? (e.g. like list?)
/e I'm developing a modern app only!
You need to add your own css to achieve this:
.dataview-inline .x-item-selected
{
//your selection style
}
OR
you can created your your select class & mention it in selectedCls property:
selectedCls:'<yourSelectClass>' // property in your dataview
.<yourSelectClass>{ // css class
//your selection style
}
Related
In this sample can I change the button select Files to this add files with the plus sign? Can I just used this k-button class and using Bootstrap4 class?
https://blueimp.github.io/jQuery-File-Upload/
https://dojo.telerik.com/#mcdevittnccn/ujOHacoM
Set the localization.select (documentation) value to specify the text. Then use jQuery to add the custom classes and icon.
$("#files").kendoUpload({
localization: {
select: "Add Files..."
}
});
$("#files").closest('.k-upload-button').addClass('btn btn-success'); // add the bootstrap classes
$("#files").closest('.k-upload-button').removeClass('k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'); // remove the kendo classes
$("#files").closest('.k-upload-button').prepend('<span class="k-icon k-i-plus"></span>'); // add the icon
Example: https://dojo.telerik.com/aJaHeMOq
I'm using the following markup to mark the clicked component as active.
<div *ngFor="let menu of menus;"
(click)="onClick($event,menu.link)"
[ngClass]="{'active':menu.active}">
{{menu.title}}
</div>
The method handling the click is as follows.
onClick(target, link) {
target.active = !target.active;
this.router.navigate([{ outlets: { primary: [""], menus: [link] } }]);
}
It seems that the value of target.active goes from undefined to true to false to true etc. but the style doesn't get set. (I'm printing out the whole component to the console and can't see the addition of the class' name.)
Question: What am I missing in this approach?
NB, I know how to resolve it by approaching it from a different angle. I set up a local variable keeping the index and setting it like shown here. The aim of my question is to learn to achieve the requested behavior in a more like-a-bossy way.
target here:
onClick(target, link) {
target.active = !target.active; <------------
this.router.navigate([{ outlets: { primary: [""], menus: [link] } }]);
}
doesn't refer to menu, it refers to the event. But based on your ngClass directive:
[ngClass]="{'active':menu.active}">
You need to set active to menu variable and so it can be done like this:
<div *ngFor="let menu of menus;"
(click)="onClick(menu,menu.link)"
[ngClass]="{'active':menu.active}">
{{menu.title}}
</div>
Instead of passing in the $event, send it the actual menu object. Like this:
<div *ngFor="let menu of menus;"
(click)="onClick(menu)"
[ngClass]="{'active':menu.active}">
{{menu.title}}
</div>
And in the component:
onClick(menu) {
menu.active = !menu.active;
this.router.navigate([{ outlets: { primary: [""], menus: [menu.link] } }]);
}
I am using tabs for an app. I want a user button which when clicked on tab-detail.html to update the CSS of an element on its parent tab page tab.html
.controller('TabCtrl', function($scope,Tabs) {
$scope.tabs = Tabs.all() ;
// this populates the "tab.html" template
// an element on this page is: <span id="tab_selected_1">
// when user selects a listed item on tab.html
// it calls tab-detail.html
})
.controller('TabDetailCtrl', function($scope,$stateparams,Tabs) {
$scope.tabs = Tabs.get($stateparams.tabID) ;
// on tab-detail.html is a button <button ng-click="tabSelect()">
$scope.tabSelect = function(thisID) {
// update css on TabCtrl elementID
document.getElementById('tab_selected_1').style.color = "green" ;
}
})
The only way to get to tab-detail.html is via tab.html, thus tab.html must be loaded. But no matter what method I try I can't seem to find a way to access the element that is on another controller's page.
I have tried:
var e = angluar.element('tab_selected_1');
or
var e = angluar.element(document.querySelector('tab_selected_1') ;
e.style.color = "green" ;
The approach you are doing will never do a JOB for you as the DOM you want isn't available. You could achieve this by creating a sharable service that will maintain all of this variable in it and it will be used on UI. For ensuring binding of them your service variable should be in object structure like styleData OR you could also achieve this by creating angular constant.
app.constant('constants', {
data: {
}
});
Then you could inject this constant inside you controller & modify it.
.controller('TabCtrl', function($scope, Tabs, constants) {
$scope.constants = constants; //make it available constants on html
$scope.tabs = Tabs.all() ;
// this populates the "tab.html" template
// an element on this page is: <span id="tab_selected_1">
// when user selects a listed item on tab.html
// it calls tab-detail.html
})
.controller('TabDetailCtrl', function($scope,$stateparams,Tabs, constants) {
$scope.tabs = Tabs.get($stateparams.tabID) ;
$scope.constants= constants; //make it available constants on html
// on tab-detail.html is a button <button ng-click="tabSelect()">
$scope.tabSelect = function(thisID) {
// update css on TabCtrl elementID
$scope.constants.data.color = "green" ;
}
})
Markup
<div id="tab_selected_1" ng-style="{color: constants.data.color || 'black'}">
one way to do this is ....
1) Create a service
2) set a value to a variable in service on button click(tab-detail.html)
3) use that service variable value in tab.html
(Correction update at bottom)
#pankajparkar solution does work, however it does not work with IONIC as the IONIC Framework somehow overrides the DOM settings. Via the DOM Element inspector an see: style='color:green' being added inline to the ITEM/SPAN and can see the element defined as: element.style{ color: green}...but the color of the rendered HTML does not change....it stays black.
Further research shows this is somehow an IONIC problem as other users have the same problem. Other SOFs and blogs indicate that there appears to be a work around but I have yet to see it work.
The above is reformatted for others future use (even though it doesn't work with IONIC), thus I am still looking for a solution to work with IONIC:
.constant('constants', {
tabColors: {
curID:0,
},
})
.controller('TabCtrl', function($scope,Tabs,constants) {
$scope.constants = constants;
}
.controller('TabDetailCtrl', function($scope,$stateparams,Tabs,constants) {
$scope.constants = constants;
$scope.setItem= function(thisID) {
$scope.constants.tabColors.oldID = $scope.constants.tabColors.curID ;
delete $scope.constants.tabColors['tabID_'+$scope.constants.tabColors.curID] ;
$scope.constants.tabColors.curID = thisID ;
$scope.constants.tabColors['tabID_'+thisID] = 'green' ;
}
// HTML in Tab.html
<span id='tab_tabID_{{tab.tabID}}' ng-style="{color: constants.tabColors['tabID_'+tab.tabID] || 'black'}">
Some Text Here
</span>
//HTML in TabDetail.html
<button id="tab_button" class="button button-small button-outline button-positive" ng-click="setItem({{tab.tabID}});">
Select This Item
</button>
Correction: This method does work and does work with IONIC. The problem with IONIC is every element embedded within an ionic tag <ion-item>... <ion-nav>
...etc inherits its own properties from predefined classes...so you must either update the class (not optimal) or have ID tags on every element and/or apply CSS changes (using above method) to every child element. This is not optimal however it will work.
In my case my HTML actually looked like:
<span id='tab_tabID_{{tab.tabID}}' ng-style="{color: constants.tabColors['tabID_'+tab.tabID] || 'black'}">
<h2>Header Text Here</h>
<p>More text here</p>
</span>
The above CSS method works with this:
<span id='tab_tabID_{{tab.tabID}}'>
<h2 ng-style="{color: constants.tabColors['tabID_'+tab.tabID] || 'black'}">
Header Text Here
</h>
<p ng-style="{color: constants.tabColors['tabID_'+tab.tabID] || 'black'}">
More text here
</p>
</span>
I am using Knockout.js with jQuery tmpl plugin. The template I have defined has a few select lists. I need to expand the width of the select items (on IE 8) when a select list is clicked (to accomodate the longest element in the list). I was thinking of toggling the css class when a user clicks on the select list to achieve this but am not sure how to go about it. Here is what I have so far:
//CSS classes
<style>
.bigclass
{
width: 200px;
}
.normalclass
{
width: auto;
}
</style>
// Call makeBig javascript method on mouseover.
<script id='criteriaRowTemplate' type='text/html'>
<tr>
<td style="width: 23%"><select style="width: 100%" data-bind='event: { mouseover: makeBig, mouseout: makeNormal}, options: criteriaData, optionsText: "Text", optionsCaption: "--Select--", value: SearchCriterion' /></td>
</tr>
</script>
var CriteriaLine = function() {
this.SearchCriterion = ko.observable();
//Control comes to this method. Not sure though if the element captured is correct.
makeBig = function(element) {
$(element).addClass("bigclass")
};
makeNormal = function(element) {
$(element).addClass("normalclass")
};
};
So my questions are:
How do we pass the select list to the makeBig javascript function? I believe I need to change the following syntax in my code:
data-bind='event: { mouseover: makeBig, mouseout: makeNormal
How do we add the class to the passed select list. I have added the code but it's not working, maybe because element doesn't have a value.
Alternatively, is there any other approach to ensure that the user sees the full text of the dropdown in IE 8?
Here is a custom binding to add a CSS class to the element on hovering:
http://jsfiddle.net/BL9zt/
Note that it subscribes to the IE specific mouseenter and mouseleave event, so you also have to reference jQuery which simulates those events in the other browsers.
Another, knockout-independent approach is described here:
http://www.getharvest.com/blog/wp-content/uploads/2009/12/select_box_demo.html
I want to get the following to display in a single line. I have tried using styles float and display.
Show this input <input type="text" name="filterOp" id="filterOp"/> inline.
<script type="text/javascript">
new Ext.form.ComboBox({
applyTo: 'filterOp',
triggerAction: 'all',
name: 'item',
mode: 'local',
lazyInit: true,
displayField: 'name',
valueField: 'id',
forceSelection: true,
typeAhead: true,
inputType:'text',
fieldLabel: 'Item selection',
style: "display: inline-block",
store: new Ext.data.JsonStore({
autoLoad: true,
url: 'reporting/json_report_filter_operators.jsp',
root: 'rows',
fields:['id', 'name']
})
})
</script>
The simplest way to do this is to override the styles on the page.
First, wrap your paragraph in a P tag with a special id.
<p id="my-inline-override">
Show this input <input type="text" name="filterOp" id="filterOp"/> inline.
</p>
Then you can add a CSS selector to your page that makes sure the DIV tag added by Ext JS displays inline (note that "x-form-field-wrap" is the class of the inserted DIV wrapper, you can see this if you use chrome developer tools to browse the DOM).
<style>
#my-inline-override div.x-form-field-wrap {
display: inline;
}
</style>
I'm sorry, your question is a bit confusing. What exactly are you trying to get on a single line? The combo box? The code? Each item in the combo box? If it's each item just widen the combo box, or make each element have overflow hidden and a fixed width.