Javascript from this Metronic v5.05 theme.
I have a page where I have a datatable printed and it displays fine.
I have put the whole javascript code that I use for display the table
but it is important for me that the tables reloads new data, if there is any.
I think I know how I would build this without datables.js but the guy
that I am building this project for insists I have to use it so I have to.
I have this code to make it work on my page.
//== Class definition
var Dashboard = function() {
//== Hændelser hentes
var datatableIncidents = function() {
if ($('#LOGMSGS').length === 0) {
return;
}
var datatable = $('.m_datatable').mDatatable({
layout: {
theme: 'default',
class: 'm-datatable--brand',
scroll: false,
height: null,
footer: false,
header: true,
height: 400,
smoothScroll: {
scrollbarShown: true
},
spinner: {
overlayColor: '#000000',
opacity: 0,
type: 'loader',
state: 'brand',
message: true
},
icons: {
sort: {asc: 'la la-arrow-up', desc: 'la la-arrow-down'},
pagination: {
next: 'la la-angle-right',
prev: 'la la-angle-left',
first: 'la la-angle-double-left',
last: 'la la-angle-double-right',
more: 'la la-ellipsis-h'
},
rowDetail: {expand: 'fa fa-caret-down', collapse: 'fa fa-caret-right'}
}
},
sortable: false,
pagination: true,
search: {
// search delay in milliseconds
delay: 400,
// input text for search
input: $('#generalSearch'),
},
data: {
type: 'remote',
source: {
read: {
url: 'http://beredskabsweb.dk/Template/alert-log-json.php'
}
},
pageSize: 20,
saveState: {
cookie: true,
webstorage: true
},
},
layout: {
theme: 'default',
class: '',
scroll: false,
footer: false
},
sortable: true,
filterable: true,
pagination: true,
columns: [
{
field: "alertMessageTime",
title: "Tid",
width: 100,
filterable: true,
template: function(row) {
return '<time>'+row.alertMessageTime+'</time>';
},
},
{
field: "alertMessageText",
title: "Text",
filterable: true,
template: function(row) {
return row.alertMessageText;
},
},
{
field: "alertMessageAuthor",
title: "Forfatter",
width: 240,
filterable: true,
template: function(row) {
return ''+row.MemberUsername+'';
},
},
]
});
}
return {
//== Init demos
init: function() {
// datatables
datatableIncidents();
setInterval( function () { datatableIncidents();},4000);
}
};
}();
//== Class initialization on page load
jQuery(document).ready(function() {
Dashboard.init();
setInterval(Dashboard,2000);
});
As you see i have tried to put this code in the bottom so that it should reload, but it doesn't.
setInterval(Dashboard,2000)
You can use the reload api by metronic. You can see the docs here
http://keenthemes.com/metronic/documentation.html#sec14-5
First, you should export your datatable variable from the class so you can use it for other use like add function to reload the table or etc. I added below line:
return {
datatable: function() {
return datatable;
}
};
After that, you also should create function to reload the table by the variable we just export before and by using reload api by metronic.
reload: function {
demo().datatable().reload();
}
Complete code:
//== Class definition
var Dashboard = function() {
//== Hændelser hentes
var datatableIncidents = function() {
if ($('#LOGMSGS').length === 0) {
return;
}
var datatable = $('.m_datatable').mDatatable({
layout: {
theme: 'default',
class: 'm-datatable--brand',
scroll: false,
height: null,
footer: false,
header: true,
height: 400,
smoothScroll: {
scrollbarShown: true
},
spinner: {
overlayColor: '#000000',
opacity: 0,
type: 'loader',
state: 'brand',
message: true
},
icons: {
sort: {asc: 'la la-arrow-up', desc: 'la la-arrow-down'},
pagination: {
next: 'la la-angle-right',
prev: 'la la-angle-left',
first: 'la la-angle-double-left',
last: 'la la-angle-double-right',
more: 'la la-ellipsis-h'
},
rowDetail: {expand: 'fa fa-caret-down', collapse: 'fa fa-caret-right'}
}
},
sortable: false,
pagination: true,
search: {
// search delay in milliseconds
delay: 400,
// input text for search
input: $('#generalSearch'),
},
data: {
type: 'remote',
source: {
read: {
url: 'http://beredskabsweb.dk/Template/alert-log-json.php'
}
},
pageSize: 20,
saveState: {
cookie: true,
webstorage: true
},
},
layout: {
theme: 'default',
class: '',
scroll: false,
footer: false
},
sortable: true,
filterable: true,
pagination: true,
columns: [
{
field: "alertMessageTime",
title: "Tid",
width: 100,
filterable: true,
template: function(row) {
return '<time>'+row.alertMessageTime+'</time>';
},
},
{
field: "alertMessageText",
title: "Text",
filterable: true,
template: function(row) {
return row.alertMessageText;
},
},
{
field: "alertMessageAuthor",
title: "Forfatter",
width: 240,
filterable: true,
template: function(row) {
return ''+row.MemberUsername+'';
},
},
]
});
return {
datatable: function() {
return datatable;
}
};
}
return {
//== Init demos
init: function() {
// datatables
datatableIncidents();
setInterval( function () { datatableIncidents();},4000);
},
reload: function {
demo().datatable().reload();
}
};
}();
//== Class initialization on page load
jQuery(document).ready(function() {
Dashboard.init();
setInterval(Dashboard.reload(),2000);
});
Related
I have a jqGrid that loads fine and the drop down loads fine as well but I'm not sure hot to go about updating(loading) the second dropdown based on the first dropdown's onchange event.
Here is my grid. As you can see I load countries but now I would like to load the available currencies based on the selected country.
$("#jqgrid").jqGrid
({
url: '#Url.Action("GetSupplierData", "Maintenance")',
datatype: 'json',
mtype: 'Get',
//table header name
colNames: [
'Id', 'Code', 'Name', 'Account Number', 'Contact Person', 'Contact Number',
'Email', 'Address', 'Country', 'Currency', 'InsertUserId',
'InsertDateTime', 'InsertUserName', 'UpdateUserId', 'UpdateDateTime', 'UpdateUserName'
],
//colModel takes the data from controller and binds to grid
colModel: [
{
key: true,
hidden: true,
name: 'id',
index: 'id',
editable: true
}, {
key: false,
name: 'code',
index: 'code',
editable: true
}, {
key: false,
name: 'name',
index: 'name',
editable: true
}, {
key: false,
name: 'accountnumber',
index: 'accountnumber',
editable: true
}, {
key: false,
name: 'contactperson',
index: 'contactperson',
editable: true
}, {
key: false,
name: 'contactnumber',
index: 'contactnumber',
editable: true
}, {
key: false,
name: 'email',
index: 'email',
editable: true
}, {
key: false,
name: 'address',
index: 'address',
editable: true
}, {
key: false,
name: 'countryId',
index: 'countryId',
editable: true,
edittype: 'select',
editoptions: {
dataInit: function(element) {
$.ajax({
url: '#Url.Action("GetCountries", "Maintenance")',
dataType: 'json',
type: 'POST',
success: function(response) {
var array = response;
if (array != null) {
var i;
for (i in array) {
if (array.hasOwnProperty(i)) {
if (ctyId == array[i].id) {
$(element).append("<option value=" + array[i].id +" selected>" + array[i].name +"</option>");
} else {
$(element).append("<option value=" + array[i].id + ">" + array[i].name + "</option>");
}
}
}
}
}
});
},
dataEvents:
{
type: 'change',
fn: function (e) {
}
}
},
editrules: { required: true, integer: true }
}, {
key: false,
name: 'currencyId',
index: 'currencyId',
editable: true
}, {
key: false,
hidden: true,
name: 'insertUserId',
index: 'insertUserId',
editable: true
}, {
key: false,
hidden: true,
name: 'insertDateTime',
index: 'insertDateTime',
editable: true
}, {
key: false,
hidden: true,
name: 'insertUserName',
index: 'insertUserName',
editable: true
}, {
key: false,
hidden: true,
name: 'updateUserId',
index: 'updateUserId',
editable: true
}, {
key: false,
hidden: true,
name: 'updateDateTime',
index: 'updateDateTime',
editable: true
}, {
key: false,
hidden: true,
name: 'updateUserName',
index: 'updateUserName',
editable: true
}
],
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
caption: 'Suppliers',
emptyrecords: 'No records to display',
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
pager: '#pjqgrid',
sortname: 'id',
toolbarfilter: true,
viewrecords: true,
sortorder: "asc",
autowidth: true,
multiselect: false,
onSelectRow: function(id) {
var selRowId = $("#jqgrid").jqGrid('getGridParam', 'selrow');
ctyId = $("#jqgrid").jqGrid('getCell', selRowId, 'currencyId');
}
//pager-you have to choose here what icons should appear at the bottom
//like edit,create,delete icons
}).navGrid('#pjqgrid',
{
edit: true,
add: false,
del: true,
search: true,
refresh: true
},
{
// edit options
zIndex: 1000,
url: '#Url.Action("EditSupplier", "Maintenance")',
dataType: "html",
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function(response) {
$('#alerts').html(response.responseText);
}
},
{
// add options
},
{
// delete options
zIndex: 1000,
url: '#Url.Action("DeleteSupplier", "Maintenance")',
type: "POST",
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true,
msg: "Are you sure you want to delete this?",
afterComplete: function(response) {
$('#alerts').html(response.responseText);
}
});
This Guriddo of jqGrid example will point you in the right direction.
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
I have a comment text area in an editor in the grid, but if i write some text and then i push the enter it just complete edit and not create new line. What i want is if i hit enter key, its create new line like this:
Example :
" Wrong list:
asdasdasd
asdasdasdas"
Now i just write in comment like this : "Wrong list: 1.asdasd 2.asdasdasd"
What i must to do with my js?
This is the grid i have:
This is the code :
var chat_grid = Ext.create('Ext.grid.Panel', {
id: 'chatGrid',
store: SuratPesananChatDetailStore,
height: 350,
title: 'Comment Grid',
viewConfig: {
emptyText: '<P ALIGN="CENTER"><font color="red"><U> Tidak ada data </U></font></P>',
getRowClass: function (record, rowIndex, rp, store) {
return 'rowgridspdetailnonstd-height';
}
},
plugins: Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 2, pluginId: 'rowEditingID' }),
frame: true,
loadMask: true,
stripeRows: true,
autoScroll: true,
selModel: GridChatSelectionModel,
cls: 'rowgridspdetailnonstd-height',
tbar:
[
{
id: "IdAddCommentLookUp",
text: "Add Comment",
iconCls: "icon-grid-add",
listeners:
{
'click': function () {
AddCommentListener();
}
}
},
{
id: "IdDeleteChat",
text: "Delete Comment",
iconCls: "icon-cancel",
disabled: true,
listeners:
{
'click': function () {
DeleteChatListener();
}
}
},
{
id: "IdInviteUser",
text: "Invite User",
iconCls: "icon-grid-add",
hidden: true,
listeners:
{
'click': function () {
InviteUserLookUp();
}
}
}
],
columns:
[
{
header: 'Date',
dataIndex: 'CreatedOn',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Comment',
dataIndex: 'Comment',
editor: { xtype: 'textareafield', allowblank: false, maxLength: 165, enforceMaxLength: true, height: 100, grow: true, completeOnEnter: false },
hidden: false,
width: 370,
sortable: false,
sortableColumn: false
},
{
header: 'Created By',
dataIndex: 'CreatedBy',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Department',
dataIndex: 'Department',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Document Name',
dataIndex: 'FileName',
width: 150,
hidden: false,
sortable: false,
sortableColumn: false
},
{
header: 'Upload Document',
dataIndex: 'Panel',
width: 120,
hidden: false,
sortable: false,
sortableColumn: false,
renderer: function (v, m, r, row) {
if (r.data.Panel == 'Download') {
var fileName = r.data.FilePath;
return "" + v + "";
}
else if (r.data.Panel == 'Upload') {
return "" + v + "";
}
else {
return v;
}
}
}
]
});
I have try all the way in google but i can't solve this case.
Enable keyevents of your comment editor, and stopEvent() in Enter key
Sample config:
editor: {
xtype: 'textareafield',
allowblank: false,
maxLength: 165,
enforceMaxLength: true,
height: 100,
grow: true,
completeOnEnter: false,
enableKeyEvents: true, //Listen to keyevents
listeners: {
keydown: function(field, e) {
if (e.getKey() == e.ENTER) {
e.stopEvent(); // Stop event propagation
}
}
}
}
Ref: https://www.sencha.com/forum/showthread.php?293592-Stop-RowEditing-plugin-from-completing-the-edit-on-keypress-enter
I have a kendo grid with dynamic buttons, so after update I need to reload the grid to show/hide buttons, but it's not working :(
Here's my grid:
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/CentroCusto/Lista",
dataType: "json",
cache: false
},
update: {
url: "/CentroCusto/Salvar",
contentType: "application/json",
dataType: "json",
cache: false,
complete: function (data) {
if (data.status == 500) {
alert('Ocorreu um erro ao salvar o registro.');
}
else {
$("#grid").data("kendoGrid").dataSource.read();
}
}
},
parameterMap: function (options, operation) {
if (operation == "update") {
return { models: kendo.stringify(options) };
}
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
Codigo: { type: "string", editable: false },
Descricao: { type: "string", editable: false },
Empresa: { type: "string", editable: false },
AprovadorId: { type: "number", editable: false },
NomeAprovador01: { type: "string", editable: true, validation: { required: true } },
PercentualLimite: { type: "number", editable: true, validation: { required: true, max: 100 } },
Status: { type: "string", editable: false },
AprovadorN01: { defaultValue: 1, field: "AprovadorN01" },
AprovadorN02: { defaultValue: 1, field: "AprovadorN02" },
AprovadorN03: { defaultValue: 1, field: "AprovadorN03" },
AprovadorN04: { defaultValue: 1, field: "AprovadorN04" },
NomeAprovador02: { type: "string", editable: false },
Aprovador03: { type: "number", editable: true, validation: { required: false } },
NomeAprovador03: { type: "string", editable: true, validation: { required: true } },
Aprovador04: { type: "number", editable: true, validation: { required: false } },
NomeAprovador04: { type: "string", editable: true, validation: { required: true } }
}
}
},
pageSize: 20,
serverPaging: false,
serverFiltering: false,
serverSorting: false
},
height: 450,
selectable: true,
filterable: true,
sortable: true,
pageable: true,
dataBound: gridDataBound,
columns: [{ field: "Codigo", title: "Código" },
{ field: "Descricao", title: "Descrição" },
{ field: "Empresa", title: "Empresa" },
{ field: "AprovadorN01", title: "Aprovador N01", editor: aprovadorDropDown, template: "#=AprovadorN01.Nome#" },
{ field: "AprovadorN02", title: "Aprovador N02", editor: aprovador02DropDown, template: "#=AprovadorN02.Nome#" },
{ field: "AprovadorN03", title: "Aprovador N03", editor: aprovador03DropDown, template: "#=AprovadorN03.Nome#" },
{ field: "AprovadorN04", title: "Aprovador N04", editor: aprovador04DropDown, template: "#=AprovadorN04.Nome#" },
{ field: "PercentualLimite", title: "% Limite", width: "10%", format: "{0:n}" },
{ field: "Status", title: "Status", width: "10%" },
{
command: [
{
name: "edit",
text: { edit: "Ativar", update: "Salvar", cancel: "Cancelar" },
className: "btn-successo",
imageClass: 'glyphicon glyphicon-remove-circle'
},
{
name: "inativar",
text: "Inativar",
className: "btn-excluir",
click: Inativar,
imageClass: 'glyphicon glyphicon-remove-circle'
},
{
name: "edit",
text: { edit: "Alterar", update: "Salvar", cancel: "Cancelar" },
className: "btn-alterar"
}
]
, width: "180px"
}
],
editable: {
update: true,
mode: "popup"
},
cancel: function (e) {
$("#grid").data("kendoGrid").dataSource.read();
},
edit: function (e) {
e.container.kendoWindow("title", "Alterar Centro de Custo");
}
});
function gridDataBound() {
$("#grid tbody tr .btn-successo").each(function () {
var currentDataItem = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
//Check in the current dataItem if the row is editable
if (currentDataItem.Status == "Ativo") {
$(this).remove();
}
})
$("#grid tbody tr .btn-excluir").each(function () {
var currentDataItem = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
//Check in the current dataItem if the row is editable
if (currentDataItem.Status == "Inativo") {
$(this).remove();
}
})
$("#grid tbody tr .btn-alterar").each(function () {
var currentDataItem = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
//Check in the current dataItem if the row is editable
if (currentDataItem.Status == "Inativo") {
$(this).remove();
}
})
if ($('#canEdit').val().toUpperCase() == "FALSE") {
$('#grid').find(".btn-alterar").hide();
$('#grid').find(".btn-successo").hide();
$('#grid').find(".btn-excluir").hide();
}
}
What happens is that when I get an error, the error message inside complete on update event is shown, but when the update succeed the instruction $("#grid").data("kendoGrid").dataSource.read() is not being called.
I would like to know if there's another way to do that, like save using $.ajax or if there's another event to call after "Update Success".
-----------------------------------------------------------------
UPDATE
I changed the 'data' to 'e' in the complete method under update and it's working now.
I'm using jQuery jtable. I know this is should be easy and simple but i can't get it work, from the document
the syntax should be like this , (Am i wrong?)
$('#myTable').jtable('getRowByKey', {key: 2})
and this is my jtable
$('#myTable').jtable({
paging: false,
sorting: false,
actions: {
},
fields: {
intTest: {
key: true,
create: false,
edit: false,
list: false,
},
Name: {
title: 'Name',
width: '50%'
}
}
}).jtable('load');
But i always get null from above synxtax, Any idea what could be wrong?
You can try this :
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').jtable({
paging: false,
sorting: false,
actions: {
listAction: 'ControllerName?action=list',
createAction:'ControllerName?action=create',
updateAction: 'ControllerName?action=update',
deleteAction: 'ControllerName?action=delete'
},
fields: {
intTest: {
key: true,
create: false,
edit: false,
list: false,
},
Name: {
title: 'Name',
width: '50%'
}
}
});
$('#myTable').jtable('load');
});
</script>
Try this:
var rowElement = $('#myTable').jtable('getRowByKey', 2);