I just start to learn about bootstrap and creating a simple project that can show a data into DataTable but I am having this error Cannot read property aDataSort of undefined
Feel Free to edit my code if i got it wrong
These are my code
JS
var globalPersonId = 1;
var dataTablesOrderedList = "";
$(document).ready(function () {
var dataTablesFirstBS = $('#dataTables-FIrstSample').DataTable({
responsive: true,
processing: true,
info: true,
search: true,
sort: false,
stateSave: true,
order: [[1, "asc"], [2, "asc"]],
lengthMenu: [[50, 100, 200, -1], [50, 100, 200, "All"]],
ajax: { "url": "/BS/GetFirstDataTable" },
columns:
[
{ data: "BSId", title: "", visible: false, searchable: false, sortable: false },
{ data: "Name", title: "Name", sClass: "alignCenter", sortable: false }
]
});
MyFirstBS();
function MyFirstBS() {
dataTablesOrderedList = $('#tblMyFirstBS').DataTable({
responsive: true,
processing: true,
info: true,
retrieve: true,
destroy: true,
search: true,
sort: false,
stateSave: true,
lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]],
ajax: {
"url": "/BS/GetFirstDataTable",
"data": function (d) {
d.BSId = globalPersonId;
}
},
columns:
[
{ data: "BSId", title: "", visible: false, searchable: false, sortable: false },
{ data: "Name", title: "Name", searchable: false, sortable: false }
]
});
}
});
Controller
public JsonResult GetFirstDataTable()
{
var Data = new List<object>();
Data = db.FirstBS.Where(x => x.BSId == x.BSId)
.Select(t =>
new
{
BSId = t.BSId,
Name = t.Name
}).ToList<object>();
return gf.DataTableAjaxHandlerClientSide(Data);
}
i solved that problem in my case by removing the order line
order: [[ 7, "desc" ]],
I solve my problem by removing the second order here is my new order now
order: [[1, "asc"]],
Related
I am trying to give the user the ability to cancel the jQuery DataTable(ver 1.10.8) ajax request by pressing the button,
but all the solutions i have tried are not giving me the required results.
Here is what i have tried :
let table = $('#data-table').DataTable({
destroy: true,
responsive: true,
serverSide: false,
autoWidth: false,
paging: true,
filter: true,
searching: true,
stateSave: true,
scrollX: true,
lengthMenu: [5, 10, 25],
language: {
"search": "Filtrer: "
},
ajax: {
url: '/User/GetUsersByDepartment',
type: 'POST',
data: {
QueryValue: departmentName,
Type: type
},
dataSrc: '',
},
columns: [
{
title: 'Display Name',
data: 'UserName',
},
{
title: 'Date Joined',
data: 'JoinedDate',
}
],
initComplete: function (settings, json) {
HideSpinner();
//Do something with json data;
}
}).order([[1, 'asc']]).draw(false);
//..This function is called upon pressing cancel button
function CancelSearch() {
table.context[0].jqXHR.abort();
HideSpinner();
}
I would like to change the tooltip name in my button 'Export to Excel'. I have angular directive (ng-grid). The directive config is :
var defaultConfig = {
dataSource: {
dataPath: "gridCtrl.getFilteredData(true)",
deep: false,
},
bindingOptions: {
dataSource: {
dataPath: "gridCtrl.getFilteredData(true)",
deep: false,
},
columns: "gridCtrl.getColumns()"
},
remoteOperations: false,
focusStateEnabled: true,
hoverStateEnabled: true,
allowColumnReordering: true,
editing: { editEnabled: false },
paging: { enabled: true, pageSize: 25 },
pager: { showPageSizeSelector: true, allowedPageSizes: [10, 25, 50, 100] },
filterRow: { visible: true, applyFilter: "auto" },
sorting: { mode: "multiple" },
searchPanel: { width: 240, placeholder: $i18n.translate("lbl_search") },
headerFilter: { visible: true },
groupPanel: { visible: true, allowColumnDragging: true, emptyPanelText: $i18n.translate("txt_arrastrar_columna") },
allowColumnResizing: true,
columnAutoWidth: false,
columnChooser: { enabled: false, emptyPanelText: $i18n.translate("lbl_hide_columns_here"), title: $i18n.translate("lbl_column_chooser") },
rowAlternationEnabled: true,
showExpandAll: false,
summary: {
totalItems: [{
column:0,
summaryType:"count",
customizeText: function (resourceInfo){ return $i18n.translate("lbl_total_items")+": "+resourceInfo.value; }
}]
},
};
The tooltip which I want to change is 'Export to Excel'.
Thanks in advance!!!
I think you are talking about dxDataGrid so use export/texts for this as you can see in the sample code below
$("#datagrid").dxDataGrid({
"export": {
"enabled": true,
"fileName": "DataGridCusomText",
"texts": {
"exportAll": "Export everything",
"exportSelectedRows": "Export only selected",
"exportTo": "Export to excel or word"
}
}
});
As you can see in the image below
var table = $('#DataTable_CentroCostos').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"type": "POST",
"url": _pathGetDatosCetroCostos,
"contentType": 'application/json; charset=utf-8',
"data": function (d, e) {
return JSON.stringify({ _DtParameters: d, CC: model });
}
},
"language": {
"url": "../../Scripts/plugins/datatables/Spanish.json",
"emptyTable": "No existen datos"
},
'columnDefs': [
{
'targets': 0,
'searchable': false,
'orderable': false
},
{
'targets': 1,
'searchable': false,
'orderable': false,
},
{
'targets': 2,
'searchable': true,
'orderable': true
},
{
'targets': 3,
'searchable': true,
'orderable': true
},
{
'targets': 4,
'searchable': true,
'orderable': true
},
{
'targets': 5,
'searchable': true,
'orderable': true
}
],
"columns": [
{ "data": "Id_Rel_Area" },
{ "data": "Id_Sociedad" },
{ "data": "Sociedad_Desc" },
{ "data": "CodCentroCosto" },
{ "data": "CodCentroCosto_Desc" },
{ "data": "Consolida_GS" }
],
"scrollX": true,
"destroy": true
});
If you want make editable your table and specified type of column, you can use this code:
You can set the type of element select or text (check my example):
Remember import the libraries:
jquery.min.js
jquery.dataTables.min.js
jquery.jeditable.js
jquery.dataTables.editable.js
jquery.validate.js
var oTable = $("#table").DataTable();
oTable.makeEditable({
sUpdateURL: "yourURL"),
aoColumns: [
{
cssclass: 'span12',
indicator: '<img src="../../recursos/img/loading.gif" height="16"/>',
tooltip: 'Doble click para cambiar el Cargo.',
loadtext: '<img src="../../recursos/img/loading.gif" height="16" />',
type: 'select',
style: 'margin: 0px; text-align: center; padding: 3px',
onblur: 'submit',
data: cargos,
fnOnCellUpdated: function (sStatus, sValue, settings) {
}
},
{
cssclass: 'fecha-inicio span12 required m-wrap',
indicator: '<img src="../../recursos/img/loading.gif" height="16"/>',
tooltip: 'Doble click para cambiar la fecha.',
loadtext: '<img src="../../recursos/img/loading.gif" height="16" />',
type: 'text',
style: 'margin: 0px; text-align: center; padding: 3px',
onblur: 'submit',
placeholder : 'dd/mm/YYYY',
fnOnCellUpdated: function (sStatus, sValue, settings) {
}
}
]
});
I cant select any rows in my JqGrid so I came across http://www.jqgrid.com/jqgrid/forum/codemerx-jqgrid-for-asp-net/146-can-t-select-rows. Which says I need a ID for every row. I add data to my Grid each time I press a button. I tried giving each row a id with a simple click counter function. But then I when I try to sort all ID's dissapear from the Grid.
Any suggestion how I can solve this?
Grid
$(document).ready(function () {
// Configuration for jqGrid Example 1
$("#table_list_1").jqGrid({
data: currentTime,
datatype: "local", //if enabled id dissapear
height: "100%",
autowidth: true,
shrinkToFit: true,
loadonce: true,
sortable: true,
rowNum: 100,
rownumbers: true,
rowList: [10, 20, 30],
colNames: ['Id','Time', 'Note'], // 'Id'
colModel: [
{name: 'id', index:'id', width:60, sorttype: 'number', sortable: true},
{ name: 'time', index: 'time', width: 60, sorttype: 'number', sortable: true, editable: true, formatter: "number" },
{ name: 'note', index: 'note', width: 60, cellEdit: true, editable: true }
],
pager: "#pager_list_1",
viewrecords: true,
caption: "Example jqGrid 1",
add: true,
edit: true,
addtext: 'Add',
edittext: 'Edit',
hidegrid: false
});
$('#table_list_1').navGrid('#pager_list_1',
{ edit: false, add: false, del: false, search: true, refresh: true, view: false, position: "left", cloneToTop: true },
{ reloadAfterSubmit: true });
$('#table_list_1').navButtonAdd('#pager_list_1',
{
buttonicon: "ui-icon-pencil",
title: "Edit",
caption: "",
position: "last",
});
How I add data
var currentTime = [];
var id = 0;
function doKeyDown(e) {
//test document.getElementById("currentTimeText").innerHTML = currentTime;
if (e.keyCode == 49 & wavesurfer.isPlaying()) {
// KEY = " 1 "
id += 1;
currentTime.push(wavesurfer.getCurrentTime());
jQuery("#table_list_1").addRowData("", { id: id, time: wavesurfer.getCurrentTime() });
//test document.getElementById("currentTimeText").innerHTML = currentTime;
wavesurfer.addRegion({
start: wavesurfer.getCurrentTime(),
end: wavesurfer.getCurrentTime() + 0.1,
color: '#19aa8d',
resize: false,
drag: false,
});
}
}
The rowid is not the value from id property, but the first parameter which you use with the same "" value. I think it's the main bug in your code. The call
jQuery("#table_list_1").addRowData("", { id: id, time: wavesurfer.getCurrentTime() });
should be fixed at least to
jQuery("#table_list_1").addRowData(undefined, { id: id, time: wavesurfer.getCurrentTime() });
Solved it like this:
jQuery("#table_list_1").addRowData(id, { id: id, time: wavesurfer.getCurrentTime() });
So instead of "undefined" I just gave it "id"
This solved my select problem too.
I use jqGrid in ASP.NET page. In .aspx page, I have -
<div id="divMy" style="width: 100%; overflow: auto;">
<div id="divMyTable" style="width: 97%; display: none;">
<table id="MyTable">
<tr>
<td></td>
</tr>
</table>
<div id="divMyTablePager"></div>
</div>
</div>
In .js file, I have -
var CASortInfo = {
sortname: $('#MyTable').jqGrid('getGridParam', 'sortname'),
sortorder: $('#MyTable').jqGrid('getGridParam', 'sortorder'),
page: $('#MyTable').jqGrid('getGridParam', 'page'),
rows: $('#MyTable').jqGrid('getGridParam', 'rows')
};
$("#MyTable").jqGrid({
url: "../Services/My.asmx/ReadMyTable",
datatype: 'json',
mtype: 'POST',
prmNames: {
search: "isSearch",
nd: null,
rows: "PageSize",
page: "PageNumber",
sort: "sortField",
order: "sortOrder"
},
postData: { ID: $('#hfID').val() },
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
colNames: ["", "My", "Date Created", "Notes", "Action"],
colModel: [
{ name: "MyID", index: "MyID", resizable: false, hidden: true },
{ name: "MyName", index: "MyName", resizable: false, width: 250 },
{ name: "CreatedOn", index: "CreatedOn", resizable: false },
{ name: "Notes", index: "Notes", resizable: false },
{ name: "Buttons", formatter: ActionButtons, width: 70 }
],
sortname: "CreatedOn",
sortorder: "asc",
ignoreCase: true,
autowidth: true,
shrinkToFit: true,
height: "auto",
pager: "#divMyTablePager",
toppager: true,
rowNum: 20,
rowList: [5, 10, 20, 50],
viewrecords: true,
gridview: true,
rownumbers: false,
hoverrows: true,
multiselect: false,
jsonReader: {
root: function (obj) { return obj.d.rows; },
page: function (obj) { return obj.d.page; },
total: function (obj) { return obj.d.total; },
records: function (obj) { return obj.d.records; },
repeatitems: false,
id: "0"
},
beforeRequest: function () {
CASortInfo = {
sortname: $('#MyTable').jqGrid('getGridParam', 'sortname'),
sortorder: $('#MyTable').jqGrid('getGridParam', 'sortorder'),
page: $('#MyTable').jqGrid('getGridParam', 'page'),
rows: $('#MyTable').jqGrid('getGridParam', 'rows')
};
},
gridComplete: function () {
$('#MyTable').jqGrid('setGridParam', {
sortname: CASortInfo.sortname,
sortorder: CASortInfo.sortorder,
page: CASortInfo.page,
rows: CASortInfo.rows
});
$("#divMyTable").show();
$("#MyTable").setGridWidth($("#divMyTable").width());
}
});
I can see the responded JSon data as -
{"d":{"__type":"Core.DTO.JQGridModel","total":"1","page":"1","records":"1","rows":[{"MyID":"627d6ca3-5bbc-4aa8-9e53-76afe4869ae2","MyName":"This\u0027s a test.","CreatedOn":"\/Date(1394135983350)\/","Notes":"Yes","isActive":null}]}}
I can see breakpoint is hit in gridComplete. What needs to be done to show the data grid with data?
Thanks,
Just found out that I messed up the case in divMyTable. After it is corrected, it is working. Thanks