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/
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 filters set up that will hide certain rows of my bootstrap-table. I have also implemented the "expandAllRows" method to display all detail-views; however, this method will expand ALL rows including those that are hidden by my filters.
How would I modify bootstrap-table.min.js in order to only show the detail-views of the rows that are visible?
I believe I need to modify the line from bootstrap-table.min.js but not sure how:
...{key:"expandAllRows",value:function(){for(var t=this.$body.find("> tr[data-index][data-has-detail-view]"),e=0;e<t.length;e++)this.expandRow(i.default(t[e[).data("index"))}...
I am using the bootstrap-table buttons method to add the custom buttons for expanding and collapsing the rows. See below:
function buttons() {
var $table = $('#table')
var $expand = $('#expand')
var $collapse = $('#collapse')
return {
btnExpand: {
text: 'Expand All Rows',
icon: 'fas fa-angle-double-down',
event: function() {
$table.bootstrapTable('expandAllRows')
},
attributes: {
title: 'Expand all rows'
}
},
btnCollapse: {
text: 'Collapse All Rows',
icon: 'fas fa-angle-double-up',
event: function() {
$table.bootstrapTable('collapseAllRows')
},
attributes: {
title: 'Collapse all rows'
}
}
}
}
Rather than modify bootstraps' functions, maybe you could just circumvent them by renaming the attribute when you filter them. Something like this
function filter(keyword) {
// your current filter logic, which hides the rows that don't match
// in this example, you have hidden them with the class 'hidden-row'
let hiddenRows=$("tr.hidden-row[data-has-detail-view='true']");
hiddenRows.each( function() {
$(this).attr({
'data-has-detail-view-hidden': 'true'
})
.removeAttr('data-has-detail-view');
})
}
function clearFilters() {
// your logic, then
let hiddenRows=$("tr.hidden-row[data-has-detail-view-hidden='true']");
hiddenRows.each( function() {
$(this).attr({
'data-has-detail-view': 'true'
})
.removeAttr('data-has-detail-view-hidden')
.removeClass('hidden-row');
})
}
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.
I have setup a kendo grid. The gird has a column containing a hyperlink. When I click on the link, I need to call a function and then I need to redirect to a new page. I know it sounds simple. I have a stand alone example which is doing same.
But when I try to use same logic in kendo grid, I am unable to get the desired result. Please help. Here is a link to Kendo Grid with a column containing hyperlink.
$('#one').kendoGrid({
dataSource: dataOne,
columns: [{
field: 'a',
template: "<a onclick=return doWork() href='/home/again/${a}'>${a}</a>"
}, {
command: 'destroy'
}],
editable: {
confirmation: false
}
});
try this soution
Add this function before grid settings:
function showFoo() {
alert('I am foo!');
return true;
}
Add following code at the end (after grid settings).
var el = document.getElementById('foo');
el.onclick = showFoo;
You need prevent the default click by event.preventDefault() and then redirect.
$('#one').kendoGrid({
dataSource: dataOne,
columns: [{
field: 'a',
template: "<a onclick=\"doWork(event, '/home/again/${a}')\" href=''>${a}</a>"
}, {
command: 'destroy'
}],
editable: {
confirmation: false
}
});
function doWork(ev, url){
ev.preventDefault();
alert("redirecting");
//... do your works
window.location.href = url;
}
I have kendo-ui grid, with some fields.
I need one of the fields to be editable on add new row, and not editable on update row.
I try to change data-source definitions before add row, and change it back before update.
But the changing doesn't help.
Is there any way to do it?
Here is what I tried to do:
var schema = {
data: 'results',
model: {
id: 'GroupCode',
fields: {
GCode: { editable: false },
GroupPrincipalId: { editable: false },
GroupPrincipalName: { editable: false },
ChildCount: { editable: true },
}
}
};
onAddClick: function(){
var gridElement = ('#myGrid').data('kendoGrid');
gridElement.dataSource.options.schema.model.fields.GroupPrincipalId.editable = true;
gridElement.dataSource.options.schema.model.fields.GroupPrincipalName.editable = true;
gridElement.addRow();
}
(onAddClick is called by my custom adding-button, not related to kendo-adding-logic);
You can use the approach described here:
http://www.telerik.com/forums/making-column-as-readonly-on-update-and-editable-on-insert-in-grid
When create button is pressed you mark a variable as isCreating and in the edit section you check it and if is false you disable the requiered field/fields.