Kendo UI Slider / how to disable keyboard input? - kendo-ui

Is there a way to disable the keyboard events on Kendo UI Slider? Basically, I want to prevent changing the value of the slider when pressing left and right arrow keys. Is this possible at all?
Please note that slider is being dynamically inserted into the DOM as part of a KO custom binding handler.
ko.bindingHandlers.tone = {
init: function(element, valueAccessor) {
if (valueAccessor().settingToneEnabled) {
var $el = $(element);
var tag = '<span class="dropdown mrgn-tp-md"><ul class="dropdown-menu dropdown-menu-right text-center pddng-sm" aria-labelledby="tonedropdownMenu"><li class="pddng-lft-md pddng-rght-sm"><span id="tone-slider" title="tone"></span></li><li class="pddng-rght-sm"><i class="icon icon-delete"></i> ' + i18n['ps-deleteArticleToneLabel'] + '</li></ul></span>';
$(tag).appendTo($el);
var $slider = $('#tone-slider', $el);
var $delLink = $('a.del', $el);
var $dropdown = $('span.dropdown', $el);
$('a.dropdown-toggle', $dropdown).on('click', function() {
$('.dropdown-menu', $dropdown).toggle();
});
$slider.kendoSlider({
change: function(e) {
var va = valueAccessor();
va.value(e.value);
if ($.isFunction(va.handleUserInput)) {
va.handleUserInput();
}
},
showButtons: false,
min: -1,
max: 1,
smallStep: 1,
value: valueAccessor().value() || 0,
tickPlacement: 'none',
tooltip: {
enabled: false
}
});
$('.k-draghandle', $el).off('keydown');
$delLink.on('click', function(e) {
e.preventDefault();
if ($delLink.attr('disabled')) {
return;
}
var va = valueAccessor();
va.value(null);
if ($.isFunction(va.handleUserInput)) {
va.handleUserInput();
}
});
$el.data('slider', $slider.data("kendoSlider"));
$el.data('deleteButton', $delLink);
$el.data('dropdown', $dropdown);
} else {
$('<span href="" data-tone></span>').appendTo(element);
}
},
update: function(element, valueAccessor) {
var toneValues = {
'1': {
name: i18n['ps-tonePositive'],
val: 1,
css: 'icon-tone-positive'
},
'0': {
name: i18n['ps-toneNeutral'],
val: 0,
css: 'icon-tone-neutral'
},
'-1': {
name: i18n['ps-toneNegative'],
val: 0,
css: 'icon-tone-negative'
},
};
var $tone = $('*[data-tone]', element);
var val = valueAccessor().value() || 0;
var tone = toneValues[val.toString()] || toneValues['0'];
$tone.removeClass()
.addClass('icon').addClass(tone.css)
.attr('title', tone.name);
if (valueAccessor().settingToneEnabled) {
$('#tone-slider', element).data("kendoSlider").value(val);
}
},
};

You can try to remove the keydown handler.
See demo.

Related

How to display only one region on jvector map

Is there anyway to show only one region on jvector map . After this i have to highlighted particular city on that region onclick event below is the code that i have tried.
<li>United Kingdom
<div id="map"></div>
var wrld2 = {
map: 'world_mill',
normalizeFunction: 'polynomial',
regionStyle: regionStyling,
backgroundColor: 'none',
regionsSelectableOne: true,
regionsSelectable: true,
series: {
regions: [{
values: {},
attribute: 'fill'
}]
}
};
$('#map').vectorMap(wrld2);
var mapObj2 = $('#map').vectorMap('get', 'mapObject');
function findRegion(robj, rname) {
var code = '';
$.each(robj, function (key) {
if (unescape(encodeURIComponent(robj[key].config.name)) === unescape(encodeURIComponent(rname))) {
code = key;
}
});
return code;
}
$('ul').on('click', 'a:first-child', function (event) {
var elem = event.target,
evtype = event.type,
cntrycode = findRegion(mapObj2.regions, $(elem).text());
if (evtype === 'click') {
mapObj2.clearSelectedRegions();
mapObj2.setSelectedRegions([cntrycode]);
}
});
Is there any method? http://jsfiddle.net/gwdhzaLb/2/

Show/Hide Columns in Boot grid when onclick - Externally

