Another RadGrid, JSON, WCF problem

[RichJ]

Hi all,

I'm having huge problems attempting to bind a radgrid to a WCF service using JSON using the built-in ClientSettings-DataBinding

The various code components:

WCF Call - returning a WSResponse_Machine_Readings class

Interface:

<OperationContract()> _
<WebInvoke(Method:="POST", ResponseFormat:=WebMessageFormat.Json, RequestFormat:=WebMessageFormat.Json, BodyStyle:=WebMessageBodyStyle.Wrapped, UriTemplate:="GetMachineReadings/")> _

Function GetMachineReadings(ByVal startRowIndex As Integer, ByVal maximumRows As Integer, ByVal sortExpression As String, ByVal filterExpression As String) As Machines.WSResponse_Machine_Readings

Function:

    Public Function GetMachineReadings(ByVal startRowIndex As Integer, ByVal maximumRows As Integer, ByVal sortExpression As String, ByVal filterExpression As String) As Machines.WSResponse_Machine_Readings Implements IRicohData.GetMachineReadings
        Dim orgID As Integer = 39311
        Dim Serial As String = "W3009606995"
        Dim Contract As String = "233807"

        Dim _response As New Machines.WSResponse_Machine_Readings
        Dim _items As New List(Of Machines.MachineReading)
        _items = Machines.getReadingsList(orgID, "", Serial, Contract)
        _response.Count = _items.Count
        _response.Data = _items

        Return _response
    End Function


WSResponse_Machine_Readings Class:

    Public Class WSResponse_Machine_Readings
        Public Property Count()
        Public Property Data() As List(Of MachineReading)
    End Class


MachineReading Class:

    Public Class MachineReading
        Public Property ReadingDate
        Public Property ReadingType
        Public Property ReadingBLK
        Public Property ReadingCLR
    End Class

Function populating my List(of MachineReading):

    Public Shared Function getReadingsList(ByVal orgID As Integer, ByVal Model As String, ByVal Serial As String, ByVal Contract As String) As List(Of MachineReading)
        Dim results As DataView = executeGetContractData(orgID, Model, Serial, Contract, "Readings")
        Dim _items As New List(Of MachineReading)
        For Each result As DataRowView In results
            Dim _item As New MachineReading
            With _item
                .ReadingDate = result("ReadingDate").trim()
                .ReadingType = result("ReadingType").trim()
                .ReadingBLK = result("ReadingBLK").trim()
                .ReadingCLR = result("ReadingCLR").trim()
            End With
            _items.Add(_item)
        Next
        Return _items
    End Function

RadGrid definition:

                        <telerik:RadGrid ID="gridReadings" runat="server" AutoGenerateColumns="False"
                            AllowPaging="True" Height="420px" Width="850px" EnableViewState="False" BorderStyle="None"
                            AllowSorting="True" PageSize="10" ClientSettings-Scrolling-UseStaticHeaders="true"
                            CellSpacing="0" GridLines="None">
                            <MasterTableView Font-Size="90%" NoMasterRecordsText="No readings to display">
                                <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
                                <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
                                </RowIndicatorColumn>
                                <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
                                </ExpandCollapseColumn>
                                <Columns>
                                    <telerik:GridBoundColumn FilterControlAltText="Filter column column" HeaderText="Date"
                                        HeaderStyle-Width="100" DataField="ReadingDate" UniqueName="ReadingDate">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn FilterControlAltText="Filter column1 column" HeaderText="Type"
                                        HeaderStyle-Width="200" DataField="ReadingType" UniqueName="ReadingType">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn FilterControlAltText="Filter column2 column" HeaderText="Black"
                                        HeaderStyle-Width="100" DataField="ReadingBLK" UniqueName="ReadingBLK">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn FilterControlAltText="Filter column4 column" HeaderText="Colour"
                                        HeaderStyle-Width="100" DataField="ReadingCLR" UniqueName="ReadingCLR">
                                    </telerik:GridBoundColumn>
                                </Columns>
                                <EditFormSettings>
                                    <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                                    </EditColumn>
                                </EditFormSettings>
                                <PagerStyle AlwaysVisible="True" PageButtonCount="5"></PagerStyle>
                            </MasterTableView>
                            <ClientSettings>
                                <ClientEvents />
                                <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" />
                                <DataBinding SelectMethod="GetMachineReadings/" Location="https://ws.ricoh.co.nz/Services/Ricoh/RicohData.svc" FilterParameterType="List" SortParameterType="List">
                                </DataBinding>
                            </ClientSettings>
                            <PagerStyle AlwaysVisible="true" />
                            <GroupingSettings CaseSensitive="False" />
                            <FilterMenu EnableImageSprites="False">
                            </FilterMenu>
                        </telerik:RadGrid>

