Develop Reference

dataBound hitting twice when I search in kendo dropDownList

I'm fairly new to kendo and facing a problem with kendo dropDownList.
I have Channel list kendo dropDown in my Add/Edit popup form. And every time I save my form and click on new Add/Edit I want that saved channel name in that dropDownList.
I'm calling the dropDown data from a SP and then populating that DropDown.
Here is my kendo DropDown:
function buildChannelDropDown(){
$('#ddlChannelSelect').kendoDropDownList({
dataTextField: 'Text',
dataValueField: 'Value',
optionLabel: "Select Main Station",
dataBound: function(e){
if(!onDataBound_SelectByDefaultIfOnlyOneItem(e)) {
var dropdownlist = $("#ddlChannelSelect").data("kendoDropDownList");
var mainChannelDataSource = dropdownlist.dataSource;
if(mainChannelDataSource._data.length > 0){
dropdownlist.select(0);
}
}
},
change: function(){
var selectedChannel = 0;
if($('#ddlChannelSelect').val() != ""){
selectedChannel = $('#ddlChannelSelect').val()
}
GetDataForSelectedChannel(selectedChannel);
},
filter: 'contains'
});
}
And this my function which brings all channel list from backend
function setChannelDropDown(){
var paramObj = {
ChannelGroupId = $("#ddlChannelGroup").val();
}
InvokeAjaxMethod('/Channel/GetChannelList', 'Get', true, paramObj, function(response){
var channelDropDown = $('#ddlChannelSelect').data('kendoDropDownList');
channelDropDown.setDataSource(response.Data);
});}
i'm calling setChannelDropDown() function on Add/Edit button click. Everything is working fine and newly added Channel gets shown in dropDown. Except when I search/type in Filter box in Dropdown(I have kept fiter: "contains"). When I search and select an option and save the form, Popup Form gets close but DropDown opens up. See this Image.
This is how it looks
This DropDown opens up on grid after saving and closing form. After Debugging it came to known that dataBound gets hit again. This happens only when I type in filter box and save.
Does anyone know I can solve this and prevent it from happening?

How to prevent multiple confirmation dialogue in javascript

I have a button which when clicked, displays a calendar for the user to change the date of an item. After the date is chosen, there will be a confirmation dialogue to ensure that the user would like to proceed. The problem that my code is currently facing is that when the calendar is displayed and the user let's say click the background, the calendar disappear. When the user clicks the button again and proceed to choose the date, the confirmation dialogue comes out multiple times, probably because of the previous attempts. Does anyone know how to fix this?
function reschedule(){
event.preventDefault();
$("#change").datetimepicker({
"format" : "yyyy-mm-dd hh:ii:ss",
"autoclose" : true,
"startDate" : new Date(),
pickerPosition: 'bottom left'
}).on('changeDate', function (input) {
if ( confirm("Move to " + new Date(input.date).toISOString() + "?") ) {
// code to change date
}
});
$("#change").datetimepicker("show");
}

Probably, you are calling the reschedule() function each time the user clicks your button, which causes the same "changeDate" event to be attached multiples times on the element.
To prevent that, you can try moving the code that initializes the date-time-picker outside the reschedule() function.
See the code below.
$("#change").datetimepicker({
"format" : "yyyy-mm-dd hh:ii:ss",
"autoclose" : true,
"startDate" : new Date(),
pickerPosition: 'bottom left'
}).on('changeDate', function (input) {
if ( confirm("Move to " + new Date(input.date).toISOString() + "?") ) {
// code to change date
}
});
function reschedule(){
event.preventDefault();
$("#change").datetimepicker("show");
}

I managed to figure out the solution, just have to unbind it when the calendar is hidden.
function reschedule(){
event.preventDefault();
$("#change").datetimepicker({
"format" : "yyyy-mm-dd hh:ii:ss",
"autoclose" : true,
"startDate" : new Date(),
pickerPosition: 'bottom left'
}).on('changeDate', function (input) {
if ( confirm("Move to " + new Date(input.date).toISOString() + "?") ) {
// code to change date
}
}).on('hide', function () {
$("#change").unbind();
});
$("#change").datetimepicker("show");
}

jQuery Datepicker on change event is not getting fired when using button instead of text input

I am trying to make a button only datepicker with jQuery dtaepicker.
When I am attaching the datepicker to an input, the onchange function works and I got the new selected value.
However when I am attaching the datepicker with just a button or something else, the onchange event is not getting fired:
<input type="text" class="test"> // works
<i class="fa fa-calendar test"></i> // opens the datepicker as should be, but not fire the change event
$(function() {
$(".test").datepicker({
format: 'yyyy-mm-dd',
onSelect: function(v) {
// also not getting fired
},
}).on("change", function() {
// not getting fired when using button instead of text input
let val = $(this).val();
});
});

I think you need to add this line showOn: 'button'
<input type="text" class="test"> // works
<i class="fa fa-calendar test"></i> // opens the datepicker as should be, but not fire the change event
$(function() {
$(".test").datepicker({
showOn: 'button', // use showOn: 'both' if you want to open the datepicker on icon and the input as well
format: 'yyyy-mm-dd',
onSelect: function(v) {
// This would get fired on changing date on the calendar icon
},
}).on("change", function() {
// not getting fired when using button instead of text input
let val = $(this).val();
});
});
Also, you can remove the <i class="fa fa-calendar test"></i> tag and place the following two LOC after the showOn attribute to show the calendar icon
buttonImageOnly: true,
buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',

