jQuery Grid Plugin - jqGrid - Topic: use existing div for the toolbar http://www.trirand.com/blog/?page_id=393/discussion/use-existing-div-for-the-toolbar Simple:Press Version 5.7.5.3 alvin on use existing div for the toolbar http://www.trirand.com/blog/?page_id=393/discussion/use-existing-div-for-the-toolbar#p2954 Discussion http://www.trirand.com/blog/?page_id=393/discussion/use-existing-div-for-the-toolbar#p2954 One caveat: the div passed in to the toolbar is given the id='#t_list'

For example:

<div id='#will_be_renamed'><div id='#toolbar'>Some html</div></div>

jQuery('#list').jqGrid({

  <other params>

  toolbar: ['#will_be_renamed', 'top']

});

// Next javascript line will see:

jQuery('#t_list')  // instead of '#will_be_renamed'

jQuery('#toolbar') // does work

]]> Thu, 06 Nov 2008 10:00:46 +0200 ycceric on use existing div for the toolbar http://www.trirand.com/blog/?page_id=393/discussion/use-existing-div-for-the-toolbar#p2939 Discussion http://www.trirand.com/blog/?page_id=393/discussion/use-existing-div-for-the-toolbar#p2939 Wed, 05 Nov 2008 21:46:47 +0200 alvin on use existing div for the toolbar http://www.trirand.com/blog/?page_id=393/discussion/use-existing-div-for-the-toolbar#p2937 Discussion http://www.trirand.com/blog/?page_id=393/discussion/use-existing-div-for-the-toolbar#p2937 First, thanks for the great plugin.

I like the toolbar feature and the examples I looked at used the following pattern:

$('#t_list').append('<html here>')

which did work for me.

I prefer adding HTML to the toolbar using a templating language.

This can be accomplished in jqGrid by applying this patch (jqGrid 3.3; Date: 2008-10-05 rev 62)

It worked for me on FF3 on Mac.

Sample usage to add '<div id="toolbar">good stuff here</div>':

jQuery('#list').jqGrid({
       <other params here>
        toolbar: ['#toolbar', "bottom"]

});

Is there an easier way to use an existing div as a toolbar?

Thanks

alvin

--- a/jqGrid/js/grid.base.js
+++ b/jqGrid/js/grid.base.js

@@ -1366,7 +1369,8 @@ $.fn.jqGrid = function( p ) {
                $(grid.cDiv).append("<table class='Header' cellspacing='0' cellpadding='0' border='0'><tr><td class='HeaderLeft'><i
                $(grid.cDiv).insertBefore(grid.hDiv);
                if( ts.p.toolbar[0] ) {
-                       grid.uDiv = document.createElement("div");
+                       if( ts.p.toolbar[0] === true) {grid.uDiv = document.createElement("div");}
+                       else {grid.uDiv = $(ts.p.toolbar[0]);}
                        if(ts.p.toolbar[1] == "top") {$(grid.uDiv).insertBefore(grid.hDiv);}
                        else {$(grid.uDiv).insertAfter(grid.hDiv);}
                        $(grid.uDiv,ts).width(grid.width).addClass("userdata").attr("id","t_"+this.id);

]]> Wed, 05 Nov 2008 18:17:27 +0200