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

This topic contains 2 replies, has 2 voices, and was last updated by  jukka-pekka.manninen 10 years, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Can’t get datafield mapping to work #31689

    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>

    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/

    Can’t get datafield mapping to work #31859

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

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

You must be logged in to reply to this topic.