Develop Reference

Kendo toolbar button not firing click event after being enabled

This is my logic, here I am trying to disable the save changes button and prevent click event on it if the user enters a duplicate value and enable it again if the user changes the values but after enabling it the update / save event does not occur am I doing something wrong? This is my code
function OnChange(data) {
//data.preventDefault();
$(".k-grid-save-changes")
.attr("role", "button")
.removeClass("k-state-disabled")
//.addClass("k-grid-save-changes")
.click(function () {
return true;
});
//console.log("data", data.items["0"].ProviderTypeName);
var name = data.items["0"].ProviderTypeName;
var Id = data.items["0"].Id;
var grid = $("#grid").data("kendoGrid");
//console.log("Grid ", grid);
grid.tbody.find('>tr').each(
function () {
$(this).css('background', 'white');
var dataItem = grid.dataItem(this);
//console.log(dataItem.ProviderTypeName)
if (dataItem.ProviderTypeName == name && dataItem.Id != Id) {
$(this).css('background', 'red');
$(".k-grid-save-changes")
//.removeClass("k-grid-save-changes")
.addClass("k-state-disabled")
//.removeAttr("role")
.click(function () {
return false;
});
}
});
}
This is where is call the on change event
.Events(events => events.RequestStart("OnRequestStart").Change("OnChange").RequestEnd("OnRequestEnd").Error("onError"))
If I remove the "return false;" it is working as expected but this allows duplicated values to be saved. So I have used this.

If I understand correctly in your code you do exactly what you mention as a problem. At every change you disable the save functionality with the return false. You don't enable it again at any point.
If you add an event handler to the button then you have to undo it at a later point. Since though I don't believe that the validation should occur at the change event but at the button click I would suggest to use the grid Save event where you could iterate dataSource.data() of your grid (much better) do your check and if anything happens return false.
One other way to go since you probably want the css effect with the background is to keep your code and discard the click event. Just set a flag that you could use in the save event. Something like this:
if(// your control){
$(this).css('background', 'red');
duplicatedValue = true;
}else{
.removeClass("k-grid-save-changes");
duplicatedValue = false;
}
And in the save event
function onSave(){
if(duplicatedValue){
return false;
}
}

How to hide or show divs based on checkbox change event

I am trying to show the values based on Checkbox check and uncheck
I have got two checkboxes MNC and Worth (Only the Top Ones), i am trying to show or hide the values based on it (pesent under class pack-panel div)
This is my code
$(document).on('change', '.filtermnc', function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.mnccheckbox').prop('checked')
$(this).toggle(visible);
});
});
$(document).on('change', '.filterworth', function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.worthcheckbox').prop('checked')
$(this).toggle(visible);
});
});
When i tried with this code , it is not working and also it is checking all the correspondng checkboxes
Could you please let me know how to achieve this .
http://jsfiddle.net/F8Vk2/121/

I made for one, but it's just a mater of changing the other one likewise:
$(document).on('change', '.filterworth, .filtermnc', function() {
var $this = $(this),
isChecked = $this.is(':checked'),
$packPanel = $('.pack-panel');
isChecked ? $packPanel.show() : $packPanel.hide()
});
You could use this to get the target of the event and verify if it's checked by .is(':checked'). Also, you don't need to iterate over $('.pack-panel') in order to apply your changes. .toggle() will change the visibility by it's previous one, so I think you should hard code to hide or show the panels.

Change your js to
$(document).on('change', '.filtermnc', function() {
var visible = $(this).prop('checked')
if(visible)
$('.mnccheckbox').closest("li").show();
else
$('.mnccheckbox').closest("li").hide();
});
$(document).on('change', '.filterworth', function() {
var visible = $(this).prop('checked')
if(visible)
$('.worthcheckbox').closest("li").show();
else
$('.worthcheckbox').closest("li").hide();
});
http://jsfiddle.net/F8Vk2/123/

