jqxTreegrid doubles all functions

[MansurParticipant]

Hello. Got some troubles with jqxTreegrid

I add some buttons like refresh, If i push any of this buttons, it calls corresponding functions. in the next push it calls them 2x, and next push 4x, 8x, 16x.
Why it can happens? How to fix?

If i move all of this functions in Java script site, it doesnt solve the problem

Here is my code
@model List<Ideas.RavenDB.Models.ObjectsEntity?>
@using Ideas.Core.Enums;

@{
var items = Model;
var template = items.Find(x => x.Id == CRCStrings.Template);
items.Remove(template);
bool isFirstRootFound = !(template is null ||
(template?.Collection?.Length != 4));

var collection = template?.Collection;
var collectionPart = collection?[1..3];

var widgetName = “#jqxTreeGridWidget” + collectionPart;

var addButtonWidgetName = “jqxTreeGridWidget” + collectionPart + “_addButton”;
var refreshButtonWidgetName = “jqxTreeGridWidget” + collectionPart + “_refreshButton”;
var switchCollectionButtonWidgetName = “jqxTreeGridWidget” + collectionPart + “_switchButton”;

var collectionSwitch = CollectionTags.SwitchCollection(collection);
var collectionSwitchPart = collectionSwitch[1..3];
}

<script>
function createProperties(collection) {
$.ajax({
url: ‘@Url.Action(“Create”, “Properties”)’,
data: {
Collection: collection,
},
beforeSend: function () {
$(“#loader”).show();
},
success: function (result) {
//console.log(key);
$(“#partialViewProperties”).html(result);
},
error: function () {
$(“#loader”).hide();
alert(collection + ‘ Create Properties Fail’);
},
complete: function () {
$(“#loader”).hide();
}
});
}

function reloadTreeGridData(collection) {
var treeGridCollectionaPartName = collection.substring(1, 3);
var treeGridWidgetName = “#jqxTreeGridWidget” + treeGridCollectionaPartName;
console.log(‘reloadTreeGridData(‘ + collection + ‘)’);
console.log(treeGridWidgetName);
//’/Obs/GetObsTreeGridData’
$.ajax({
url: ‘@Url.Action(“GetObsTreeGridData”, “Obs”)’,
data: {
Collection: collection,
},
method: ‘GET’,
dataType: ‘json’,
beforeSend: function () {
$(“#loader”).show();
},
success: function (obsData) {
var source =
{
dataType: “json”,
dataFields: [
{ name: ‘id’, type: ‘string’ },
{ name: ‘parentId’, type: ‘string’ },
{ name: ‘collection’, type: ‘string’ },
{ name: ‘metaDataName’, map: ‘metaData>name’, type: ‘string’ },
{ name: ‘metaDataModule’, map: ‘metaData>module’, type: ‘string’ },
{ name: ‘metaDataObject’, map: ‘metaData>object’, type: ‘string’ },
{ name: ‘metaDataState’, map: ‘metaData>state’, type: ‘string’ },
{ name: ‘metaDataCRC’, map: ‘metaData>cRC’, type: ‘string’ },
{ name: ‘metaDataAutoDate’, map: ‘metaData>autoDate’, type: ‘date’ },
{ name: ‘metaDataModifiedDate’, map: ‘metaData>modifiedDate’, type: ‘date’ }
],
hierarchy:
{
keyDataField: { name: ‘id’ },
parentDataField: { name: ‘parentId’ }
},
id: ‘id’,
localdata: obsData
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(treeGridWidgetName).jqxTreeGrid(‘source’, dataAdapter);
},
error: function (jqXHR, textStatus, errorThrown) {
$(“#loader”).hide();
console.error(‘Error retrieving data:’, errorThrown);
alert(collection + ‘ Error retrieving data’);
},
complete: function () {
$(“#loader”).hide();
}
});
}

function initToolBar(toolBar) {
var container = $(“<div style=’overflow: hidden; position: relative; height: 100%; width: 100%;’></div>”);
toolBar.append(container);
container.append(‘<input style=”float: left; margin-left: 10px; margin-top: 4px;” id=”@addButtonWidgetName” type=”button” value=”@ObjectOperationStrings.Add” />’);
$(“#@addButtonWidgetName”).jqxButton({
imgSrc: “/lib/jqwidgets/jqwidgets/styles/images/plus.png”,
imgPosition: “left”,
textPosition: “left”,
textImageRelation: “imageBeforeText”,
height: 25
});

$(“#@addButtonWidgetName”).on(‘click’, function () {
console.log(‘@addButtonWidgetName’);
createProperties(‘@collection’);
});

container.append(‘<input style=”float: left; margin-left: 10px; margin-top: 4px;” id=”@refreshButtonWidgetName” type=”button” value=”@NameStrings.Entities” />’);
$(“#@refreshButtonWidgetName”).jqxButton({
imgSrc: “/lib/jqwidgets/jqwidgets/styles/images/refresh-16.png”,
imgPosition: “left”,
textPosition: “left”,
textImageRelation: “imageBeforeText”,
height: 25
});

$(“#@refreshButtonWidgetName”).on(‘click’, function () {
console.log(‘@refreshButtonWidgetName’);
//alert(“”);
reloadTreeGridData(‘@collection’);
});

container.append(‘<input style=”float: left; margin-left: 10px; margin-top: 4px;” id=”@switchCollectionButtonWidgetName” type=”button” value=”@NameStrings.Templates” />’);
$(“#@switchCollectionButtonWidgetName”).jqxButton({
imgSrc: “/lib/jqwidgets/jqwidgets/styles/images/refresh-16.png”,
imgPosition: “left”,
textPosition: “left”,
textImageRelation: “imageBeforeText”,
height: 25
});

$(“#@switchCollectionButtonWidgetName”).on(‘click’, function () {
console.log(‘@switchCollectionButtonWidgetName’);
//alert(“”);
reloadTreeGridData(‘@collectionSwitch’);
});
}

$(document).ready(function () {
var fullWidgetNameTreeGrid = ‘@widgetName’;

$(fullWidgetNameTreeGrid).on(‘bindingComplete’, function (event) {
//$(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘id’);
//$(“#treeGrid”).jqxTreeGrid(‘hideColumn’, ‘parentId’);
});

$(fullWidgetNameTreeGrid).jqxTreeGrid(
{
width: ‘100%’,
height: 835,
theme: ‘material’,
altRows: true,
autoRowHeight: true,
selectionMode: “singleRow”,
//aggregatesHeight: 50,
//autoShowLoadElement: false,
columnsHeight: 25,
columnsReorder: true,
editable: false,
//showAggregates: true,
//showSubAggregates: true,
source: [],
sortable: true,
filterable: true,
filterMode: “advanced”,
pageable: true,
pageSizeOptions: [‘100’, ‘200’, ‘300’, ‘400’, ‘500’, ‘1000’],
pageSize: 200,
//pagerButtonsCount: 2,
columnsResize: true,
pagerMode: ‘advanced’,
showToolbar: true,
renderToolbar: function (toolBar) {
initToolBar(toolBar);
},
localization: getTreeGridLocalization(),
ready: function () {
// АМИР, АЛМАЗ >> вместо 2 нужно указать ID элемента для раскрытия
//$(fullWidgetNameTreeGrid).jqxTreeGrid(‘expandRow’, ‘2’);
},
columns: [
//{ text: ‘Id’, columnGroup: ‘Ids’, dataField: ‘id’, align: ‘center’, width: 250 },
//{ text: ‘ParentId’, columnGroup: ‘Ids’, dataField: ‘parentId’, align: ‘center’, width: 250 },
{ text: ‘Name’, dataField: ‘metaDataName’, align: ‘center’ },
{ text: ‘Module’, dataField: ‘metaDataModule’, align: ‘center’, width: 90 },
{ text: ‘Object’, dataField: ‘metaDataObject’, align: ‘center’, width: 90 },
{ text: ‘Status’, dataField: ‘metaDataState’, align: ‘center’, width: 80 },
{ text: ‘CRC’, dataField: ‘metaDataCRC’, align: ‘center’, width: 80 },
{ text: ‘Date’, dataField: ‘metaDataAutoDate’, cellsformat: ‘dd.MM.yyyy’, align: ‘center’, width: 80 },
{ text: ‘Date modified’, dataField: ‘metaDataModifiedDate’, cellsformat: ‘dd.MM.yyyy’, align: ‘center’, width: 80 }
],
columnGroups: [
{ text: ‘Ids’, name: ‘Ids’, align: ‘center’ }
]
}
);

reloadTreeGridData(‘@collection’);
});

</script>

• This topic was modified 2 weeks, 1 day ago by  Mansur.

[MansurParticipant]

Solved.

You just need finish all’clicks” with

$(“#@addButtonWidgetName”).off(‘click’);

$(“#@refreshButtonWidgetName”).off(‘click’);

$(“#@switchCollectionButtonWidgetName”).off(‘click’);

Hope it helps to anybody

[adminKeymaster]

Thanks for the update, Mansur!

[game88siteParticipant]

Thanks for the update, Mansur!

[Author]

Posts