I want to use Kendo Tabsrip with MVVM and show tabs on the left-side of the screen. In general, in non-MVVM environment tab positions is set like this:
$(document).ready(function () {
$("#tabstrip-left").kendoTabStrip({
tabPosition: "left",
animation: { open: { effects: "fadeIn" } }
});
}
However, I don't know how to set tabPosition attribute in the kendo MVVM. I have tried this in MVVM but it did not worked:
<div data-role="tabstrip"
data-tabPosition="left"
data-bind="events: { select: onSelect },
visible: isVisible">
....
</div>
Here is a MVVM example of the code that has this data-tabPosition attribute but tab position is still on the top
http://dojo.telerik.com/UDELe
You should use this way:
data-tab-position="left"
There is rule: data-some-variable parameter will produce javascript variable someVariable
Related
I am working on Vuejs + Laravel.
There is one tooltip directive which uses bootstrap's functionality.
Here it is:
window.Vue.directive("tooltip", function(el, binding) {
// console.log(el, binding);
window.$(el).tooltip({
title: binding.value,
placement: binding.arg ? binding.arg : "right",
trigger: "hover",
html: true
});
});
and its usage is like this:
<div
v-tooltip="messages.type_button"
class="form-group row border-bottom p-2"
>
where
message:{
type_button:'Hello World, this is tooltip'
}
So this tooltip is working great in desktops but it is causing display issue in mobile device hence we need to hide this tooltip altogether in mobile devices.
Since I have not found any package it uses, so guessing it is a custom directive developed.
We tried hiding using media queries but no help. Can anyone have idea, what should I do ?
So finally I found the solution Thanks to Umezo's comment
here it is:
window.Vue.directive("tooltip", function(el, binding) {
// console.log(el, binding);
if (window.matchMedia("(min-width: 300px)").matches) {
window.$(el).tooltip({
title: binding.value,
placement: binding.arg ? binding.arg : "right",
trigger: "hover",
html: true
});
}
});
I have succesfully defined a popup for a clickable link element:
The element:
`Alerts Page`
The script which triggers my popup (note the commented lines!)
$('[data-tcs]')
.popup({
// (default as in example provided on the S-UI, works well)
// popup : $('#popup-1'),
// (attempt 1, doesn't work)
// popup : $(this).data('tcs'),
// (attempt 2, doesn't work)
popup : $(this).attr('data-tcs'),
on : 'hover',
delay: {
show: 0,
hide: 500
},
hoverable: true
});
The popup itself (irrelevant):
<div class="ui popup" id="popup-1">
<h3>TANJ!</h3>
</div>
TO DO
Now the popup works well ONLY when the ID of target content is pointed directly, but...
I am about to put about 10 more popups and I want to use the same script to trigger them.
How I can point to the proper popup depending on the value of data-tcs attribute?
My attempts were friutless.
Thx for all help.
The docs are here:
http://semantic-ui.com/modules/popup.html#/examples
Whenever you need to pass instance specific data to any plugin options the easiest way is to wrap the initialization in an each loop
Then the each loop will expose the instance as this.
When you are trying to use this currently it is the window not the element
$('[data-tcs]').each(function() {
var $el = $(this);
$el.popup({
popup: $el.attr('data-tcs'),
on: 'hover',
delay: {
show: 0,
hide: 500
},
hoverable: true
});
});
Is it possible to style the combo box container using the Select2 jQuery plugin? I can successfully style the dropdown menu where autocomplete selections appear, but not the container where text is entered. Here's what I'm doing:
$(document).ready(function() {
$("#combo").select2({
data:[{id:0,text:'One'},{id:1,text:'Two'}],
multiple: true,
createSearchChoice: function (term) {
return { id: term, text: term };
},
containerCss: 'container',
dropdownCssClass: 'dropdown',
containerCss: {
background: 'green'
}
});
});
<input type="hidden" id="combo" style="width:350px" />
#combo {
background: green;
}
.container {
background: green;
}
.dropdown {
background: red;
}
The container should be green, but it's not. Here's a fiddle.
Edit:
I noticed on the documentation page for the site (which is quite comprehensive) that every example of the kind I'm trying to do (hidden input field with dynamically loaded options) has the same standard style, like in my example fiddle. The version that originates from a select element, however, has rounded corners etc. If this means you can't style the container when using a hidden input, it's seems like an odd limitation.
Edit2:
#emmanuel has already provided a solution, but since I was actually after the border-radius, there was a bit more to do to get it working properly. After setting the radius on all corners, opening the dropdown results in rounded corners visible between the top of the dropdown and the bottom of the container, which is a bit ugly. You can do something like this to fix it:
$('ul.select2-choices').on("select2-open", function() {
$('ul.select2-choices').css({
'border-bottom-left-radius': '0px',
'border-bottom-right-radius': '0px',
});
});
$('ul.select2-choices').on("select2-close", function() {
$('ul.select2-choices').css({
'border-bottom-left-radius': '5px', // or whatever
'border-bottom-right-radius': '5px', // or whatever
});
});
I think this will cause a problem, though, for any other Select2 combo boxes visible on the same page.
In order to add background color to container you have to put the rule to #s2id_combo. The problem is that ul.select2-choices already has a background and it's over container so you have to add:
ul.select2-choices { background: green !important; }
I have 2 tables rendered with kendo grid, these are scrollable. I have code which needs to be executed whenever the scroll happens in any of the table.
I've tried
jQuery("#grid").kendoGrid({
dataSource : dataSource,
columns : [{
field : 'name',
title : 'Name',
width : '160px'
}, {
field : 'dataTypeId.name',
title : 'Type',
width : '70px'
}],
height : 270,
scrollable : true,
AfterScroll: function() {
console.log("scrolled");
},
rowTemplate : kendo.template(jQuery("#custom-input-grid-rows").html()),
}).data("kendoGrid");
I tried to put some callbacks like onScroll, AfterScroll but they did not work for me.
How do I get a callback when scrolling happens in the kendo grid?
Hi got the same question today, and fixed it this way:
Attach the jQuery event .scroll() right after your Kendo Grid was initialized like:
$('#GridName .k-grid-content').scroll(function () {
alert('I am scrolling ...');
});
The above didn't work for me either, but led me along the correct lines. The k-virtual-scrollable-wrap class handles the the scrollable part of the grid (eg when you have frozen columns enabled), so try this code instead:
$('.k-virtual-scrollable-wrap').scroll(function () {
console.log("I am scrolling");
});
Is there a trick to make a jquery dialog be draggable at any point? (i mean not only in the title bar)
As opposed to a sortable item, dialog items doesn't have that functionality (I'm not sure why). If needed, you might be able to do something like this:
$(document).ready(function() {
var
// Create dialog
dialog = $('div')
.dialog({ title: "I'm a dialog" })
.css({cursor: 'move'}),
// Get the options manually
options = dialog
.data("dialog")
.uiDialog
.data('draggable')
.options;
// Finally, extend the draggable modal box's
// options and remove any restrictions
$.extend(options, {cancel: '', handle: ''});
});
See a working example here: http://jsfiddle.net/gMP2d/
$("#div_id")
.dialog({
position: [3,442],
width: 300,
height: 90
})
.css({cursor: 'move'})
.parent()
.draggable({cancel:'',handle:''});