[nickgowdyParticipant]

Hi Nadezhda,

Thanks for your help, I changed the logic for how the IDs are generated for each child and it now works.

I’m using partial views with ASP.NET MVC so function initTreeViewWidget() is injected into the page.

Kind regards,
Nick

[nickgowdyParticipant]

Hello Peter,

I’ve tried your suggestion, I renamed the parameter of loadComplete to “records” and I’ve tried to access it with the array index. This is my console.log.

`console.log(records);
console.log(records[5]);`

[{"ImagePath":"http://vmwebapps.rhs.net/AMT/AMT_Files/HortifactsAttachmentsTest/NewsItems/","Id":"12","NewsItemImageReference":"http://vmwebapps.rhs.net/AMT/AMT_Files/HortifactsAttachmentsTest/NewsItems/7bc9ca37-d3da-4972-9f19-be3f245eb905.jpg","Title":"Large Yellow U","SubTitle":"derwing","AddedOn":"25/09/2013","NewsRef":" yellow under","BodyText":"Large yellow underwing - sent via twitter - Anna says several already submitted to our entomologists this week: https://twitter.com/HannahBellaaaa/status/382814806886973440/photo/1Massed eggs diagnostic: http://ukmoths.org.uk/show.php?bf=2107"}] (index):481
a 

As you can see, by supplying an int for records, it’s getting the character of the JSON string. Maybe this is a basic question but I don’t understand how to use the dataAdapter data to build my HTML.

I’ve used a jQuery.ajax success function in the past and could access the data through the parameter of the success function.

[nickgowdyParticipant]

Hello,

I am having problems determining how to get values from my dataAdapter.

 function getSingleNewsItem(id) {
        var url = '@Url.Action("AjaxGetSingleNewsItem", "News")';
        var source =
        {
            datatype: "json",
            dataFields: [
                { name: 'Id', type: 'string' },
                { name: 'NewsItemImageReference', type: 'string' },
                { name: 'ImagePath', type: 'string' },
                { name: 'Title', type: 'string' },
                { name: 'SubTitle', type: 'string' },
                { name: 'AddedOn', type: 'date' },
                { name: 'NewsRef', type: 'string' },
                { name: 'BodyText', type: 'string' }
            ],
            id: id,
            data: {
                id: id
            },
            url: url
        };

        var dataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function (record) {
                var container =
                            "<div style=\" padding-left:10px; padding-right:10px;\">"
                            + "<div style=\" width: 100%; \">"
                            //+ "<img style=\"width: 600px; height: 500px; padding: 10px;\" alt=\"\"  src=\"" + data.NewsItemImageReference + "\"></img>"
                            + "</div>"
                            + "</br>"
                            + "<div style=\" width: 100%; \">"
                            + "Ref: " + record.NewsRef
                            + "</br>"
                            + record.BodyText
                            + "</div>"
                            + "</div>";

                $("#newsDetailsTable").html(container);
                $('#jqxwindow-news').jqxWindow('open');
            }
        });
        // perform data binding.
        dataAdapter.dataBind();
}

This is my JSON:

[
    {
        "ImagePath": "http://vmwebapps.rhs.net/AMT/AMT_Files/HortifactsAttachmentsTest/NewsItems/",
        "Id": "6",
        "NewsItemImageReference": "http://vmwebapps.rhs.net/AMT/AMT_Files/HortifactsAttachmentsTest/NewsItems/9750cf57-bc14-4205-9e6c-83c8406f3f82.jpg",
        "Title": "Tree fungus ID",
        "SubTitle": " Inonotus dryadeus",
        "AddedOn": "16/09/2013",
        "NewsRef": "204201/252874",
        "BodyText": "Ref: 204201/252874The fruiting bodies are those of a fungus called Inonotus dryadeus. Oak is the most common host of this fungus, which can often cause decay of the inner parts of the root system and the base of the trunk.Whilst the fungus can cause extensive decay, the effect on the tree itself can be very variable. Some trees will survive for many years or even indefinitely - although the central roots and wood may decay the hollow tree remains alive and standing on 'stilts' of buttress roots. However, if the decay also affects these roots then there is a risk of the tree falling. In a case such as this we would always recommend having the tree examined in situ by an arboricultural consultant, particularly if there is any risk of injury or damage to property should the tree fall. The consultant will be able to check the location and extent of the decay, and recommend any appropriate remedial action (such as crown reduction).The link below takes you to our web profile on bracket fungi. This does not mention Inonotus dryadeus specifically, but gives the contact details for the Arboricultural Association who will be able to provide you with a list of suitably-qualified consultants operating in your area. http://apps.rhs.org.uk/advicesearch/Profile.aspx?pid=98I hope this information is helpful.Yours sincerely, John ScracePlant Pathologist"
    }
]

