Grid & ie9 Problem

3 posts, 0 answers
  1. Christian
    Christian avatar
    2 posts
    Member since:
    Dec 2012

    Posted 22 Jan 2013 Link to this post

    Hi,
    need some help, this code works fine* with Chrome and Firefox, but i doesn't work with ie9.

    e.errorThrown = No Transport
    e.xhr.responseText = undefined.

    * I can add and update items but i can't remove them.

    Here is the code.

    <div id="grid"></div>
    $(document).ready(function () {
                    var crudServiceBaseUrl = "http://localhost:11028/IntexService.svc/Zonas",
                     crudServiceOptions = "",
                        dataSource = new kendo.data.DataSource({
                            type: "odata",
                            transport: {
                                read: {
                                    url: crudServiceBaseUrl + crudServiceOptions,
                                    dataType: "json"
                                },
                                update: {
                                    url: function (data) {
                                        return crudServiceBaseUrl + "(" + data.ZonaId + "L)";
                                    }
                                },
                                create: {
                                    url: crudServiceBaseUrl
                                },
                                destroy: {
                                    url: function (data) {
                                        return crudServiceBaseUrl + "(" + data.ZonaId + "L)";
                                    }
                                }
                            },
                            batch: false,
                            pageSize: 10,
                            serverPaging: true,
                            serverFiltering: true,
                            schema: {
                                model: {
                                    id: "ZonaId",
                                    fields: {
                                        ZonaId: { editable: false, nullable: true },
                                        Nombre: { validation: { required: true} }
                                    }
                                },
                                errors: "Errors"
                            },
                            error: function (e) {
                                alert("La operación ha fallado: \n" + e.errorThrown + ": " + e.xhr.responseText);
                                this.cancelChanges();
                            }
                        });
     
                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        filterable: true,
                        pageable: true,
                        height: 410,
                        toolbar: ["create"],
                        columns: [
                                { field: "Nombre", width: "150px" },
                                { command: ["edit", "destroy"], title: " ", width: "110px"}],
                        editable: "popup"
                    });
                });
    Any idea?
    Thanks.
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 24 Jan 2013 Link to this post

    Hi Christian,


    Basically in current scenario when the errors are contained in the JSON response from the server the xhr object will be empty (it's populated only when the Ajax request fails such as HTTP error). I would suggest to use the e.status and e.errorThrown properties from the event data instead.

    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Christian
    Christian avatar
    2 posts
    Member since:
    Dec 2012

    Posted 28 Jan 2013 Link to this post

    Hi Vladimir.
    Thanks for u reply, i found the problem.

    Request URL:http://localhost:11028/IntexService.svc/Zonas(5L)
    Request Method:OPTIONS
    Status Code:200 OK
     
    Request Headers
    Accept:*/*
    Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
    Accept-Encoding:gzip,deflate,sdch
    Accept-Language:es-ES,es;q=0.8
    Access-Control-Request-Headers:accept, origin
    Access-Control-Request-Method:DELETE
    Connection:keep-alive
    Host:localhost:11028
    Origin:http://localhost:11021
    Referer:http://localhost:11021/Zona
    User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.56 Safari/537.17
     
    Response Headers
    Access-Control-Allow-Headers:Content-Type, Accept
    Access-Control-Allow-Methods:GET, POST, PUT
    Access-Control-Allow-Origin:*
    Access-Control-Max-Age:1728000
    Cache-Control:private
    Connection:Close
    Content-Length:0
    Date:Mon, 28 Jan 2013 15:18:41 GMT
    Server:ASP.NET Development Server/10.0.0.0
    X-AspNet-Version:4.0.30319
    Access-Control-Request-Method:DELETE
    Access-Control-Allow-Methods:GET, POST, PUT


    I can't add 'DELETE' method...i dunno how.
    Could u help me?

    ----------------------

    Fixed:

    Add DELETE  HttpContext.Current.Response.AddHeader() in Global.asax.

            
    protected void Application_BeginRequest(object sender, EventArgs e)
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
                if (HttpContext.Current.Request.HttpMethod == "OPTIONS" )
                {
                    //These headers are handling the "pre-flight" OPTIONS call sent by the browser
                    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods" , "GET, POST, PUT, DELETE" );
                    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers" , "Content-Type, Accept" );
                    HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000" );
                    HttpContext.Current.Response.End();
                }
            }

    Thanks
Back to Top