0

Json data as :

{id: "1", name: "Cash", num: "100", debit: "400.00",  credit: "250.00",
    balance: "150.00", enbl: "1", level: "0", parent: "null",
    isLeaf: false, expanded: true, loaded: true}

the parameter "expanded" seem no use?

I don't know how to expand all nodes or some specified node when initialise my json data?


To Oleg: thanks for your demo,but I can't visit that page! - -! Then,I show you my javascript code,maybe you can find some problems:

$(function () {
        $('#list').jqGrid({
            url: 'SvcDept.ashx',
            ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
            datatype: 'json',
            mtype: 'GET',
            treeGrid: true,
            treeGridModel: 'adjacency',
            ExpandColumn: 'Name',
            colNames: ['ID', 'Name', 'Director', 'ParentID'],
            colModel: [
            { name: 'ID', index: 'ID', hidden: true, width: 1, key: true },
            { name: 'Name', index: 'Name', width: 200, fixed: true },
            { name: 'Director', index: 'Director', width: 100 },
            { name: 'ParentID', index: 'ParentID', hidden: true, width: 1 }
            ],
            autowidth: true,
            height: 'auto'
        });
    });

and My SvcDept.ashx:

public class SvcDept 
{
    public void ProcessRequest(HttpContext context)
    {
        var depts = context.Application["Departments"] as List<Department>;
        var nodeid = context.Request["nodeid"];
        var n_level = context.Request["n_level"];
        Guid? deptID = nodeid != null ? new Guid(nodeid) : new Nullable<Guid>();
        int level = n_level != null ? int.Parse(n_level) + 1 : 0;
        var subDepts = depts.Where<Department>(x => x.ParentID == deptID).ToList<Department>();
        var data = new
        {
            page = 1,
            total = 1,
            records = subDepts.Count,
            rows = (from dept in subDepts
                    select new
                    {
                        cell = new[] 
                        {
                            dept.ID.ToString(),     
                            dept.Name,               
                            dept.Director ,
                            dept.ParentID != null ? dept.ParentID.ToString() : "",                                
                            level.ToString(),   //Level
                            deptID != null ? deptID.ToString() : "null",    //ParentID
                            depts.Count<Department>(x => x.ParentID == dept.ID) == 0 ? "true":"false",  //isLeaf
                            "true", //expanded
                            "false"//loaded
                        }
                    })
        };
        context.Response.ContentType = "application/json";
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        context.Response.Write(serializer.Serialize(data));
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}
 public class Department
{
    public Guid ID { get; set; }
    public string Name { get; set; }
    public string Director { get; set; }
    public Guid? ParentID { get; set; }
}
skingz
  • 1
  • 1
  • 2

1 Answers1

1

Probably you have some problems in other part of your code. Look at the demo and compare with another one where only the value of expanded property are changed to true. The node will be expanded. If you do have problems you should include your code in the code of your question.

UPDATED: You wrote that you have some problem to access to the demos which is a little strange. The first demo is from the answer. I modified in the code of the demo just one value of expanded property are changed to true and the grid will be loaded with extended I includes the full code "Cash" item. Below you find the full HTML code of the demo:

<!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>
    <title>https://stackoverflow.com/questions/7208412/jqgrid-checkbox-onclick-update-database</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/css/ui.jqgrid.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/jquery.jqGrid.src.js"></script>

