jQuery UI Widgets › Forums › Grid › Can’t get datafield mapping to work

Tagged: , , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  jukka-pekka.manninen 11 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Can’t get datafield mapping to work Posts
  • October 31, 2013 at 10:31 am Can’t get datafield mapping to work #31689

    jukka-pekka.manninen
    Member

    Hi,

    I’m currently evaluating jQWidgets with version 3.0.3 for possible use in customizing our product to a customer. Currently though I have hit a brick wall – I cannot seem to get the dataAdapter source datafield map attribute to work. I’m really driven crazy by the fact that the example from http://www.jqwidgets.com/community/topic/nested-json-display-in-jqgrid-available-in-newer-version/ works perfectly, and I can even fiddle with the JSON and get exactly the result I expect. Clearly I’m doing something wrong but just can’t spot the crucial difference that there must be.

    Here’s my cleaned up example of what I have been trying, and the results I have got. First example is worst in that it shows no data in the grid, yet best in that it matches the most to the production situation where matching names between code and data cannot be relied on. Last example is closest to working I have got but still displays [object Object],… where I was expecting a short text to appear.


    <html>
    <head>
    <title>Example of the problem</title>
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jqwidgets/scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.storage.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="jqwidgets/scripts/gettheme.js"></script>

    <script type=”text/javascript”>
    var jsonData = ‘[{ “campaignName”: “Xmas campaign”, “beginDate”: “2013-10-31”, “endDate”: “2013-12-23”, “itemCodes”: [ { “itemCode”: “0001” }, { “itemCode”: “0003” }, { “itemCode”: “0005” }] },{ “campaignName”: “New year campaign”, “beginDate”: “2013-12-28”, “endDate”: “2014-01-06”, “itemCodes”: [ { “itemCode”: “0002” }, { “itemCode”: “0003” }, { “itemCode”: “0004” }, { “itemCode”: “0006” }] }]’;

    var dataSource1 = {
    datatype: “json”,
    mapChar: “>”,
    datafield: [
    { name: “beginDate1”, map: “beginDate”, type: “date”, format: “yyyy-MM-dd” },
    { name: “endDate1”, map: “endDate”, type: “date”, format: “yyyy-MM-dd” },
    { name: “campaignName1”, map: “campaignName”, type: “string” },
    { name: “itemCode1”, map: “itemCodes>0>itemCode”, type: “string” }
    ],
    localdata: jsonData
    };
    var dataAdapter1 = new $.jqx.dataAdapter(dataSource1);

    var dataSource2 = {
    datatype: “json”,
    mapChar: “>”,
    datafield: [
    { name: “beginDate”, map: “beginDate”, type: “date”, format: “yyyy-MM-dd” },
    { name: “endDate”, map: “endDate”, type: “date”, format: “yyyy-MM-dd” },
    { name: “campaignName”, map: “campaignName”, type: “string” },
    { name: “itemCode”, map: “itemCodes>0>itemCode”, type: “string” }
    ],
    localdata: jsonData
    };
    var dataAdapter2 = new $.jqx.dataAdapter(dataSource2);

    var dataSource3 = {
    datatype: “json”,
    mapChar: “>”,
    datafield: [
    { name: “beginDate”, map: “beginDate”, type: “date”, format: “yyyy-MM-dd” },
    { name: “endDate”, map: “endDate”, type: “date”, format: “yyyy-MM-dd” },
    { name: “campaignName”, map: “campaignName”, type: “string” },
    { name: “itemCodes”, map: “itemCodes>0>itemCode”, type: “string” }
    ],
    localdata: jsonData
    };
    var dataAdapter3 = new $.jqx.dataAdapter(dataSource3);

    $(document).ready(function () {
    $(“#grid1”).jqxGrid({
    source: dataAdapter1,
    columns: [{ text: “Campaign”, datafield: “campaignName1” },
    { text: “Starts”, datafield: “beginDate1” },
    { text: “Ends”, datafield: “endDate1” },
    { text: “Product code”, datafield: “itemCode1”}]
    });
    $(“#grid2”).jqxGrid({
    source: dataAdapter2,
    columns: [{ text: “Campaign”, datafield: “campaignName” },
    { text: “Starts”, datafield: “beginDate” },
    { text: “Ends”, datafield: “endDate” },
    { text: “Product code”, datafield: “itemCode”}]
    });
    $(“#grid3”).jqxGrid({
    source: dataAdapter3,
    columns: [{ text: “Campaign”, datafield: “campaignName” },
    { text: “Starts”, datafield: “beginDate” },
    { text: “Ends”, datafield: “endDate” },
    { text: “Product code”, datafield: “itemCodes”}]
    });
    });
    </script>
    </head>
    <body class=”default”>
    <div id=”grids”>
    <p>Data field names don’t match JSON field names</p>
    <div id=”grid1″>
    </div>
    <p>Data field names match with the complex mapped field matching innermost JSON field name
    <div id=”grid2″>
    </div>
    <p>Data field names match with the complex mapped field matching outermost JSON field name
    <div id=”grid3″>
    </div>
    </div>
    </body>
    </html>

    November 1, 2013 at 9:04 am Can’t get datafield mapping to work #31749

    Dimitar
    Participant

    Hello jukka-pekka.manninen,

    There is nothing wrong with your mapping but the source property is datafields, not datafield.

    Best Regards,
    Dimitar

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

    November 4, 2013 at 10:57 am Can’t get datafield mapping to work #31859

    jukka-pekka.manninen
    Member

    Hi,

    Thanks Dimitar! I knew it was something so embarrassingly easy, but sometimes you just need a fresh pair of eyes to see it. Works a treat now. 🙂

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

You must be logged in to reply to this topic.