apfelsine: Unable to get property 'data' of undefined or null reference

Beitrag lesen

Hallo,

ich habe eine Asp.Net Webseite auf MVC (Model View Controller Pattern) basierend, die ich mit Visual Studio programmiere. Ich versuche in meiner View einem Kendogrid eine Update Funktion beizubringen. Als normale, nicht ineinander verschachtelte Elemente, wäre das kein Problem, dafür habe ich funktionierende Vorlagen, die allerdings anders konzipiert sind. Aber hier möchte ich aus einer Dropdownliste ein Element auswählen und die gewählte Id soll übertragen werden. Ich habe eine Tabelle mit Produktnamen und jedem Produkt soll ein Report zugewiesen werden können. Ganz rechts gibts Buttons Update und Entfernen. Wenn ich auf Update in einer Zeile klicke, dann wird eine Zeile zum Bearbeiten geöffnet und man kann aus einem Dropdown-Feld einen Reportnamen auswählen (siehe Bild).

Gridview-Beispiel

Wenn die Update Funktion ausgeführt werden soll (ich klicke Button Update), bekomme ich im Browserdebugger den Fehler unable to get property 'data' of undefined or null reference. Im Schema wurde sowohl FullReportName als auch ReportId deklariert. Aber in der Anzeige setze ich an die Stelle für FullReportName eine Dropdownliste, die ReportId zurückliefert. Möglicherweise kommt der Fehler daher, das die Wahl der Dropdownliste das Feld "FullReportName" nicht setzt. Das liegt daran, das ich mir nicht sicher bin, wie ich das bewerkstelligen soll, weil mir nicht klar ist, ob und wie ich das entsprechende Element "FullReportName" ansprechen kann. Weil ich kein normales Textfeld habe sondern ein Dropdownfeld, das ReportsId heißt und auch eine Id als Value liefert. Ich könnte natürlich mit einem Eventhandler arbeiten, ein weiteres unsichtbares Feld anhängen, das ich so nenne, aber mir ist nicht klar ob ich das brauche oder ob das KendoGrid dafür bereits eine Funktion bietet, die mir unbekannt ist. Und es ist auch nicht klar, ob das mein Problem behebt.

Automatisch generierter Code


 	<tr class="k-grid-edit-row" role="row" data-role="editable" data-uid="c5639ca8-3a49-4e08-bd2f-118493b1d149">
<td role="gridcell" data-container-for="FullProductName">
	<input name="FullProductName" class="k-input k-textbox valid" type="text" data-bind="value:FullProductName">
</td>
<td role="gridcell" data-container-for="FullReportsName">
	<select name="ReportsId" class="valid" id="ReportsId" data-val-number="The field ReportsId must be a number." data-val="true" data-bind="value:ReportsId">
		<option selected="selected" value="0">*</option>
		<option value="2">Fahrradtageskarte_Report.rpt</option>
		<option value="10">Online-Ticket FTT V2_upload.rpt</option>
		<option value="11">Online-Ticket V6.rpt</option>
	</select>
</td>
<td role="gridcell">
	<a class="k-button k-button-icontext k-grid-update" href="#">
		<span class="k-icon k-update"></span>Update</a>
	<a class="k-button k-button-icontext k-grid-cancel" href="#">
		<span class="k-icon k-cancel"></span>Abbrechen</a>
</td></tr>

Die Dropdownliste (im Originaldokument deklariert unter dem KendoGrid Code)

 <td class="adminData">
                @Html.DropDownListFor(model => model.ReportsId, Model.AvailableReports)
                @Html.ValidationMessageFor(model => model.AddReportsId)
            </td>

KendoGrid

$("#ReportsProductList").kendoGrid({
                            dataSource: {
                                type: "json",
                                transport: {
                                    read: {
                                            url: "@Html.Raw(Url.Action("ReportsProductList", "TicketPrint"))",
                                            type: "POST",
                                            dataType: "json",
                                            data: addAntiForgeryToken
                                        },
                                    update: function (e){
                                        var updatedItem = e.data.Id;
                                        var reportsid = $('#AddReportsId').val();
                                        var surl = "/TicketPrint/UpdateReportsProduct/" + updatedItem.toString() + "/" + reportsid; 


                                        request = $.ajax({
                                            cache: false,
                                            type: 'POST',
                                            url: surl,
                                            data: addAntiForgeryToken,
                                            dataType: 'json',
                                            success: function (result) {
                                            e.success(result);
                                             },
                                            error: function (result) {
                                             e.error(result)
                                             }});

                                    },
                                    destroy: {
                                        url: "@Html.Raw(Url.Action("ReportsProductDelete","TicketPrint", new RouteValueDictionary { { "Namespaces", "Nop.Plugin.AboTicketSystem20.Controllers" }, { "area", "" } }))",
                                    }
                                },
                                schema: {
                                    data: "Data",
                                    total: "Total",
                                    errors: "Errors",
                                    model: {
                                        id: "Id",
                                        fields: {
                                            Id: { editable: false, type: "number" },
                                            ReportsProductId: { editable: false, type: "number" },
                                            ProductId :{ editable: false, type: "number" },
                                            ReportsId: { editable: false, type: "number" },
                                            ReportsProductId: { editable: false, type: "number" },
                                            FullProductName: { editable: true, type: "string" },
                                            FullReportName: { editable: false, type: "string" }
                                        }
                                    }
                                },
                                requestEnd: function (e) {
                                    if (e.type == "update") {
                                        //Tabelle aktualisieren 
                                        
                                        this.read();
                                    }
                                },
                                error: function (e) {
                                    display_kendoui_grid_error(e);
                                    // Cancel the changes
                                    this.cancelChanges();
                                },
                                pageSize: 10,
                                serverPaging: true,
                                serverFiltering: true,
                                serverSorting: true
                            },
                            pageable: {
                                refresh: true,
                                numeric: false,
                                previousNext: false,
                                info: false
                            },
                            editable: {
                                confirmation: "@T("Admin.Common.DeleteConfirmation")",
                                mode: "inline"
                            },
                            scrollable: false,
                            columns: [{
                                field: "FullProductName",
                                title: "@T("plugins.dds.ticketprint.product.name")",
                                width: 400
                            }, {
                                field: "FullReportsName",
                                title: "@T("plugins.dds.ticketprint.reports.name")",
                                width: 200,
                                editor: function (container, options) {
                                    $('#ReportsId').appendTo(container);
                                    //**hier erwartet Kendogrid sicher keine Id sondern einen Text**

                                }
                            },  {
                                command: [ {
                                    name: "edit",
                                    text: {
                                        edit: "@T("Admin.Common.Edit")",
                                    update: "@T("Admin.Common.Update")",
                                    cancel: "@T("Admin.Common.Cancel")"
                    }
                                },{
                                    name: "destroy",
                                    text: "@T("Admin.Common.Delete")"
                                }]
                               
                    }

                            ]
                        });
                    });

Danke im Voraus für konstruktive Tipps lg apfelsine

akzeptierte Antworten