Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: JSON Grid Datamodel Example/Help

  1. #1
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    64

    Default JSON Grid Datamodel Example/Help

    I'm just doing some testing with JSON Data Model and am curious if someone could provide an example of what format the JSON code should be in for that particular model. I've gotten it to work in firefox but not IE.

    Here's a code example.
    Code:
    function gridDraw() { var schema = {
         root: 'food',
         id: 'nothing',
         fields: ['name', 'price']
     };
    var dataModel = new YAHOO.ext.grid.JSONDataModel(schema);
    var data = eval('({"food": [{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "steak","price": 10}]})');
    dataModel.loadData(data);
    var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    That code looks fine. What is the error message you are receiving? Can you post the rest of the grid creation code?

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    64

    Default

    I'm not sure how it fixed itself, but it did. Might have been the upgrade to the new version. I guess this can sit as an example of a JSON setup that should work though.

  4. #4

    Default

    Please look at the following page:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
        <link href="css/grid.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="js/yui/yahoo.js"></script>
        <script type="text/javascript" src="js/yui/event.js"></script>
        <script type="text/javascript" src="js/yui/dom.js"></script>
        <script type="text/javascript" src="js/yui/dragdrop.js"></script>
        <script type="text/javascript" src="js/yui/animation.js"></script>
        <script type="text/javascript" src="js/yui/connection.js"></script>
        
        <script type="text/javascript" src="js/yui-ext/yui-ext.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="grid" style="width:630px;height:250px;overflow:hidden;position:relative;"></div>  
    <script type="text/javascript">
    var Example = {
        init : function(){
            var schema = {root: "FolderContent", id: "nothing", fields: ["name", "type"]};
            var dataModel = new YAHOO.ext.grid.JSONDataModel(schema);
            var data = eval("({'FolderContent':[{name:'folder1',type:'Folder'},{name:'folder2',type:'Folder'},{name:'file1.txt',type:'File'},{name:'file2.txt',type:'File'}]})");
            
            var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes; 
            
            var myColumns = [ 
             {header: "name", width: 200, sortable: true, sortType: sort.asUCString}, 
             {header: "type", width: 100, sortable: true, sortType: sort.asUCString}, 
            ];
            var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns); 
    
            this.grid = new YAHOO.ext.grid.Grid('grid', dataModel, colModel);
            this.grid.render(); 
            dataModel.loadData(data);
        } 
    } 
    
    YAHOO.util.Event.on(window, 'load', Example.init, Example, true); 
    </script>
        </form>
    </body>
    </html>
    When I ran this page, I recieved an error: 'this.config[...].hidden' is null or not an object. During debugging I saw that this.config.length=3, but this.config contains only 2 elements.
    I think that the problem is in my misunderstanding of how to use "id" tag of schema. Could you answer me the following questions:
    1) is "id" tag obligatory in schema? If so, what is the format of representing id in JSON data?
    2) how can I map data model columns into column model columns? For example, data model contains 3 columns in the order 1-2-3 and I what to render only first and third column. How can I implement this.

    Thank you for advance.

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    You did the id right. If the id isn't present (and "nothing" isn't present) then the row index is used.

    The problem is you have an extra comma at the end of your column model def resulting in a 3rd item in config that is null.

    Code:
    var myColumns = [
             {header: "name", width: 200, sortable: true, sortType: sort.asUCString},
             {header: "type", width: 100, sortable: true, sortType: sort.asUCString}, <---
            ];
    If you remove that comma it will work, your code looks good.

  6. #6
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    To answer your question about 3 columns in the data and you only want to display 2, you can create a dummy hidden column:

    Code:
    var myColumns = [
             {header: "name", width: 200, sortable: true, sortType: sort.asUCString},
             {header:'', hidden:true},
             {header: "type", width: 100, sortable: true, sortType: sort.asUCString}, 
            ];

  7. #7

    Default

    Quote Originally Posted by jacksloc
    To answer your question about 3 columns in the data and you only want to display 2, you can create a dummy hidden column:

    Code:
    var myColumns = [
             {header: "name", width: 200, sortable: true, sortType: sort.asUCString},
             {header:'', hidden:true},
             {header: "type", width: 100, sortable: true, sortType: sort.asUCString}, 
            ];
    Thanks alot for your answers. As I understand, currently there is no way to change the order of the rendered columns (example is that datasource contains columns 1-2-3 and I need to render it as 3-1). However, I am still intersting how schema "id" tag is represented in JSON format. Could you provide a simple example? Could you tell me how can I retrieve row from Grid by id (not by index)?

  8. #8
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    Did you see my post above that one? Your problem was an extra comma not the id tag.

    I will give you an id example (using your data):

    Code:
    var dataModel = new YAHOO.ext.grid.JSONDataModel({
              root: "FolderContent", 
              id: "fid", 
              fields: ["name", "type"]
    });
    
    var data = eval("({'FolderContent':[
             {fid: 1, name:'folder1',type:'Folder'},
             {fid: 5, name:'folder2',type:'Folder'},
             {fid: 9, name:'file1.txt',type:'File'},
             {fid: 2, name:'file2.txt',type:'File'}
    ]})");
    
    var row = grid.getRowsById(1);
    //or
    var rows = grid.getRowsById([1, 5]);
    You data model doesn't have to match the structure of the json data and can use just the data it wants (in any order) but your column model must map to your data model (although you can hide columns). Does that make sense?

  9. #9

    Default

    Did you see my post above that one? Your problem was an extra comma not the id tag.
    Yes, I saw it, I removed comma and now it works fine . I wrote my questions after I fixed this bug. I just wanted to know how I can use this id. Thank you for your answers.
    You data model doesn't have to match the structure of the json data and can use just the data it wants (in any order) but your column model must map to your data model (although you can hide columns). Does that make sense?
    Yes, it does.

  10. #10
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956

    Default

    Great. If you have any more questions I am almost always around

Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 3
    Last Post: 20 Mar 2007, 10:26 PM
  2. Grid DataModel keeps data in memory
    By tane in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 24 Feb 2007, 12:38 PM
  3. help regarding the JSON DataModel
    By saasira in forum Ext 1.x: Help & Discussion
    Replies: 9
    Last Post: 22 Feb 2007, 11:04 AM
  4. Setting JsonView and DataModel data from existing JSON obj
    By slacker775 in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 18 Jan 2007, 3:35 PM
  5. JSON DataModel Schema Question
    By griffiti93 in forum Community Discussion
    Replies: 4
    Last Post: 23 Nov 2006, 6:48 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •