Develop Reference

how can I prevent the editor event in Kendo grid?

When I click on the download link in the attached example, I want only the download event to be executed, but not the editor event.
Dojo Example: https://dojo.telerik.com/EcEDiGUB/27
HTML:
<div id="grid"></div>
JS:
var grid;
$(document).ready(function(){
grid = $("#grid").kendoGrid({
columns: [
{
field: "name",
},
{
field: "file",
template: function(e){
return '<div class="box">' + e.file + '</div>';
},
editor: function(e){
alert("open media editor");
return true;
}
}
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", file: "<div class='container'></div>" +
"<div class='file k-icon k-i-file-pdf'></div>" +
"<div class='download k-icon k-i-download'></div>" +
"</div>" },
{ id: 2, name: "John Doe", file: "<div class='container'></div>" +
"<div class='file k-icon k-i-file-pdf'></div>" +
"<div class='download k-icon k-i-download'></div>" +
"</div>" +
"<div class='container'></div>" +
"<div class='file k-icon k-i-file-xls'></div>" +
"<div class='download k-icon k-i-download'></div>" +
"</div>" }
],
schema:{
model: {
id: "id",
fields: {
file: { type: "string"}
}
}
}
},
editable: true,
}).data("grid");
$(".download").on("click", function(e){
e.preventDefault();
alert("download media");
});
It is now that the editable mode:
editable: true,
should be kept, because it is possible to edit as well as to start a download.
How can I start the download by clicking on the download icon without the editor event being fired?

you can use the columns.editable property:
{
field: "file",
template: function(e){
return '<div class="box">' + e.file + '</div>';
},
editable: function(){
return false;
},
editor: function(e){
alert("open media editor");
return true;
}
}
Dojo

DataTables constructing input data via Javascript dynamically does not work