i couldn't hide a show/hide a boot grid column after onclick boot grid re-load.
The issue is it works when the page is loaded first time, but i couldn't make it work after click event. Any help is appreciated.
<th id="th_state" data-identifier="true" data-column-id="state" data-visible="false">State</th>
$('#filter_group').change(function () {
$("#employee_grid").bootgrid("reload")
$("#th_state").attr("data-visible", "true") ; // Not working....
});
$("#employee_grid").bootgrid({
ajax: true,
rowCount: [50, 100, 200, 300, 500],
columnSelection: true,
requestHandler: function (request) {
request.type = 'grid';
var citiesGroup = [];
$("#cities_group").find("option:selected").each(function (index, value) {
if ($(this).is(':selected')) {
citiesGroup.push({
state: $(this).parent().attr("label"),
city: $(this).val()
});
}
});
if (request.sort) {
request.sortBy = Object.keys(request.sort)[0];
request.sortOrder = request.sort[request.sortBy];
request.chartType = $("#chartType").val();
request.date_from = $("#date_from").val();
request.date_to = $("#date_to").val();
request.citiesGroup = citiesGroup ;
delete request.sort
}
return request;
},
responseHandler: function (response) {
$("#txt_total_connects").html(response);
return response;
},
post: function ()
{
/* To accumulate custom parameter with the request object */
return {
id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
};
},
url: "response.php",
formatters: {
},
labels: {
noResults: "<b>No data found</b>",
all: "",
loading: '<b>Loading Please wait....</b>'
},
templates: {
search: "",
//header: "",
}
});

Kendo treelist - trying to set a column template

