How remove focused background when click in triangle in Kendo UI TreeView?
I like that focus only when I clic over the text (field "Item 2") and not the triangle icon. (see the picture)
thanks!
In my View the I use the TreeView, I use:
<script type="text/javascript">
$(document).on("click", ".k-minus", function () {
$("#myContainer.k-state-focused").removeClass("k-state-focused");
});
</script>
Related
I have a dripdrowns...once d last drop down is selected I'll be displaying some content, for that toggling I want to add some beautiful animations. Is there any react related things to implement this?
sidebarToggle(e) {
e.preventDefault();
document.body.classList.toggle('sidebar-hidden');
}
<a className="nav-link navbar-toggler sidebar-toggler" onClick={this.sidebarToggle} href="#">☰</a>
You can do like this
It will show button and on clicking that button will toggle sidebar kind of animation from the left
I'm using
<ion-radio>
<div>Item 1</div>
</ion-radio>
I tried to apply some css to the existing classes, but unfortunately nothing worked. Any help will be appreciated. Thanks in advance. Color is not applying for unchecked radio button icons.
You should be able to get it to work using the color attribute like so:
<ion-radio color="secondary"></ion-radio>
If not, you can style the CSS manually like in the codepen here: http://codepen.io/anon/pen/YVvZqp
If you are using ionic v4 than use this style to change radio button checked color
--> Radio in popup
.custom-popover {
ion-radio {
--color-checked: #75D154;
}
}
and if you are using simple radio group than paste this style to change the color of radio button
--> Radio Button
ion-radio {`enter code here`
--color-checked: #75D154;
}
I am building a cross platform application using Angular Kendo Mobile.
I have a Kendo list using "kendo-list-view".
<div kendo-list-view >
I want to get an event when user scrolls this list, in my controller.
I also tried to get the scroll event by using pure angular code, as mentioned in below question.
Bind class toggle to window scroll event
But in my case nothing happens and code inside the directive is not getting called.
UPDATE
I have my HTML with list view as below:
<kendo-mobile-view id="myListScreen" k-transition="'slide'" k-title="'My List'" k-layout="'default'" ng-controller="myListCtrl">
<kendo-mobile-header >
<kendo-mobile-nav-bar style="background-color: gray">
<kendo-view-title style="color: white"></kendo-view-title>
<kendo-mobile-button k-rel="'drawer'" href="#navDrawer" k-align="'left'"><img src="img/menu.png"></kendo-mobile-button>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<div class="myListMainDiv">
<div kendo-list-view
id="myListViewDiv"
class="myListViewDiv"
k-template="templates.myListViewItem"
k-data-source="myService.listDataSource"
ng-show="showListSelected"
></div>
</div>
<script id="myListViewItem" type="text/x-kendo-template">
<div id="{{dataItem.id}}" ng-click="onSelected(dataItem.id)">
{{dataItem.name}}
</div>
</script>
</kendo-mobile-view>
I am loading this page in my root page when user selects to navigate to this page using kendo.mobile.application.navigate("MyList.html");. And when controller for this page loads I have created list using new kendo.data.DataSource and I have attached new kendo.data.ObservableArray to my data source.
You can get the scroll event from the Scroller of your Kendo Mobile View,
For example if you have a view with id="myListScreen":
var kendoView = $('#myListScreen').data().kendoMobileView;
var scroller = kendoView.scroller;
scroller.bind("scroll", function(e) {
console.log(e.scrollTop);
console.log(e.scrollLeft);
});
You can find more info about the kendo scroller here on their documentation
In this implementation of a button menu, how can I get the selected button to have the class buttonDisplayTypeSelected and others buttons to have buttonDisplayTypeUnSelected:
http://jsfiddle.net/edwardtanguay/73h46odc/3
It works when the page is displayed, and it works when I don't use Bootstrap classes, but how can I get the correct background colors for the buttons with Bootstrap ?
<span ng-repeat="displayType in displayTypes">
<button ng-class="(displayType.idCode == currentDisplayTypeIdCode) ? 'buttonDisplayTypeSelected' : 'buttonDisplayTypeUnselected'" class="btn btn-default btn-xs "
ng-click="selectDisplayType(displayType.idCode)">{{displayType.title}}</button>
</span>
angular.module('myApp', [])
.controller('mainController', function($scope) {
$scope.currentDisplayTypeIdCode = 'topTen';
$scope.displayTypes = [
{idCode: 'all', title: 'Show All'},
{idCode: 'topTen', title: 'Top 10'},
{idCode: 'favorites', title: 'Favorites'}
];
$scope.selectDisplayType = function (displayTypeIdCode) {
$scope.currentDisplayTypeIdCode = displayTypeIdCode;
}
})
This is because bootstrap add a style when a button is focused (click on a button and then click on white background then button gets the actual color u need to get, this is because when you click on the white background button will gets blur and styles sets to the button through focus get removed), check the below image
what you need to do is simply override that :focus style as
.buttonDisplayTypeSelected, .buttonDisplayTypeSelected:focus {
background-color: tan;
}
here is the updated FIDDLE
I need to use KendoUI TreeView with MVVM (declarative) binding, and I need to show checkboxes only for some nodes, based on a field in the model.
For this, I want to use checkbox template
However, whatever I do it seems I cannot make it work
Here is the fiddle with the treeview bound through MVVM but without checkbox template
What I want is to use the function checkTemplate as checkbox template, by defining the treeview as below
<div class="files"
data-role="treeview"
data-text-field="name"
data-spritecssclass-field="type"
data-checkboxes="{checkChildren: true, template: checkTemplate }"
data-bind="source: files"
data-template= "ktmpl_Files">
</div>
However, it doesn't work.
Does anyone has any idea what is wrong?
Thanks
The template function used for checkboxes is invoked in a context where your "checkTemplate" function is not visible. Define it global:
<script type="text/javascript">
function checkTemplate(e) {
return "<input type='checkbox' style='display: " + (e.item.checkable ? "inline" : "none") + "'/>";
}
</script>
Check it here: http://jsfiddle.net/OnaBai/K6cbc/5/