Cross Site Service call for JxGrid is not working

[abinjaikParticipant]

I have downloaded the sample asp.net code of jqxGRid in which it do “Paging , Sorting & Filtering” using a webservice(service.asmx) . In my scenario, My Service will hosted on other location / domain and I need to consume this service to display data on jqxgrid. I TRIED MAKING “JSONP” with remote service URL but it doesnt work. Giving an error message “Error:Jquery231312321312211… was not called” . Why this error? My code is as below

<script type="text/javascript">
        $(document).ready(function () {
            //debugger;

            function buildQueryString(data) {
                var str = '';
                for (var prop in data) {
                    if (data.hasOwnProperty(prop)) {
                        str += prop + '=' + data[prop] + '&';
                    }
                }
                return str.substr(0, str.length - 1);
            }

            var formatedData = '';
            var totalrecords = 0;

            //Getting the source data with ajax GET request
            var source = {
                datatype: "jsonp",
                
                datafields: [
                { name: 'CompanyName' },
                { name: 'ContactName' },
                { name: 'ContactTitle' },
                { name: 'City' },
                { name: 'Country' },
                { name: 'Address' }
                ],
                sort: function () {
                    $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
                },
                filter: function () {
                    $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
                },
                beforeprocessing: function (data) {
                    var returnData = {};
                    data = data.d;
                    totalrecords = data.count;
                    returnData.totalrecords = data.count;
                    returnData.records = data.data;
                    return returnData;
                },
                type: 'GET',
                sortcolumn: 'CompanyName',
                sortdirection: 'asc',
                formatdata: function (data) {
                    data.pagenum = data.pagenum || 0;
                    data.pagesize = data.pagesize || 10;
                    data.sortdatafield = data.sortdatafield || 'CompanyName';
                    data.sortorder = data.sortorder || 'asc';
                    data.filterscount = data.filterscount || 0;
                    formatedData = buildQueryString(data);
                    return formatedData;
                },
                url: 'http://localhost:4545/Service.asmx'
            };

                        var dataAdapter = new $.jqx.dataAdapter(source, {
                            contentType: 'application/json; charset=utf-8', 
                            loadError: function (xhr, status, error) {
                                alert(error);
                            }
                        });

    

            $("#jqxgrid").jqxGrid({
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                virtualmode: true,
                sorttogglestates: 1,
                filterable: true,
                sortable: true,
                rendergridrows: function (args) {
                    return args.data;
                },
                columns: [
                    { text: 'Company Name', dataField: 'CompanyName', width: 250 },
                    { text: 'Contact Name', dataField: 'ContactName', width: 150 },
                    { text: 'Contact Title', dataField: 'ContactTitle', width: 180 },
                    { text: 'Address', dataField: 'Address', width: 180 },
                    { text: 'City', dataField: 'City', width: 80 },
                    { text: 'Country', dataField: 'Country', width: 100 }
                ]
            });
        });

    </script>

[Peter StoevKeymaster]

Hi abinjaik,

It looks like the Ajax call with JSONP to your service does not work for some reason which I think is not related to our widget. I would suggest you to look at some tutorials about implementing JSONP response in ASP .NET like that one: http://www.codeproject.com/Tips/631685/JSONP-in-ASP-NET-Web-API-Quick-Get-Started

Best Regards,
Peter Stoev

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

[abinjaikParticipant]

Peter,
But normal JSON request works well. Only JSONP have issues.

[ysutParticipant]

Any luck with this issue? Seem I am facing the same problem here. Please help and thanks

[Author]

Posts