I'm working with a Kendo treelist widget, and disappointed to see there's no rowTemplate option as there is on the Kendo grid.
I see a columnTemplate option (i.e. http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#configuration-columns.template ), but this will affect the entire column.
However, I need to drill into each cell value and set a css color property based on a ratio ( i.e. If value/benchmark < .2, assign <span style='color:red;'> , but my color value is dynamic.
There's a dataBound: and dataBinding: event on the treelist, but I'm still trying to figure out how to intercept each cell value and set the color once I've done my calculation.
var treeOptions = {
dataSource: ds,
columns: colDefs,
selectable: true,
scrollable: true,
resizable: true,
reorderable: true,
height: 320,
change: function (e) {
// push selected dataItem
var selectedRow = this.select();
var row = this.dataItem(selectedRow);
},
dataBound: function (e) {
console.log("dataBinding");
var ds = e.sender.dataSource.data();
var rows = e.sender.table.find("tr");
}
};
and this is where I'm building out the `colDefs' object (column definitions):
function parseHeatMapColumns(data, dimId) {
// Creates the Column Headers of the heatmap treelist.
// typeId=0 is 1st Dimension; typeId=1 is 2nd Dimension
var column = [];
column.push({
"field": "field0",
"title": "Dimension",
headerAttributes: { style: "font-weight:" + 'bold' + ";" },
attributes : { style: "font-weight: bold;" }
});
var colIdx = 1; // start at column 1 to build col headers for the 2nd dimension grouping
_.each(data, function (item) {
if (item.typeId == dimId) {
// Dimension values are duplicated, so push unique values (i.e. trade types may have dupes, whereas a BkgLocation may not).
var found = _.find(column, { field0: item.field0 });
if (found == undefined) {
column.push({
field: "field2",
title: item.field0,
headerAttributes: {
style: "font-weight:" + 'bold'
}
,template: "<span style='color:red;'>#: field2 #</span>"
});
colIdx++;
}
}
});
return column;
}
**** UPDATE ****
In order to embed some logic within the template :
function configureHeatMapColumnDefs(jsonData, cols, model) {
var colDef = '';
var dimId = 0;
var colorProp;
var columns = kendoGridService.parseHeatMapColumns(jsonData, dimId);
// iterate columns and set color property; NB: columns[0] is the left-most "Dimension" column, so we start from i=1.
for (var i = 1; i <= columns.length-1; i++) {
columns[i]['template'] = function (data) {
var color = 'black';
if (data.field2 < 1000) {
color = 'red';
}
else if (data.field2 < 5000) {
color = 'green';
}
return "<span style='color:" + color + ";'>" + data.field2 + "</span>";
};
}
return columns;
}
Advice is appreciated.
Thanks,
Bob
In the databound event you can iterate through the rows. For each row you can get the dataItem associated with it using the dataitem() method (http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-dataItem)
Once you have the dataitem, calculate your ration and if the row meets the criteria for color, change the cell DOM element:
dataBound: function (e) {
var that = e.sender;
var rows = e.sender.table.find("tr");
rows.each(function(idx, row){
var dataItem = that.dataItem(row);
var ageCell = $(row).find("td").eq(2);
if (dataItem.Age > 30) {
//mark in red
var ageText = ageCell.text();
ageCell.html('<span style="color:red;">' + ageText + '</span>');
}
}
DEMO
UPDATE: you can also do this with a template:
$("#treelist").kendoTreeList({
dataSource: dataSource,
height: 540,
selectable: true,
columns: [
{ field: "Position"},
{ field: "Name" },
{ field: "Age",
template: "# if ( data.Age > 30 ) { #<span style='color:red;'> #= data.Age # </span> #}else{# #= data.Age # #}#"
}
],
});
DEMO

Pan and zoom in kendo boxplot chart

I am trying to use the pan and zoom functionality in kendo box plot chart, can this be achieved for box plot chart.
http://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom
You can apply the exact same methods to the boxplot.
DEMO
CODE:
// Minimum/maximum number of visible items
var MIN_SIZE = 6;
var MAX_SIZE = 18;
// Optional sort expression
// var SORT = { field: "val", dir: "asc" };
var SORT = {};
// Minimum distance in px to start dragging
var DRAG_THR = 50;
// State variables
var viewStart = 0;
var viewSize = MIN_SIZE;
var newStart;
// Drag handler
function onDrag(e) {
var chart = e.sender;
var ds = chart.dataSource;
var delta = Math.round(e.originalEvent.x.initialDelta / DRAG_THR);
if (delta != 0) {
newStart = Math.max(0, viewStart - delta);
newStart = Math.min(data.length - viewSize, newStart);
ds.query({
skip: newStart,
page: 0,
pageSize: viewSize,
sort: SORT
});
}
}
function onDragEnd() {
viewStart = newStart;
}
// Zoom handler
function onZoom(e) {
var chart = e.sender;
var ds = chart.dataSource;
viewSize = Math.min(Math.max(viewSize + e.delta, MIN_SIZE), MAX_SIZE);
ds.query({
skip: viewStart,
page: 0,
pageSize: viewSize,
sort: SORT
});
// Prevent document scrolling
e.originalEvent.preventDefault();
}
$("#chart").kendoChart({
dataSource: {
data: data,
pageSize: viewSize,
page: 0,
sort: { }
},
title: {
text: "Ozone Concentration (ppm)"
},
legend: {
visible: false
},
series: [{
type: "boxPlot",
lowerField: "lower",
q1Field: "q1",
medianField: "median",
q3Field: "q3",
upperField: "upper",
meanField: "mean",
outliersField: "outliers"
}],
categoryAxis: {
field: "year",
majorGridLines: {
visible: false
}
},
transitions: false,
drag: onDrag,
dragEnd: onDragEnd,
zoom: onZoom
});

SlickGrid dropdown box editor not working

I have am trying to implement something along the lines of
Slickgrid, column with a drop down select list?
my code is;
slick.editors.js ;
(function ($) {
// register namespace
$.extend(true, window, {
"Slick": {
"Editors": {
"Text": TextEditor,
"Integer": IntegerEditor,
"Date": DateEditor,
"YesNoSelect": YesNoSelectEditor,
"Checkbox": CheckboxEditor,
"PercentComplete": PercentCompleteEditor,
"LongText": LongTextEditor,
"SelectOption": SelectCellEditor
}
}
});
with the function defined futher down,
function SelectCellEditor(args) {
var $select;
var defaultValue;
var scope = this;
this.init = function () {
if (args.column.options) {
opt_values = args.column.options.split(',');
} else {
opt_values = "yes,no".split(',');
}
option_str = ""
for (i in opt_values) {
v = opt_values[i];
option_str += "<OPTION value='" + v + "'>" + v + "</OPTION>";
}
$select = $("<SELECT tabIndex='0' class='editor-select'>" + option_str + "</SELECT>");
$select.appendTo(args.container);
$select.focus();
};
this.destroy = function () {
$select.remove();
};
this.focus = function () {
$select.focus();
};
this.loadValue = function (item) {
defaultValue = item[args.column.field];
$select.val(defaultValue);
};
this.serializeValue = function () {
if (args.column.options) {
return $select.val();
} else {
return ($select.val() == "yes");
}
};
this.applyValue = function (item, state) {
item[args.column.field] = state;
};
this.isValueChanged = function () {
return ($select.val() != defaultValue);
};
this.validate = function () {
return {
valid: true,
msg: null
};
};
this.init();
}
Then in my CSHTML
var columns = [
{ id: "color", name: "Color", field: "color", options: "Red,Green,Blue,Black,White", editor: Slick.Editors.SelectOption },
{ id: "lock", name: "Lock", field: "lock", options: "Locked,Unlocked", editor: Slick.Editors.SelectOption },
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function () {
var data = [];
for (var i = 0; i < 20; i++) {
data[i] = {
color: "Red",
lock: "Locked"
};
}
the grid shows and the colour is shown as if its a regular text in a cell, but no dropdown?.
The drop-down will appear only when you are editing that cell. Adding editable: true to your grid options should work I think.

Resources