JSON return from the service:

{"GetMachineReadingsResult":{"Count":31,"Data":[{"ReadingBLK":"22,554","ReadingCLR":"0","ReadingDate":"14\/09\/13","ReadingType":"Customer Reading"},{"ReadingBLK":"21,206","ReadingCLR":"0","ReadingDate":"14\/08\/13","ReadingType":"Customer Reading"},{"ReadingBLK":"20,787","ReadingCLR":"0","ReadingDate":"07\/08\/13","ReadingType":"Engineer Reading"},{"ReadingBLK":"19,872","ReadingCLR":"0","ReadingDate":"14\/07\/13","ReadingType":"Customer Reading"},{"ReadingBLK":"18,826","ReadingCLR":"0","ReadingDate":"14\/06\/13","ReadingType":"Customer Reading"},{"ReadingBLK":"17,044","ReadingCLR":"0","ReadingDate":"14\/05\/13","ReadingType":"Customer Reading"},{"ReadingBLK":"16,155","ReadingCLR":"0","ReadingDate":"14\/04\/13","ReadingType":"Customer Reading"},{"ReadingBLK":"15,049","ReadingCLR":"0","ReadingDate":"14\/03\/13","ReadingType":"Customer Reading"},{"ReadingBLK":"13,470","ReadingCLR":"0","ReadingDate":"14\/02\/13","ReadingType":"Customer Reading"},{"ReadingBLK":"13,470","ReadingCLR":"0","ReadingDate":"14\/01\/13","ReadingType":"Customer Reading"},{"ReadingBLK":"13,405","ReadingCLR":"0","ReadingDate":"14\/12\/12","ReadingType":"Customer Reading"},{"ReadingBLK":"12,783","ReadingCLR":"0","ReadingDate":"14\/11\/12","ReadingType":"Customer Reading"},{"ReadingBLK":"12,113","ReadingCLR":"0","ReadingDate":"14\/10\/12","ReadingType":"Customer Reading"},{"ReadingBLK":"11,424","ReadingCLR":"0","ReadingDate":"14\/09\/12","ReadingType":"Customer Reading"},{"ReadingBLK":"10,228","ReadingCLR":"0","ReadingDate":"14\/08\/12","ReadingType":"Customer Reading"},{"ReadingBLK":"9,310","ReadingCLR":"0","ReadingDate":"14\/07\/12","ReadingType":"Customer Reading"},{"ReadingBLK":"8,997","ReadingCLR":"0","ReadingDate":"14\/06\/12","ReadingType":"Customer Reading"},{"ReadingBLK":"8,320","ReadingCLR":"0","ReadingDate":"14\/05\/12","ReadingType":"Customer Reading"},{"ReadingBLK":"6,809","ReadingCLR":"0","ReadingDate":"14\/04\/12","ReadingType":"Customer Reading"},{"ReadingBLK":"6,809","ReadingCLR":"0","ReadingDate":"14\/03\/12","ReadingType":"Customer Reading"},{"ReadingBLK":"6,329","ReadingCLR":"0","ReadingDate":"14\/02\/12","ReadingType":"Customer Reading"},{"ReadingBLK":"5,841","ReadingCLR":"0","ReadingDate":"14\/01\/12","ReadingType":"Customer Reading"},{"ReadingBLK":"5,819","ReadingCLR":"0","ReadingDate":"14\/12\/11","ReadingType":"Customer Reading"},{"ReadingBLK":"5,306","ReadingCLR":"0","ReadingDate":"14\/11\/11","ReadingType":"Customer Reading"},{"ReadingBLK":"4,576","ReadingCLR":"0","ReadingDate":"14\/10\/11","ReadingType":"Customer Reading"},{"ReadingBLK":"4,224","ReadingCLR":"0","ReadingDate":"14\/09\/11","ReadingType":"Customer Reading"},{"ReadingBLK":"3,071","ReadingCLR":"0","ReadingDate":"14\/08\/11","ReadingType":"Customer Reading"},{"ReadingBLK":"1,988","ReadingCLR":"0","ReadingDate":"14\/07\/11","ReadingType":"Customer Reading"},{"ReadingBLK":"1,988","ReadingCLR":"0","ReadingDate":"14\/06\/11","ReadingType":"Customer Reading"},{"ReadingBLK":"119","ReadingCLR":"0","ReadingDate":"14\/05\/11","ReadingType":"Customer Reading"},{"ReadingBLK":"119","ReadingCLR":"0","ReadingDate":"02\/05\/11","ReadingType":"Initial Reading"}]}}

I know the service is returning results, and I can output data using jquery, but the grid simple refuses to bind.
I've searched the forums and examples and can't find anything that will help me resolve this problem.

Any help would be appreciated
Cheers!