    <script type="text/javascript">
    //<![CDATA[
        $(function(){
            'use strict';
            var mydata = [
                { id:"1", name:"Cash",   num:"100", debit:"400.00",credit:"250.00", balance:"150.00", enbl:"1",
                  level:"0", parent:"null",  isLeaf:false, expanded:true, loaded:true },
                { id:"2", name:"Cash 1", num:"1",   debit:"300.00",credit:"200.00", balance:"100.00", enbl:"0",
                  level:"1", parent:"1", isLeaf:false, expanded:false, loaded:true },
                { id:"3", name:"Sub Cash 1", num:"1",debit:"300.00",credit:"200.00", balance:"100.00", enbl:"1",
                  level:"2", parent:"2", isLeaf:true,  expanded:false, loaded:true },
                { id:"4", name:"Cash 2", num:"2",debit:"100.00",credit:"50.00", balance:"50.00", enbl:"0",
                  level:"1", parent:"1", isLeaf:true,  expanded:false, loaded:true },
                { id:"5", name:"Bank\'s", num:"200",debit:"1500.00",credit:"1000.00", balance:"500.00", enbl:"1",
                  level:"0", parent:"null",  isLeaf:false, expanded:true, loaded:true },
                { id:"6", name:"Bank 1", num:"1",debit:"500.00",credit:"0.00", balance:"500.00", enbl:"0",
                  level:"1", parent:"5", isLeaf:true,  expanded:false, loaded:true },
                { id:"7", name:"Bank 2", num:"2",debit:"1000.00",credit:"1000.00", balance:"0.00", enbl:"1",
                  level:"1", parent:"5", isLeaf:true,  expanded:false, loaded:true },
                { id:"8", name:"Fixed asset", num:"300",debit:"0.00",credit:"1000.00", balance:"-1000.00", enbl:"0",
                  level:"0", parent:"null",  isLeaf:true,  expanded:false, loaded:true }
                ],
                getColumnIndexByName = function(grid, columnName) {
                    var cm = grid.jqGrid('getGridParam', 'colModel'), i, l;
                    for (i = 0, l = cm.length; i < l; i += 1) {
                        if (cm[i].name === columnName) {
                            return i; // return the index
                        }
                    }
                    return -1;
                },
                grid = $("#treegrid");

            grid.jqGrid({
                datatype: "jsonstring",
                datastr: mydata,
                colNames:["Id","Account","Acc Num","Debit","Credit","Balance","Enabled"],
                colModel:[
                    {name:'id', index:'id', width:1, hidden:true, key:true},
                    {name:'name', index:'name', width:180},
                    {name:'num', index:'acc_num', width:80, align:"center"},
                    {name:'debit', index:'debit', width:80, align:"right"},
                    {name:'credit', index:'credit', width:80,align:"right"},
                    {name:'balance', index:'balance', width:80,align:"right"},
                    {name:'enbl', index:'enbl', width: 60, align:'center',
                     formatter:'checkbox', editoptions:{value:'1:0'},
                     formatoptions:{disabled:false}, }
                ],
                height: 'auto',
                gridview: true,
                rowNum: 10000,
                sortname: 'id',
                treeGrid: true,
                treeGridModel: 'adjacency',
                treedatatype: "local",
                ExpandColumn: 'name',
                caption: "Demonstrate how to use Tree Grid for the Adjacency Set Model",
                jsonReader: {
                    repeatitems: false,
                    root: function (obj) { return obj; },
                    page: function (obj) { return 1; },
                    total: function (obj) { return 1; },
                    records: function (obj) { return obj.length; }
                },
                loadComplete: function () {
                    var iCol = getColumnIndexByName ($(this), 'enbl'), rows = this.rows, i, c = rows.length;
                    for (i = 0; i < c; i += 1) {
                        $("input", rows[i].cells[iCol]).click(function (e) {
                            var id = $(e.target).closest('tr')[0].id,
                                isChecked = $(e.target).is(':checked');
                            alert('clicked on the checkbox in the row with id=' + id +
                                  '\nNow the checkbox is ' +
                                  (isChecked? 'checked': 'not checked'));
                        });
                    }
                }
            }); //.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch: 'cn'});;
        });
    //]]>
    </script>
</head>
<body>
    <table id="treegrid"><tr><td/></tr></table>
</body>
</html>
Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • @skingz: First of all I included the full code of the demo. I will read your code later and answer you. – Oleg Nov 17 '11 at 13:18
  • :I find that I can expand nodes with "/jquery.jqGrid-3.5/js/jquery.jqGrid.src.js" – skingz Nov 18 '11 at 08:18
  • @skingz: Sorry, but I don't understand what you mean. jqGrid 3.5 had no jquery.jqGrid.src.js. Is your problems is solved now? What was the reason? – Oleg Nov 18 '11 at 08:41
  • @skingz: Do you tried the demo from my answer? If you set `expanded:true` for every node with `isLeaf:false` the node will be shown expanded. Could you reproduce this? Which JSON data you post back? Correspond to your code the data will be array of strings, so not exactly in the format which you included in your original question. Could you include the exact JSON data returned from the server? – Oleg Nov 20 '11 at 13:24
  • :sorry ,My demo code have some problems.That Grid get Json data from the server by page click.The mean that the Gird can't Load Data completely By Page load. And I found the paramerter "loaded" is a key word for expanding TreeGrid when init the data.In your demo,the grid can't expand nodes too if I remove the parameter"loaded" in the jsondata. – skingz Nov 21 '11 at 04:10
  • "Oleg":Add Parameter "loaded" and get all data at once, My problem is solved now!Thank you very much! – skingz Nov 21 '11 at 04:41
  • is there a similar expand all level on pretty-json?? @Oleg – ram Oct 15 '13 at 09:22
  • @ram: Sorry, I am not sure that I correctly understand what you mean. If the server response contains all nodes which need be expanded and the nodes have `expanded: true, loaded: true` properties then the nodes will be loaded and expanded. You can for example include *all data of TreeGrid* in the server response and set `loaded: true` or both `loaded: true` and `expanded: true` on items. By the way if your server already returns all grid data you can set `expanded: true, loaded: true` on the client side inside of `beforeProcessing` callback. – Oleg Oct 15 '13 at 09:27
  • Almost you got my requirement @Oleg, PrettyJSON.view.Node=Backbone.View.extend({tagName:'span',data:null,level:1,path:'',type:'',size:0,isLast:true,rendered:false} is my code by default expands only first child nodes of JSON, but is there a way to expand all nodes? (All data are in client side) – ram Oct 15 '13 at 09:33
  • @ram: Take a look in code of `beforeProcessing` callback from [the answer](http://stackoverflow.com/a/9867370/315935) for example. It shows how to set some properties `undefined` in the server response on the client side. You can do something like that and *modify* the server response by setting `expanded: true, loaded: true` **before** the server response will be processed by jqGrid. – Oleg Oct 15 '13 at 09:39