I have a Kendo MVC DatePicker as belowed, it will render as a textbox with a button (with calendar icon) within it which can trigger the date picker UI.
In my scenario, I need to insert a button to clear the value of the textbox, just on the left of the calendar button.
What my problem is that, is it possible (and how can I) insert another custom button inside the textbox rendered?
<div class="col-md-2 ">
#(Html.Kendo().DatePicker()
.Name("InspecitonDate")
.Value(DateTime.Now.AddMonths(-3)).Format("dd/MM/yyyy")
.HtmlAttributes(new { style = "width: 100%" })
)
</div>
Kendo date picker adds attribute data-role so select all the controls through jQuery on page with attribute data-role = datepicker
<script>
$(document).ready(function () {
var dt = $("[data-role='datepicker']");
//For each control insert an icon button calling js function clearDate to clear date input
$.each(dt,
function (i, d) {
$("#" + d.id).before("<span class='fa fa-times' onclick=\"clearDate('" + d.id + "')\"></span>");
});
});
function clearDate(inputId) {
$("#"+inputId).data("kendoDatePicker").value(null);
}
I would suggest to write this code in some common js file so that all kendo date controls in every page can be changed. You may add some style too to move icon to right
.k-picker-wrap > span.fa-times {
position: absolute;
right: 35px;
top: 8px;
color:#01ace4;
cursor: pointer;
}
There is no such built-in option, so you need to do it yourself. So you need to append the needed extra button on document.ready
Related
here's the function:
$('.popoutlink').on('click', function() {
var box = $('#' + $(this).data('box'));
box.siblings().hide();
box.toggle("slide", { direction: "left" }, 500);
box.siblings().hide();
});
the two siblings.hide statements are because I'm in the middle of trying to figure out why I'm left with two slideouts on screen if I click on two buttons in rapid succession.
The html is:
<div class="col-md-2">
<div class="popoutlink" data-box="p1">1</div>
<div class="popoutlink" data-box="p2">2</div>
<div class="popoutlink" data-box="p3">3</div>
<div class="popoutlink" data-box="p4">4</div>
<div class="popoutlink" data-box="p5">5</div>
</div>
<div class="col-md-10 bb" style="height: 400px;">
<div class="popout" id="p1"><h1>panel 1</h1></div>
<div class="popout" id="p2">
<h1>panel 2</h1>
</div>
If I click on two buttons quickly then two windows are left on screen. I would like the siblings to hide before the selected div appears.
I have tried using promise.done():
box.siblings().hide(200).promise().done(function(){
box.toggle("slide", { direction: "left" }, 500);
});
to no effect. Adding box.toggle to hide as a callback:
box.siblings().hide(200, function(){
box.toggle("slide", { direction: "left" }, 500);
});
was very funny but not useful.
How do I get the siblings to go away reliably before I show the selected div no matter how quickly I click the buttons?
You see it here just click on the numbered boxes quickly
Thanks
If I understand your question, this should help:
https://jsfiddle.net/Twisty/3mbh5p0r/
jQuery UI
$(function() {
$('.popoutlink').on('click', function() {
var box = $('#' + $(this).data('box'));
$(".popout").hide();
//box.siblings().hide();
box.toggle("slide", {
direction: "left"
}, 500);
//box.siblings().hide();
});
});
When any of the "links" are clicked, they are all hidden and then only the one whom was clicked is toggled.
Update
A little more testing of .hide() versus .css("display", "none") revealed that changing the CSS was a faster method. This page talks about how it's immediate but I found that it wasn't as fast.
The matched elements will be hidden immediately, with no animation.
This is roughly equivalent to calling .css( "display", "none" ),
except that the value of the display property is saved in jQuery's
data cache so that display can later be restored to its initial value.
If an element has a display value of inline and is hidden then shown,
it will once again be displayed inline.
And:
Note that .hide() is fired immediately and will override the animation
queue if no duration or a duration of 0 is specified.
I did try using the callback, which made it worse. The callback should be triggered when the hide animation is complete, yet it added the element of animating the hide operation. Even when the speed was 0, it was slower.
So I advise this:
$(function() {
$('.popoutlink').on('click', function() {
$(".popout").css("display", "none");
$('#' + $(this).data('box')).show("fast");
});
});
Technically, they are not on the "same" page - the widget is on the main page, and the picker is on a sub-page which gets loaded inline through Jquery ajax.
I have a Datepicker in Widget mode on a page which shows up fine
<div id="datepicker" style="margin-top: 3px;"></div>
JQuery portion -
$('#datepicker').datepicker({
beforeShowDay: function (date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
if ($.inArray(y + '-' + (m + 1) + '-' + d, highlightDates) != -1) {
return [true, 'ui-datepicker-testavailable', ''];
}
return [true];
},
onSelect: function (selectedDate, instance) {
PopulateScheduledTestsByDate(new Date(selectedDate));
},
onChangeMonthYear: function (year, month, inst) {
GetScheduledTestDatesByMonth(month, year);
}
});
This works fine and shows up beautifully on the page.
There is a section on this page, which loads up a second page using Jquery Ajax. On this "second" page, there is a datepicker attached to a textbox, which does not show up when clicked on the text box.
<input id="runSchedule" name="runSchedule" data-bind="value: runSchedule, visible: pageModeEdit" class="inputfield" style="display: none" />
JQuery portion -
$(document).ready(function () {
$('#runSchedule').datepicker();
});
If I comment out the Widget datepicker Javascript on the main page, the input datepicker shows up fine. But I cannot get both to show up together. Anything I am missing here?
Appreciate any help.
I have a jquery UI menu in which I want to highlight a selected item and then un-highlight it once another item has been clicked and highlighted. I got as far as changing the css background color property once the select event is detected on the menu, but before that happens I want to check all items to see if a previous selection is still highlighted, unhighlight it, and THEN highlight the new selection.
<script>
$(function(){
$(".menu").menu({
//detect select event
select:function( event, ui ) {
//highlight the selected menu item
ui.item.css('background-color','red');
}
});
});
</script>
//The Menu
<ul class="menu">
<li><h2> Fitness</h2></li>
<li><h2> Literature</h2></li>
<li><h2>Music</h2></li>
<li><h2>Fine Art</h2></li>
<li><h2>Food</h2></li>
</ul>
I would recommend creating a css class and adding/removing the class, rather than setting the style directly.
$(document).ready(function () {
$(".menu").menu({
select: function (event, ui) {
$('.selected', this).removeClass('selected');
ui.item.addClass('selected');
}
});
});
CSS:
.menu .ui-menu-item.selected {
background-color : red;
}
And add this if you want it to stay red even when the item has focus or has a submenu and is active.
.menu .ui-menu-item.selected > .ui-state-focus,
.menu .ui-menu-item.selected > .ui-state-active {
background-color : red ;
background-image: none;
}
You may need to tweek this some more if you plan to have submenus to get it to work in a way that makes sense.
Without submenus: http://jsfiddle.net/sgearhart2/Fba6L/4/
With submenus: http://jsfiddle.net/sgearhart2/Fba6L/5/
Here is some javascript that I wrote that attempts to change the theme of the header of my jQuery Mobile application. It is in the head element of my web page after jQuery mobile javascript and CSS has loaded.
$(function() {
$("[data-role='header']").attr('data-theme', 'b');
});
Why is it having no effect?
As it turns out, dynamically changing the theme of a header is easy since there is only a single class to change, that goes for buttons as well (if you have buttons in your header).
//store all the classes to remove from elements when swapping their theme
var removeClasses = 'ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e';
//when a specific page initializes, find links in the body and add an event
//handler to the click event for them to update the header's theme
$(document).delegate('#my-page', 'pageinit', function () {
$(this).find('a').bind('click', function (event) {
//get the new theme letter, stored in the HREF attribute of the link
var newTheme = $(this).attr('href');
//change the header's class/attr to relfect the new theme letter
$.mobile.activePage.children('.ui-header').attr('data-theme', newTheme).removeClass(removeClasses).addClass('ui-bar-' + newTheme).children('h1').text('My Header (' + newTheme + ')');
//change the header button's classes/attr to reflect the new theme letter
$.mobile.activePage.children('.ui-header').children('a').removeClass(removeClasses).addClass('ui-btn-up-' + newTheme);
return false;
});
});
Here is a demo: http://jsfiddle.net/jUgLr/1/
After all that I guess I should make sure you know you can just add a data-theme attribute to any element to change it's theme:
<div data-role="page">
<div data-role="header" data-theme="e">
...
</div>
<div data-role="content" data-theme="d">
...
</div>
</div>
This would work
$(document).delegate('[data-role=page]','pageinit',function(){
$('[data-role=header]').attr('data-theme','b').removeClass().addClass('ui-header ui-bar-b');
});
I'm using a jquery dialog.
The content of this dialog is dynamic so the height change when the dialog is open.
$("#a_div").dialog({ width: 400 });
The dialog initially appears center in the page. but when the height change is no more center.
How can i refresh the dialog's position without close and reopen it?
thanks
You need to re-set the position by doing:
$("#a_div").dialog({
position: { 'my': 'center', 'at': 'center' }
});
The position is set once when creating the dialog, but can be altered afterwards (or just re-set at the same value, forcing jQuery to recalculate).
See this demo: http://jsfiddle.net/petermorlion/3wNUq/2/
If you want to use the exact position settings as used by jquery ui for the initial positioning, you can grab the options from the jquery ui code and use them again any time you want to reposition your dialog.
function refreshDialogPosition(id) {
$("#" + id).position({
my: "center",
at: "center",
of: window,
collision: "fit",
// Ensure the titlebar is always visible
using: function (pos) {
var topOffset = $(this).css(pos).offset().top;
if (topOffset < 0) {
$(this).css("top", pos.top - topOffset);
}
}
});
}
Use:
refreshDialogPosition("YourDialogId");
This will also make sure your title bar is always visible. Otherwise your title bar will be outside your screen when using dialogs with large content. (content height > window height)
Have a nice day.
You can try to resize the dialog using its classes by JQuery directly (documentation here)
The basic structure of JQueryUI Dialog is this:
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
<p>Dialog content goes here.</p>
</div>
</div>
So, maybe you should play with classes's width and height to set the best.
Another solution is to set dialog's width directly before open (when your data is successfully loaded):
$("#a_div").dialog({ width: 400 });
$.get('my_url.php',function(data){
$('#a_div .ui-dialog').css('width','400px');
// Or...
$('#a_div').css('width','400px');
});
I hope it helps you.
Marked as Correct didn't work for me. It persists position once it opened.
Following code will reset dialog position, every time you open/re-open it.
$dlg.dialog({
open: function(event, ui) {
// Reset Dialog Position
$(this).dialog('widget').position({ my: 'center', at: 'center', of: window });
}
});
$dlg.dialog('open');