[nickgowdyParticipant]

Hello Dimitar,

Thanks, that example helped me fix my code. Using initTabContent and getting JSON for that 1 graph makes a big difference.

Kind regards,
Nick

[nickgowdyParticipant]

Hello Peter,

Thanks! That works perfectly. I used $(‘#’).html() because I didn’t know I could change the title through jqx API.

Have a nice day
Nick

[nickgowdyParticipant]

Hello Dimitar,

Thanks for your help. The problem was quite simple to fix.

Kind regards,
Nick

[nickgowdyParticipant]

Hello Peter,

I’ve finally got the table to work. I removed $document.ready(function() {}); from the partial view and added a function to init the code. In my ActionResult method in C#, I injected some JavaScript to fire the function. I believe that a combination of using partial views and being unfamiliar with jqxDataAdapter and jqxDataTable made it tricky to figure out the problem.

Your jsFiddle help me determine that it wasn’t a problem with the binding but how my partial views work in my site.

Thanks for all your help.

Kind regards,
Nick

[nickgowdyParticipant]

Furthermore, I think the problem is using jqxDocking with partial views.

This is my main view:

@{
ViewBag.Title = “Index”;
}

@* @{
        @Html.Action("_MyEnquiriesWidget", "Enquiry")
    }

    @{
        @Html.Action("_AdvisorySchedulesCalendar", "Calendar")
    }

    @{
        @Html.Action("_KPIsWidget", "KPIs")
    }*@

@*<div id="LayoutContainer">
    <table width="100%">
        <tbody>
            <tr align="top">
                <td width="35%"></td>
                @{
                    @Html.Action("_NewsWidget", "News")
                }
                <td width="65%">
                    @{
                        @Html.Action("_ShortcutsWidget", "Dashboard")
                    }
                </td>
            </tr>
        </tbody>
    </table>
</div>*@

<script type="text/javascript">
    $(document).ready(function () {
        //$('#docking').jqxDocking({ orientation: 'horizontal', width: 800, mode: 'docked' });
        $('#docking').jqxDocking({ mode: 'docked' });
        $('#docking').jqxDocking('disableWindowResize', 'window1');
        $('#docking').jqxDocking('disableWindowResize', 'window2');
       
        //$('#calendar').jqxCalendar({ width: 180, height: 180 });
        //$('#newsTbs').jqxTabs({ width: 375, height: 181, selectedItem: 1 });
        //$('#listbox').jqxListBox({ source: source, width: 375, height: 181 });
        //$('#zodiak').jqxPanel({ width: 375, height: 180 });
    });
</script>

    <div id="docking" style="width:100%">
            <div id="window1" style="width: 35%; padding:20px;">
                @Html.Action("_NewsWidget", "News")
            </div>
            <div id="window2" style="width: 65%;">
                @Html.Action("_ShortcutsWidget", "Dashboard")
            </div>
    </div>

This is my partial view

<script>
    $(document).ready(function() {
        var data = [
     {
         "title": "Tree fungus ID: Inonotus dryadeus",
         "text": "Ref: 204201/252874\r\nThe fruiting bodies are those of a fungus called Inonotus dryadeus. Oak is the most common host of this fungus, which can often cause decay of the inner parts of the root system and the base of the trunk.\r\n\r\nWhilst the fungus can cause extensive decay, the effect on the tree itself can be very variable. Some trees will survive for many years or even indefinitely - although the central roots and wood may decay the hollow tree remains alive and standing on 'stilts' of buttress roots. However, if the decay also affects these roots then there is a risk of the tree falling. In a case such as this we would always recommend having the tree examined in situ by an arboricultural consultant, particularly if there is any risk of injury or damage to property should the tree fall. The consultant will be able to check the location and extent of the decay, and recommend any appropriate remedial action (such as crown reduction).\r\n\r\nThe link below takes you to our web profile on bracket fungi. This does not mention Inonotus dryadeus specifically, but gives the contact details for the Arboricultural Association who will be able to provide you with a list of suitably-qualified consultants operating in your area. \r\n\r\nhttp://apps.rhs.org.uk/advicesearch/Profile.aspx?pid=98\r\nI hope this information is helpful.\r\nYours sincerely, \r\nJohn Scrace\r\nPlant Pathologist",
         "id": 6
     }
        ];
        var source =
             {
                 dataType: "json",
                 dataFields: [
                     { name: 'title', type: 'string' },
                     { name: 'text', type: 'string' },
                     { name: 'id', type: 'int' }
                 ],
                 localData: data,
                 //id: 'id'
             };
        var dataAdapter = new $.jqx.dataAdapter(source);

        console.log(dataAdapter);

        $("#table").jqxDataTable(
        {
            source: dataAdapter,
            showHeader: true,
            autoRowHeight: false,
            columns: [
                { text: 'Title', dataField: 'title', width: 300 },
                { text: 'Body Text', dataField: 'text', width: 200 },
                { text: 'ID', dataField: 'id', width: 200 }
            ]
        });
    });
</script>

    <div id="table">
    </div>

Currently I get the error invalid structure unless I change this:

 <div id="table">
    </div>

To this:

<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;overflow: display; padding-top: 20px;">
    <div id="table">
    </div>
</div>

But then the table says undefined.

Any ideas?
Nick

[nickgowdyParticipant]

Hello Peter,

Thanks for the fiddle link. I’ve discovered something weird is going on with my partial view. Since I am using MVC and I am creating widgets inside partial views. I pasted your code in the view so our code is identical and it works.

[nickgowdyParticipant]

Hi Peter,

I’ve simplified my code so that the JSON being returned is smaller and I’ve fixed the errors. I now just can’t get the data to bind.

<script type="text/javascript">
    $(document).ready(function () {
        // prepare the data
        var url = '@Url.Action("AjaxGetNewsItems", "News")';
        console.log(url);

        var source =
        {
            dataType: "json",
            dataFields: [
                { name: 'title', type: 'string' },
                { name: 'text', type: 'string' },
                { name: 'id', type: 'int' }
            ],
            url: url
            //id: 'id'
        };
        var dataAdapter = new $.jqx.dataAdapter(source);

        console.log(dataAdapter);

        $("#dataTable").jqxDataTable(
        {
            source: dataAdapter,
            showHeader: true,
            columns: [
                { text: 'Title', dataField: 'title', width: 300 },
                { text: 'Body Text', dataField: 'text', width: 200 },
                { text: 'ID', dataField: 'id', width: 200 }
            ]
        });
    });
</script>

<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;overflow: display; padding-top: 20px;">
    <div id="dataTable">
    </div>
</div>

This is my JSON:

[
    {
        "title": "Tree fungus ID: Inonotus dryadeus",
        "text": "Ref: 204201/252874\r\nThe fruiting bodies are those of a fungus called Inonotus dryadeus. Oak is the most common host of this fungus, which can often cause decay of the inner parts of the root system and the base of the trunk.\r\n\r\nWhilst the fungus can cause extensive decay, the effect on the tree itself can be very variable. Some trees will survive for many years or even indefinitely - although the central roots and wood may decay the hollow tree remains alive and standing on 'stilts' of buttress roots. However, if the decay also affects these roots then there is a risk of the tree falling. In a case such as this we would always recommend having the tree examined in situ by an arboricultural consultant, particularly if there is any risk of injury or damage to property should the tree fall. The consultant will be able to check the location and extent of the decay, and recommend any appropriate remedial action (such as crown reduction).\r\n\r\nThe link below takes you to our web profile on bracket fungi. This does not mention Inonotus dryadeus specifically, but gives the contact details for the Arboricultural Association who will be able to provide you with a list of suitably-qualified consultants operating in your area. \r\n\r\nhttp://apps.rhs.org.uk/advicesearch/Profile.aspx?pid=98\r\nI hope this information is helpful.\r\nYours sincerely, \r\nJohn Scrace\r\nPlant Pathologist",
        "id": 6
    }
]

[nickgowdyParticipant]

Hi Peter,

I copied and pasted some of the code from the demo. Now you mentioned it I don’t need jsonp because it’s all on the same domain. I’ve also removed format data because I didn’t know that I don’t need it for my JSON.

Now I have removed what you’ve said I get an error:

Uncaught Error: Syntax error, unrecognized expression: [ jquery-2.1.1.js:143

<script type="text/javascript">
 $(document).ready(function () {
            // prepare the data
            var source =
            {
                dataType: "json",
                dataFields: [
                    { name: 'BodyText', type: 'string' },
                    { name: 'Title', type: 'string' }
                ],
                id: 'uniqueId',
                url: '@Url.Action("AjaxGetNewsItems", "News")'
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            console.log(dataAdapter);

            $("#dataTable").jqxDataTable(
            {
                width: 500,
                pagerButtonsCount: 10,
                source: dataAdapter,
                showHeader: false,
                columns: [
                    { text: 'Body Text', dataField: 'BodyText', width: 300 },
                    { text: 'Title', dataField: 'title', width: 200 }
                ]
            });
        });
    </script>

Nick

[Author]

Posts