Add dynamic object to renderToolbar

[SerdarParticipant]

Hello, I searched a lot but I couldn’t find a solution.I need to dynamically add object.Sample button in the toolbar.can this be done?
rendertoolbar: function (toolbar) {
I think there may be a solution if the toolbar parameter is sent to a function. However, when I examined the toolbar, I could not find what I should send.

Thank you

• This topic was modified 3 months ago by  Serdar.

[adminKeymaster]

Hi Serdar,

The toolbar parameter is the HTML Element which you can use to append additional HTML Elements such as a button or other component.

    rendertoolbar: function (statusbar) {
                    // appends buttons to the status bar.
                    var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                    var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
                    var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>");
                    var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>");
                    var searchButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/search.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Find</span></div>");
                    container.append(addButton);
                    container.append(deleteButton);
                    container.append(reloadButton);
                    container.append(searchButton);
                    statusbar.append(container);
                    addButton.jqxButton({  width: 60, height: 20 });
                    deleteButton.jqxButton({  width: 65, height: 20 });
                    reloadButton.jqxButton({  width: 65, height: 20 });
                    searchButton.jqxButton({  width: 50, height: 20 });
                    // add new row.
                    addButton.click(function (event) {
                        var datarow = generatedata(1);
                        $("#grid").jqxGrid('addrow', null, datarow[0]);
                    });
                    // delete selected row.
                    deleteButton.click(function (event) {
                        var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex');
                        var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount;
                        var id = $("#grid").jqxGrid('getrowid', selectedrowindex);
                        $("#grid").jqxGrid('deleterow', id);
                    });
                    // reload grid data.
                    reloadButton.click(function (event) {
                        $("#grid").jqxGrid({ source: getAdapter() });
                    });
                    // search for a record.
                    searchButton.click(function (event) {
                        var offset = $("#grid").offset();
                        $("#jqxwindow").jqxWindow('open');
                        $("#jqxwindow").jqxWindow('move', offset.left + 30, offset.top + 30);
                    });
                },

This is from our demo. You can see how dynamically are added buttons to the toolbar and clicks are handled.

Regards,
Peter

jQWidgets team
https://www.jqwidgets.com/

[Author]

Posts