I am using jQuery DataTables and it's working well. I just want to show a text message while the table is being initialized.
I am not using server side.
How can I do it?
$(document).ready(function() {
$(".table").DataTable({
"bFilter": true,
"lengthMenu": [ 10, 25, 50, 75, 100, 150, 200, 500, 1000 ],
"columnDefs": [{ targets: 'no-sort', orderable: false }],
"pageLength": 50,
"language": {
"processing": "Loading..."
},
"initComplete": () => {
$(".table").show();
}
});
});
I tried with preinit but no luck, and I also do not want to keep displaying the html if there is no request for datatables, something like beforesend.
I am utilizing the datatables length menu through javascript on my asp page and it works great where users can select how many items to show on a page. However, I want to make it so that if a user uses our search bar and clicks search that the length menu automatically changes to "All" which is a current option. I am not sure how to access the length menu options through vb, asp, or javascript.
Javascript on ASP page:
$(document).ready(function () {
var dtable = $('#<%=GridView1.ClientID%>').DataTable({
colReorder: true, stateSave: true,
dom: 'Bfrtilp',
buttons: [
{
extend: 'colvis'
},
{
extend: 'csv',
text: 'Export',
title: 'Applications',
exportOptions: {
columns: ':visible'
}
}
],
columnDefs: [
{
targets: [],
visible: false
},
],
"lengthMenu": [[15, 25, 50, 100, -1], [15, 25, 50, 100, "All"]],
"scrollX": true
});
$('#divGrid').show();
$('#divLoading').hide();
dtable.columns.adjust().draw();
$('#<%=txtSearch.ClientID%>').focusTextToEnd();
$('#<%=txtSearch.ClientID%>').keypress(function (e) { if (e.which == 13) { e.preventDefault(); $('#<%=btnSearch.ClientID%>').click(); return false; } });
$(".buttons-colvis").click(function () {
if ($(".dt-button-collection").height() > 350) {
$(".dt-button-collection").css("height", "350px");
$(".dt-button-collection").css("overflow-y", "visible");
}
});
});
I am developing a application in which data is display in kendo grid.Now I want to export this pdf/excel.
For this I create a sample -
http://jsfiddle.net/pporwal26/y6KdK/83/
$("#grid").kendoGrid({
toolbar: ["pdf"],
pdf: {
allPages: true
},
pageable: true,
scrollable: true,
pageable: {
pageSize: 2,
refresh: true,
change: function(e) {
nextData(e.index);
}
},
dataSource: {
serverPaging: true,
schema: {
data: "FileList",
total: "total",
},
data: jsonData
},
});
}
In this sample I have two problems -
export this grid in pdf/excel.
When I click on next page my next page json is come from the function.Si I want that I download pdf with all page data.
Be sure you have referenced JZIP script. You can use this CDN:
src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"
I'm loading local file (I'm parsing csv file into json and then transfer the array to jqGrid). Table generated through jqGrid should allow user to modify, add and delete the data in the grid. Everything seemed to work perfectly until I wanted to add a row to my grid. One of the columns had a parameter key = true which is my id for the rows. When I try to add new row, the grid changes my id into jpg1. The others columns are fine. Below is the code I'm using:
$("#jqGrid").jqGrid({
datatype: "local",
data: myData,
editurl: "clientArray",
colModel: [
{
label: 'Kod',
name: 'Kod',
width: 60,
editable: true,
key: true,
sorttype: 'number'
},
{
label: 'Firma',
name: 'Firma',
width: 120,
editoptions:
{
size: 40,
sopt:['cn']
},
editable: true,
sorttype: 'string'
},
{
label: 'Adres',
name: 'Adres',
width: 80,
editoptions: {size: 40},
editable: true
},
{
label: 'Miasto',
name: 'Miasto',
width: 80,
editoptions:
{
size: 40,
sopt:['cn']
},
editable: true
}
],
height: 'auto',
autowidth: true,
shrinkToFit: false,
forceFit: false,
autoencode: true,
viewrecords: true,
caption: "Title",
pager: "#jqGridPager",
sortable: true,
ignoreCase: true,
sortname: 'Kod',
sortorder: 'asc',
rowNum: 5,
rowList: [5, 10, 20, "10000:All"],
ondblClickRow: function(rowid) {
$("#jqGrid").jqGrid('editGridRow', rowid,
{
editCaption: "The Edit Dialog",
zIndex:100,
recreateForm: true,
closeAfterEdit: true,
width: 900,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
});
}
});
$('#jqGrid').jqGrid('navGrid',"#jqGridPager",
{ edit: true, add: true, del: true, search: false, refresh: true, view: true, cloneToTop: true},
// options for the Edit Dialog
{
editCaption: "The Edit Dialog",
zIndex:100,
recreateForm: true,
closeAfterEdit: true,
reloadAfterSubmit: true,
width: 900,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
width: 900,
zIndex:100,
closeAfterAdd: true,
recreateForm: true,
reloadAfterSubmit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dialog
delSettings,
// options for the Search Dialog
{
zIndex:100
},
// options for the View Dialog
{
width: '100%'
});
I'm attaching a screenshot that shows a problem:
Photo
The data I use is a file parsed into JSON array via Papaparse.js plugin.
EDIT:
I've added the test data if somebody would like to test the code.
var myData = [];
myData.push(
{
Kod: 1.1,
Firma: 'Hutchinson',
Adres: '5th Avenue',
Miasto: 'Wroclaw'
},
{
Kod: 2.1,
Firma: 'BMW',
Adres: '6th Avenue',
Miasto: 'Warsaw'
});
I will be grateful for any help.
If you need the grid only for local editing, you can consider just remove key: true property to solve the problem. It's the way, which I would recommend you. You can include id property in the input data which will be used as value of rowid (id of <tr> elements).
Alternatively you can change the block "options for the Add Dialog" to the following
// options for the Add Dialog
{
width: 900,
zIndex:100,
closeAfterAdd: true,
recreateForm: true,
reloadAfterSubmit: true,
onclickSubmit: function (options, postdata, frmoper) {
// save Kod in some other parameter
return {myKod: postdata.Kod};
},
afterSubmit: function (jqXHR,postdata, frmoper) {
// restore the correct value
postdata.Kod = postdata.myKod;
// inform jqGrid that it was not an error
return [true];
}
},
You still don't would be able to change the id of the row in the way.
By the way you wrote that you use jqGrid 4.7.1. I want remind you that jqGrid 4.7.0 is the last version which is free. It's the reason why I started free jqGrid project which still free. You can get it here (see readme and wiki).
The demo shows an example of the above code fixes using free jqGrid 4.8.
I have a problem with the ExtJS 4 grid. I am using ExtJS 4.2.1, and whenever I load data into my grid using the loadRawData function, it automatically scrolls to the bottom, or near the bottom. Also, I am using grouping in the grid, and whenever I expand or collapse the node, it auto scrolls to the bottom again. This is really frustrating, and I can't seem to find a solution. I tried any solutions in this post from the Sencha forums, but nothing seemed to work.
This is my grid config:
gridPanel = new Ext.grid.Panel({
header: false,
title: 'Resultset',
id: 'resultTable',
width: 400,
split: true,
collapsible: true,
collapseMode: 'mini',
store: {
model: 'resultset',
autoLoad: false,
pageSize: 100,
proxy: {
type: 'ajax',
url: STORE_URL,
reader: {
type: 'json',
root: 'rows'
}
},
groupField:'tid'
},
features: [{ftype:'grouping'}],
deferRowRender: false,
columns: createColumns(),
selModel: {
checkOnly: true,
moveEditorOnEnter: false,
width: 20,
mode: 'MULTI'
},
selType: 'rowmodel',
tbar: [ createMenubar() ],
bbar:[ createPagingBar() ],
/*viewConfig: {
preserveScrollOnRefresh: true
}*/
});
And then when I load the data, I just do something like this:
var store = gridPanel.getStore();
store.loadRawData(data, false);
Any help would be appreciated!