I'm trying to fill up a table dynamically. Following is my code. dataTest contains the final output of dataSet after the for loop. Using dataTest as the input for the table, the table works properly and it fills up. But, using dataSet throws out the error DataTables warning: table id=example - Requested unknown parameter '1' for row 0, column 1.. I've tried looking at https://datatables.net/manual/tech-notes/4 about this, but am not able to figure out. dataSet and dataTest essentially have the same value. Why does dataTest work but dataSet doesn't?
dataSet = "[";
for (prop = 0; prop < 26; prop++)
{
test = "['" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "'],";
test = test.replace(/'/g, '"');
// console.log(test);
dataSet = dataSet.concat(test);
// console.log(test.replace(/'/g, '"'));
// test = "'" + String(array0[prop]) + "' : '" + String(array1[prop]) + "'";
// console.log(JSON.stringify(test));
}
end = "]";
dataSet = dataSet.concat(end);
console.log(dataSet);
var dataTest = [["0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"],["1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1"],["2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2"],["3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3"],["4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4"],["5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5"],["6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6"],["7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7"],["8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8"],["9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9"],["10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10"],["11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11"],["12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12"],["13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13"],["14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14"],["15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15"],["16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16"],["17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17"],["18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18"],["19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19"],["20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20"],["21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21"],["22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22"],["23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23"],["24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24"],["25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25"],]
$(document).ready(function() {
$('#example').DataTable({
data: dataSet,
columns: [{
title: "C1"
},
{
title: "C2"
},
{
title: "C3"
},
{
title: "C4"
},
{
title: "C5"
},
{
title: "C6"
},
{
title: "C7"
},
{
title: "C8"
},
{
title: "C9"
},
{
title: "C10"
},
{
title: "C11"
},
{
title: "C12"
},
{
title: "C13"
},
{
title: "C14"
},
{
title: "C15"
},
{
title: "C16"
},
{
title: "C17"
},
{
title: "C18"
},
{
title: "C19"
},
{
title: "C20"
},
]
// columns: [
// { title: "Name" },
// { title: "Position" },
// { title: "Office" },
// { title: "Extn." },
// { title: "Start date" },
// { title: "Salary" }
// ]
});
});
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%"></table>

Looking at your doc link it seems you saw an array and decided to markup an array as a String (no good since data table expects an array and not a string that looks like an array). What you should have done is create the array using JavaScript arrays.
It worked with you variable dataTest because that is an actual array, and (again) not a string that looks like an array
Below is a example of how you can create the data properly for the data table.
$(document).ready(function() {
var dataSet = [];
for (var prop = 0; prop < 5; prop++) {
var innerArray = [];
for (var innerProp = 0; innerProp < 3; innerProp++) {
innerArray.push(innerProp);
}
dataSet.push(innerArray);
}
//console.log(dataSet);
$('#example').DataTable({
data: dataSet,
columns: [{
title: "C1"
},
{
title: "C2"
},
{
title: "C3"
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%"></table>

Uncaught SyntaxError: Invalid or unexpected token- JQuery Calendar

I have this script that is showing me "Uncaught SyntaxError: Invalid or unexpected token" error. Funny thing is that it works flawlessly on another laptop but on the other it doesn't. It's basically a calendar.
$(document).ready(function() {
/*
==========================================================================
Fullcalendar
========================================================================== */
$('#calendar').fullCalendar({
header: {
left: '',
center: 'prev, title, next',
right: 'today agendaDay,agendaTwoDay,agendaWeek,month'
},
buttonIcons: {
prev: 'font-icon font-icon-arrow-left',
next: 'font-icon font-icon-arrow-right',
prevYear: 'font-icon font-icon-arrow-left',
nextYear: 'font-icon font-icon-arrow-right'
},
defaultDate: '2017-01-01',
editable: true,
selectable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-01-01'
},
{
title: 'Long Event',
start: '2017-01-07',
end: '2017-01-10',
className: 'event-green'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-01-09T16:00:00',
className: 'event-red'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-01-16T16:00:00',
className: 'event-orange'
},
{
title: 'Conference',
start: '2017-01-11',
end: '2017-01-13',
className: 'event-coral'
},
{
title: 'Meeting',
start: '2017-01-12T10:30:00',
end: '2017-01-12T12:30:00',
className: 'event-green'
},
{
title: 'Lunch',
start: '2017-01-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-01-12T14:30:00',
className: 'event-red'
},
{
title: 'Happy Hour',
start: '2017-01-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-01-12T20:00:00',
className: 'event-orange'
},
{
title: 'Birthday Party',
start: '2017-01-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-01-28',
className: 'event-coral'
}
],
viewRender: function(view, element) {
// При переключении вида инициализируем неÑтандартный Ñкролл
if (!("ontouchstart" in document.documentElement)) {
$('.fc-scroller').jScrollPane({
autoReinitialise: true,
autoReinitialiseDelay: 100
});
}
$('.fc-popover.click').remove();
},
eventClick: function(calEvent, jsEvent, view) {
var eventEl = $(this);
// Add and remove event border class
if (!$(this).hasClass('event-clicked')) {
$('.fc-event').removeClass('event-clicked');
$(this).addClass('event-clicked');
}
// Add popover
$('body').append(
'<div class="fc-popover click">' +
'<div class="fc-header">' +
moment(calEvent.start).format('dddd • D') +
'<button type="button" class="cl"><i class="font-icon-close-2"></i></button>' +
'</div>' +
'<div class="fc-body main-screen">' +
'<p>' +
moment(calEvent.start).format('dddd, D YYYY, hh:mma') +
'</p>' +
'<p class="color-blue-grey">Name Surname Patient<br/>Surgey ACL left knee</p>' +
'<ul class="actions">' +
'<li>More details</li>' +
'<li>Edit event</li>' +
'<li>Remove</li>' +
'</ul>' +
'</div>' +
'<div class="fc-body remove-confirm">' +
'<p>Are you sure to remove event?</p>' +
'<div class="text-center">' +
'<button type="button" class="btn btn-rounded btn-sm">Yes</button>' +
'<button type="button" class="btn btn-rounded btn-sm btn-default remove-popover">No</button>' +
'</div>' +
'</div>' +
'<div class="fc-body edit-event">' +
'<p>Edit event</p>' +
'<div class="form-group">' +
'<div class="input-group date datetimepicker">' +
'<input type="text" class="form-control" />' +
'<span class="input-group-addon"><i class="font-icon font-icon-calend"></i></span>' +
'</div>' +
'</div>' +
'<div class="form-group">' +
'<div class="input-group date datetimepicker-2">' +
'<input type="text" class="form-control" />' +
'<span class="input-group-addon"><i class="font-icon font-icon-clock"></i></span>' +
'</div>' +
'</div>' +
'<div class="form-group">' +
'<textarea class="form-control" rows="2">Name Surname Patient Surgey ACL left knee</textarea>' +
'</div>' +
'<div class="text-center">' +
'<button type="button" class="btn btn-rounded btn-sm">Save</button>' +
'<button type="button" class="btn btn-rounded btn-sm btn-default remove-popover">Cancel</button>' +
'</div>' +
'</div>' +
'</div>'
);
// Datepicker init
$('.fc-popover.click .datetimepicker').datetimepicker({
widgetPositioning: {
horizontal: 'right'
}
});
$('.fc-popover.click .datetimepicker-2').datetimepicker({
widgetPositioning: {
horizontal: 'right'
},
format: 'LT',
debug: true
});
// Position popover
function posPopover(){
$('.fc-popover.click').css({
left: eventEl.offset().left + eventEl.outerWidth()/2,
top: eventEl.offset().top + eventEl.outerHeight()
});
}
posPopover();
$('.fc-scroller, .calendar-page-content, body').scroll(function(){
posPopover();
});
$(window).resize(function(){
posPopover();
});
// Remove old popover
if ($('.fc-popover.click').length > 1) {
for (var i = 0; i < ($('.fc-popover.click').length - 1); i++) {
$('.fc-popover.click').eq(i).remove();
}
}
// Close buttons
$('.fc-popover.click .cl, .fc-popover.click .remove-popover').click(function(){
$('.fc-popover.click').remove();
$('.fc-event').removeClass('event-clicked');
});
// Actions link
$('.fc-event-action-edit').click(function(e){
e.preventDefault();
$('.fc-popover.click .main-screen').hide();
$('.fc-popover.click .edit-event').show();
});
$('.fc-event-action-remove').click(function(e){
e.preventDefault();
$('.fc-popover.click .main-screen').hide();
$('.fc-popover.click .remove-confirm').show();
});
}
});
/* ==========================================================================
Side datepicker
========================================================================== */
$('#side-datetimepicker').datetimepicker({
inline: true,
format: 'DD/MM/YYYY'
});
/* ========================================================================== */
});
/* ==========================================================================
Calendar page grid
========================================================================== */
(function($, viewport){
$(document).ready(function() {
if(viewport.is('>=lg')) {
$('.calendar-page-content, .calendar-page-side').matchHeight();
}
// Execute code each time window size changes
$(window).resize(
viewport.changed(function() {
if(viewport.is('<lg')) {
$('.calendar-page-content, .calendar-page-side').matchHeight({ remove: true });
}
})
);
});
})(jQuery, ResponsiveBootstrapToolkit);
//=========================================
The calendar is supposed to show events in the day blocks and date picker, but it is not.
Please help!

How to show checkboxes in jquery.datatables?

I am using Datatables and I have the following code to generate the table. I want to display checkboxes for the read, write, execute and admin values.
If the value is equal to 1 , I want the checkbox to be checked. and if 0 checkboxes unchecked.
Javascript
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"sScrollY": "500px",
"bPaginate": false,
"bProcessing": true,
"sAjaxSource": "sources/sample.json"
} );
} );
</script>
HTML
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Browser</th>
<th width="25%">Read</th>
<th width="25%">Write</th>
<th width="15%">Execute</th>
<th width="15%">Admin</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JSON
{ "aaData": [
["Trident","0","0","0","1"],
["Trident","0","1","0","0"],
["Trident","0","0","1","1"],
["Trident","0","0","1","1"],
["Trident","0","0","1","1"],
["Trident","0","0","0","0"],
["Gecko","1","1","1","1"],
["Gecko","0","0","0","1"],
["Other browsers","1","0","0","U"]
] }

I was able to get it to work using the datables mrenderer
$(document).ready(function () {
var oTable = $('#example').dataTable({
"aoColumnDefs": [{
"aTargets": [0],
//"mData": "download_link",
"mRender": function (data, type, full) {
if (data == "Gecko") {
return '' + data + ' Download Gecko';
} else {
return '' + data + ' Download';
}
}
}, {
"aTargets": [1],
//"mData": "download_link",
"mRender": function (data, type, full) {
if (data == "1") {
return '<input type=\"checkbox\" checked value="' + data + '">';
} else {
return '<input type=\"checkbox\" value="' + data + '">';
}
}
}, {
"aTargets": [2],
//"mData": "download_link",
"mRender": function (data, type, full) {
if (data == "1") {
return '<input type=\"checkbox\" checked value="' + data + '">';
} else {
return '<input type=\"checkbox\" value="' + data + '">';
}
}
}, {
"aTargets": [3],
//"mData": "download_link",
"mRender": function (data, type, full) {
if (data == "1") {
return '<input type=\"checkbox\" checked value="' + data + '">';
} else {
return '<input type=\"checkbox\" value="' + data + '">';
}
}
}, {
"aTargets": [4],
//"mData": "download_link",
"mRender": function (data, type, full) {
if (data == "1") {
return '<input type=\"checkbox\" checked value="' + data + '">';
} else {
return '<input type=\"checkbox\" value="' + data + '">';
}
}
}],
"bFilter": false,
"sScrollY": "500px",
"bPaginate": false,
"bProcessing": true,
"sAjaxSource": "sources/sample.json"
});
});

Unable to select items populated via jsonp in select2

I'm trying to populate a select2 element using geonames data. I have a formatSelection method defined but it will not fire when an item is selected.
Here's the HTML element:
<input id="location" size="30" type="text">​
Select2 binding with format functions:
function locationFormatResult(location) {
var markup = "<table class='location-result'><tr>";
if (location.countryCode !== undefined) {
markup += "<td class='flag-image'><img src='http://www.geonames.org/flags/x/" + location.countryCode.toLowerCase() + ".gif' /></td>";
}
markup += "<td class='location-info'>";
markup += "<div class='location-name'>" + location.name + ", " + location.adminName1 + ", " + location.countryName + "</div>";
markup += "</td></tr></table>";
return markup;
}
function locationFormatSelection(location) {
return location.name + ", " + location.adminName1 + ", " + location.countryName;
}
$(function () {
$('#location').select2({
placeholder: 'Location',
allowClear: true,
width: '260px',
minimumInputLength: 2,
ajax: {
url: 'http://ws.geonames.org/searchJSON',
dataType: 'jsonp',
data: function (term) {
return {
featureClass: 'P',
q: term
};
},
results: function (data) {
return {
results: data.geonames
};
}
},
formatResult: locationFormatResult,
formatSelection: locationFormatSelection,
dropdownCssClass: "bigdrop"
});
});
You can see the full fiddle here: http://jsfiddle.net/6CVbw/1/
Why is selecting an item not working?

I figured it out. When you instantiate the select2 plugin on an element you have to specify an ID attribute. This worked:
$(function () {
$('#location').select2({
id: function(e) { return e.name + '|' + e.adminName1 + '|' + e.countryName },
placeholder: 'Location',
allowClear: true,
width: '260px',
minimumInputLength: 2,
ajax: {
url: 'http://ws.geonames.org/searchJSON',
dataType: 'jsonp',
data: function (term) {
return {
featureClass: 'P',
q: term
};
},
results: function (data) {
return {
results: data.geonames
};
}
},
formatResult: locationFormatResult,
formatSelection: locationFormatSelection,
dropdownCssClass: "bigdrop"
});
});
You can see the updated fiddle here: http://jsfiddle.net/6CVbw/2/