jQuery UI Widgets Forums DataTable Selective binding with sub structures and further editor fetches

This topic contains 2 replies, has 2 voices, and was last updated by  aviennas 9 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • aviennas
    Participant

    Hello, relatively a newbie on the framework so don’t be harsh.

    Assuming a json sample response such as:

    [
      {
        "id": 1,
        "firstName": "Joe",
        "lastName": "Dalton",
        "telephoneNo": "66 9999 6666",
        "mobileNo": "66 9999 6666",
        "eMail": "some@mail.cy",
        "country": {
          "id": 59,
          "name": "Cyprus",
          "i18nName": "196",
          "iso2LC": "CY",
          "iso3LC": "CYP",
          "iconPath": null,
          "continent": null,
          "sortValue": 5900,
          "enabled": true,
          "keys": [
            59
          ]
        },
        "messageSubjectType": "PRODUCT_INQUIRY",
        "referenceCode": "cccc",
        "subjectText": "dddd",
        "bodyText": "Some detailed text.",
        "eventDate": 1419800396000,
        "sortValue": 100,
        "enabled": true,
        "keys": [
          1
        ]
      }
    ]

    Can somebody pinpoint how it is possible to:

    a) render name field of the country array in dataset definition and datatable column configuration level?

    b) setup a drop down cell editor fetching countries as a combo pickup list

    c) (having not managed to render the component so far by implicit ignoring the country and keys properties on the above json response) if it is required to do explicit hiding on these in order to permit proper rendering of the datatable component?

    d) enable verbose output on the framework console log

    Regards
    Thanassis

    • This topic was modified 9 years, 1 month ago by  aviennas.
    • This topic was modified 9 years, 1 month ago by  aviennas. Reason: add a 4th section

    Dimitar
    Participant

    Hello Thanassis,

    Here is an example that, hopefully, answers all your questions:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = [{
                    "id": 1,
                    "firstName": "Joe",
                    "lastName": "Dalton",
                    "telephoneNo": "66 9999 6666",
                    "mobileNo": "66 9999 6666",
                    "eMail": "some@mail.cy",
                    "country": {
                        "id": 59,
                        "name": "Cyprus",
                        "i18nName": "196",
                        "iso2LC": "CY",
                        "iso3LC": "CYP",
                        "iconPath": null,
                        "continent": null,
                        "sortValue": 5900,
                        "enabled": true,
                        "keys": [
                            59
                        ]
                    },
                    "messageSubjectType": "PRODUCT_INQUIRY",
                    "referenceCode": "cccc",
                    "subjectText": "dddd",
                    "bodyText": "Some detailed text.",
                    "eventDate": 1419800396000,
                    "sortValue": 100,
                    "enabled": true,
                    "keys": [
                        1
                    ]
                }];
    
                // prepare the data
                var source =
                {
                    dataType: "json",
                    dataFields: [
                        { name: 'firstName', type: 'string' },
                        { name: 'lastName', type: 'string' },
                        { name: 'countryName', map: 'country>name', type: 'string' }
                    ],
                    id: 'id',
                    localdata: data
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (data) {
                    console.log('Successfully loaded.');
                }, loadError: function (jqXHR, status, error) {
                    console.log(error);
                }
                });
    
                $("#dataTable").jqxDataTable(
                {
                    width: 850,
                    pageable: true,
                    pagerButtonsCount: 10,
                    source: dataAdapter,
                    columnsResize: true,
                    editable: true,
                    columns: [
                      { text: 'First Name', dataField: 'firstName', width: 300 },
                      { text: 'Last Name', dataField: 'lastName', width: 300 },
                      { text: 'Country Name', dataField: 'countryName', width: 250, columntype: 'template',
                          createEditor: function (row, cellvalue, editor, cellText, width, height) {
                              var countries = [];
                              for (var i = 0; i < dataAdapter.records.length; i++) {
                                  countries.push(dataAdapter.records[i].countryName);
                              }
    
                              // construct the editor. 
                              editor.jqxDropDownList({ source: countries, width: width, height: height });
                          },
                          initEditor: function (row, cellvalue, editor, celltext, width, height) {
                              // set the editor's current value. The callback is called each time the editor is displayed.
                              editor.jqxDropDownList({ width: width, height: height });
                              editor.val(cellvalue);
                          },
                          getEditorValue: function (row, cellvalue, editor) {
                              // return the editor's value.
                              return editor.val();
                          }
                      }
                  ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="dataTable">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    aviennas
    Participant

    Dimitar many thanks for demonstrating every and each detail of the questions and even more.
    Thank you very much for the help!

    Greetings
    Thanassis

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.