DataGrid loader fires multiple times

[glarsen]

I've seen other topics like this which helped me narrow down the problem.

I have a need to dynamically change the DataGrid title and toolbar. This code will fire the loader:

  dg.datagrid({
    title: title,
    toolbar: toolbar
  });

When pagination is defined it also fires the loader:

        var pager = dg.datagrid('getPager');
        pager.pagination({
          displayMsg: '{from} to {to} of {total} items',
          layout:['list','first','prev','next','last']
        });

Is there a way to avoid this, am I doing something wrong?  The loader is defined like this:

          loader:function(param,success,error){
            $.ajax({
              type: 'POST',
              url: 'init-group-members?n_tab_id=' + $.urlParam('n_tab_id') + '&groupId=' + g.id,
              data: param,
              dataType: 'json',
              async: false,
              success: function(data){
                success(data);
              },
              error: function(){
                error.apply(this, arguments);
              },
              complete: function(jqXHR, textStatus) {
              }
            });
          }

[stworthy]

Calling '.datagrid({...}' will create datagrid component again, it will also make the request to server if the 'url' property is defined. In your case, you can call 'getPanel' method to get the panel object and call 'setTitle' method to change the title.

Code:

var p = $('#dg').datagrid('getPanel');
p.panel('setTitlte', title);

If you point the toolbar to a specific <div> element, just like this:

Code:

$('#dg').datagrid({
  toolbar: '#tb'
});

Thus, you can change the toolbar content easily, the code looks like this:

Code:

$('#tb').empty().append(...);

If you really want to re-create the datagrid again, please try this:

Code:

var url = dg.datagrid('options').url;
dg.datagrid({
  title: title,
  toolbar: toolbar,
  url: null
});
dg.datagrid('options').url = url;  // restore the 'url' again

[glarsen]

Thanks for the explanation.  Making progress but can't figure out why toolbar icons are not showing:

<div id="toolbarxOkJJIE1hcmtldGluZyBFdmVyeW9uZQ__" class="datagrid-toolbar">
<a onclick="javascript:groupSort(&quot;xOkJJIE1hcmtldGluZyBFdmVyeW9uZQ__&quot;)" plain="true" iconcls="icon-save" class="easyui-linkbutton" href="#">Default</a>
</div>

Pasted the <a> in an EasyUI demo and it worked.   The toolbar icon worked using iconCls: 'icon-sort' property.

Thanks for any suggestions,
Gary

[stworthy]

Call $.parser.parse function to parse the toolbar.

Code:

$.parser.parse('div.datagrid-toolbar');

[glarsen]

Bingo!  Thanks for you help.