[RichJ]

Anyone?  Help!

[Antonio Stoilkov]

Hello Rich,

The experienced error (which could be observed thrown by the browser in the console) is "Origin is not allowed by Access-Control-Allow-Origin." which is caused from the fact that you do not have access to the requested service. Could you verify that if you place an jQuery ajax call on the page it will succeed?

function pageLoad() {
    // this should also not work
    $telerik.$.get("https://ws.ricoh.co.nz/Services/Ricoh/RicohData.svc/GetMachineReadings", function () { });
}

Note that there are various topics around the internet you could search for on how to resolve the Access-Control-Allow-Origin error. Additionally, you could try setting the ResponseType to JSONP.

<ClientSettings>
    <ClientEvents />
    <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" />
    <DataBinding SelectMethod="GetMachineReadings/" Location="https://ws.ricoh.co.nz/Services/Ricoh/RicohData.svc" FilterParameterType="List" SortParameterType="List"
        ResponseType="JSONP">
    </DataBinding>
</ClientSettings>

Regards,
Antonio Stoilkov
Telerik

[RichJ]

Hi Antonio, thanks for your response!

I'm not getting any errors related to Origin as you describe.
The grid is making the call and data IS being returned (I can see this in fiddler).
Using a test ajax call also works and I can iterate through the results (as per the last lines in my original post).

Do you have any other suggestions I might try?

Cheers
Rich

[Antonio Stoilkov]

Hello,

Based on your description it seems that the setup is correct and it is hard to pinpoint the problem. In such cases we recommend assembling a sample runnable project showing the unwanted behavior so we could debug it on our side and advice you with the best possible solution. You could open a formal ticket and upload the project or provide a URL from a public sharing provider where you have attached it.

Regards,
Antonio Stoilkov
Telerik

[Tim Titchmarsh]

Hi

I'm am having similar problems. I think I have tracked it down to the different JSON formats returned from the different WCF calls. If I compare with the sample grid/examples/data-binding/client-side/declarative/defaultcs.aspx (which works)

            <ClientSettings >
                    <DataBinding SelectMethod="GetDataAndCount" Location="GridWcfService.svc" SortParameterType="Linq"
                    FilterParameterType="Linq"> 
 
                </DataBinding>

the response from the example GetDataAndCount WCF call contains the __type info

{"d":{"__type":"ResultData:#","Count":77,"Data":[{"__type":"Product:#","Discontinued":false,"ProductID":1,"ProductName":"Chai","ReorderLevel":10,"UnitPrice":18.00},{"__type":"Product:#","Discontinued":false,"ProductID":2,"ProductName":"Chang","ReorderLevel":25,"UnitPrice":19.00},{"__type":"Product:#","Discontinued":false,"ProductID":3,"ProductName":"Aniseed Syrup","ReorderLevel":25,"UnitPrice":10.00},{"__type":"Product:#","Discontinued":false,"ProductID":4,"ProductName":"Chef Anton's Cajun Seasoning","ReorderLevel":0,"UnitPrice":22.00},{"__type":"Product:#","Discontinued":true,"ProductID":5,"ProductName":"Chef Anton's Gumbo Mix","ReorderLevel":0,"UnitPrice":21.35}]}}

If I return from my WCF call (built using ASP.net 4.6) I get the following format which doesn't seem to want to bind as it doesn't contain the __type info

{"GetProductsResult":{"Count":1,"Data":[{"Discontinued":false,"ProductID":3,"ProductName":"tim","ReorderLevel":2,"UnitPrice":3}]}}

Is there a way of telling the grid bindings that it should accept this format?

The returns contains no errors, the headers look ok and the calls are  on the same domain

 

    [ServiceContract]
    public interface IExamMeister
    {

        [OperationContract]

        //[EnableCors(origins: "http://localhost", headers: "*", methods: "*")]

        [WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped,
                    UriTemplate = "GetProducts")]
        PResultData GetProducts(int startRowIndex, int maximumRows, string sortExpression, string filterExpression);
        // TODO: Add your service operations here
    }

[Marin]

Hello,

The JSON format of the response of the WCF service can be configured through the attributes applied over the method:

[WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped,
                   UriTemplate = "GetProducts")]
       PResultData GetProducts(int startRowIndex, int maximumRows, string sortExpression, string filterExpression);
       // TODO: Add your service operations here
   }

You can leave the default values for these attributes (or remove them)  as shown in the example: grid/examples/data-binding/client-side/declarative/defaultcs.aspx and the response should look the same way as in the demo.
This client-side data binding uses the default WCF format of the response. If you require further customizations you can use client-side databinding with RadClientDataSource as shown here:
http://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/client-side/client-data-source-binding/defaultcs.aspx

Regards,
Marin
Telerik by Progress