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;
}
Related
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;
}
I wanted to create a dynamic context menu based on my server response. The static menu works fine without any issues. The below is my jstree content and it calls customMenu method
$("#myList").jstree({
"core" : {
"animation" : 0,
"check_callback" : true,
//"themes" : "default" ,
'data': {
"data": function (node) {
return { "id": node.id };
}
}
},
"plugins" : [ "search", "contextmenu"],
"contextmenu" : { "items" : customMenu }
});
My customMenu function
function customMenu(node) {
var menuitems=[];
$.ajax({
url : "DynamicMenu",
dataType : 'json',
data: {menu: node.id, node: node.children.length},
error : function() {
alert("Error Occured");
},
success : function(data) {
$.each(data, function(index, value) {
//Want to populate my menu here
});
}
});
// The default set of all items. This works fine
menuitems = {
restartItem: {
label: "Restart",
action: function () {
}
},
stopItem: {
label: "Stop",
action: function () {}
}
};
return menuitems;
}
I tried creating a dynamic menu by using below 2 options, but it didnt help.
menuitems.push()
menuitems.push({restartItem: {
label: "Restart",
action: function () {
}
}});
menuitems[index]={mydata}
menuitems[0] = {restartItem: {
label: "Restart",
action: function () {
}
}};
Both the above options didn't help ? I will replace the values dynamically based on my ajax response. But first I need one this option to work
I want to show Customer table's data of nopcommerce in admin page.
i did write a plugin for that and receive data in controller but in view i have a problem and show me error happened message.
here is my controller code:
public class UserDetailsController : BasePluginController
{
private ICustomerService _UserDetail;
public UserDetailsController(ICustomerService UserDetail)
{
_UserDetail = UserDetail;
}
public ActionResult Manage()
{
return View();
}
[HttpPost]
public ActionResult GetUsers(DataSourceRequest userDetail)
{
var details = _UserDetail.GetAllCustomers();
var gridModel = new DataSourceResult
{
Data = details,
Total = details.Count
};
return Json(gridModel);
}
}
And this is my view code:
#{
Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<script>
$(document).ready(function() {
$("#user-details").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("GetUsers", "UserDetails"))",
type: "POST",
dataType: "json",
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
}
},
requestEnd: function(e) {
if (e.type == "update") {
this.read();
}
},
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
numeric: false,
previousNext: false,
info:false
},
editable: {
confirmation: true,
mode: "inline"
},
scrollable: false,
columns: [
{
field: "Email",
title: "User Name",
width: 200
},
{
command: [
{
name: "edit",
text: "#T("Admin.Common.Edit")"
}, {
name: "destroy",
text: "#T("Admin.Common.Delete")"
}
],
width: 200
}
]
});
});
</script>
<div id="user-details"></div>
can anybody help me?
Change your GetUsers method on this way:
var details = _UserDetail.GetAllCustomers();
var gridModel = new DataSourceResult
{
Data=details.Select(x=>
{
return new UserDetail()
{
Email= x.Email
};
}),
Total = details.Count(),
};
return Json(gridModel);
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" }
}
}
I am using data table with Grails. I have a check box outside the data table and on its event I want to load the table again with the check box value. Here are my attempts below :
In my view where the check box is >>
<g:checkBox id="wrapCheck" name="wrapCheck"/> Wrapped
Here is my attempts in view where I am calling server method >>
$('#wrapCheck').on('click', function (e) {
setWrapActiveStatus();
var referenceId = $('#callForWrap').val();
jQuery.ajax({
type: 'POST',
dataType: 'JSON',
url: "${g.createLink(controller: 'androidGame',action: 'ajaxAndroidGameList')}?wrapCheck=" + referenceId,
%{--url: "${g.createLink(controller: 'androidGame',action: 'ajaxListByWrapActiveStatus')}?wrapCheck=" + referenceId,--}%
success: function (data, textStatus) {
if (data.isError == false) {
$('#example').DataTable().ajax.reload();
} else {
alert(data.message);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
});
here is my setWrapActiveStatus() function >>
function setWrapActiveStatus(){
if($("#wrapCheck").prop('checked') == true){
$('#callForWrap').val("1");
}else{
$('#callForWrap').val("");
}
}
And here is my Controller Action >>
def ajaxAndroidGameList() {
LinkedHashMap gridData
String result
LinkedHashMap resultMap = androidGameService.androidGamePaginateList(params)
if(params.wrapCheck == "1"){
resultMap = androidGameService.androidGamePaginateListByWrapStatus(params)
}
// LinkedHashMap resultMap = androidGameService.androidGamePaginateList(params)
if(!resultMap || resultMap.totalCount== 0){
gridData = [iTotalRecords: 0, iTotalDisplayRecords: 0, aaData: []]
result = gridData as JSON
render result
return
}
int totalCount = resultMap.totalCount
gridData = [iTotalRecords: totalCount, iTotalDisplayRecords: totalCount, aaData: resultMap.results]
result = gridData as JSON
render result
}
My action is response well only wrapped list but data table does not update.
EDIT - Data table Initialization
$('#example').dataTable({
"sPaginationType": "full_numbers",
"bAutoWidth": true,
"bServerSide": true,
"iDisplayLength": 10,
"deferLoading": ${totalCount?:0},
"sAjaxSource": "${g.createLink(controller: 'androidGame',action: 'ajaxAndroidGameList')}",
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
if (aData.DT_RowId == undefined) {
return true;
}
$('td:eq(4)', nRow).html(getStatusIcon(nRow, aData[4])).css({textAlign: 'center'});
$('td:eq(5)', nRow).html(getStatusIcon(nRow, aData[5])).css({textAlign: 'center'});
$('td:eq(6)', nRow).html(getActionBtn(nRow, aData)).css({textAlign: 'center'});
return nRow;
},
"aoColumns": [
null,
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false }
]
});
In your DataTables initialization code you need to use option fnServerParams to modify data sent to the server.
I have also corrected deferLoading which should be iDeferLoading, see iDeferLoading.
Below is modified DataTables initalization code:
$('#example').dataTable({
"sPaginationType": "full_numbers",
"bAutoWidth": true,
"bServerSide": true,
"iDisplayLength": 10,
"iDeferLoading": ${totalCount?:0},
"sAjaxSource": "${g.createLink(controller: 'androidGame',action: 'ajaxAndroidGameList')}",
"fnServerParams": function (aoData){
aoData.push({
"name": "wrapCheck",
"value": $("#wrapCheck").prop('checked') ? "1" : ""
});
},
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
if (aData.DT_RowId == undefined) {
return true;
}
$('td:eq(4)', nRow).html(getStatusIcon(nRow, aData[4])).css({textAlign: 'center'});
$('td:eq(5)', nRow).html(getStatusIcon(nRow, aData[5])).css({textAlign: 'center'});
$('td:eq(6)', nRow).html(getActionBtn(nRow, aData)).css({textAlign: 'center'});
return nRow;
},
"aoColumns": [
null,
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false }
]
});
Then for checkbox click event handler all you need to do is:
DataTables 1.10
$('#wrapCheck').on('click', function (e) {
$('#example').DataTable().ajax.reload();
});
DataTables 1.9
$('#wrapCheck').on('click', function (e) {
$('#example').dataTable().fnDraw();
});
NOTE:
Please note, that your DataTables initialization code and server-side code are using older naming conventions for DataTables 1.9. DataTables 1.10 is backward compatible, meaning that it supports both new and old naming conventions. But with the release of new versions, the compatibility may be dropped, and you may want to consider updating your code according to 1.9 to 1.10 upgrade guide and Converting 1.9 naming to 1.10.