Grid row goes blank after update using remote asp.net web service (asmx)

3 posts, 0 answers
  1. Kevin F
    Kevin F avatar
    46 posts
    Member since:
    Sep 2009

    Posted 22 Aug 2014 Link to this post

    I've banged my head off the table for too long and now I'm asking for help :)  Here is my code:
    All the kendo requirement files are of course included higher up in the page.
    HTML:
    <strong>ALIAS INFORMATION</strong><br />
    <br />
    <form id="offenderAliasForm">
        <div id="grdAliases"></div>
    </form>
     
     
    <script src="/sdsoia/Scripts/OffenderFunctions/OffenderAliases.js"></script>
    <script type="text/javascript">
        $(function () {
            initializeAliasForm();
        });
    </script>

    And here is the javascript.  
    var crudBaseUrl = "/sdsoia/Services/Aliases.asmx";
    var currentOffenderId = $.cookie("CurrentPendingOffenderId");
    var readData = "{ pendingOffenderId: " + currentOffenderId + " }";
     
    var aliasDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: crudBaseUrl + "/GetAliasesForPendingOffender",
                dataType: "json",
                contentType: "application/json",
                type: "POST",
                dataFilter: function (data) {
                    var msg = eval('(' + data + ')');
                    return msg.d;
                }
            },
            update: {
                url: crudBaseUrl + "/UpdateAliasesForPendingOffender",
                dataType: "json",
                contentType: "application/json",
                type: "POST"
            },
            parameterMap: function (data, type) {
                console.log("Using datasource for:", type, "; data:", data);
                switch (type) {
                    case "read":
                        data = {
                            pendingOffenderId: currentOffenderId
                        }
                        break;
                    case "update":
                        break;
                }
                return kendo.stringify(data);
            }
        },
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { editable: false },
                    OffenderId: { editable: false },
                    Name: {},
                    Ssn: {},
                    Dob: { type: "date" },
                    Timestamp: { editable: false }
                }
            }
        }
    });
     
     
    var grdAliases = $("#grdAliases").kendoGrid({
        columns: [
            {
                field: "Id",
                hidden: true
            },
            {
                field: "OffenderId",
                hidden: true
            },
            {
                field: "Name",
                title: "Name (Last, First, Middle)"
            },
            {
                field: "Ssn",
                title: "SSN",
                format: "{0: ###-##-####}",
                editor: function (container, options) {
                    $("<input name='" + options.field + "' />")
                        .appendTo(container)
                        .kendoMaskedTextBox({
                            mask: "###-##-####"
                        });
                }
            },
            {
                field: "Dob",
                title: "DOB",
                type: "date",
                format: "{0:d}"
            },
            {
                field: "Timestamp",
                hidden: true
            },
            {
                command: [
                    {
                        name: "edit",
                        text: { edit: "Edit", cancel: "Cancel", update: "Update" }
                    },
                    {
                        name: "destroy",
                        text: "Delete"
                    }
                ]
            }
        ],
        editable: {
            mode: "inline"
        },
        selectable: true,
        dataSource: aliasDataSource,
        toolbar: ["create"],
        pageable: {
            info: true,
            refresh: false,
            pageSizes: false,
            previousNext: false,
            numeric: false,
            input: false,
            messages: {
                display: "{2} records.",
                empty: "No records found."
            }
        },
    }).data("kendoGrid");
     
     
     
     
    function initializeAliasForm() {
     
    }

    The update is successful every time, but the row I am updating just goes completely blank when I click the update button.

    Any help is greatly appreciated!!

    Kevin
  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 26 Aug 2014 Link to this post

    Hello Kevin,

    The behavior you have described, may be caused by returning an empty entity from the service as response of the update operation. Therefore, could you please verify that the code either does not return anything or return correctly updated entity. 

    Regards,
    Rosen
    Telerik
     
    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. Kevin F
    Kevin F avatar
    46 posts
    Member since:
    Sep 2009

    Posted 29 Aug 2014 in reply to Rosen Link to this post

    Thank you very much!

    I had the service changed to return a JSON string of the updated record, and then had to add the dataFilter to the update part of the DataSource and it works now.

    Kevin
Back to Top