Is it possible to set the textcolor of kendo grid when edit mode is clicked on "inline" edit?
I know kendo theming can do this somehow, but I would like to set myself if I can.
Define a CSS style as:
#grid tbody .k-input {
color: red !important;
}
For setting the color or the text to red while editing.
I use #grid to apply the style only to the Grid with id equal to grid and I use tbody to narrow the styling only to the body of the table (preventing other inputs from being formatted).
Related
I'm using jqGrid JS v5.3.0, with styleUI set to Bootstrap. On edit form, the checkbox (created by setting edittype option. also set editoptions: {value:"true:false"}) is aligned to the center of the form. Is there a way to make it align to the left?
Thanks in advance.
The reason for this is the setting in the bootstrap css
.EditTable td input,
.EditTable td select,
.EditTable td textarea {
width: 98%;
display: inline-block;
}
i.e this is caused from width:98%
To correct this there are a lot of ways.
The first one is to use editoptions to set a manual auto width with style options.
edittype : 'checkbox',
editoptions : {value:"true:false", "style":"width:auto"},
The second one (more elegant IMHO) is to set this in css for all check-boxes in the edit form like this:
<style>
.EditTable td input[type="checkbox"]
{
width :auto;
}
</style>
after loading the jqgrid bootstrap css file.
How to align the Kendo UI Grid toolbar buttons in righthand side.
Add the following CSS style:
.k-grid-toolbar a {
float:right;
}
See it here: http://jsfiddle.net/OnaBai/W42wK/
So I have a standard KendoUI Grid. Works great. I have highlighting set to "Row". Works great.
At the end of each row is a cell with two command buttons (Edit and Delete), and I would like to NOT have that cell highlighted when selected.
Anyone have ideas?
Thanks to all in advance.
Changing the style for just the cell containing buttons is a little tricky since you need to reenable the default styles and that depends on KendoUI style and then you need to apply to the cell.
One way of doing it to the cell containing the buttons is defining this cell as:
{ command: ["edit", "destroy" ], attributes: { "class": "ob-style" } },
Where I add an attribute to the row that is class: "ob-style".
For re-applying the styles, you should check the styles and then apply it to both row and alternative row. Something like:
.k-alt .ob-style {
background-color: rgb(245, 245, 245)
}
.ob-style {
background-color: rgb(255, 255, 255)
}
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;
}
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");