Can i add Red Border to Kendo UI date picker if validation fails
function onChange(e) {
if (e.date == undefined) {
var item = $(this).find('.t-input').val('Incorrect date!');
}
}
I have this onChange Method and trying to add red border. Can anyone help me or suggest a better solution
Adding this CSS should work:
#datepicker[aria-invalid] {
border: 1px solid #f00;
}
Here is an example:
jsbin.
Unfortunately, you cannot do this with Kendo UI.
Kendo UI elements do not allow you to do this.
I did data binding with the style sheets on a kendo widget.
Firebug will inform you that it is not possible.
I will open a ticket with my telerik support account now and come back to you.
I would also like to do the same thing.
$('input[aria-owns=txt-orderedTime_timeview]').closest(".k-picker-wrap.k-state-default").css("border-color", '#ff0000');
OR
$("#txt-orderedTime").data("kendoTimePicker").wrapper.find(".k-picker-wrap.k-state-default").addClass("validationErrorClass");
.validationErrorClass {
border-color: #ff0000 !important;
}
Related
I use kendo-ui dropdown.
I add some ovveriding-css, and it works well.
.k-animation-container {
//this is popup that is html is rendered out of the page element
//so it cannot be selected by id / panaya class / panaya element
.k-popup.k-list-container {
.k-item,
.k-item.k-state-selected,
.k-item.k-state-focused {
background-color: transparent;
color: $darken-gray-color;
margin-left: 0;
margin-top: 0;
}
}
}
The problem is, that while each dropdown has other input element instance, the list has one instance that is hidden and when you click any combo - is shown near the currently clicked combo.
What say - when you ovveride the list-container style - dows it for all of the combooxes.
Is there any solution for this issue?
Well this is a known problem, for every popup kendo renders independent div with class k-animation-container
You can try with this solution suggested on telerik forum:
k-animation-container
$("#spreadsheet").on("click", ".k-spreadsheet-editor-button", function(e) {
var animationContainer = $(".k-animation-container").last();
// use some custom conditional statement that will determine if this is the correct list popup, e.g. check what's inside the popup
if (true) {
animationContainer.children(".k-popup").css("min-width", 200);
}
});
Didn't try it my self, gl.
One solution I found was to use
popup: {
appendTo: $(some parent with ID)
}
This way we can manipulate styling of that particular .k-animation-container.
But this doesn't work on every widget, unfortunately.
My team find a great solution:
There is an option to give the input-element custom id.
Then you can select the list-container by the custom id you gave +'list' str.
Now, if you want to get the k-animation-container, you can select the list element and then request its parent.
Code sample:
The input element:
<span
kendo-multi-select
id="my-type-dd"
k-options="$ctrl.getVMultySelectConfig()"
k-ng-model="$ctrl.selectedTypes"
></span>
Selectors:
If you need only the k-list-container and not must the k-animation-container, you can do that by css:
.k-animation-container #my-type-dd-list {
//this is popup that is html is rendered out of the page element
//the id is the id you give to the element + '-list'
&.k-popup.k-list-container {
padding: $space-normal 0 $space-small $space-small;
box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.1);
}
}
If you need the k-aniamation-container you need to select it by jQuery becouse css doesn't have parent selector:
var kAnimationElement = $("#my-type-dd-list").parent();
Hi my kendo datepicker shows two month while change the month of a date picker.Please see the screenshot. I found the below solution Kendo datepicker shows two months during animation . but no luck .Can anyone help to this issue ?
My Code:
#(Html.Kendo().DatePicker().Name("datepicker").Max(DateTime.Today).Events(e => { e.Change("SearchonClick"); }).HtmlAttributes(new { style = "width: 100%", #placeholder = "dd/mm/yyyy", onkeydown = "javascript:return false;" }) )
The observed problem is surely caused by CSS code that enforces one of the following styles to the popup Calendar's table elements:
/* any other selector that influences Kendo UI Calendar tables */
table {
width: 100%;
/* or */
float: none;
}
The Kendo UI Calendar applies and requires the following styles:
.k-calendar .k-content {
width: 100%;
float: left;
}
The 100% width style is then overridden by a calculated inline pixel width style.
So, if any of the two styles are overridden by non-Kendo UI styles, the Calendar navigation will break. Please check and modify your selectors, so that they do not target Kendo UI Calendar tables.
Finally i found answer
bootstrap.css affect the datepicker table. Add the below css is exact solution.
#datepickerid_dateview table.k-content
{
border-collapse: inherit;
}
What I want to do is when i click on my image, i want the kendo dorpdownlist to propose me some options. Is it possible ?
I tried to replace the defautl template of dropdownlist with CSS without success.
Here i try simply to replace the default black arrow of the dropdownlist, with no success.
SOURCE : http://docs.kendoui.com/getting-started/web/appearance-styling?x=54&y=12
-----------------------------HTML
<select id="customList" class="k-widget k-dropdown"></select>
-----------------------------Javascript
$("#customList").kendoDropDownList().data("kendoDropDownList");
-----------------------------CSS
#customList .k-icon .k-i-arrow-s
{
background-image:url('../../resources/img/components/addtab.png');
}
But what i really want to achieve is to replace completely the default template of the kendo dropdownlist and to have instead my image.
There are a couple of question to keep in mind:
The HTML element that contains the arrow is not a descendant of customList but descendant of a sibling. This is because KendoUI decorates original elements with others.
You are only re-defining background-image but you there is two additional CSS attributes that you need to redefine: background-position and background-size since it is defined in Kendo UI CSS files for offsetting k-i-arrow-s icon.
So, you should either do:
span.k-icon.k-i-arrow-s {
background-image:url('../../resources/img/components/addtab.png');
background-size: 16px 16px;
background-position: 0 0;
}
if you are ok with redefining every additional elements OR you do it programmatically defining a CSS:
.ob-style {
background-image:url('../../resources/img/components/addtab.png');
background-size: 16px 16px;
background-position: 0 0;
}
and a JavaScript:
var list = $("#customList").kendoDropDownList({...}).data("kendoDropDownList");
$(list.wrapper).find(".k-icon.k-i-arrow-s").addClass("ob-style");
I'm currently using jQuery Waypoints to highlight nav items as you scroll through sections of the page. All of that works fine; thanks to copying the code from the demo at http://imakewebthings.github.com/jquery-waypoints/.
My demo is: http://www.pandlmedia.com/index.php/index_new
However, I also want to create a waypoint at the #footer div which would trigger an event to change the color of all of the nav links.
$('#footer').bind('waypoint.reached', function(event, direction) {
$('.nav ul a').addClass('white');
});
This doesn't work, as there's nothing telling it to change back once it exits the #footer div. I'm not very experienced in writing jQuery or using this plug-in for that matter. What do I need to add to make this work? Is the fact that there are two levels of waypoints also causing problems?
well, looking closer at the "sticky elements" demo, I was able to modify the example of the disappearing '.top' button to make this work for my own needs described above:
<script type="text/javascript">
$(document).ready(function() {
$('.container .nav ul a').addClass('black');
$.waypoints.settings.scrollThrottle = 30;
$('#footer').waypoint(function(event, direction) {
$('.container .nav ul a').toggleClass('black', direction === "up");
}, {
offset: '50%'
});
});
The key was to add the .black class below the .white class in my css so that it overrides the color parameter properly.
I put jQGrtid inside jQuery simple model dialog.
z-index of simple dialog is 950 so i changed the z-index of jqGrid edit/add/delete pupups greater that that because otherwise they appearing below simple modal.
.jqmID1 { z-index: 1000 !important; }
.jqmID2 { z-index: 1000 !important; }
.jqmID3 { z-index: 1000 !important; }
All was looking good but than if i click/close "edit" and than click/clase "add" and than back to "edit" jQGrid popup again displaying below simple modal.
Than i find out than each time .jqmIDn increasing the n value for each new opening popup so my fix working only for 3 first popups ant than when value getting increased .jqmID4 .jqmID5 .... in is not working
Is there anything i can do to fix that? should i change jQgrid.js somewhere?
UPDATE:
OK, as a solution to that I've found a way how to change z-index in simple modal instead, so i decrease it like that:
$("#myDiv").modal({
...
zIndex: 800,
...
});
If someone have any another ideas let me know
You can use zIndex property of the Add and Edit Dialog. See this and this answers for details.