kobruleht on How to show data in treegrid

Thu, 05 May 2011 21:45:29 +0300

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>

            $("#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);
        }

jQuery Grid Plugin - jqGrid - Topic: How to show data in treegrid

kobruleht on How to show data in treegrid