You could try ->
$(document).on('change', '.filtermnc', function() {
$('.mnccheckbox').
closest("li").
toggle($(this).prop('checked'));
});
This is basically finding all with .mccheckbox class, and then toggling based on the property of the checkbox you assigned the event too.

When div blurs check for content change?

I have set up some content editable divs that have onblur functionality
<div class="inline-edit" contenteditable="true"></div>
$(document).ready(function(){
$('div.inline-edit').blur(function()
{
//functionality
});
});
and that all works grand for the functionality I've set up.
However the problem is the functionality will always occur when the blur even fires, even if the content in the editable div is never changed!
As the onchange method only works for inputs/textareas etc
I was curious if there was a simple~ way to do something like:
$(document).ready(function(){
$('div.inline-edit').blur(function()
{
if($('div.inline-edit').contentChanged())
{
//functionality
}
});
});

You could also look for keypress inside the div.
var changed = false;
$('#your-div').keypress(function (){
changed = true;
});
Or if your div data is very simple, you could save the original content and compare it when needed.

If only using 1 div, I'd set up an old and new variable and compare them on blur.
$(document).ready( () => {
var oldVal = $('.inline-edit').val();
$('.inline-edit').blur( () => {
let newVal = $('.inline-edit').val();
if (newVal === oldVal) {
return
}
//functionality
});
});

Rangy.js - Saving a comment to highlighted text

I'm currently implementing the very cool range and selection library Rangy.js. I want to implement a function that can highlight some text and then add and save a comment to the highlight. In the demos it is shown how to add a note to the selection - but only an ID is attached to the selection.
I'm trying something like this, where I create a comment property on the element:
highlighter.addClassApplier(rangy.createCssClassApplier("highlight", {
ignoreWhiteSpace: true,
elementTagName: "span",
elementProperties: {
comment: "",
onclick: function() {
var highlight = highlighter.getHighlightForElement(this);
$('#myModal p').text( highlight.classApplier.elementProperties.comment );
$('#myModal').modal('show');
}
}
}));
And then when highlighting the text, the comment is stored in the "comment" property:
function highlightSelectedText( event ) {
event.preventDefault();
var highlight = highlighter.highlightSelection("highlight");
$('#myModal').modal('show');
$('#save-comment').on('click', function () {
var comment = $('#comment-text');
highlight[0].classApplier.elementProperties.comment = comment.val();
});
}
When I serialize my highlights, the comments are not included.
Has anyone tried this or something similar with Rangy.js?
Any help appreciated, thanks in advance!

Select all td's over multiple rows based on selection

I need to select all td's within my table with a drag event. What I am trying to achieve is to create a date range based on my first selected td, until the last selected td, but they can span over multiple rows.
At the moment, I am using nextUntil() with andSelf() to include the last selected, but it only selects td's within the current tr.
Below is a sample of my code.
Any help please.
this.BindCalendarMouseDrag = function () {
var isMouseDown = false;
var isHighlighted;
var selectedDays = [];
$(".tabCalendarContainer tr.trCalWeek td")
.mousedown(function () {
isMouseDown = true;
$(this).addClass("highlighted");
isHighlighted = $(this).hasClass("highlighted");
selectedDays.push($(this));
return false; // prevent text selection
})
.mouseover(function () {
if (isMouseDown) {
$(this).addClass("highlighted", isHighlighted);
var firstSelectedDay = selectedDays[0];
firstSelectedDay.nextUntil($(this)).andSelf().add($(this)).addClass("highlighted", isHighlighted);
selectedDays.push($(this));
}
})
.bind("selectstart", function () {
return false;
});
$(document).mouseup(function () {
isMouseDown = false;
//alert(selectedDays.length);
});
};

I took the liberty of constructing a jsFiddle that illustrates a calendar with draggable weekdays. It doesn't cater for BACKWARDS dragging yet, but you should be able to easily adjust the code to accommodate it.
You can access it here.