Use the hide event - it gets fire after you finish inserting or picking a date:
$(function() {
$(".test").datepicker({
format: 'yyyy-mm-dd',
onSelect: function(v) {
// also not getting fired
},
}).on("hide", function(e) {
// not getting fired when using button instead of text input
let val = $(this).val();
});
});

You can try the answer here.
You should be able to call the datepicker change from the button click event

I have found it:
$(".test").datepicker(params).on('hide', v => console.log(v.date));
// will return a date object with the selected date

JQuery full calendar: eventResize affecting other events

I am using JQuery fullCalendar on my project. I'll go directly to my problem.
Whenever I create a new calendar event, and successfully rendered it to the calendar view, then try to resize the newly rendered event, one event keeps resizing also.
so here's my code how I rendered the created event.
this first code is the select event where I get to highlight a range of date and time.
$('#calendar').fullCalendar({
select: function(start, end){
if (start.format("YYYY-MM-DD") == end.format("YYYY-MM-DD")) {
$('#createscheduleModal').modal('show'); // opens bootstrap modal to add title
eventData = {
id: eventCount + 1,
date : start.format("YYYY-MM-DD"),
start : start.format("YYYY-MM-DD HH:mm:ss"),
end : end.format("YYYY-MM-DD HH:mm:ss"),
teacher : auth_id
}
}else{
$('.calendar-view').fullCalendar('unselect');
}
eventCount++;
},
});
Then after selecting date ranges, a modal will pop-up so the user can enter a title for the calendar event. in the modal, there is a button with id="btn-save-sched", when the user click the button it saves the calendar event to the database and render it to the calendar. here is the code for this
$('#btn-save-sched').click(function(){
eventData.title = $('#event_name').val(); // add title to eventData object
if ($('#event_name').val() == "" || $('#event_name').val() == null) {
swal('Ooops!','Please enter an event name','error');
}else{
$.ajax({
url : teacher_ajax,
type : 'POST',
data : eventData,
success : function(res){
eventData.editable = true; //set this event to be editable
$('.calendar-view').fullCalendar('renderEvent', eventData, true);
$('#event_name').val('');
$('#createscheduleModal').modal('hide');
}
})
}
});
so the code above successfully renders the calendar event into the calendar then when I try to resize this newly created event, another event keeps resizing together with the new event.
Please see the gif below what's happening when I add a new event
Thanks guys!

jqGrid: one radio button per row

I'm trying to setup a column in a jqGrid that has one radio button per row in it, to allow the user to set a single row as the "primary" child of the parent. The following code, however, merely renders empty cells.
I imagine the cells are not being put into 'edit mode' or whatever, which is confusing to me because there's an editable checkbox column on the same grid which just works as desired.
(There's a navButton at the bottom of the grid that saves the state of the grid if that's relevant.)
var createRadioButton = function(value) {
return $("<input type='radio' />", {
name: mySubGridID,
checked: value
}).get();
}
var extractFromRadioButton = function(elem) {
return $(elem).val();
}
$("#grid").jqGrid({
url: '/GetData',
datatype: 'json',
colModel: [
...
{ label: 'Selected', name: 'selected', index: 'selected', editable: true, edittype: 'custom', editoptions:
{
custom_element: createRadioButton,
custom_value: extractFromRadioButton
}
},
...
],
...
});
Thanks for any help!

You try to use edittype: 'custom'. This work only in a edit mode (inline editing or form editing). If I correct understand your question you try to add radio button which are displayed in all rows in the corresponding column. So you should use better custom formatter (see here an example). You can bind click event in the loadComplete (see here an example).
I am not sure that I understand why you need to use radio button. If you want use radio buttons only for row selection probably you should consider to use multiselect:true instead. Some small behavior of selection you can change inside of onSelectRow or beforeSelectRow event handler if needed.

I had this same problem with the formatter and had to set a width on the radio button as it was getting set wider than the cell for some reason.
function radioButtonFormatter(cellValue, options, rowObject) {
var radioHtml = '<input style="width:25px" type="radio" value=' + cellValue + ' name="radioid"></input>';
return radioHtml;
}

I needed a simpler solution so I came up with this method which uses the built-in multiselect rather than adding a col to the grid.
...
var gridSelector = $("#myGrid");
//jqGrid code snippet, methods below:
multiselect : true, //Must be true to allow for radio button selection
beforeSelectRow: function(rowid, e)
{
// Allow only one selection
$(gridSelector).jqGrid('resetSelection');
return (true);
},
beforeRequest : function() {
//Remove multi-select check box from grid header
$('input[id=cb_myGrid]', 'div[id=jqgh_myGrid_cb]').remove();
},
loadComplete : function () {
//Convert grid check boxes to radio buttons
$('input[id^="jqg_myGrid_"]').attr("type", "radio");
},
...
Cheers,