<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
	<title>jQuery Grid Plugin - jqGrid - Topic: Initalize jqGrid using JSON with formatter</title>
	<link>http://www.trirand.com/blog/?page_id=393/help/initalize-jqgrid-using-json-with-formatter</link>
	<description><![CDATA[Grid plugin]]></description>
	<generator>Simple:Press Version 5.7.5.3</generator>
	<atom:link href="http://www.trirand.com/blog/?page_id=393/help/initalize-jqgrid-using-json-with-formatter/rss" rel="self" type="application/rss+xml" />
        <item>
        	<title>swalker on Initalize jqGrid using JSON with formatter</title>
        	<link>http://www.trirand.com/blog/?page_id=393/help/initalize-jqgrid-using-json-with-formatter#p27734</link>
        	<category>Help</category>
        	<guid isPermaLink="true">http://www.trirand.com/blog/?page_id=393/help/initalize-jqgrid-using-json-with-formatter#p27734</guid>
        	        	<description><![CDATA[<p>I have jqGrid working, but I&#39;m trying to load a image into a cell.&#160; The way jqGrid get initialized is that we get the jqGrid configuration from the server in JSON format.&#160; What I&#39;m having trouble is getting the "formatter" to initialize properly from the JSON data.</p>
<p>
I know some of the code has been removed such as the localization strings, trying to keep it as simple as I can.&#160; Below you will see the first index to colModel is the formatter that I&#39;m trying to get jqGrid to initalize that I want it to call the function to insert the html img tag, but jqGrid will not do it.&#160; Is there something speical that I need to do for formatter to work properly when loading from JSON data?</p>
<p>PHP Code to return JSON data:</p>
<pre>$results = array();

$results[&#39;rowNum&#39;]		= 100;
$results[&#39;rowList&#39;]		= array(10, 20, 30, 40, 50, 60, 70, 80, 90, 100);
$results[&#39;sortname&#39;]	= &#39;lastname&#39;;
$results[&#39;sortorder&#39;]	= &#39;asc&#39;;

$results[&#39;caption&#39;]		= array(htmlspecialchars($caption));
$results[&#39;addtext&#39;]		= array(htmlspecialchars($addtext));
$results[&#39;edittext&#39;]	= array(htmlspecialchars($edittext));
$results[&#39;deltext&#39;]		= array(htmlspecialchars($deltext));
$results[&#39;searchtext&#39;]	= array(htmlspecialchars($searchtext));
$results[&#39;refreshtext&#39;]	= array(htmlspecialchars($refreshtext));
$results[&#39;viewtext&#39;]	= array(htmlspecialchars($viewtext));
$results[&#39;emptyrecords&#39;]= array(htmlspecialchars($emptyrecords));
$results[&#39;loadtext&#39;]	= array(htmlspecialchars($loadtext));

$results[&#39;colNames&#39;]	= array(htmlspecialchars($type),
								htmlspecialchars($firstname),
								htmlspecialchars($lastname),
								htmlspecialchars($company),
								htmlspecialchars($email));

$types = array(&#39;contact:&#39; . htmlspecialchars($contact), &#39;group:&#39; . htmlspecialchars($group));

$results[&#39;colModel&#39;][] = array( &#39;name&#39; =&#62; &#39;type&#39;,
								&#39;index&#39; =&#62; &#39;type&#39;,
								&#39;width&#39; =&#62; &#39;16&#39;,
								&#39;editable&#39; =&#62; true,
								&#39;edittype&#39; =&#62; &#39;image&#39;,
								&#39;formatter&#39; =&#62; &#39;js:contactTypeImage&#39;);

$results[&#39;colModel&#39;][] = array(	&#39;name&#39; =&#62; &#39;firstname&#39;,
								&#39;index&#39; =&#62; &#39;firstname&#39;,
								&#39;width&#39; =&#62; &#39;80&#39;,
								&#39;editable&#39; =&#62; true);

$results[&#39;colModel&#39;][] = array(	&#39;name&#39; =&#62; &#39;lastname&#39;,
								&#39;index&#39; =&#62; &#39;lastname asc, firstname&#39;,
								&#39;width&#39; =&#62; &#39;80&#39;,
								&#39;editable&#39; =&#62; true);

$results[&#39;colModel&#39;][] = array(	&#39;name&#39; =&#62; &#39;companyname&#39;,
								&#39;index&#39; =&#62; &#39;companyname&#39;,
								&#39;width&#39; =&#62; &#39;80&#39;,
								&#39;editable&#39; =&#62; true);

$results[&#39;colModel&#39;][] = array(	&#39;name&#39; =&#62; &#39;email1address&#39;,
								&#39;index&#39; =&#62; &#39;email1address&#39;,
								&#39;width&#39; =&#62; &#39;80&#39;,
								&#39;editable&#39; =&#62; true);

echo json_encode($results);

</pre>
<p>Javascript Code:</p>
<pre>    $.ajax({
        type: &#39;GET&#39;,
        url:&#39;/contacts/initgrid&#39;,
        data: &#39;&#39;,
        datatype: &#39;json&#39;,
        success: function(response) {
            var caption = response.caption;
            var addtext = response.addtext;
            var edittext = response.edittext;
            var deltext = response.deltext;
            var searchtext = response.searchtext;
            var refreshtext = response.refreshtext;
            var viewtext = response.viewtext;
            var emptyrecords = response.emptyrecords;
            var loadtext = response.loadtext;

            var rowNum = response.rowNum;
            var rowList = response.rowList;
            var sortname= response.sortname;
            var sortorder = response.sortorder;

            var columnNames = response.colNames;
            var columnModel = response.colModel;

            $("#contact_list").jqGrid(
                    {
                        url:&#39;/contacts/list&#39;,
                        datatype: "json",
                        colNames: columnNames,
                        colModel: columnModel,
                        autowidth: true,
                        height: &#39;auto&#39;,
                        rowNum: rowNum,
                        rowList: rowList,
                        toppager: true,
                        pager: &#39;#contact_list_pager&#39;,
                        sortname: sortname,
                        viewrecords: true,
                        sortorder: sortorder,
                        emptyrecords: emptyrecords,
                        loadtext: loadtext,
                        caption: caption,
                        loadComplete : function() {
                            // Remove the close button on the toolbar
                            $(&#39;.ui-jqgrid-titlebar-close&#39;).remove();
                        }
                    }
                ).jqGrid(&#39;navGrid&#39;,&#39;#contact_list_toppager&#39;,
                    {   edit: true,
                        add: true,
                        del: true,
                        refresh: true,
                        view: true,
                        addtext: addtext,
                        edittext: edittext,
                        deltext: deltext,
                        searchtext: searchtext,
                        refreshtext: refreshtext,
                        viewtext: viewtext,
                    },
                    {
                        recreateForm: true,
                        beforeInitData: function () {
                            alert("hello beforeInitData - 1");
                        }
                    },
                    {   url: &#39;/contacts/modify&#39;,
                        closeAfterEdit: true,
                    },
                    {   url: &#39;/contacts/create&#39;,
                        closeAfterAdd: true
                    },
                    {   url: &#39;/contacts/delete&#39;
                    },
                    {   // search options
                    }
                ).jqGrid(&#39;navGrid&#39;,&#39;#contact_list_pager&#39;,
                    {   edit: false,
                        add: false,
                        del: false,
                        refresh: false
                    },
                    {
                        recreateForm: true,
                        beforeInitData: function () {
                            alert("hello beforeInitData - 2");
                        }
                    }
                );
        }
    });
});

function contactTypeImage(cellValue, options, rowObject)
{
    alert("&#62;&#62;&#62; in contactTypeImage");
    var imageHtml = "[Image Can Not Be Found]";
    return imageHtml;
}
</pre>
]]></description>
        	        	<pubDate>Wed, 14 Nov 2012 17:58:56 +0200</pubDate>
        </item>
</channel>
</rss>