Updating Div with Total Records Outside of table - javascript

I’m working with datatables and trying to figure out what I’m doing wrong. I am trying to display the total number of rows when the table hits the draw event on the table. Right now with the code, I’m showing below I am not getting any console errors. The element where the number is supposed to be updated is correct. I am just not getting it to render with the correct count.
("use strict");
const renderStatusCell = (data, type, full, meta) => {
const status = {
0: { title: "Inactive" },
1: { title: "Active" }
};
if (typeof status[data] === "undefined") {
return data;
}
return status[data].title;
};
var table = $('[data-table="users.index"]');
// begin first table
table.DataTable({
// Order settings
order: [[1, "desc"]],
ajax: "/titles",
columns: [
{ data: "id", title: "User ID" },
{ data: "name", title: "Name" },
{ data: "slug", title: "Slug" },
{ data: "introduced_at", title: "Date Introduced" },
{ data: "is_active", title: "Status", render: renderStatusCell },
{
data: "action",
title: "Actions",
orderable: false,
responsivePriority: -1
}
]
});
var updateTotal = function() {
table.on("draw", function() {
$("#kt_subheader_total").html(table.fnSettings().fnRecordsTotal());
});
};
I expected when the table was rendered to update the dom with the correct number of rows however the div does not get updated.

I don't understand your problem, but I think you need something like that.
table
.row($(this).parents('tr'))
.remove()
.draw();
or
table.ajax.reload();

I believe you need to wait until the HTML loads before running all your javascript code. Also, if you are storing the total, you not make it a function but rather just store the value.
'use strict';
// this will make sure all the HTML loads before the JavaScript runs.
$(function() {
var table = $('[data-table="users.index"]');
var updateTotal = null; // store in a variable
const renderStatusCell = (data, type, full, meta) => {
const status = {
0: { title: "Inactive" },
1: { title: "Active" }
};
if (typeof status[data] === "undefined")
return data;
return status[data].title;
};
// begin first table
table.DataTable({
// Order settings
order: [[1, "desc"]],
ajax: "/titles",
columns: [
{ data: "id", title: "User ID" },
{ data: "name", title: "Name" },
{ data: "slug", title: "Slug" },
{ data: "introduced_at", title: "Date Introduced" },
{ data: "is_active", title: "Status", render: renderStatusCell },
{
data: "action",
title: "Actions",
orderable: false,
responsivePriority: -1
}
]
});
table.on("draw", function() {
updateTotal = table.fnSettings().fnRecordsTotal();
$("#kt_subheader_total").html(table.fnSettings().fnRecordsTotal());
});
});

Related

Issue with Datatable and JSON calculation

I am using datatable, loading data from ajax and preforming operation with javacript.
var table = $('#example').DataTable({
"ajax": {
"url": apiurl,
"type": 'GET',
"datatype": 'json'
},
// data: dataSet,
columns: [
{ title: "Item Key", data: "itemKey" },
{ title: "Description", data: "description" },
{ title: "Pounds", data: "pound" },
{
title: "Current Cost", data: function (data, type, row) {
return '<input type="number" class ="price-input" value="' + data.cost + '" style="background-color:lightgoldenrodyellow;">';
}
},
{ title: "Current Cost", data: "cost" },
{ title: "Unit", data: "unit" },
{
title: "Quantity", data: "quantity"
},
{
title: "Total", data: function (data, type, row) {
return data.cost * data.quantity;
}
},
{
title: "New Total", "data": "total",
"render": function (data, type, row) {
return "$" + data;
}
}
],
});
function calcTotal(q, p) {
var t = 0.00;
t = parseInt(q) * parseFloat(p);
return t.toFixed(2);
}
var table = $('#example').DataTable();
$.each(table, function (i, r) {
r.total = calcTotal(r.qty, r.price);
});
$("#example").on("change", ".price-input", function (event) {
var row = $(this).closest("tr");
var qty = table.cell($("td", row).eq(6)).data();
var price = $(this).val();
var total = table.cell($("td", row).eq(8).get(0));
total.data(calcTotal(qty, price)).draw();
});
'''
My problem is in the last column, when the datatable loads, value appear as undefined, when I change the value in textbox I am getting the right result and number How Can I able to see right number when Datatable loads? Please guide me

Get javascript array first element

How can I get the first element of an array in javascript by a means other than array[0]?
I do not know why, but for some reason the array that gets passed into the method has its first, and only, element at index 5, not 0.
Edit - Here is my attempt at providing a minimal reproducible example.
// Initialize database connection string datatable editor
editor = new $.fn.dataTable.Editor({
table: "#remoteSqlDatabaseTable",
ajax: $("#UpdateIntegrationRemoteSqlDatabaseAction").val(),
fields: [
{ label: 'Reference Name', name: 'Name' },
{ label: 'IP Address or Host', name: 'IpAddress' },
{ label: 'Port', name: 'Port' },
{ label: 'Username', name: 'UserCredential' },
{ label: 'Password', name: 'PasswordCredential', def: '' },
{ name: 'button' }
]
});
editor
.on('open', function (e, type) {
if (type === 'inline') {
// Listen for a tab key event when inline editing
$(document).on('keydown.editor', function (e) {
if (e.keyCode === 9 || e.keyCode === 13) {
editor.blur();
}
});
}
if (editor.s.includeFields[0] === 'PasswordCredential') {
editor.field(editor.s.includeFields[0]).val('');
}
})
.on('close', function () {
$(document).off('keydown.editor');
})
.on('preSubmit', function (e, edit) {
if (edit.data[1].PasswordCredential !== undefined) {
var value = edit.data[1].PasswordCredential;
// check for null or whitespace
if (typeof value === 'undefined' || value == null || value.replace(/\s/g, '').length < 1) {
editor.close();
return false;
}
}
});
// Configure inline editing columns
$('#remoteSqlDatabaseTable').on('click', 'tbody td:not(:last-child)', function (e) {
editor.inline(this, {
submitOnBlur: true
});
});
// Reload data on edit to handle reordering
//editor.on("submitSuccess", function () {
// var table = $('#databaseConnectionTable').DataTable();
// console.log('submitSuccess');
// table.ajax.reload(function () {
// initTableStyling();
// });
//})
// Initialize datatable
var table = $('#remoteSqlDatabaseTable').DataTable({
paging: false,
searching: false,
info: false,
ordering: false,
ajax: $("#GetIntegrationRemoteSqlDatabasesAction").val(),
dom: 'Bfrtip',
columns: [
{ data: 'Name' },
{ data: 'IpAddress' },
{ data: 'Port' },
{ data: 'UserCredential' },
{ data: 'PasswordCredential' },
{ data: null }
],
select: false,
responsive: false,
buttons: [],
columnDefs: [
{
targets: -1,
data: null,
render: function (data, type, row, meta) {
return '<button class="btn red" type="button">Delete</button>';
}
}
],
initComplete: function (settings, json) {
//initTableStyling();
}
});
Like i said, i am not sure exactly where the problem is coming from. The method that is breaking is the editor.on('presubmit'), where it check if(edit.data[1] . edit.data[1] is the object that only has a 5th element.
this is everything relating to the table whos editing is the problem.
Updated answer, this works with objects. It isn't a pretty as find filter answers but it simply works.
Loop through the object and set a value.
Since there is only one element, it will set the variable without overwriting anything.
testArray = {"5" : "test"};
var val = "";
for(key in testArray){val = testArray[key];}
console.log(val);
You can do this:
let [first_element] = your_array

How to set cutom template for kendo grid columns

I need to set Kendo grid action button Icon based on value. My code as follows,
function InitProductServicesGrid() {
var prodServiceDataSource = new kendo.data.DataSource({
transport: {
type: "json",
read:
{
url: SERVER_PATH + "/LTSService/ProductsService.asmx/GetProductServiceDetailsList",
type: "POST",
contentType: 'application/json',
data: GetAdditonalData,
datatype: "json"
},
update:
{
url: SERVER_PATH + "/LTSService/ProductsService.asmx/SaveProductService",
type: "POST",
contentType: 'application/json',
datatype: "json"
}
},
schema: {
data: function (result) {
return JSON.parse(result.d);
},
model: {
id: "Id",
fields: {
Id: { type: "int" },
ServiceTime: { type: "string" },
IsActive: { type: "boolean"}
}
}
},
requestEnd: function (e) {
if (e.type === "destroy") {
var grid = $("#productServicesGrid").data("kendoGrid");
grid.dataSource.read();
}
},
error: function (e) {
e.preventDefault();
if (e.xhr !== undefined && e.xhr !== null) {
var messageBody = e.xhr.responseJSON.Message;
ShowGritterMessage("Errors", messageBody, false, '../App_Themes/Default/LtsImages/errorMessageIcon_large.png');
var grid = $("#productServicesGrid").data("kendoGrid");
grid.cancelChanges();
}
},
pageSize: 20,
});
$("#productServicesGrid").kendoGrid({
dataSource: prodServiceDataSource,
sortable: true,
filterable: false,
pageable: true,
dataBound: gridDataBound,
editable: {
mode: "inline",
confirmation: false
},
columns: [
{ field: "Id", title: "", hidden: true },
{
field: "ServiceTime",
title: "Time Standard",
sortable: false,
editor: function (container, options) {
var serviceTimeTxtBox = RenderServiceTime();
$(serviceTimeTxtBox).appendTo(container);
},
headerTemplate: '<a class="k-link" href="#" title="Time Standard">Time Standard</a>'
},
{
title: "Action", command: [
{
name: "hideRow",
click: hideRow,
template: comandTemplate
}
],
width: "150px"
}
]
});
}
I wrote a custom template function as follows,
function comandTemplate(model) {
if (model.IsActive == true) {
return '<a title="Hide" class="k-grid-hideRow k-button"><span class="k-icon k-i-lock"></span></a><a title="Hide"></a>';
}
else {
return '<a title="Show" class="k-grid-hideRow k-button"><span class="k-icon k-i-unlock"></span></a><a title="Show"></a>';
}
}
But when I debug the I saw the following value for model value.
I followed this sample code as well. here you can see, I also set the custom template like the sample code. Please help me to solve this. Why I can't access model IsActive value from comandTemplate function.
Updated
When clicking hideRow action, I access the dataItem as follows.
function hideRow(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
if (dataItem.IsActive == true) {
dataItem.IsActive = false;
}
else {
dataItem.IsActive = true;
}
}
Is there any possible way to access data from template function as above or any other way?
I would suggest a different approach because you can't access grid data while rendering and populating grid.
My suggestion is to use two actions and hide it based on the flag (in your case IsActive).
Something like this: Custom command
NOTE: in visible function you can access item!
EDIT: you can access it and change it on dataBound traversing through all data.
Check this example: Data bound
I don't see the advantage of relying on the grid commands. You can render any button you want yourself and and use the dataBound event to bind a click handler:
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{
template: function(dataItem) {
const isActive = dataItem.isActive;
return `<a title=${isActive ? "Hide": "Show"} class="k-grid-hideRow k-button"><span class="k-icon k-i-${isActive ? 'lock' : 'unlock'}"></span></a>`
}
}
],
dataBound: function(e) {
e.sender.tbody.find(".k-grid-hideRow").click(evt => {
const row = evt.target.closest("tr")
const dataItem = e.sender.dataItem(row)
dataItem.set("isActive", !dataItem.isActive)
})
},
dataSource: [{ name: "Jane Doe", isActive: false }, { name: "Jane Doe", isActive: true }]
});
Runnable Dojo: https://dojo.telerik.com/#GaloisGirl/eTiyeCiJ

How do I make search input in kendo grid?

I am a new Software Developer. In my new company, I use their framework to code. And its using Kendo. I tried to make a search field for Kendo Grid so I can find a specific information in that grid. I tried this method but it doesn't work. Honestly, I don't understand how to use 'transport' things. I call an API to get datas for my grid and I call it in my grid's line of code.
{
type: 'panel',
fields: [{
type: 'panel',
text: 'Payment List',
name: 'payment',
fields: [{
type: 'grid',
name: 'paymentGrid',
data: [],
toolbar: function () {
return `<div class="toolbar" style="width:370px">
<label class="search-label" for="search-reservation" style="color:white"> Cari berdasarkan No. Pesanan: </label>
<input type="search" id="search-reservation" class="search-class">
</div>`
},
sourceOptions: {
pageSize: 10
},
options: {
selectable: true,
autoheight: true,
allowCopy: true,
altrows: true,
pageable: {
refresh: true,
buttonCount: 5,
pageSizes: [10, 20, 50, 100]
},
dataBinding: function () {
record = (this.dataSource.page() - 1) * this.dataSource.pageSize();
}
},
url: function (option) {
var arg = option.data
$.ajax({
method: 'POST',
url: APILink,
data: JSON.stringify(arg),
dataType: 'json',
contentType: 'application/json',
}).done(function (resp) {
if (resp.data != null) {
var nameMap = [];
$.each(resp.data, function (key, val) {
nameMap.push({
id: val.id,
supplier: val.supplier,
reservation_id: val.reservation_id,
currentPayment: val.state
});
});
option.success({
data: nameArray,
total: resp.total
});
}
}).fail(function (jqXHR, status, err) {
option.error(err);
});
},
fields: [{
name: 'number',
text: 'No. ',
template: "#= ++record #",
width: 70,
}, {
name: 'supplier',
text: 'Supplier',
}, {
name: 'reservation_id',
text: 'No. Reservation',
}, {
name: 'currentPayment',
text: 'status',
}, {
name: 'checked',
text: 'choose',
width: 100,
template: function (item) {
return !!item.checked
? `<input id="${item.id}" name='ceklis-boks[]' class="check" checked value="${item.id}" type=\'checkbox\' />`
: `<input id="${item.id}" name='ceklis-boks[]' class="check" value="${item.id}" type=\'checkbox\' />`
}
}],
onDataBound: 'dataBound',
}]
}
Then I used the same code as I mention before in previous link, and replace the ID (#) in that code with mine. But, it won't work. I come to his fiddle and I thought it was because his PlainDs variable and $("#category").kendoAutoComplete({...}) or serverPaging, serverSorting, or serverFiltering. So, I comment all of it here and still working properly. So basically, I can just write the code from line 49 - 81 like in his post. But why it doesn't work? For your information, I call the grid with its name or sometimes I give it a class. But it won't work. Is it a problem if I use class or name instead of ID?
The term "Not working" is too broad here, if you can be more specific on what is not working, we may be able to pinpoint better. However I assume you know how to get the grid to display and so on. so basically to get the search to work I usually have this in the click event of my "Search" button:
var grid = $("#myGrid").data("kendoGrid");
var ds = grid.dataSource;
var searchVal = $("#search-reservation").val();
if ( searchVal ) {
ds.filter({
field: "reservation_id", operator: "eq", value: searchVal
});
}
else {
ds.filter({});
}

Slickgrid - how to modify id value

I'm just getting to grips with Slickgrid (with an asp.net MVC back end) as a simple start I want to us it as an editing grid for a Key/Value pair of systems settings. I have it working OK for Add, but update works OK unless we edit the key.
Because we have changed the key value it always looks like a new Key/Value pair rather than modifying the existing item. So my question is, how do I let the backend know what item I am modifying ?
I figure I could add an extra field (holding the original id) to the dataview, but I am kind of wondering if I a missing some functionality that makes this easier.
$(function() {
var grid;
var columns = [{
id: "id",
name: "Name",
field: "id",
editor: Slick.Editors.Text
}, {
id: "Value",
name: "Value",
field: "Value",
editor: Slick.Editors.Text
}, ];
var options = {
enableColumnReorder: false,
editable: true,
enableAddRow: true,
enableCellNavigation: true,
autoEdit: false
};
var dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#myGrid", dataView, columns, options);
grid.setSelectionModel(new Slick.CellSelectionModel());
grid.onCellChange.subscribe(function(e, args) {
var row = dataView.getItem(args.row);
var value = row[grid.getColumns()[args.cell].field];
var id = row[grid.getColumns()[0].field];
var data = {
value: value,
id: id
};
var url = "#Url.Action("Update", "SystemSettings")";
$.ajax({
type: "POST",
url: url,
data: data,
dataType: "json",
success: function(a) {
if (a.status != "ok") {
alert(a.msg);
undo();
} else {
alert(a.msg);
}
return false;
}
});
});
grid.onAddNewRow.subscribe(function(e, args) {
var item = {
"id": dataView.length,
"value": "New value"
};
$.extend(item, args.item);
dataView.addItem(item);
});
dataView.onRowCountChanged.subscribe(function(e, args) {
grid.updateRowCount();
grid.render();
});
dataView.onRowsChanged.subscribe(function(e, args) {
grid.invalidateRows(args.rows);
grid.render();
});
$.getJSON('#Url.Action("GetAll", "SystemSettings")', function(data) {
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();
});
});
My requirement is for a grid that allows users to be able to perform all the basic CRUD functions on a database table. So am I going in the right direction with this or should I be doing something different.
So, I guess I hadn't quite grasped how the data view is disconnected from the grid. So I decided to store the key field twice in there once as a (non editable) Id field and once as an editable name field.
Once I realised that I could detect the old & new versions of the key field:
$(function () {
var grid;
var columns = [
{ id: "name", name: "Name", field: "name", editor: Slick.Editors.Text },
{ id: "value", name: "Value", field: "value", editor: Slick.Editors.Text },
];
var options = {
enableColumnReorder: false,
editable: true,
enableAddRow: true,
enableCellNavigation: true,
autoEdit: false
};
var dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#myGrid", dataView, columns, options);
grid.setSelectionModel(new Slick.CellSelectionModel());
grid.onCellChange.subscribe(function (e, args) {
var row = dataView.getItem(args.row);
var id = row["id"];
var value = row["value"];
var name = row["name"];
var data = { value: value, id: id, name: name };
var url = "#Url.Action("Update", "SystemSettings")";
$.ajax({
type: "POST",
url: url,
data: data,
dataType: "json",
success: function (a) {
if (a.status != "ok") {
alert(a.msg);
undo();
} else {
alert(a.msg);
}
return false;
}
});
});
grid.onAddNewRow.subscribe(function (e, args) {
var item = { "id": args["name"], "value": "New value" };
$.extend(item, args.item);
dataView.addItem(item);
});
dataView.onRowCountChanged.subscribe(function (e, args) {
grid.updateRowCount();
grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
grid.render();
});
$.getJSON('#Url.Action("GetAll", "SystemSettings")', function (data) {
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();
});
});

Categories