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

Tagged: , , , , , , , , , ,

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Selective binding with sub structures and further editor fetches Posts
  • March 11, 2015 at 9:43 am Selective binding with sub structures and further editor fetches #68339

    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

    March 11, 2015 at 12:02 pm Selective binding with sub structures and further editor fetches #68347

    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/

    March 11, 2015 at 4:35 pm Selective binding with sub structures and further editor fetches #68369

    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

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

You must be logged in to reply to this topic.