is their anyway to get only export button using datatable means no search, no filter just export button
var table = $('#surveyTable').DataTable({
searchPane:false,
searching: false,
paging:false,
"bPaginate": false,
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
title:"{{$pageTitle}}",
className:'btn btn-primary r_button'
},
{
extend: 'pdfHtml5',
title:"{{$pageTitle}}",
orientation:'portrait',
pageSize:'A4',
className:'btn btn-primary r_button'
}
]
});
Related
Select2 is not working inside the datatable when i resize the window to mobile view. when i resize datatable is collapsed. When i expand the feild select2 is visible but when i click it is not showing the option.
I have tried fnDrawCallback(),drawCallback() inside the datatable initialisation. But not able to reslove the issue
var DatTable = $('#tblRoleMap').DataTable( {
"autoWidth": true,
"responsive": true,
"processing": true,
"order": [[1, 'asc']],
drawCallback: function() {
$(".js-example-basic-multiple").select2({
placeholder: "Select Role",
allowClear: true
});
}
} );
Has anyone add the kendoUpload control with in the kendo grid? I would like to add it so I dont have to build an extra panel to store the controls?
Would I add it as a template?
if (!kendoGrid) {
$("#kgridDocuments").kendoGrid({
scrollable: false,
toolbar: ["search", "create","save", "cancel"],
],
noRecords: {
template: "No Result Found."
},
});
}
var kendoUpload = $("#uploadMeetingDocument").data("kendoUpload");
if (!kendoUpload) {
$("#uploadMeetingDocument").kendoUpload();
}
Uploaded code
var uploadInput = '<form method="post" action="#"><div><input name="upload" type="file" /></div></form>';
if (!kendoGrid) {
$("#kgridDocuments").kendoGrid({
scrollable: false,
toolbar: ["search", "create", "save", "cancel"],
dataBound: function (e) {
$("input[type='file']").kendoUpload();
},
columns: [
{
template: "#= uploadInput #",
title: "File Upload"
},
{
field: "FileType",
title: "File Type"
}
],
noRecords: {
template: "No Result Found."
},
});
}
Yes, you can add an upload component inside the grid. Use the column template to create the input tag and the dataBound function to initialize the kendoUpload component. Here is an example may help you.
<table id="grid" style="width: 100%"></table>
<script type="text/javascript">
var uploadInput = '<form method="post" action="#"><div><input name="upload" type="file" /></div></form>';
$("#grid").kendoGrid({
dataSource: yourDataSource,
dataBound: function(e) {
$("input[type='file']").kendoUpload();
},
columns: [
{
field: "Id",
title: "Id",
filterable: false
},
{
field: "StatusText",
title: "StatusText"
},
{
title: "Upload",
filterable: false,
sortable: false,
template: "#= uploadInput #"
}
]
});
</script>
I've used the hierarchical kendo for showing my data, I mean each row has a child which contains a grid of rows' details,my kendo should appear based on the data that user enter in inputs and after click on a button , it works well for the first time but if user change the inputs' data and click the button again, the kendo does not show the grid of details it just show me my parent grid but if the user refresh the page and then change the data and click the button it works fine. after a lot of search I couldn't find the reason.can anyone help me
var grid;
var createGrid = function () {
grid = $("#mygrid").kendoGrid({
dataSource: {
data: schema.PNR_item,
schema: {
hasChildren: true,
model:{
fields:fields,
}
},
pageable: true,
height: 550,
pageSize: 6,
serverPaging: true,
serverSorting: true,
//columns
},
height: 600,
sortable: true,
pageable: true,
scrollable: true,
resizable:true,
columns: columns,
detailTemplate: '<div class="grid" ></div>',
detailInit: function (e) {
e.detailRow.find(".grid").kendoGrid({
dataSource: e.data.Details,
columns: details_columns,
schema:{
model:{
fields: details_fields
}
}
});
},
}).data("kendoGrid");
}//end of createGrid function
createGrid();
I am referring the following Datatable example -
https://datatables.net/examples/api/select_single_row.html
The example captures onclick event on the entire row
$('#example tbody').on( 'click', 'tr', function (){}
I wish to capture an event on the click of a particular columns,
say column Name, Position and Office.
How do I do that?
If you know the table colums index then you might you use this.
$('#example tbody').on( 'click', 'tr td:eq(0)', function (){
alert("col1");
});
$('#example tbody').on( 'click', 'tr td:eq(1)', function (){
alert("col2");
});
$('#example tbody').on( 'click', 'tr td:eq(4)', function (){
alert("col5");
});
You can access clicks in columns hooking and event handler in the elements you want in the fnRowCallback.
Here is a complete example with a table with 2 extra columns showing an icon that receives the click:
$('#example').DataTable({
dom: 'lfrt',
paging: false,
rowBorder: true,
hover: true,
serverSide: false,
rowHeight: 30,
order: [[ 1, 'asc' ]],
columns: [
{
title: 'Id',
visible: false,
searchable: false
},
{
title: 'version',
visible: false,
searchable: false
} {
title: Name'
},
{
data: null,
title: 'Diagram',
searchable: false,
sortable: false,
defaultContent: '<i class="fa fa fa-sitemap icon-btn" data-btnaction="grafo"></i>',
className: 'text-center'
},
{
data: null,
title: 'History',
searchable: false,
sortable: false,
defaultContent: '<i class="fa fa-history icon-btn" data-btnaction="appdetail"></i>',
className: 'text-center'
}
],
select: false,
fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
$('td > i', nRow).on('click', function() {
// if you have the property "data" in your columns, access via aData.property_name
// if not, access data array from parameter aData, aData[0] = data for field 0, and so on...
var btnAction = $(this).data('btnaction');
if (btnAction === 'grafo'){
} else if (btnAction === 'appdetail'){
// do something......
}
});
}
});
I have this code but i can't do a search filter with space or comma,
I need do a smart search with ajax on datatables
Datatables ajax code:
$(document).ready(function () {
oDtable = $('#exc').dataTable({
"scrollX": true,
"scrollY": 300,
"oSearch": { "bSmart": false, "bRegex": true },
"processing": true,
"serverSide": true,
"ajax": "/ajax/getJSONResultsForDT?table=eventos&primaryKey=id",
"columns": [
{"data": 'nombre'},
{"data": 'descripcion'},
{"data": 'fecha_inicio'},
{"data": 'fecha_fin'},
{"data": "created_by"},
{"data": "updated_by"},
{"data": null}, //6 y 7
{"data": null}
],
"columnDefs": [
{
"targets": [6],
"orderable": false,
"render": function (data) {
$id = data.id;
return '<button class="btn btn-default" data-toggle="modal" data-target="#edit-modal">Edit</button>';
}
},
{
"targets": [7],
"orderable": false,
"render": function (data) {
return '<a class="btn btn-danger" data-fancybox-type="iframe">' + 'Delete' + '</a>';
}
}],
"bPaginate": true,
"sPaginationType": "full_numbers",
});
});
don't know what else to write
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH