Using unescaped '#' characters on Ag Grid Enterprise React on Context Menu - ag-grid-react

When I am using the Ag-Grid context menu on application, I get a message on console saying:
[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M68, around July 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 for more details.
I really don't get any error, but I'm afraid on the message. Can any one update any thing about this message?
This is the component that use this.sate.columnDefs with renderframework like that:
<AgGridReact
// properties
columnDefs={this.state.columnDefs}
rowData={consumers.items}
animateRows
enableColResize
enableSorting={true}
rowSelection="single"
suppressMenuHide={true}
enableFilter={true}
onCellClicked={this.onCellClicked.bind(this)}
onGridReady={this.state.onGridReady}
paginationPageSize={10}
pagination={true}
multiSortKey="ctrl"
getContextMenuItems={this.state.getContextMenuItems}
/>
columnDefs: [
{
headerName: "",
suppressFilter: true,
width: 30,
cellRendererFramework: function (params) {
if (params.data.permissions.length > 0) {
return <i className="fa fa-ellipsis-v" />;
}
}
},
{
headerName: language.LAST_NAME,
field: "person.last_name",
enableRowGroup: true,
filter: "agSetColumnFilter",
},
{
headerName: language.FIRST_NAME,
field: "person.first_name",
enableRowGroup: true,
filter: "agSetColumnFilter",
}
],
sortingOrder: ["desc", "asc", null],
getContextMenuItems: this.getContextMenuItems.bind(this),
onGridReady: function (params) {
var sort = [
{
colId: "person.last_name",
sort: "asc"
},
{
colId: "person.first_name",
sort: "asc"
},
{
colId: "medical_id",
sort: "asc"
},
{
colId: "person.date_of_birth",
sort: "asc"
}
];
this.gridApi = params.api;
this.gridApi.setSortModel(sort);
params.api.sizeColumnsToFit();
}
getContextMenuItems(params) {
let language = languageActions.getLanguage();
const { props } = this;
this.setState({
showActionDiv: false
});
var aResult = [];
params.node.data.permissions.map((permision, index) => {
let language = languageActions.getLanguage();
switch (permision) {
case "Update":
aResult.push(
{
name: language.VIEW_DETAIL,
icon: '<span class="fa fa-edit icon-ag-grid"></span>',
action: () => {
//console.log(this.props);
this.props.toggleShowProfile();
}
}
);
break;
case "Read":
aResult.push(
{
name: language.VIEW_SCHEDULE,
icon: '<span class="fa fa-calendar icon-ag-grid"></span>',
action: () => {
this.props.toggleShowScheduledServices();
}
}
);
break;
}
});
aResult.push(
"separator",
"copy",
"csvExport",
"excelExport",
"autoSizeAll");
return aResult;
}

Related

Is there a way to make api call when expanding table to show nested table?

In Ant Nested table - When expanding a row, I want to make an api call and get the data to show the nested table.
The function expandedRowRender, expects to return the nested table, it does not accept a promise.
How can I show a nested Ant table using ajax call?
I have tried to recreate the scenario for reference.
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";
import reqwest from "reqwest";
const nestedColumns = [
{
title: "Name",
dataIndex: "name",
sorter: true,
render: name => `${name.first} ${name.last}`,
width: "20%"
},
{
title: "Gender",
dataIndex: "gender",
filters: [
{ text: "Male", value: "male" },
{ text: "Female", value: "female" }
],
width: "20%"
},
{
title: "Email",
dataIndex: "email"
}
];
class App extends React.Component {
state = {
data: []
};
fetch = (params = {}) => {
console.log("params:", params);
reqwest({
url: "https://randomuser.me/api",
method: "get",
data: {
results: 10,
...params
},
type: "json"
}).then(data => {
return (
<Table
columns={nestedColumns}
dataSource={data.results}
pagination={false}
/>
);
// this.setState({
// data: data.results
// });
});
};
expandedRowRender = () => {
this.fetch();
return <table columns={nestedColumns} dataSource={this.state.data} />;
};
render() {
const columns = [
{ title: "Name", dataIndex: "name", key: "name" },
{ title: "Platform", dataIndex: "platform", key: "platform" },
{ title: "Version", dataIndex: "version", key: "version" }
];
const data = [
{
key: 1,
name: "Screem",
platform: "iOS",
version: "10.3.4.5654"
}
];
return (
<Table
columns={columns}
dataSource={data}
pagination={false}
expandedRowRender={this.expandedRowRender}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById("container"));
I try my level best to answer your question. Here is the reduced type of code and you can get an idea of how to do that.
In state,
state = {
data: null,
loading: false,
};
Here is your function to make API call,
fetch = (expanded, record) => {
axios.get(`put your api to load nested table`)
.then(res => {
const data = res.data;
this.setState({
...this.state.data,
data,
loading: true
})
}).catch(error => {
console.log(error, "error")
})
}
After that,
expandedRowRender=() => {
if(this.state.loading){
const nestedTableData = this.state.data.map(row => ({
key: row.id,
Id: row.id,
name: 'test',
gender: 'gender',
}))
const nestedColumns = [
{ title: "Name", dataIndex: "name", key: "name" },
{ title: "Gender", dataIndex: "gender", key: "gender" },
];
return <Table columns={nestedColumns} dataSource={nestedTableData } pagination={false} />
}
};
And put following code below return
<Table
className="components-table-demo-nested"
columns={columns}
dataSource={tableData}
expandable={{
expandedRowRender: this.expandedRowRender,
rowExpandable: record => true,
onExpand: this.fetch
}}
/>
I hope it may help you and let me know if it does. :)

How to send parameters to Html.Kendo().Dialog()?

I need to send a parameter to Html.Kendo().Dialog():
var diff = Num1 = Num2;
var msg = "The amiunt of " + diff + " will be subtracted"
#(Html.Kendo().Dialog()
.Title("Update")
.Content("<p>" + msg + <p>")
However, that construct does not allow this, saying that "msg" does not exist in the current content
How can I do that?
Updated version:
if ((Math.abs(newAmount) < Math.abs(Amount)) && newAmount != 0) {
$("#dialog").kendoDialog({
width: "400px",
title: "Split Ticket Confirmation",
closable: true,
modal: true,
content: "<div style='text-align: center'>" + msg + "</div>",
actions: [
{
text: 'OK',
action: function (e) {
$('.modal-content').html('');
$('#modal-container').modal('hide');
SaveData();
},
primary: true
},
{
text: "CANCEL",
action: function (e) {
$('.modal-content').html('');
$('#modal-container').modal('hide');
return false;
},
primary: true
}
]
}).data("kendoDialog").open();
}
else {
SaveData();
}
Using Razor HTML C# syntax, you can achieve it without errors by doing this:
#{
var msg = "The amiunt of " + diff + " will be subtracted";
}
Then just passing it regularly to the Content as you already did.
If you are using JavaScript and really want to use that dialog inside script tags then you can do this:
var dialog = $('#dialog'), undo = $("#undo");
undo.click(function () {
dialog.data("kendoDialog").open();
undo.fadeOut();
});
function onClose() {
undo.fadeIn();
}
var diff = Num1 = Num2;
var msg = "The amiunt of " + diff + " will be subtracted";
dialog.kendoDialog({
width: "400px",
title: "Update",
closable: false,
modal: false,
content: "<p>" + msg + "<p>",
actions: [
{
text: "OK",
action: function(e){
// e.sender is a reference to the dialog widget object
// OK action was clicked
// Returning false will prevent the closing of the dialog
return false;
},
primary: true
},
{ text: 'Action 2' },
{ text: 'Action 3', primary: true }
],
close: onClose
});
To add another action per request, to the Html.Kendo.Dialog() construct you can do the following:
#Html.Kendo.Dialog()
.Actions(actions =>
{
actions.Add().Text("Ok").Action("onOkClick").Primary(true);
})
And inside your your script tag you create the JS method:
function onOkClick(e)
{
//Do something
}
What I am doing is writing a partial into the page on the event that opens the dialog:
function OpenDialog() {
$.ajax({
url: '#Url.Action("ItemSearch", "Invoice")',
data: {
PartNumber: dataItem.Id,
AltPartNumber: 1,
Description: 1,
Application: 1
},
success: function (result) {
$("#SearchDialogContainer").html(result);
},
error: function (result) {
alert("An error occurred.");
}
});
}
<div id="SearchDialogContainer"></div>
And in the partial:
#model ParameterModel
#(Html.Kendo().Dialog()
.Name("SearchDialog")
.Title("Choose An Item To Add")
.Content("<div class='k-textbox k-space-right search-wrapper'><input id='employees-search' type='text' placeholder='Search employees' value='#Model.Property'/></div>")
.Width(400)
.Modal(true)
.Visible(false)
.Actions(actions =>
{
actions.Add().Text("Add Item").Primary(true);
actions.Add().Text("Cancel");
})
)
<script>
$(document).ready(function () {
$('#SearchDialog').data("kendoDialog").open();
});
</script>

Kendo MVC Grid paging buttons not changing results displayed

I have a Kendo Grid. The paging numbers are ok, items per page is ok, but when I press on page number the results in grid isn't changing, all results are shown in first page. Please help here.
Below is my code:
<script>
$(function() {
$("#invoices-grid").kendoGrid({
dataSource: {
data: #Html.Raw(JsonConvert.SerializeObject(Model.Invoices)),
schema: {
model: {
fields: {
JobNumber: { type: "string" },
CustomerName: { type: "string" },
DepartmentName: { type: "string" },
DateInvoice: { type: "string" },
ValidDays: { type: "number" },
Delivery: { type: "string" },
IsPayed: { type: "boolean" },
Payed: { type: "number" },
Status: { type: "boolean" },
}
}
},
#*type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("List", "Finances"))",
type: "POST",
dataType: "json",
data: additionalData1
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},*#
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
columns: [
{
field: "JobNumber",
title: "#T("gp.Invoice.Fields.JobNumber")",
template: '#= JobNumber #'
},
{
field: "CustomerName",
title: "#T("gp.Invoice.Fields.CustomerName")",
template: '#= CustomerName #'
},
{
field: "DepartmentName",
title: "#T("gp.Invoice.Fields.DepartmentName")",
template: '#= DepartmentName #'
},
{
field: "DateInvoice",
title: "#T("gp.Invoice.Fields.DateInvoice")",
template: '#= DateInvoice #'
},
{
field: "ValidDays",
title: "#T("gp.Invoice.Fields.ValidDays")",
template: '#= ValidDays #'
},
{
field: "Delivery",
title: "#T("gp.Invoice.Fields.Delivery")",
template: '#= Delivery #'
},
{
field: "Payed",
title: "#T("gp.Invoice.Fields.IsPayed")",
template: '#= (Payed == 2) ? "Комп." : ((Payed == 1) ? "ДЕ" : "НЕ") #'
},
{
field: "Id",
title: "#T("Common.Edit")",
width: 100,
template: '#T("Common.Edit")'
},
],
pageable: {
refresh: true,
pageSizes: [5, 10, 20, 50]
},
editable: {
confirmation: false,
mode: "popup"
},
scrollable: false,
selectable: true,
change: function(e) {
var selectedRows = this.select();
var jobId = parseInt($(selectedRows).data('job-id'));
var jobItemId = parseInt($(selectedRows).data('job-item-id'));
var result = $.get("#Url.Action("SideDetails", "Production")/" + jobItemId);
result.done(function(data) {
if (data) {
$(".job-edit .jobItemDetails").html(data);
}
});
},
rowTemplate: kendo.template($("#invoiceRowTemplate").html()),
});
});
</script>
protected virtual void PrepareInvoiceFinanceListModel(FinanceListModel model,FormCollection form/*,string SearchJobItemNumber*/)
{
var customers = model.SearchCustomerId;
var isChecked = model.IsChecked;
var searchString = model.SearchJobItemNumber;
var IsChecked1 = model.IsChecked1;
// searchString = model.SearchJobItemNumber;/* "001/2016";*/
//var searchString = model.SearchJobItemNumber;
//searchString = "091/2016";
if (model == null)
throw new ArgumentNullException("model");
var finishedJobs = _jobService.GetJobsByHasInvoice(false);
finishedJobs = finishedJobs.OrderByDescending(x =>
{
var firstOrDefault = x.JobItems.FirstOrDefault();
return firstOrDefault?.DateCompletition ?? new DateTime();
}).ToList();
foreach (var job in finishedJobs)
{
var jobModel = job.ToModel();
model.FinishedJobs.Add(jobModel);
}
var jobsBycustomers = finishedJobs.GroupBy(x => new { x.CustomerId, x.Customer.Name }).Select(x => new JobCustomersModel()
{
CustomerId = x.Key.CustomerId,
CustomerName = x.Key.Name,
JobsCount = x.Count(),
});
model.FinishedJobStatus = new JobStatusesModel()
{
Status = _localizationService.GetResource("gp.jobs.whitout.invoice"),
Value = (int)JobStatusEnum.Finished,
Count = finishedJobs.Count,
CustomersJobs = jobsBycustomers.ToList()
};
var invoices = _invoiceService.GetAllInvoices(searchString, isChecked, IsChecked1, customers);
foreach (var invoice in invoices)
{
var inv = invoice.ToModel();
// var a = invoice.Payed;
model.Invoices.Add(inv);
}
///////////////////// ////////////////////////
//var allCustomers = _invoiceService.GetAllCustomers(customers);
//foreach (var customer in allCustomers)
//{
// var cust = customer.ToModel();
// model.SearchCustomerId = customer.CustomerId;
// model.Invoices.Add(cust);
//}
var invoiceByCustomer = invoices
.GroupBy(x => new { x.CustomerId, x.CustomerName })
.Select(x => new JobCustomersModel()
{
CustomerId = x.Key.CustomerId,
CustomerName = x.Key.CustomerName,
JobsCount = x.Count(),
});
model.InvoiceStatus = new JobStatusesModel()
{
Status = _localizationService.GetResource("gp.jobs.with.invoice"),
Value = (int)JobStatusEnum.Finished,
Count = invoices.Count,
CustomersJobs = invoiceByCustomer.ToList()
};
var latestOffers = _offerService.GetLatestOffers(0, 10);
foreach (var offer in latestOffers)
{
var offerModel = offer.ToModel();
model.LatestOffers.Add(offerModel);
}
}
Currently server operations are enabled...
serverPaging: true,
serverFiltering: true,
serverSorting: true
... but the transport configuration is commented out. This is the cause of the problem.
If you want to use server operations, then configure the dataSource transport. Otherwise, use local data binding and disable server operations, as in this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
<div id="invoices-grid"></div>
<script>
$(function() {
var d = [];
for (var i = 1; i <= 100; i++) {
d.push({Id: i, CustomerName: "CustomerName " + i});
}
$("#invoices-grid").kendoGrid({
dataSource: {
data: d,
schema: {
model: {
id: "Id",
fields: {
CustomerName: { type: "string" }
}
}
},
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: 20,
//serverPaging: true,
//serverFiltering: true,
//serverSorting: true
},
columns: [
{
field: "CustomerName",
title: "gp.Invoice.Fields.CustomerName",
template: '#= CustomerName #'
},
{
field: "Id",
title: "Common.Edit",
width: 100,
template: 'Common.Edit'
},
],
pageable: {
refresh: true,
pageSizes: [5, 10, 20, 50]
},
editable: {
confirmation: false,
mode: "popup"
},
scrollable: false,
selectable: true,
change: function(e) {
}
});
});
</script>
</body>
</html>

Kendo grid footer template sum issue

var dataSourceDashboard = new kendo.data.DataSource({
pageSize: 20,
type: "json",
transport: {
read: function (operation) {
if (navigator.onLine) {
$.ajax({
url: '/Home/Dashboard_Read/',
type: "GET",
dataType: "json",
success: function (response) {
try
{
localStorage.setItem("Dashboard_Read", JSON.stringify(response));
}
catch (domException)
{
if (domException.name === 'QuotaExceededError' ||
domException.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
// Fallback code comes here.
$("#progressMsgError").html("Cannot save the data for offline use, please clear the cache, or call administrator!");
$('#myModalError').modal('show');
}
}
operation.success(response);
BindSitesCombo(response);
//// initial sync of data
//var cashedDataBaseJson = [];
//var cashedDataBase = localStorage.getItem("cashedDataBase");
//if (cashedDataBase != null || cashedDataBase != undefined) {
// cashedDataBaseJson = JSON.parse(cashedDataBase);
// if (cashedDataBaseJson.length > 0) {
// syncInitialData(cashedDataBaseJson);
// localStorage.setItem("cashedDataBase", JSON.stringify(cashedDataBaseJson));
// }
//}
//else
//{
// syncInitialData(response);
// localStorage.setItem("cashedDataBase", JSON.stringify(response));
//}
var cashedDataBase = localStorage.getItem("cashedDataBase");
if (cashedDataBase == null || cashedDataBase == undefined) {
localStorage.setItem("cashedDataBase", JSON.stringify(response));
}
else {
var cashedDataBaseJson = [];
var cashedDataBase = localStorage.getItem("cashedDataBase");
if (cashedDataBase != null || cashedDataBase != undefined) {
cashedDataBaseJson = JSON.parse(cashedDataBase);
var i = response.length;
while (i--)
{
var ifsiteisinthelist = contains(cashedDataBaseJson, response[i]);
if (ifsiteisinthelist == false)
{
cashedDataBaseJson.push(response[i]);
}
}
localStorage.setItem("cashedDataBase", JSON.stringify(cashedDataBaseJson));
}
}
rempvesyncedlinks();
},
error: function (response)
{
window.location.href = "/account/login";
}
});
}
else {
var cashedData = localStorage.getItem("Dashboard_Read");
if (cashedData != null || cashedData != undefined) {
//if local data exists load from it
var data = JSON.parse(cashedData);
operation.success(data);
BindSitesCombo(data);
rempvesyncedlinks();
}
}
}
},
schema: {
model: {
id: "SiteID",
}
},
//change: function (e) {
// $.each(dataSourceDashboard.data(), function (index, value) {
// $('#cmbAllSites')
// .append($("<option></option>")
// .attr("value", value.SiteID)
// .text(value.SiteName));
// });
//}
change: function (e) {
rempvesyncedlinks();
},
aggregate: [
{ field: "DailyTotalFormated", aggregate: "sum" },
{ field: "WeeklyTotalFormated", aggregate: "sum" },
{ field: "WeeklySiteTotalFormated", aggregate: "sum" },
{ field: "WeeklyGoal", aggregate: "sum" }
],
});
$(function () {
$("#gridDashboard").kendoGrid({
dataSource: dataSourceDashboard,
filterable: false,
groupable: false,
toolbar: false,
pageable: {
change: function (e) {
rempvesyncedlinks();
}
},
sortable: true,
height: 600,
columns: [
{ field: "SiteName", title: "MY COMPANIES", template: '#=SiteName#',footerTemplate: "Total " },
{ field: "DailyTotalFormated", title: "MY DAILY TOTAL", aggregates: ["sum"], footerTemplate: "#=sum#" },
{ field: "WeeklyTotalFormated", title: "MY WEEKLY TOTAL", aggregates: ["sum"], footerTemplate: "#=sum#" },
{ field: "WeeklySiteTotalFormated", title: "WEEKLY SITE TOTAL", aggregates: ["sum"], footerTemplate: "#=sum#" },
{ field: "WeeklyGoal", title: "WEEKLY SITE GOAL", aggregates: ["sum"], footerTemplate: "#=sum#" },
{ field: "", title: "SYNC", template: "# if (isSynced == true) { #" +
"<div style='width: 130px;margin: auto;'><img src='/images/ready.png' alt='Up-to-date' /><div style='font-size:15px; font-weight:bolder; float: right;'>Ready</div></div>" +
"# } else { #" +
"<div style='width: 130px;margin: auto;'><img src='/images/pleasesync.png' alt='Up-to-date' /><div style='font-size:15px; font-weight:bolder; float: right;'>Please Sync</div></div>" +
"# } # <a id='syncforoffline#=SiteID#' href='##' onclick='syncDataForSite(#=SiteID#);return false;'>Sync for offline</a>"
},
{ field: "SiteLogo", title: " ", hidden : true },
],
editable: false
});
$("#cmbAllSites").change(function ()
{
var di = dataSourceDashboard.data()[this.selectedIndex - 1];
setSiteID(di.SiteID, di.SiteLogo, di.SiteName);
});
});
Footer sum is not calculated
What is wrong in this code, why does the total show last row by default?
I fixed the issue. I am just adding:
model: {
id: "SiteID",
fields: {
SiteName: { type: "string" },
DailyTotalFormated: { type: "number" },
WeeklyTotalFormated: { type: "number" },
WeeklySiteTotalFormated: { type: "number" },
WeeklyGoal: { type: "number" }
}
}

Tweaking contextmenu in jstree

I would like to do the following with the contextmenu plugin:
- Rename "Create" as "Add"
- Remove "Edit"
How does one do it?
I do NOT want to create a custom menu because then I only get a node and not the nice data object that can be used in the Create, Rename and Delete events.
Found the answer in the code of jstree itself:
Added this to the jstree code:
"contextmenu": {
items: customContextMenu
}
And this for the context menu items:
function customContextMenu() {
'use strict';
var items = {
"create" : {
"separator_before": false,
"separator_after": true,
"_disabled": false, //(this.check("create_node", data.reference, {}, "last")),
"label": "Add",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.create_node(obj, {}, "last", function (new_node) {
setTimeout(function () { inst.edit(new_node); }, 0);
});
}
},
"rename" : {
"separator_before": false,
"separator_after": false,
"_disabled": false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
"label": "Rename",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.edit(obj);
}
},
"remove" : {
"separator_before": false,
"icon": false,
"separator_after": false,
"_disabled": false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
"label": "Withdraw",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
if (inst.is_selected(obj)) {
inst.delete_node(inst.get_selected());
} else {
inst.delete_node(obj);
}
}
}
};
return items;
}

Resources