I've setup a grid with inline editing, and have the following for transport code. (Using local data). Why would the create event fire when I click the update button instead of the update event?
It may also help me if someone could explain what happens when the edit button is clicked in regards to what events are fired, etc.
"columnData" is a local dataset, and in reality I don't think I need the create as I don't have any functionality to add rows. This is just a simple editable grid where a user is allowed to edit 3 out of 4 columns with the first
column being read only.
transport: {
read: function(e) {
e.success(columnData);
},
update: function(e) {
e.success();
},
create: function(e) {
var item = e.columnData;
item.Id = columnData.length + 1;
e.success(item);
}
}
Related
Not to sure how to attack the following scenario.
I have a form with a row which is drag and drop-able and this is working perfectly. The issue I have is that I want to disable some buttons when the rows do not match page load and re-enable when they do.
I have the below jQuery code so far:
var $form = $('form'),
origForm = $form.serialize();
// Drag & drop for existing rules
$(function () {
$("#sortableRows").sortable();
$("#sortableRows").disableSelection();
});
// Check to see if form defaults have changed
$('form :input').change(function () {
if ($form.serialize() !== origForm) {
addDisable();
} else {
removeDisable();
}
});
// Added the disabled attribute when form changes
var addDisable = function () {
$("button[name='addButton'], button[name='modifyButton'], button[name='deleteButton'], button[name='activeButton'], button[name='inactiveButton'], input[name='searchDialPlanBox']").attr('disabled', true);
}
// Removes the disabled attribute
var removeDisable = function () {
$("button[name='addButton'], button[name='modifyButton'], button[name='deleteButton'], button[name='activeButton'], button[name='inactiveButton'], input[name='searchDialPlanBox']").removeAttr('disabled');
}
As I said the drag and drop and the disable/enable functions are working fine of everything else e.g. I disable the listed buttons when an input is changed but no sure on on how to do this when the div row is moved.
Got part of it working but stuck on when moving other divs as the first on works fine but other always fall into the Else
Drag & Drop Does Not Disable Buttons As Doesn't Fall Into Correct IF Statement
You can also give callback function like below for sortable
$( ".selector" ).sortable({
change: function( event, ui ) {}
});
Where is the code responsible for drag and drop handling?
For now Ill assume that is done by .sortable(). Then you would have to look into the docs of this function and search for events which are triggered on drag/drop and attach an listener which then calls disable/enable button.
Something like:
/*...*/.sortable({
dragStart: addDisable,
dragEnd: removeDisable
})
If you want to enable/disable depending on certain conditions then of course you have to implement that in the event handler too.
This is how i populate the table
I'm having some trouble with the datatables plugin for jquery. The table is populated dynamically, I have 3 columns with text and a fourth column which consists of a delete and an edit button. For the edit button I have a modal, and if I confirm the changes, it does indeed change the specific line in the table.
However, if I click on several edit buttons and cancel, when I actually want to change one it changes all the previously canceled lines.
Here is the relevant code:
$("#example").on("click", ".edit-button", function() {
$("#edit-modal").modal("show");
saveChanges(this);
});
function saveChanges(k) {
$("#edit-confirm").click(function() {
$(".itm-loader-modal").show();
setTimeout(function() {editJob(k);},1000);
});
}
function editJob(currentButton) {
$(".itm-loader-modal").fadeOut("slow");
var editedName = $("#job-name").val();
var editedDescription = $("#job-description").val();
var editedCompany = $("#job-company").val();
var data = {
"name":editedName,
"description": editedDescription,
"company": editedCompany
};
var currentLine = $(currentButton).parent().parent().children();
currentLine.eq(0).text(data.name);
currentLine.eq(1).text(data.description);
currentLine.eq(2).text(data.company);
$("#edit-modal").modal("hide");
}
Hard to say for sure, but one think that looks wrong is that each time saveChanges is called, you register new event listener on #edit-confirm button.
Once that #edit-confirm is clicked, it will execute all the registered event handlers – one for each .edit-button click.
Instead, you probably want to have a single #edit-confirm click handler and find a way to pass the info about the line that's currently being edited to it.
Cheers.
so when you call saveChanges it assign event handler to "#edit-confirm", all those event handlers are executed at once,
to avoid it you should attach event handler to it via delegation or i think this quick fix should work
$(this).find('#edit-confirm').click(function() {
/...
})
I am using dojo dgrid for table representation. I have handled a row click event with grid.on('.dgrid-content .dgrid-row:click', function(){ // Open a Dialog}). But the problem I am facing here is: while user is trying to select any text on the row with a hope to copy, the event eventually ends up opening the dialog.
As per my knowledge, HTML5 has the support of ondrag event, but that is not working in my case. What are the other ways to separate these two events and handle accordingly?
Thanks in advance.
You can distinguish select from click in following way inside of your click handler:
clickHandler: function () {
var collapsed = window.getSelection().isCollapsed;
if (collapsed) {
console.log("Clicked");
//Open dialog
} else {
console.log("Selected");
//Do something else
}
}
You should add set allowTextSelection to true inside your grid. This allows the user select text inside the rows.
Make sure you read the documentation on the topic.
Acutally i am using kendo tree view. If i click check box it will create another one grid inside of Activity Column.In that one of the column is outputcategorycode. when ever i am clicking the none value one dropdown will bind dynamically there. then i need to select any one of the value in that dropdown. Once selection is done , checkbox is changing to uncheck mode then inside grid also disappearing that means whole grid is refreshing.
Please have look my Dojo link and give me solution for that.
http://dojo.telerik.com/#bagya/iMeRi
Thanks in advance...
You can bind the databinding event and stop grid from refreshing. Adding this in databound will prevent grid from refreshing.
$("#grid").data("kendoGrid").bind("dataBinding", function(e) {
e.preventDefault();
});
Once you are done with 'doing stuff' you can unbind the function by simply calling
grid.unbind("dataBinding");
Check your updated dojo with the changes :
NOTE : I have added it in databound of the grid just to show working,
but you probably should not do that, since it wont bind other grid data. So
add a different handler and based on certain event as per your
requirement, disable grid refresh and enabled after event is done.
Update:
You can use the onOpen and onClose event of the kendoDropDownList. Refer below:
Bind the onOpen and onClose events to the dropdown
function OutputProductEditor(container, options) {
$('<input required data-text-field="Value" data-value-field="Key" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
//autoBind: false,
dataSource: ProductData,
close: onClose,
open: onOpen,
});
}
onOpen prevent refresh by adding databinding function
function onOpen() {
var grid = $("#grid").data("kendoGrid");
grid.bind("dataBinding", function(e) { e.preventDefault(); });
};
onClose - remove databinding
function onClose() {
var grid = $("#grid").data("kendoGrid");
grid.unbind("dataBinding");
};
Here is the updated dojo
I am trying to implement the magicsuggest plugin into a one page app
I need the plugin to ajax server every time an item is added or removed from the selected list.
$(ms).on('selectionchange', function(event, combo, selection) {
// save selected item to database
addToDatabase(ms.getValue()[ms.getValue().length-1]);
})
$("span.ms-close-btn").bind("click",function(event) {
var theValue=$(this).parent().text()
deleteFromDatabase(tValue);
})
I have a one page app with these two functions. When an item is added to selection list I want to call addItemToDatabase which will submit value with ajax and add it to database
When the close button (x) is clicked, I want to let magicsuggest do its default behavior where it removes item from selection and ALSO calls my deleteFromDatabase function which will send item id/value to server via ajax and delete item from database.
I am stuck. It seems like closing always fires a selectionchange event first. But, if I isSilent or someway bypass the selectionchange then the default behavior is cancelled and the item is not removed from selected in dom.
the sample code above will do everything correctly accept, when the close button is clicked, it will not only deleteFromDatabase, but also trigger the selectionchange and execute addToDatabase. So, the item will look like it was removed, but on refresh it is there because both add and remove functions were executed.
I hope this makes sense enough to receive some help. Am having a hard time figuring out the event behavior with the plugin.
Any help would be great.
Okay, after about 15 hours I got this working. Here are the 3 functions involved.
Again, this allows me to add to selection and delete from selection in real time with database updates.
// removing item from selection
function resetClose() {
$("span.ms-close-btn").not($(".span.ms-close-btn.guest")).bind("click",function() {
var tValue=$(this).parent().text()
registration.deleteAttendingEmployee(tValue)
resetClose()
})
}
// *** Adding item to selection
$(ms).bind('selectionchange', function(event, combo, selection){
$(ms).trigger('addToSelection',[eval(ms.getSelectedItems()),true]);
})
$(ms).on('addToSelection', function(selection) {
registration.addSafetyMeetingAttendee(ms.getValue()[ms.getValue().length-1])
ms.collapse()
resetClose()
});
This is another alternative based on above
go to magicsuggest library dev version;
find _renderSelection: function() {..};
find selectedItemEl variable;
modify the library;
original line:
selectedItemEl = $('<div/>', {
'class': 'ms-sel-item ms-sel-text ' + cfg.selectionCls + validCls,
html: selectedItemHtml + (index === (_selection.length - 1) ? '' : cfg.resultAsStringDelimiter)
}).data('json', value);
Updated:
selectedItemEl = $('<div/>', {
'data-id':value[cfg.valueField],
'class': 'ms-sel-item ms-sel-text ' + cfg.selectionCls + validCls,
html: selectedItemHtml + (index === (_selection.length - 1) ? '' : cfg.resultAsStringDelimiter)
}).data('json', value);
Capture the selection event change and bind close button
$(ms).on('selectionchange', function (e, m) {
$(".ms-close-btn").bind("click", function (event) {
var theValue = $(this).parent().attr("data-id");
alert(theValue);
});
});