How to complex Json object binding to Grid?

Posted by: returner on 14 September 2017, 2:08 am EST

    • Post Options:
    • Link

    Posted 14 September 2017, 2:08 am EST

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

    [html]









    [/html]

    my json data was.

    [js]

    [

    {“Name”:

    {

    “Data”:“someData”,

    “Width”:50

    },

    “Address”:

    {

    “Data”:“someData”,

    “Width”:30}

    },

    {“Name”:

    {

    “Data”:“someData”,

    “Width”:50

    },

    “Address”:

    {

    “Data”:“someData”,

    “Width”:30}

    }

    ]

    [/js]

    my codes atteched image.

    questions.

    1. How to Binding object in object binding ?

    2. How to dynamically setting width by object value?

  • Posted 14 September 2017, 2:08 am EST

    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:

    [js]

    $scope.bulletinBoardSales = [

    {

    “Name”:

    {

    “Data”: “someData”,

    “Width”: 50

    },

    “Address”:

    {

    “Data”: “someData”,

    “Width”: 30

    }

    },

    {

    “Name”:

    {

    “Data”: “someData”,

    “Width”: 50

    },

    “Address”:

    {

    “Data”: “someData”,

    “Width”: 30

    }

    }

    ];

    [/js]

  • Posted 14 September 2017, 2:08 am EST

    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

      [js]

      
      
                   <a href="detailView?id={{$item.Day31.Data}}" rel="nofollow">{{$item.day31.data}}</a>
      
    2. 
      
    
    
    [/js] 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].
    1. include some html code to model - success - code below

      [js]



      //typescript code.

      export class BulletinBoardColumnTest {

      IsCollapse: boolean = false;

      Data: string = “Datas”;

      Html: string = “columnData”;

      Width: number = 200;

      }



      [/js]

      [js]



      {{$item.day31.Data}}



      [/js]

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

  • Posted 14 September 2017, 2:08 am EST

    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’;

  • Posted 14 September 2017, 2:08 am EST

    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

  • Posted 14 September 2017, 2:08 am EST

    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.

    1. 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();

    1. 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

  • Posted 14 September 2017, 2:08 am EST

    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

  • Posted 14 September 2017, 2:08 am EST

    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

  • Posted 14 September 2017, 2:08 am EST

    Thank you very much Manish. It worked.

  • Posted 22 July 2021, 2:34 am EST

    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,

    },

    }

    ]

    }

  • Posted 22 July 2021, 10:06 pm EST

    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

  • Posted 2 June 2022, 4:22 am EST

    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);

  • Posted 2 June 2022, 2:04 pm EST

    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