jQuery Grid Plugin - jqGrid - Topic: JSON GridImport http://www.trirand.com/blog/?page_id=393/help/json-gridimport Simple:Press Version 5.7.5.3 nj on JSON GridImport http://www.trirand.com/blog/?page_id=393/help/json-gridimport#p28192 Help http://www.trirand.com/blog/?page_id=393/help/json-gridimport#p28192 Hi guys,

Any idea?

I hope this post is not too trivial so to not getting answer from anyone.

]]> Fri, 01 Feb 2013 03:10:35 +0200 nj on JSON GridImport http://www.trirand.com/blog/?page_id=393/help/json-gridimport#p28169 Help http://www.trirand.com/blog/?page_id=393/help/json-gridimport#p28169 Hi,

I am trying to generate a JqGrid by importing its configuration using JSON format.

The import script is contained in the PCS.aspx page, which also contains the <table id="UsersGrid" class="scroll"></table> markup as well as the  <div id="UsersGridPager"  class="scroll"></div> where the JqGrid and the pager will be loaded.  

PCS.aspx page is called by the Jquery "tabs" widget which is located in the page ePICMain.aspx.

The string containing the JqGrid configurations (taken from JSON_test.txt) is passed to the jqGridImport by the handler 'Prueba1.ashx'. BTW, I am passing this string just for testing purposes, once got it working, the config string will be constructed programatically from rules in a DB table.

These are the relevant codes:

ePICMain.aspx:

<html xmlns="http://www.w3.org/1999/xhtml&q.....t;&gt;

<head>

<title></title>

<link href="../Scripts/jquery-ui-1.9.2.custom/development-bundle/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<script src="../Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>

<script src="../Scripts/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$("#tabs").tabs({

beforeLoad: function (event, ui) {

ui.jqXHR.error(function () {

ui.panel.html(

"Couldn't load this tab.");

});

}

});

});

</script>

</head>

<body>

<div id="tabs">

<form method="post" action="ePICMain.aspx" id="form1">

<div class="aspNetHidden">

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMzQ1MjMwNzM2ZGR622tuDyx8e6mpj9Xd9uu7ClQ5eg6O2BWgNln+HJaI+g==" />

</div>

<ul>

<li><a class="MenuHlink" href="PJS.aspx">PROJECT SETUP</a></li>

<li><a class="MenuHlink" href="PFS.aspx">FORMAT SETUP</a></li>

<li><a class="MenuHlink" href="PCS.aspx">PROJECT CALCULATIONS SETUP</a></li>

<li><a class="MenuHlink" href="EGL.aspx">ELECTRICAL GEAR MODIFICATION</a></li>

<li><a class="MenuHlink" href="ELL.aspx">ELECTRICAL LOADS MODIFICATION</a></li>

<li><a class="MenuHlink" href="ECL.aspx">ELECTRICAL CABLES MODIFICATION</a></li>

<li><a class="MenuHlink" href="ISSUE.aspx">DELIVERABLES ISSUANCE</a></li>

</ul>

</div>

</form>

</div>

</body>

</html>

PCS.aspx:

<html xmlns="http://www.w3.org/1999/xhtml&q.....t;&gt; <head runat="server">

<title></title>

<link rel="stylesheet" type="text/css" media="screen" href="../Styles/ui-lightness/jquery.ui.theme.css" />

<link rel="stylesheet" type="text/css" media="screen" href="../Styles/ui.jqgrid.css" />           <script src="../Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>                   <script src="../Scripts/grid.locale-en.js" type="text/javascript"></script>                     <script src="../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">

jQuery("#UsersGrid").jqGrid('jqGridImport', { impurl: "prueba1.ashx", imptype: "json", mtype: "POST", jsonGrid: { config: "grid", data: "data"} });

</script>

</head>

<body>

<form id="form1" runat="server">

<table id="UsersGrid" class="scroll"></table>

<div id="UsersGridPager" class="scroll"></div>

</form>

</body>

</html>

Handler 'Prueba1.ashx':

public void ProcessRequest(HttpContext context)

{HttpResponse response = context.Response;

 string output = BuildJQGridImport();

 response.Write(output);

}

private string BuildJQGridImport()

