jQuery UI Widgets Forums General Discussions jqxTreegrid doubles all functions

This topic contains 4 replies, has 4 voices, and was last updated by  DamonRich 8 months, 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • jqxTreegrid doubles all functions #133049

    Mansur
    Participant

    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 9 months, 1 week ago by  Mansur.
    jqxTreegrid doubles all functions #133052

    Mansur
    Participant

    Solved.

    You just need finish all’clicks” with

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

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

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

    Hope it helps to anybody

    jqxTreegrid doubles all functions #133091

    admin
    Keymaster

    Thanks for the update, Mansur!

    jqxTreegrid doubles all functions #133098

    game88site
    Participant

    Thanks for the update, Mansur!

    jqxTreegrid doubles all functions #133139

    DamonRich
    Participant

    Thank you for this!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.