jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by CleanSock 11 years, 11 months ago.

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

Author

Refresh Toolbar Posts

July 18, 2013 at 1:58 pm Refresh Toolbar #25404

Member

I have created a grid with a toolbar on top of it using rendertoolbar option of jqxGrid. The jqxGrid code is within a function say function A. I have created another function, function B which works on the same grid but with some changes. Both have the same toolbar description. I am calling Function B first and both the grid and toolbar work fine. I then call Function A, the grid refreshes with the new data but the toolbar doesn’t. The div id I have specified inside is unique and I haven’t specified it in the jsp section of my webpage.
Any help on how to refresh the toolbar in Function A would be really appreciated. Given below is my code :

function A() {
populate grid with some values 
  
 $(gridName).jqxGrid({
rendertoolbar: function (toolbar) {
				        var container = $("<div id='chartID' style='margin: 5px;'></div>");                    
				        var span = $("<span style='float: left; margin-top: 7px; margin-right: 6px;'>"+ parameterName + "</span>");
				        var chartName = 'chartButton';
				        var button = $("<input style='margin-top: 7px; float: right;' type='Button' value='Chart' id="+chartName+" onclick='javascript:showMessage(this)'/>");
				        toolbar.append(container);
				        container.append(span);
				        container.append(button); 
				        }
});

function B() {
populate empty grid
$(gridName).jqxGrid({
rendertoolbar: function (toolbar) {
				        var container = $("<div id='chartID' style='margin: 5px;'></div>");                    
				        var span = $("<span style='float: left; margin-top: 7px; margin-right: 6px;'>"+ parameterName + "</span>");
				        var chartName = 'chartButton';
				        var button = $("<input style='margin-top: 7px; float: right;' type='Button' value='Chart' id="+chartName+" onclick='javascript:showMessage(this)'/>");
				        toolbar.append(container);
				        container.append(span);
				        container.append(button); 
				        }
});

P.S: I tried using and the alert doesn’t work.

$("#chartID").load(function () {
						alert("Hello");
					});

July 18, 2013 at 2:04 pm Refresh Toolbar #25405

Peter Stoev

Keymaster

Hi,

In the current version, when the “rendertoolbar” property is set either in the initialization of jqxGrid or after that, the function associated to the “toolbar” will be automatically called. This is valid for the current version, only so if you use some previous version, the toolbar will be rendered only when the Grid is created.

The alert “‘render toolbar’ in the code below will appear twice – once during the Grid’s initialization and after that when the “rendertoolbar” property is set again.


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this example the Grid is bound to a Remote Data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            // prepare the data
            var source =
            {
                datatype: "jsonp",
                datafields: [
                    { name: 'countryName' },
                    { name: 'name' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode' },
                    { name: 'adminName1' }
                ],
                async: false,
                url: "http://ws.geonames.org/searchJSON",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 20
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data) {
                        data.name_startsWith = $("#searchField").val();
                        return data;
                    }
                }
            );
            var toolbarfunc = function (toolbar) {
                alert('render toolbar');
                var me = this;
                var container = $("<div style='margin: 5px;'></div>");
                var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'>Search City: </span>");
                var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />");
                toolbar.append(container);
                container.append(span);
                container.append(input);
                if (theme != "") {
                    input.addClass('jqx-widget-content-' + theme);
                    input.addClass('jqx-rc-all-' + theme);
                }
                var oldVal = "";
                input.on('keydown', function (event) {
                    if (input.val().length >= 2) {
                        if (me.timer) {
                            clearTimeout(me.timer);
                        }
                        if (oldVal != input.val()) {
                            me.timer = setTimeout(function () {
                                $("#jqxgrid").jqxGrid('updatebounddata');
                            }, 1000);
                            oldVal = input.val();
                        }
                    }
                });
            };
            $("#jqxgrid").jqxGrid(
            {
                width: 680,
                source: dataAdapter,
                theme: theme,
                columns: [
                    { text: 'City', datafield: 'name', width: 170 },
                    { text: 'Country Name', datafield: 'countryName', width: 200 },
                    { text: 'Population', datafield: 'population', cellsformat: 'f', width: 170 },
                    { text: 'Continent Code', datafield: 'continentCode', minwidth: 110 }
                ],
                showtoolbar: true,
                autoheight: true,
                rendertoolbar: toolbarfunc
            });
            $("#jqxgrid").jqxGrid({ rendertoolbar: toolbarfunc });
         
        });
    </script>
</head>
<body class='default'>
    <div id='jqxgrid'></div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

July 19, 2013 at 5:05 pm Refresh Toolbar #25514

CleanSock

Member

Thank you Peter. I had to somehow do this, so found a way around and. I did it without using render toolbar option.

Author

Posts

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

You must be logged in to reply to this topic.