{

string result;

result = @"{grid:{""url"":"""",""page"":""1"",""rowNum"":10,""pager"":""#UsersGridPager"",""pgbuttons"":true,""pginput"":true,""colModel"":[{""name"":""id"",""index"":""id"",""width"":55,""resizable"":true},{""name"":""invdate"",""index"":""invdate"",""width"":90,""resizable"":true},{""name"":""name"",""index"":""name asc, invdate"",""width"":100,""resizable"":true},{""name"":""amount"",""index"":""amount"",""width"":80,""align"":""right"",""resizable"":true},{""name"":""tax"",""index"":""tax"",""width"":80,""align"":""right"",""resizable"":true},{""name"":""total"",""index"":""total"",""width"":80,""align"":""right"",""resizable"":true},{""name"":""note"",""index"":""note"",""width"":150,""sortable"":false,""resizable"":true}],""rowList"":[10,20,30],""colNames"":[""Inv No"",""Date"",""Client"",""Amount"",""Tax"",""Total"",""Notes""],""sortorder"":""desc"",""sortname"":""id"",""datatype"":""json"",""mtype"":""GET"",""altRows"":true,""shrinkToFit"":false,""subGrid"":false,""viewrecords"":true,""caption"":""JSON Example"",""hiddengrid"":false,""recordtext"":""Row(s)""},data: {""page"":""1"",""total"":2,""records"":""13"",""rows"":[{""id"":""13"",""cell"":[""13"",""2007-10-06"",""Client 3"",""1,234.00"",""0.00"",""1000.00"",null]},{""id"":""12"",""cell"":[""12"",""2007-10-06"",""Client 2 &amp; test"",""1,700.00"",""140.00"",""1840.00"",null]},{""id"":""11"",""cell"":[""11"",""2007-10-06"",""Client 1 & this should work"",""600.00"",""120.00"",""720.00"",null]},{""id"":""10"",""cell"":[""10"",""2007-10-06"",""Client 2 &amp; test"",""100.00"",""20.00"",""120.00"",null]},{""id"":""9"",""cell"":[""9"",""2007-10-06"",""Client 1 & this should work"",""200.00"",""40.00"",""240.00"",null]},{""id"":""8"",""cell"":[""8"",""2007-10-06"",""Client 3"",""200.00"",""0.00"",""200.00"",null]},{""id"":""7"",""cell"":[""7"",""2007-10-05"",""Client 2 &amp; test"",""120.00"",""12.00"",""134.00"",null]},{""id"":""6"",""cell"":[""6"",""2007-10-05"",""Client 1 & this should work"",""50.00"",""10.00"",""60.00"",null]},{""id"":""5"",""cell"":[""5"",""2007-10-05"",""Client 3"",""100.00"",""0.00"",""100.00"",""no tax gdsafjhgsadf""]},{""id"":""4"",""cell"":[""4"",""2007-10-04"",""Client 3"",""150.00"",""0.00"",""150.00"",""no tax ggfgdsfgsfdg""]}]}}";

return result;

}

when run, fiddler2 catches the following as being passed from the handler to the import script in PCS.aspx:

{grid:{"url":"","page":"1","rowNum":10,"pager":"#UsersGridPager","pgbuttons":true,"pginput":true,"colModel":[{"name":"id","index":"id","width":55,"resizable":true},{"name":"invdate","index":"invdate","width":90,"resizable":true},{"name":"name","index":"name asc, invdate","width":100,"resizable":true},{"name":"amount","index":"amount","width":80,"align":"right","resizable":true},{"name":"tax","index":"tax","width":80,"align":"right","resizable":true},{"name":"total","index":"total","width":80,"align":"right","resizable":true},{"name":"note","index":"note","width":150,"sortable":false,"resizable":true}],"rowList":[10,20,30],"colNames":["Inv No","Date","Client","Amount","Tax","Total","Notes"],"sortorder":"desc","sortname":"id","datatype":"json","mtype":"GET","altRows":true,"shrinkToFit":false,"subGrid":false,"viewrecords":true,"caption":"JSON Example","hiddengrid":false,"recordtext":"Row(s)"},data: {"page":"1","total":2,"records":"13","rows":[{"id":"13","cell":["13","2007-10-06","Client 3","1,234.00","0.00","1000.00",null]},{"id":"12","cell":["12","2007-10-06","Client 2 &amp; test","1,700.00","140.00","1840.00",null]},{"id":"11","cell":["11","2007-10-06","Client 1 & this should work","600.00","120.00","720.00",null]},{"id":"10","cell":["10","2007-10-06","Client 2 &amp; test","100.00","20.00","120.00",null]},{"id":"9","cell":["9","2007-10-06","Client 1 & this should work","200.00","40.00","240.00",null]},{"id":"8","cell":["8","2007-10-06","Client 3","200.00","0.00","200.00",null]},{"id":"7","cell":["7","2007-10-05","Client 2 &amp; test","120.00","12.00","134.00",null]},{"id":"6","cell":["6","2007-10-05","Client 1 & this should work","50.00","10.00","60.00",null]},{"id":"5","cell":["5","2007-10-05","Client 3","100.00","0.00","100.00","no tax gdsafjhgsadf"]},{"id":"4","cell":["4","2007-10-04","Client 3","150.00","0.00","150.00","no tax ggfgdsfgsfdg"]}]}}

which is properly recognized and displayed as JSON format.

However, I got nothing disaplayed in the webpage. I tried also serializing the string but still no success.

I would really appreciate your help.

Thanks in advance.

]]> Wed, 30 Jan 2013 04:21:22 +0200