Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Zach
655
igGrid: how to bind a complex data source?
posted

Hello,

I have a data source like:

var dataSource = [

{

    User: {

         ID: '123',

         Name: {

            First: 'Jack',

            Last: 'Doson'

         }

    }

}

]

I want to show it in an igGrid, primary key is User.ID, column 'UserID' is User.ID,  column 'UserName' is 'User.Name.First + User.Name.Last'.

How can I do it? Thanks!

  • 20255
    Offline posted

    Hello,

    Let me know if I may be of further assistance.

  • 20255
    Offline posted

    Hello,

    Thank you for contacting us.

    About your question, basically you can, you can specify responseDataKey to be "User" and after that to use column formatter in order to combine first and last name, although I do not recommend you to use this approach, because it is a lot difficult to implement and my suggestion is to use igHierarchicalGrid. This grid is suppose to work with this kind of data, not the igGrid.

    Useful references:

    http://help.infragistics.com/jQuery/2014.1/ui.iggrid#options

    http://help.infragistics.com/jQuery/2014.1/ui.ighierarchicalgrid

    Code snippet:

    1. $(function () {
    2.             var ds = [
    3.                     {
    4.                         User:
    5.                         {
    6.                             ID: 123,
    7.                             Name: {
    8.                                 First: 'Jack',
    9.                                 Last: 'Doson'
    10.                             }
    11.                         }
    12.                     }
    13.             ];
    14.  
    15.             $("#grid").igGrid({
    16.                 autoGenerateColumns: false,
    17.                 dataSource: ds,
    18.                 responseDataKey: "User",
    19.                 width: "50%",
    20.                 columns: [
    21.                     { headerText: "ID", key: "ID", dataType: "number", width: "40%" },
    22.                     {
    23.                         headerText: "UserName", key: "Name", formatter: function (val) {
    24.                             return "Your result";
    25.                         }
    26.                     }
    27.                 ]
    28.             });
    29.         });

    Looking forward to hearing from you.