So I am using Kendo UI Grid and I want to add data-priority to the columns that way I can hide and show columns depending on the viewport I know this is possible with JQuery Mobile (http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_tables_columntoggle) .But Is this possible in Kendo UI?
You can add custom attributes to the column headers using the headersAttributes configuration.
Use it like this (if you are using pure javascript version of Kendo):
$("#grid").kendoGrid({
columns: [ {
field: "name",
title: "Name",
headerAttributes: {"data-priority": "1"}
},
// more columns...
});
$("#ElementId").attr("disabled","disabled");
The Above code only works for the Date pickers which are declared in Html page.
But I want to Disable the kendo Date picker in the kendo Grid Header Filter area.
Here is a simple way of achieving what you want.
Disabled text input on grid filter
I have modified the date cell to have the following:
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}",
filterable: {
cell: {
template: function (element) {
element.element.kendoDatePicker({
});
element.element.attr('disabled', 'disabled');
}
}
}
}
You will notice that I have added a template to the cell which will override the default date picker and add my own date picker to the filter row.
Note if you want to do this via the menu you just need to do this at the first element item e.g. element.kendoDatePicker({})
Hope this is what you are after.
For more info on this take a look at this link:
kendo grid filter api
I want to get the letters as they are without modification but Kendo still encoded characters like "áéíóú" to "áéíóú"
KendoRTE = $(".myRte").kendoEditor({
encoded: true,
paste: function(e) {
console.log(e)
},
change: function() {
console.log(this.value());
}
}).data('kendoEditor');
Kendo UI Documentation
Example code of the issue
Any ideas to fix this?
Try using this trick:
var decoded = $('<div/>').html(this.value()).text();
console.log(decoded);
Your example modified in here: http://jsfiddle.net/OnaBai/E32m7/3/
When using the event which allows us to custom the tooltips for a bar\line chart. The DataItem that is passed to the event is returned as Undefined . So, is there is property which I can be set that allows custom the tooltip, even when their is alot of pionts in a small area.
Example: template: "#= dataItem.employeeName #"
Any help would be appreciated.
I think you are looking for the tooltip.template option:
$("#chart").kendoChart({
tooltip: {
visible: true,
template: "#=employeeName#"
}
});
You shouldn't need to specify dataItem before the field name. Also, try checking data instead of dataItem.
Try this One:
tooltip: {
visible: true,
template: "#= dataItem.title #: #= dataItem.percentage #%"
}
For me it is working perfect.
Let me know if any issue.
Is there a way to toggle the multiselect option of a grid?
Changing the multiselect parameter of the grid and calling for a reload has the side-effect of leaving the header behind when disabling or not creating the header column if multiselect was not TRUE upon the grid creation.
The closest I have come is setting multiselect to TRUE upon grid creation and using showCol and hideCol to toggle: $('#grid').showCol("cb").trigger('reloadGrid');
This has a side effect of changing the grid width when toggled. It appears the cb column width is reserved when it is not hidden.
Basically I'm attempting to create a grid with an "edit/cancel" button to toggle the multiselect -- very similar to how the iPhone/iPad handles deleting multiple mail or text messages.
Thank you in advance.
I full agree with Justin that jqGrid don't support toggling of multiselect parameter dynamically. So +1 to his answer in any way. I agree, that the simplest and the only supported way to toggle multiselect parameter will be connected with re-initialize (re-creating) the grid.
So if you need to change the value of multiselect parameter of jqGrid you need first change multiselect parameter with respect of respect setGridParam and then re-creating the grid with respect of GridUnload method for example. See the demo from the answer.
Nevertheless I find your question very interesting (+1 for you too). It's a little sport task at least to try to implement the behavior.
Some remarks for the understanding the complexity of the problem. During filling of the body of the grid jqGrid code calculate positions of the cells based on the value of multiselect parameter (see setting of gi value here and usage it later, here for example). So if you will hide the column 'cb', which hold the checkboxes, the cell position will be calculated wrong. The grid will be filled correctly only if either the column 'cb' not exists at all or if you have multiselect: true. So you have to set multiselect: true before paging or sorting of the grid if the column 'cb' exist in the grid. Even for hidden column 'cb' you have to set multiselect to true. On the other side you have to set multiselect to the value which corresponds the real behavior which you need directly after filling of the grid (for example in the loadComplete).
I hope I express me clear inspite of my bad English. To be sure that all understand me correctly I repeat the same one more time. If you want try to toggle multiselect dynamically you have to do the following steps:
create grid in any way with multiselect: true to have 'cb' column
set multiselect: false and hide 'cb' column in the loadComplete if you want to have single select behavior
set multiselect: true always before refreshing the grid: before paging, sorting, filtering, reloading and so on.
I created the demo which seems to work. It has the button which can be used to toggle multiselect parameter:
In the demo I used the trick with subclassing (overwriting of the original event handle) of reloadGrid event which I described the old answer.
The most important parts of the code from the demo you will find below:
var events, originalReloadGrid, $grid = $("#list"), multiselect = false,
enableMultiselect = function (isEnable) {
$(this).jqGrid('setGridParam', {multiselect: (isEnable ? true : false)});
};
$grid.jqGrid({
// ... some parameters
multiselect: true,
onPaging: function () {
enableMultiselect.call(this, true);
},
onSortCol: function () {
enableMultiselect.call(this, true);
},
loadComplete: function () {
if (!multiselect) {
$(this).jqGrid('hideCol', 'cb');
} else {
$(this).jqGrid('showCol', 'cb');
}
enableMultiselect.call(this, multiselect);
}
});
$grid.jqGrid('navGrid', '#pager', {add: false, edit: false, del: false}, {}, {}, {},
{multipleSearch: true, multipleGroup: true, closeOnEscape: true, showQuery: true, closeAfterSearch: true});
events = $grid.data("events"); // read all events bound to
// Verify that one reloadGrid event hanler is set. It should be set
if (events && events.reloadGrid && events.reloadGrid.length === 1) {
originalReloadGrid = events.reloadGrid[0].handler; // save old
$grid.unbind('reloadGrid');
$grid.bind('reloadGrid', function (e, opts) {
enableMultiselect.call(this, true);
originalReloadGrid.call(this, e, opts);
});
}
$("#multi").button().click(function () {
var $this = $(this);
multiselect = $this.is(":checked");
$this.button("option", "label", multiselect ?
"To use single select click here" :
"To use multiselect click here");
enableMultiselect.call($grid[0], true);
$grid.trigger("reloadGrid");
});
UPDATED: In case of usage jQuery in version 1.8 or higher one have to change the line events = $grid.data("events"); to events = $._data($grid[0], "events");. One can find the modified demo here.
I really like what you are trying to do here, and think it would be a great enhancement for jqGrid, but unfortunately this is not officially supported. In the jqGrid documentation under Documentation | Options | multiselect you can see the Can be changed? column for multiselect reads:
No. see HOWTO
It would be nice if there was a link or more information about that HOWTO. Anyway, this is probably why you are running into all of the weird behavior. You may be able to work around it if you try hard enough - if so, please consider posting your solution here.
Alternatively, perhaps you could re-initialize the grid in place and change it from/to a multi-select grid? Not an ideal solution because the user will have to wait longer for the grid to be set up, but this is probably the quickest solution.
A simpler answer:
<input type="button" value="Multiselect" onclick="toggle_multiselect()">
<script>
function toggle_multiselect()
{
if ($('#list1 .cbox:visible').length > 0)
{
$('#list1').jqGrid('hideCol', 'cb');
jQuery('.jqgrow').click(function(){ jQuery('#list1').jqGrid('resetSelection'); this.checked = true; });
}
else
{
$('#list1').jqGrid('showCol', 'cb');
jQuery('.jqgrow').unbind('click');
}
}
</script>
Where list1 is from <table id="list1"></table>.