I do use datatable where i've been declared some buttons to trigger action based which button user press:
var dpcroles = $('#example_roles').DataTable( {
dom: 'Bfrtip',
"columnDefs": [
{
"targets": [0],
"visible": false
}
],
buttons: [
{
text: 'Add',
id: 'btn_add',
"data-action":'add',
action: function ( e, dt, node, config ) {
$('#modal_action').modal();
}
},
{
id: 'btn_edit',
text: 'Edit',
action: function ( e, dt, node, config ) {
var id = $(e.relatedTarget).data('id');
console.log(id);
$('#model_action').modal(id);
},
enabled: true
},
],
However, how to pass arguments javascript which handles modal opening ?
$('#model_action').on('show.bs.modal', function(e) {
// if button 'edit', do something
.
.
// else if button 'add' do other thing
.
.
.
})
You can set data- attribute for a modal before calling modal() method. For example:
$('#modal_action').data('mode', 'edit');
$('#modal_action').modal();
Then in your event handler, you can retrieve the data. For example:
$('#modal_action').on('show.bs.modal', function(e) {
var $modal = $(this);
var mode = $modal.data('mode');
// if button 'edit', do something
if(mode === 'edit'){
// else if button 'add' do other thing
} else {
}
});
Another solution would be to use two different modals, one for each action.
Please note that you've probably misspelled the name of the modal in your example, it should be either modal_action or model_action.
Related
I want to replace this to kendo confirm
destroy: function (e) {
posAttachments.splice(getIndexById(e.data.Id), 1);
e.success();
$("#attachments").val(JSON.stringify(posAttachments));
} { command: ["destroy"], title: " ", width: "200px", attributes: { "class": "text-center" } }
I'm use this how can I do it ?
destroy: function (e) {
kendo.confirm("Are you sure you want to delete this attachment?").then(function() {
posAttachments.splice(getIndexById(e.data.Id), 1);
e.success();
$("#attachments").val(JSON.stringify(posAttachments));
I'm try this but this work after I click Ok button in default confirmation
I want when I click button delete in kendo show kendo confirmation not default confirmation
Instead of using the built-in destroy command, use a custom command. That away you can get the data item, show the desired prompt, then delete it in the success callback.
For example, look at this column definition:
{
title: '',
width: 150,
command: [{
name: 'customDestroy',
iconClass: 'k-icon k-i-x',
text: 'Delete',
click: e => {
e.preventDefault();
var grid = $(e.delegateTarget).data('kendoGrid');
var tr = $(e.target).closest('tr');
var dataItem = grid.dataItem(tr);
kendo.confirm('Are you sure you want to delete this attachment?').then(() => {
grid.dataSource.remove(dataItem);
});
}
}]
}
Fiddle: https://dojo.telerik.com/oNIDEKit
I have been trying to figure out what is going on but haven't yet.
Please see the code below.It is a inconsistent behavior, so I am having hard time to catch what triggers it. This grid is inside a popup, I noticed when i refresh the page and try it, it works fine on first attempt. Then i save/cancel popup and keep repeating it fails at some point and starts accumulate null rows.
I tried to check the value of the grid using
$('#gridFldListItems').data("kendoGrid").dataSource.data()
It shows there is no data but as soon as click "Add new Record" it shows 2.
It does not necessarily fail on second attempt, but it never fails on first. I suspect that everytime I open the popup it is not necessarily empty(after first few tries) and it carries some data from previous attempts. I might be wrong.
When I click add new record, it adds a line with null value and gives me an option to input on the second row.
I also When I put itemname and click update, it does not trigger the "create" event and looks like this:
At this point the grid broken. Here is the code for the grid
var grid = $("#gridFldListItems").kendoGrid({
editable: {
"confirmation": "Are you sure you want to delete this item?",
"mode": "inline",
"createAt": "bottom"
},
selectable: true,
autoBind: false,
toolbar: ["create" ],
columns: [
{ field: 'Item' },
{
command: ['edit', 'destroy',
{ iconClass: "k-icon k-i-arrow-up", click: $.proxy(this, 'selectedFieldDef_onClkMoveUp'), name: 'Up' },
{ iconClass: "k-icon k-i-arrow-down", click: $.proxy(this, 'selectedFieldDef_onClkMoveDown'), name: 'Down' }], title: ' '
}
],
dataSource: this.selectedFieldDef_dsItems,
}).data("kendoGrid");
selectedFieldDef_dsItems: new kendo.data.DataSource({
transport: {
read: function (e) {
var field = editViewModel.get("selectedFieldDef");
var mapItems = $.map(field.Items, function (item, idx) {
return {
Item: item
};
});
//on success
e.success(mapItems);
},
create: function (e) {
// on success
e.success(e.data);
},
update: function (e) {
// on success
e.success();
},
destroy: function (e) {
var vm = editViewModel;
// locate item in original datasource and remove it
var field = vm.get("selectedFieldDef");
if (field.DefaultValue && !vm.selectedFieldDef_dsItemsFindItem(vm.selectedFieldDef_dsItems.data(), field.DefaultValue)) {
field.DefaultValue = null;
vm.set("selectedFieldDef", field);
$("#inpFldRegex").kendoDropDownList().data("kendoDropDownList").trigger("change");
}
// on success
e.success();
}
},
error: function (e) {
alert("Status: " + e.status + "; Error message: " + e.errorThrown);
},
schema: {
model: {
id: "Item",
fields: {
Item: { editable: true, nullable: true }
}
}
}
})
Any help would be much appreciated.
UPDATE:
It works fine when I refresh the page
I have a DataTable displaying data for Branches with two custom buttons defined: Add and Update. They are initialized at the top of the Javascript section
var buttons;
var tblBranch;
$.fn.dataTable.ext.buttons.add = {
className: 'button-add',
text: "Add Branch",
action: function (dt) {
onBtnAddClicked()
}
};
$.fn.dataTable.ext.buttons.update = {
className: 'button-update',
text: "Update",
action: function (dt) {
onBtnUpdateClicked()
}
};
I'd like to disable the Edit button on page load and only enable it to be clickable when a row has been selected. Problem is, I'm using custom buttons and I can't find anything on datatables.net about how to enable/disable them depending on conditions. So far what I've tried is this:
tblBranch = $("#tblBranches").DataTable({
dom: 'Blfrtip',
buttons: {
buttons :[
'add', 'update'
]
}
select: true;
})
$("#tblBranches tbody").on('click', 'tr', function () {
if (tblBranch.row(this).hasClass('selected')) {
$('button-update').removeClass("DTTT_disabled");
}
else {
table.$('tr.selected').removeClass('selected');
$('button-update').addClass("DTTT_disabled");
}
});
But I don't know what the code to disable the Edit button when the page loads should be like, and I've looked here, here, here and here.
Thanks for any guidance.
The last link you are referring to hold the solution you are looking for. But the documentation is a little bit vague, guess it need a solid example. It is not clear how you create the buttons (you show both methods) but below is an inline example, it would work with constructor as well. Simply give the button a class, like .edit and set it to disabled from start :
var table = $('#example').DataTable( {
dom: 'Bfrtip',
select: true,
buttons: [
{
text: 'Edit',
className: 'edit',
enabled: false,
action: function (e, dt, node, config) {
//do something
}
},
{
text: 'Add',
action: function (e, dt, node, config) {
//do something
}
}
]
})
Then use the Select plugins select and deselect events to update the enabled status of the .edit button :
$('#example').on('select.dt deselect.dt', function() {
table.buttons( ['.edit'] ).enable(
table.rows( { selected: true } ).indexes().length === 0 ? false : true
)
})
demo -> https://jsfiddle.net/pmee6w2L/
I building a sortable table in Meteor with Reactive-Table and having trouble getting my delete button to work for removing entries from the table.
Please see my javascript code below:
Movies = new Meteor.Collection("movies");
if (Meteor.isClient) {
Template.body.events({
"submit .new-movie": function (event) {
var title = event.target.title.value;
var year = event.target.year.value;
var genre = event.target.genre.value;
Movies.insert({
title: title,
year: year,
genre: genre
});
event.target.title.value = "";
event.target.year.value = "";
event.target.genre.value = "0";
return false;
}
});
Template.moviestable.events({
"click .deletebtn": function (event) {
Movies.remove(this._id);
}
});
Template.moviestable.helpers({
movies : function () {
return Movies.find();
},
tableSettings : function () {
return {
showFilter: false,
fields: [
{ key: 'title', label: 'Movie Title' },
{ key: 'year', label: 'Release Year' },
{ key: 'genre', label: 'Genre' },
{ key: 'edit', label: 'Edit', fn: function () { return new Spacebars.SafeString('<button type="button" class="editbtn">Edit</button>') } },
{ key: 'delete', label: 'Delete', fn: function () { return new Spacebars.SafeString('<button type="button" class="deletebtn">Delete</button>') } }
]
}
}
});
}
Can anyone tell me what I'm doing wrong?
In the reactive tables docs, there's an example of how to delete rows from the table. Adapting the example in the docs for your needs, your event should look like this:
Template.moviestable.events({
'click .reactive-table tbody tr': function (event) {
event.preventDefault();
var objToDelete = this;
// checks if the actual clicked element has the class `deletebtn `
if (event.target.className == "deletebtn") {
Movies.remove(objToDelete._id)
}
}
});
The problem you are having is that you are trying to find the _id property on the button click instead of the row click.
If you do console.log(this) on your button click event (as you have it in your question above) you will get something like this Object {key: "delete", label: "", fieldId: "2", sortOrder: ReactiveVar, sortDirection: ReactiveVar} which does not contain the property _id
It is easier to register the row click, where the row object is the actual document you are trying to delete, and then check if the event's target has the delete class you added.
I am using jquery's editable and with submit and cancel I also want to 1 extra button for other functionality... can anyone help?
you have to extend the plugin... do the following changes in the source
onEdit: null,
onSubmit: null,
onPopup: null, //function to be called when you click your custom popup button
onCancel: null,
editClass: null,
submit: null,
popup: null, //your custom popup button
popupBy: 'blur', //blur, change, dbclick, click
cancel: null,
type: 'text',
after that you'll have to define the options like
// popup event
if (opts.popup) {
$('<button/>').appendTo($this)
.html(opts.popup)
.one('mouseup', function () { opts.toNonEditable($(this).parent(), true) });
} else
$this.one(opts.popupBy, function () { opts.toNonEditable($(this), true) })
.children()
.one(opts.popupBy, function () { opts.toNonEditable($(this).parent(), true) });
finally add the following to the source to call user defined functions
// Call User Function
var func = null;
if ($.isFunction(opts.onSubmit) && change == true)
func = opts.onSubmit;
else if ($.isFunction(opts.onCancel) && change == false)
func = opts.onCancel;
else if ($.isFunction(opts.onPopup) && change == true)
func = opts.onPopup;
if everything go fine you can use it as
$('selector').editable({
type: 'select',
options: { 'value1': 'Item 1', 2: 'Item 2', 'Item 3': 'Item 3' },
submit: 'save',
popup:'click to open popup',
cancel: 'cancel',
editClass: 'colored',
onEdit: editFuncion,
onPopup:popupFunction,
onSubmit: submitFuncion
});
function popupFunction() {
// your logic to open popup
}
Disclaimer
i have not tested it so i cannot confirm whether it'll work or not but you'll get the idea