Forum
Log In
Home
Topic RSS
21:45
05/05/2011
Offline
I tried treegrid using code below.
jqGrid shows grid without rows.
dev helper shows that two rows of json data is returned by post request.
How to show data in jqGrid ?
Site.css:
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1″ runat="server">
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" type="text/css"
title="ui-theme" />
<link rel="stylesheet" type="text/css" media="screen" href="../../Content/Css/ui.jqgrid.css" />
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.5.1.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.ui.core.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.ui.widget.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.ui.position.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.ui.button.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.ui.menu.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/menubar.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.jqprint.0.3.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/i18n/grid.locale-en.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.jqGrid.min.js")%>"></script>
<script type="text/javascript">
$(function () {
$.jgrid.defaults = $.extend($.jgrid.defaults, { loadui: "enable" });
$("#west-grid").jqGrid({
url: "Store/GridData",
datatype: "json",
mtype: "POST",
height: "auto",
pager: false,
loadui: "disable",
colNames: ["id", "Items", "url"],
colModel: [
{ name: "id", width: 1, hidden: true, key: true },
{ name: "menu", width: 150, resizable: false, sortable: false },
{ name: "url", width: 1, hidden: true }
],
treeGrid: true,
caption: "jqGrid Demos",
ExpandColumn: "menu",
autowidth: true,
//width: 180,
rowNum: 200,
ExpandColClick: true,
treeIcons: { leaf: 'ui-icon-document-b' },
onSelectRow: function (rowid) {
var treedata = $("#west-grid").jqGrid('getRowData', rowid);
alert('onselectrow');
if (treedata.isLeaf == "true") {
$("#main").load(treedata.url);
}
}
}
);
});
</script>
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
</head>
<body>
<div id="container">
<div id="header" style="margin: 0; background-color: white; width: 100%">
</div>
<div id="LeftPane" class="ui-layout-west ui-widget ui-widget-content" style="margin: 0;
clear: left; float: left; width: 20%; border-style: none">
<table id="west-grid">
</table>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div id="footer">
<% Html.RenderPartial("Footer"); %>
</div>
</div>
</body>
</html>
Controller:
public ActionResult GridData(string sidx, string sord, int page, int rows)
{
var jsonData = new
{
total = 1,
page = 1,
records = 2,
rows = new[] {
new { id = 1, menu = "i1″, url = "trirand.com" },
new { id = 2, menu = "iiiiiii2″, url = "google.com" }
}.ToArray()
};
return Json(jsonData);
}
Most Users Ever Online: 816
Currently Online:
40 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
