How to complex Json object binding to Grid?

Originally Posted 2 September 2014, 12:18 am EST

  • Originally Posted 2 September 2014, 12:18 am EST

    I want binding to complex json objects and dynamic binding column width.


    <wj-flex-grid items-source="bulletinBoardSales" allow-dragging="None" selection-mode="Row">
    <wj-flex-grid-column header="Name" is-read-only="true" binding="Name.Data" ></wj-flex-grid-column>
    <wj-flex-grid-column header="Address" is-read-only="true" binding="Address.Data"></wj-flex-grid-column>
    </wj-flex-grid>


    my json data was.

    [
    {"Name":
    {
    "Data":"someData",
    "Width":50
    },
    "Address":
    {
    "Data":"someData",
    "Width":30}
    },
    {"Name":
    {
    "Data":"someData",
    "Width":50
    },
    "Address":
    {
    "Data":"someData",
    "Width":30}
    }
    ]


    my codes atteched image.

    questions.
    1. How to Binding object in object binding ?

    2. How to dynamically setting width by object value?









  • Reply

    You may use custom cell templates that can be defined as a content of column directives, and bind column widths to Width properties from the first array item:
    in html:




    {{$item.Name.Data}}
    {{$item.Address.Data}}



    having the following code in a controller:

    $scope.bulletinBoardSales = [
    {
    "Name":
    {
    "Data": "someData",
    "Width": 50
    },
    "Address":
    {
    "Data": "someData",
    "Width": 30
    }
    },
    {
    "Name":
    {
    "Data": "someData",
    "Width": 50
    },
    "Address":
    {
    "Data": "someData",
    "Width": 30
    }
    }
    ];
  • Reply

    Hi Gopal,
    You can show same using wjFlexGridCellTemplate in manager column.
    For your reference, please see the attached sample that implements the same.

    If it does not fulfill your requirement, please provide JSON structure to us.

    Thanks,
    Manish Kumar Gupta
    2017/05/FlexGrid_complexData.zip
  • Reply

    Hello

    The template you posted should work fine. I tried a similar example and it did. This could be because I am using a later version of the controls (we did improve the templating mechanism quite a bit), or it could be because my test is not accurate. If you could send me a simple test project, I would be happy to double-check what is going on.

    Also, I am happy to inform you that the latest build supports sub-property binding, so you can do for example:

    flex.columns[0].binding = 'product.name';
    flex.columns[1].binding = 'product.price';
    flex.columns[2].binding = 'customer.id';
    flex.columns[3].binding = 'customer.lastname';
  • Reply

    Thank you,
    I atteched my visual studio 2013 solution. (I used Visual Studio 2013 express)

    it composed to angularjs with typescript.
    when it run, shows just two grids.

    all of application scripts located in /app/... folder.

    questions.
    1. How can i update flex-grid? I want to two-way binding grid.
    I tried addNew() method of wijmo.collections.CollectionView, but failed. and items.push() it failed too.

    2. column template failed too. you can show /Views/GridMain.cshtml.
    2014/09/WijmoAngularExample.zip
  • Reply

    Thanks for sending the sample app.

    The attachment contains minor modifications needed to make it work. Basically, there are a couple of ways to add items to bound collections:

    1) CollectionView.addNew()

    The "addNew" method does not take any parameters. It creates the new item, adds it to the collection, and returns a reference to it. When you are done initializing the new item, call "commitNew" to re-enable sorting/grouping/filtering on the new item.

    For example:

    var item = cv.addNew();
    item.Name = 'New Item';
    cv.commitNew();

    This is the same behavior/syntax as .NET's IEditableCollectionView.AddItem.

    2) array.push(item)

    You can simply add items directly to the source collection, then call CollectionView.refresh to refresh the view and notify any listeners:

    var item = { Name: 'New Item' };
    cv.sourceCollection.push(item);
    cv.refresh();

    3) ObservableArray.push(item)

    If your array is observable, you can simply add items to it and it will issue the required notifications. For example:

    var arr = new wijmo.collections.ObservableArray();
    var item = { Name: 'New Item' };
    arr.push(item);

    I hope this clarifies things.
    2014/09/WijmoAngularExample2.zip
  • Reply

    How to bind a array to column using wijmo grid in typescript

    Each employee has a managers collection. So I want like below. Please see attached.


    Name        Managers
    ABC Manager 1: BBB
    Manager 2: CC
    Manager 3 : D
    ZZZ Manager 1: XXX
    Manager 2: YY


  • Reply

    Thank you for reply.

    binding width propery was success solution. thank you.

    additional problem.

    I need custom cell template some columns.

    I tried two ways.

    1. add to custom code to html - fail - code below

    <code>

    <a href="detailView?id={{$item.Day31.Data}}" rel="nofollow">{{$item.day31.data}}</a>

    </code>

    error message : Uncaught Error: [$parse:lexerr] Lexer Error: Unterminated quote at columns 46-66 [">{{$item.day31.Data] in expression [$item.day31.Data}}" class="ng-binding ng-scope">{{$item.day31.Data].


    2. include some html code to model - success - code below

    <code>
    //typescript code.
    export class BulletinBoardColumnTest {
    IsCollapse: boolean = false;
    Data: string = "Datas";
    Html: string = "<span title='" + "columnData" + "'>columnData</span>";
    Width: number = 200;
    }
    </code>


    <code>
    {{$item.day31.Data}}
    </code>


    question : Could not use custom cell templates like my first (#1) code? Impossible or mis-understood custom cell template uses?
  • Marked as Answer

    Reply

    Thank you very much Manish. It worked.
  • Reply


    Hi Team,
    I have new query .
    data = below template data i have taken,
    but in "template" we have serviceType is number ,actually i want to bind "Types" Name property need to bind, json data.it is a seperate json .
    based on the Template under serviceType as value and Types under Id we need to put condtion true or false.
    if(serviceType === Types.Id)
    this.service.push(Types.Name)

    bind the this.service in grid

    "GetCategorizedWorkFlowTemplatesResult": {
    "Types": [
    {
    "Id": 0,
    "Identity": "",
    "Name": ""
    },
    {
    "Id": 1,
    "Identity": "",
    "Name": "General"
    }
    ]
    "Templates":[
    {
    "ClientDisplay": "",
    "ServiceType": 1,
    "Disabled": false,
    "HasRegion": false,
    },
    {
    "ClientDisplay": "reg",
    "ServiceType": 1,
    "Disabled": true,
    "HasRegion": false,
    },
    }
    ]
    }
  • Reply

    Hi,

    We have posted the response for this query on your original post. Please refer to the following post:
    https://www.grapecity.com/forums/wijmo/data-binding-for-complex-d

    Regards
  • Reply

    According to your description, Do you want to delete old rows before add rows to your jqGrid? if so, please refer to:

    #Delete a specific row

    function deleteGridRow(){

    var rowID = returnRowID();
    var colDomainID = jQuery('#list').jqGrid('getCol','domain_id',false)[rowID-1];
    var colCodeGroup = jQuery('#list').jqGrid('getCol','code_group',false)[rowID-1];

    var strURL = "source/common/get_code_header.asp";
    strURL = strURL + "?domain_id=" + colDomainID; //domain_id and code_group is group-key
    strURL = strURL + "&code_group=" + colCodeGroup;

    if( rowID != null ) jQuery("#list").jqGrid('delGridRow',rowID,{url:strURL,reloadAfterSubmit:false});
    else alert("Please Select Row to delete!");

    }
    http://www.trirand.com/blog/?page_id=393/help/delete-row

    #Delete all rows.

    var myGrid = $("#list"); // the variable you probably have already somewhere
    var gridBody = myGrid.children("tbody");
    var firstRow = gridBody.children("tr.jqgfirstrow");
    gridBody.empty().append(firstRow);
  • Reply

    Hi,
    It seems you have responded on the incorrect thread since this thread is related to the Wijmo FlexGrid.

    Please post the response on the correct thread

    Regards,
    Manish Gupta
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels