We Keep Coding

How do I programmatically remove a custom action button in a Tabulator table?

I created a Tabulator table which has a custom action button to execute an action and then updates the row on which the button was clicked. This it does successfully.
What I want to do is to also dynamically remove the row's link/buttonthat was clicked - only for the row whose button was clicked - as soon as the row data is updated. I've tried to resolve this for hours and checked the tabulator documentation, and I still don't know how I can go about doing this.
Your help is much appreciated.
The code is as follows:
var tableData =[
{
"id":30,
"position":201,
"category":"onel",
"name":"One Thing",
"completed_at":null,
"created_by_email":"",
"completed_by":""
},
{
"id":31,
"position":202,
"category":"onel",
"name":"Two things",
"completed_at":null,
"created_by_email":"",
"completed_by":""
},
{
"id":32,
"position":203,
"category":"onel",
"name":"Three things",
"completed_at":null,
"created_by_email":"",
"completed_by":""
},
{
"id":33,
"position":204,
"category":"onel",
"name":"Four things",
"completed_at":null,
"created_by_email":"",
"completed_by":""
},
{
"id":34,
"position":205,
"category":"onel",
"name":"Five things",
"completed_at":null,
"created_by_email":"",
"completed_by":""
}
];
var actButton = (cell, params, onRendered) => {
var myId = cell.getRow().getData().id;
clickFunction = (p_id) => {
cell.getTable().updateData(
[
{ id: p_id
, completed_at: '2021-12-31 13:59:00'
, completed_by: 'Womble'
, completed_by_email: 'wimbledon#common.org.uk'
}
]
// <--- here, I want to remove this row's action button as defined below
);
};
/**
* This renders the buttons at initialisation but doesn't respond to dynamic in-situ data-changes
*/
if ( null == cell.getRow().getData().completed_at ) {
return "<a href='javascript: clickFunction(" + myId + ")' data-toggle='tooltip' title='Execute'><i class='fas fa-camera' style='color:#9691ce;'></i></a>";
} else {
return "";
}
};
var myTable = new Tabulator(
"#divTable",
{
data: tableData,
columns: [
{title:"Position", field:"position"},
{title:"Category", field:"category"},
{title:"Name", field:"name"},
{title:"Completed", field:"completed_at", formatter:"datetime", formatterParams:{inputFormat:"YYYY_MM_DD HH:mm:ss", outputFormat:"DD/MM/YYYY HH:mm:ss", invalidPlaceholder:""} },
{title:"By", field:"completed_by", sorter:"string"},
{title:"Email", field:"completed_by_email", sorter:"string"},
{title:"Action", field:"id", sortable:false, formatter:actButton},
],
layout: "fitColumns",
pagination: "local",
paginationSize: "15",
tooltips:true,
tooltipsHeader:true,
reactiveData:true, //turn on data reactivity
}
);

I was looking to the Tabulator component object model for the solution, when it was best answered by the DOM.
Assumptions:
the action button column is assigned the field 'id' - this doesn't affect the dynamic table's layout or interaction
Using a fragment of the above code as a starting point, the solution would be:
var actButton = (cell, params, onRendered) => {
var myId = cell.getRow().getData().id;
clickFunction = (p_id) => {
cell.getTable().updateData(
[
{ id: p_id
, completed_at: '2021-12-31 13:59:00'
, completed_by: 'Womble'
, completed_by_email: 'wimbledon#common.org.uk'
}
]
).then (
() => {
/**
* Remove the action button
*/
[...document.querySelectorAll("div.tabulator-cell")]
.filter(item => item.getAttribute('title')==p_eventId)[0]
.childNodes[0].remove();
}
);
};
/**
* This renders the buttons at initialisation but doesn't respond to dynamic in-situ data-changes
*/
if ( null == cell.getRow().getData().completed_at ) {
return "<a href='javascript: clickFunction(" + myId + ")' data-toggle='tooltip' title='Execute'><i class='fas fa-camera' style='color:#9691ce;'></i></a>";
} else {
return "";
}
};

highchart use ajax to php+mysql

I use highchart on the leaflet map. I use ajax to grab the data in php. I can see the data returned in console.log, but I can't draw a line chart. Is there any problem?
I directly write php,js and html in a program code can be displayed, the data format I have not changed.
This is my result
This is console.log show
This is my html code:
<div class="inner">
<div id="map" style="width: 600px; height: 400px;"></div>
<script src="assets/js/leaflet2.js"></script>
</div>
leaflet2.js
function onClick(e){
var popup = e.target.getPopup();
var content = popup.getContent();
var find_1 = content.indexOf('>');
var find_2 = content.indexOf('/');
var id = content.substring(find_1+1,find_2-1);
$.ajax({
type: 'POST',
url: 'http://localhost/html5up-helios/chart.php',
data: {
"device":id
},
success:function(data){
// console.log(data);
var modify = data.indexOf('[');
var show = data.substring(modify);
console.log(show);
var chart = new Highcharts.Chart({
chart: { height: 175, width: 300 ,
renderTo: 'container'}, 
title: { text: '' },
series: [{
name: 'PM 2.5',
data: show
}
],
credits: {
enabled: false
},
exporting:{
enabled:false
}
});
}
});
}
chart.php
<?php
include("connection.php");
if (isset($_POST["device"])) {
$id = $_POST["device"];
error_log(print_r($id, true));
} else {
error_log(print_r("error", true));
}
try {
$sql = "SELECT * FROM day WHERE DATE_SUB(curdate(), INTERVAL 20 DAY) <= date(date)";
if ($stmt = $db->query($sql)) {
while ($result = mysqli_fetch_array($stmt)) {
$number_pm = intval($result['pm25']);
if ($number_pm < 0) {
$number_pm = 0;
}
$pm25[] = array(
$result['date'], $number_pm
);
}
$pm25 = json_encode($pm25);
echo $pm25;
}
} catch (Exception $e) {
die($e);
}
?>
In addition to this, isset ($ _ POST ["device"]) in my php will display an error, but I have to pass the data out in leaflet.js(
$ .ajax ({
type: 'POST',
url: 'http: //localhost/html5up-helios/chart.php',
data: {
"device": id
},});
)
php doesn't seem to receive anything, or am I wrong?

Updating server from Kendo Color picker inside kendo grid

The Problem
So i am currently trying to implement a color picker inside of a Kendo grid, that will hopefully send the chosen color to my Sql Table. Unfortunately, It doesn't seem as though the Update controller is being reached. I am relatively new to Kendo UI, so there might be some incredibly dumb errors shown.
Questions
I guess my main question would be: How can i call the update method when update is clicked on the grid. Essentially, the color picker and the edit command are showing up in beautiful fashion. I just want to know how i can be sure that the method is being called when 'Update' is clicked, seeing as it is not reaching my controller. Feel free to ask if you need to see more code or perhaps a screen shot.
Code
Config.cshtml ( Grid )
#model IEnumerable<STZN.Models.AGCData.ErrorCode>
#{
ViewBag.Title = "Config";
}
#section HeadContent{
<script src="~/Scripts/common.js"></script>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
editable: "inline",
selectable: "row",
dataSource: {
schema: {
model: {
id: "error_code",
fields: {
color: { type: 'string' }
}
}
},
transport: {
read: {
type: "POST",
dataType: "json",
url: "#Url.Action("ErrorCodes")"
},
update: {
type: "POST" ,
dataType: "json",
url: "#Url.Action("UpdateErrorCodes")",
}
}
},
columns: [
{ command : [ "edit" ] },
{
field: "error_code", title: "Error Code",
},
{
field: "error_description", title: "Error Description"
},
{
field: "color",
width: 150,
title: "Color",
template: function (dataItem) {
return "<div style = 'background-color: " + dataItem.color + ";' </div>"
},
editor: function (container, options) {
var input = $("<input/>");
input.attr("color",options.field);
input.appendTo(container);
input.kendoColorPicker({
value: options.model.color,
buttons: false
})
},
}
]
});
});
</script>
}
Update Controller
public JsonResult UpdateErrorCodes(ErrorCode model)
{
using (var db = new AgcDBEntities())
{
db.Entry(model).State = System.Data.Entity.EntityState.Modified;
db.SaveChanges();
db.Configuration.ProxyCreationEnabled = false;
var data = db.ErrorCodes.Where(d => d.error_code == model.error_code).Select(x => new
{
error_code = x.error_code,
description = x.error_description,
color = x.color,
});
return new JsonResult()
{
JsonRequestBehavior = System.Web.Mvc.JsonRequestBehavior.AllowGet,
};
}
}

I actually managed to fix my issue by adding an additional input attribute to my editor function in the "color" field. It looks like this:
input.attr("data-bind","value:" + options.field);
There are still some present issues (unrelated to the fix/server update) , but as far as updating to the server, It work's as intended.

Bind Webgrid using JQuery failed

Hi I am using webgrid this time.and Binding json data using JQuery. My ajax call script providing data but I am unable to get it some how.I have gone thorugh all the questions available here but nothing worked. Look at the components and tell me what is wrong.
This is the web grid
<div id="GridContent">
#{
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 15, selectionFieldName: "Id", ajaxUpdateContainerId: "GridContent", canSort: true);
}
#grid.GetHtml(
tableStyle: "webgrid-table",
rowStyle: "webgrid-row-style",
htmlAttributes:"grid",
emptyRowCellValue: "--",
headerStyle: "webgrid-header",
selectedRowStyle: "webgrid-alternating-row",
columns: grid.Columns(
grid.Column(columnName: "CenterId", header: "Id"),
grid.Column(columnName: "CenterName", header: "CenterName"),
grid.Column(columnName: "CenterCode", header: "CenterCode"),
grid.Column(columnName: "Address", header: "Address"),
grid.Column(columnName: "EmailId", header: "EmailId"),
grid.Column(format: #<a id="EditCenter" class="fa-anchor" data-id="#item.CenterId">Edit</a>),
grid.Column(format: (item) => Html.ActionLink((string)"Delete", "DeleteCenter", new { CenterId = item.CenterId }, new { id = "DeleteCenter", onclick = "return confirm('Are You Sure Want To Delete The Center Data?');" }))))
</div>
and here is my ajax call for binding the data on dropdown change.
$(document).ready(function () {
$("#ListType").change(function () {
var webgrid;
$.ajax({
type: 'POST',
url: ListTypeUrl,
data: { id: $("#ListType").val() },
datatype:'html',
success: function (result) {
$("#GridContent").html(result);
alert("Success");
},
error: function (result) {
alert("On select Failed " + result);
}
});
})
});
Here is Controller method for getting JSON Results
public JsonResult GetCenterList(int id)
{
List<CenterDetails> cd = objDal.GetCenterListItem(id.ToString(), Session["AgentId"].ToString());
return Json(cd,JsonRequestBehavior.AllowGet);
}
public List<CenterDetails> GetCenterListItem(string type, string AgentId)
{
XElement xl = new XElement("root"
, new XAttribute("OType", "Select")
, new XAttribute("Target", "CenterList")
, new XElement("Type",Convert.ToInt32(type))
, new XElement("AgentId", AgentId));
ds = ExecuteDataSet("Sp_CenterAction", CommandType.StoredProcedure, new MySqlParameter("#xml", xl.ToString()));
dt = ds.Tables[0];
drc = dt.Rows;
List<CenterDetails> objList = new List<CenterDetails>();
foreach (DataRow dr in drc)
{
objList.Add(new CenterDetails
{
CenterId = Convert.ToInt32(dr["cm_Id"].ToString()),
CenterName = dr["cm_Name"].ToString(),
CenterCode = dr["cm_CenterCode"].ToString(),
Address = dr["cm_Address"].ToString(),
EmailId = dr["cm_EmailId"].ToString()
});
}
return objList;
}

How add series dynamically in Highcharts without button? (ANGULAR JS)

My issue is very specific. How I can add series dynamically in highcharts, through Angular JS, without button, otherwise, without function click.
This is my controller:
var deserialize = angular.fromJson(data.dataContent); //Específico para el dataContent
for(var i =0; i < deserialize.length; i++){
var url = deserialize[i];
$http.get(url).success(function(data){
var n_scope = [];//NOMBRES PARA LA SERIE
var e_scope = []; //EMPLEADOS
for (var i = 0; i < data.length; i++) {
var nombre_scope = n_scope.push(data[i].nombre);
var empleados_scope = e_scope.push(parseInt(data[i].empleados));
}
var chart = {};
chart.addSeries({
name: n_scope[i],
data: e_scope[i]
});
HERE GOES THE CHART:
$scope.renderChart = {
chart: {
type: typeArray[2]
},
title: {
text: titleArray[2]
},
xAxis:{
categories: yAxisTiArray[2],
title: {
enabled: false
},
labels: {
enabled: false
}
},
yAxis:{
title: {
text: yAxisTiArray[2]
}
},
series: chart,
legend: {
enabled: true
},
credits: {
enabled: false
},
lang: {
printChart: 'Imprimir gráfico',
downloadPNG: 'Descargar en PNG',
downloadJPEG: 'Descargar en JPG',
downloadPDF: 'Descargar en PDF',
downloadSVG: 'Descargar en SVG',
contextButtonTitle: 'EXPORTAR'
}
};
I was taking this fiddle as example: http://jsfiddle.net/engemasa/WEm4F/, but I don't want a button click function, I want that series add it to chart dynamically

You are almost there, just put your code inside success blockof your API (angularjs api call ). here is an example (how I used to plot series on data change)
var metricData = $http.get(url);
metricData.success(function(value) {
var data = value.responseData;
var graph = [];
angular.forEach(data.datatimeseries, function(metric) {
graph.push([ metric.timestamp, metric.value ]);
// Assuming that datatimeseries is the timeseiries
});
var chartX = $('#yourDivId').highcharts();
chartX.addSeries({
id : graph_id, // some id
data : graph
});
setYaxisExtremes(chartX); // must use it to reflect added series
});

**RESOLVED**
Altough have button, I could resolve this issue.
I have created a repository that integrates Angular.js, PHP, and Highcharts, with Materialize.css, adding series dynamically from external JSON.
link: https://github.com/Nullises/DynamicSeriesHighchartsAngular