I want to be able to change my column header dynamically triggered by year picker onChange, but I can't find the proper style to handle it.
I've tried to modify with a check on the inspect element, but it also didn't work.
And my code:
$("#monthpicker").kendoDatePicker({
start: "year",
depth: "year",
format: "yyyy",
dateInput: true,
change: function() {
var year = kendo.toString($("#monthpicker").data("kendoDatePicker").value(), 'yyyy');
$("#treelist").data("kendoTreeList").dataSource.read({start: year});
$(".k-grid-header th.k-header:first-child").text(year);
}
});
And it should be like this:
(just change on the column header above Month column)
is there anyone experienced with this? Thanks.
Your query .k-grid-header th.k-header:first-child is selecting the wrong headers.
I propose using a headerTemplate with a placeholder, for instance:
headerTemplate: function(x) {
return '<span class="year-goes-here"></span>'
}
And then set the year via:
$("#treelist").find(".year-goes-here").text(2018)
Working example: https://dojo.telerik.com/uXuwIDeK
Related
I want to be able to filter a column based on values from a different column.
I have bound a column to ID property and showing Name (using template). When the user filters/sorts, the values of the bound property (ID) are used. I want to use the values of a different property/column.
I have already figured out a way to handle sort (using compare function for kendo.ui.GridColumnSortable) but cannot find a way to handle filter.
PS: I tried using filterMemberPath and sortMemberPath but they only seem to work for server side filtering/sorting.
Talked to Kendo support and found a couple of ways to handle this issue:
if using Kendo version 2016.3 or above, the filter event can be used
filterable: true,
filter: function(e) {
if (e.filter.filters[0].field == "age") {
e.preventDefault();
this.dataSource.filter({ field: "name", operator: "startswith", value: "Jane" });
}
but if using kendo version 2016.1 or below, the following approach works which uses filterMenuInit and binds the click event on filter button
filterable: true,
filterMenuInit: function(e) {
var button = e.container.find(".k-primary");
var fieldName = e.field;
var grid = this;
button.on("click", function(e) {
e.preventDefault()
grid.dataSource.filter({ field: "name", operator: "startswith", value: "Jane" });
});
},
How can I change the color of the currency in my kendo numeric textbox in jquery? I used the standard code in creating a numeric textbox in kendo.
$("#currency").kendoNumericTextBox({
format: "c",
});
For example I have $12.00 as value in my input element.
I just want to change the color of the $. Not the 12.00.
How can I achieve this?
Apply css for "k-formatted-value" class textbox i.e. Currency value
Try something like this..
var widget = $("#numeric").kendoNumericTextBox().data("kendoNumericTextBox");
widget.wrapper.find("input.k-formatted-value").css("color", "red");
Refer this link to achieve
http://docs.telerik.com/kendo-ui/controls/editors/numerictextbox/how-to/change-text-color
Updated:
We can do some tricks to change currency format colour change.
I did for normal textbox.
Refer JSfiddle.
For your requirement try something like this.
steps:
1. Create one span element
Create onchange event for the input
$("#salary").kendoNumericTextBox({
change: onChange,
});
Define the style change functionalities.
function onChange() {
ChangeColorFormat($('.k-formatted-value'));
}
function ChangeColorFormat(inp) {
inp.style.color = 'transparent';
var span = document.getElementById('back');
span.innerHTML = inp.value.substr(0, 1) +
"" +
inp.value.substr(1, 1) +
"" +
inp.value.substr(2);
}
Found the solution. Because its kendo, it was simply setting a ClientTemplate before loading it.
this follows in from another post to do with setting a grid's selected fields when we have a data source field (and combo fields) with a json object (as opposed to a simple string).
So if we look at the change event handler for the following combox...
function createCombo(container, options, data) {
var input = $('<input name="' + options.field + '" />')
input.appendTo(container)
input.kendoComboBox({
autoBind: true,
filter: "contains",
placeholder: "select...",
suggest: true,
dataTextField: "display",
dataValueField: "rego",
dataSource: data,
change: function () {
var dataItem = this.dataItem();
var dataField = options.field.split('.');
var fieldName = dataField[0];
options.model.set(fieldName + '.rego', dataItem.rego);
options.model.set(fieldName + '.display', dataItem.display);
}
});
}
I am setting my 2 fields as follows...
options.model.set(fieldName + '.rego', dataItem.rego);
options.model.set(fieldName + '.display', dataItem.display);
(each item in the combo, and the grid data source has a json object with a 'rego' and 'display' field, see full example here.
This seemed to work exactly as I wanted, but I had just had someone point out to me that when you scroll the combobox with the up/down arrow keys, it just seems to toggle between 2 values in the list, as opposed to iterating through all the items. If I remove the 2 'options.model.set' statements, the combo then behaves.
I am really hoping there is a work around this, but everything I Have tried makes no different.
If there were any suggestion to finish this off, it would be greatly appreciated!
Thanks in advance for any help
Since you're modifying the model manually, you should to remove the name=... attribute from the input (otherwise the grid will also modify the model; you could also use name="car.rego" - it has to be the value field - and then not set the combobox value in the config) and also only call set for the last change you make on the model (otherwise, the grid's save event will get triggered twice, once with invalid data).
So you editor would look like this:
function createCombo(container, options, data) {
var dataField = options.field.split('.');
var fieldName = dataField[0];
var input = $('<input/>')
input.appendTo(container)
input.kendoComboBox({
autoBind: true,
filter: "contains",
placeholder: "select...",
suggest: true,
dataTextField: "display",
dataValueField: "rego",
dataSource: data,
value: options.model[fieldName].rego,
change: function (e) {
var dataItem = this.dataItem();
options.model[fieldName]['rego'] = dataItem.rego;
options.model.set(fieldName + '.display', dataItem.display);
}
});
}
Also, your data should be consistent (in one DS, you use "C1" as rego, in the other "CAR1").
(demo)
I'm using the jQuery tablesorter plugin and I have a column that contains name of month and year like this
April, 1975
January, 2001
I would like to sort this column as if it were a date column. As I understand it, it is possible to sort the column with some other 'hidden' value, but I just can't seem to find the documentation for that feature. Any help out there?
Update
This fork http://mottie.github.com/tablesorter/docs/index.html of the tablesorter had just what I needed; the ability to store the value to sort by in an attribute, worked really great.
Just using the textExtraction function. Set data-sort-value on your TDs. Defaults to normal text if it's not present.
$(".sort-table").tablesorter({
textExtraction: function(node) {
var attr = $(node).attr('data-sort-value');
if (typeof attr !== 'undefined' && attr !== false) {
return attr;
}
return $(node).text();
}
});
I have a fork of tablesorter that allows you to write a parser that can extract data attributes from the table cell as well as assign specific textExtraction for each column.
$(function(){
$.tablesorter.addParser({
// set a unique id
id: 'myParser',
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s, table, cell, cellIndex) {
// get data attributes from $(cell).attr('data-something');
// check specific column using cellIndex
return $(cell).attr('data-something');
},
// set type, either numeric or text
type: 'text'
});
$('table').tablesorter({
headers : {
0 : { sorter: 'myParser' }
}
});
});
This is now a STANDARD FEATURE of tablesorter, though it's undocumented for some reason. If you open the file https://github.com/christianbach/tablesorter/blob/master/jquery.tablesorter.js and look at the line # 307 you'll see it supports the "data-sort-value" attribute.
Usage:
<td data-sort-value="42">Answer to the question</td>
It's a bit of a hack (OK, it's a total hack), but if you set the parser for the column to 'text', and pre-fix your pretty output with the string you really want to sort on within a hidden span it will sort correctly.
You can set the parser on a column with the headers option, e.g. to set the parser on the first and second columns to 'text' you would set the following:
headers: {0: {sorter: 'text'}, : {sorter: 'text'}
To do this trick with dates, you can use the ISO8601 date format which sorts lexically. JS's Date objects can generate ISO8601 date strings via the toISOString() function.
Given the CSS:
span.hidden{
display:none;
}
A sample cell in the table would look like this:
<td><span class="hidden">2015-04-18T23:48:33</span>19 April 2015</td>
Not the prettiest code in the world, but it does work.
I am using
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.min.js"></script>
Working with data-text
<td data-text="42">Answer to the question</td>
Not Working with data-sort-value
<td data-sort-value="42">Answer to the question</td>
You need to write your own parser. Your parser might end up looking something like:
var months = {'January':1,'February':2, ...};
$.tablesorter.addParser({
id: 'myDate',
is: function(s) { return false; },
format: function(s) {
var x = s.split(', ');
return x[1]+'-'+months[x[2]];
},
type: 'numeric'
});
Not tested, but general idea.
Ive been through all the posts, finally got setCell to work with hardcoded values, but not using the options.rowId.
function StatusFormatter(cellvalue, options, rowObject) {
if (cellvalue == 'C'){
jQuery("#list").setCell(options.rowId , 'SOORDLINE', '', { color: 'red' });
jQuery("#list").setCell("[2.000]", 'SOORDLINE', '', { color: 'red' });
jQuery("#list").setCell('[2.000]', 'SOREQDATE', '', { color: 'red' });
jQuery("#list").setCell(options.rowId, 'SOPRICE', '', { color: 'red' });
}
return cellvalue;
};
The FIRST and LAST lines dont work, but the 2 with the hardcoded rowId DO work. I inspected what comes back in the option.rowId and they are the same as the hardcoded values, (just different depending on the row of course. What am I missing? Please help. I dont see any difference between the lines, or values.
EDITED-
I tried the answer, and it seems to be what I need. I tried the following
{ name: 'SOORDLINE', index: 'SOORDLINE', width: 25, search: false ,celattr: function () { return ' style="color: red"'; }
},
To aleast make them all red before I dove into the logic, and it didnt do anything for me.
Sorry, but you use custom formatter in absolute wrong way. The goal of the custom formatter to to provide HTML fragment to fill the content of the cells in the corresponding column. So the StatusFormatter will be called before the row with the id equal to options.rowId will be created. Moreover for performance purpose one use typically gridview: true. in the case the whole content of the grid (the whole body of the grid) will be constructed first as string and only after that will be placed in the grid body in one operation. It improve the performance because after placing of any element web browser have to recalculate position of all other elements on the page.
If you want to set text color on the SOORDLINE cell you should cellattr instead:
celattr: function () { return ' style="color: red"'; }
The celattr can be used also in the form celattr: function (rowId, cellValue, rawObject) {...} and you can test the property of rawObject which represent of the values for any column and return the cell style based on the cell value.
Alternatively you can enumerate the rows inside of loadComplete and set the style on <tr> element instead of setting the same styles for every row. See the answer as an example.