1

MVC プログラムでは、Kendo Grid を使用してデータ項目 (この場合は施設) のリストを表示しています。グリッドのモデルには、表示されているよりも多くの列が含まれており、ユーザーが編集できるようにそれらの値が表示されるグリッドの横に別の領域があります。ユーザーが値を変更すると、グリッドのデータソースに反映されます。ユーザーが保存せずに別の行に移動すると、変更を保存するように求められます。

グリッドのコード:

    @(Html.Kendo().Grid(Model)    
    .Name("FacilityGrid")       
    .Columns(columns => {
        columns.Bound(p => p.Name).Width(100);
        columns.Bound(p => p.ShortDescription).Width(150);
        })
    .ToolBar(toolbar => toolbar.Create().Text("Add New Facility"))
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("FacilityPopup"))
    .Pageable()
    .Resizable(resize => resize.Columns(true)) 
    .Sortable()
    .Selectable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Model(model => 
            {
                model.Id(p => p.FacilityID); 
                model.Field(p=>p.FacilityID).DefaultValue(new Guid("00000000-0000-0000-0000-000000000000"));
            })
        .Read(read => read.Action("Facility_Read", "Setup"))
        .Create(update => update.Action("Facility_Create", "Setup"))
        .Update(update => update.Action("Facility_Update", "Setup"))
        .Destroy(update => update.Action("Facility_Destroy", "Setup"))
        )
        .Events(events => events
        // Subscribe to the "change" event.
        .Change("rowChange")
        )

今のところ、追加データを編集するための入力がいくつかあります。

    <p id="FacilityID"> </p>
    <p> Facility Name: <input ID="Name" class="GridLinked" type="text"></p>
    <p> Description: <input ID="Description" class="GridLinked" type="text"></p>
    <p> Address 1: <input ID="Address1" class="GridLinked" type="text"></p>
    <p> Address 2: <input ID="Address2" class="GridLinked" type="text"></p>
    <p> City: <input ID="City" class="GridLinked" type="text"></p>
    <p> State: <input ID="State" class="GridLinked" type="text"></p>
    <p> Country: <input ID="Country" class="GridLinked" type="text"></p>

値は、グリッドの変更イベントで設定されます

function rowChange(e) { 
    // handle the "change" event
    // Get the values from the Grid to display in the detail area
    $("#Name").val(this.dataItem(this.select()).Name);
    $("#FacilityID").text(this.dataItem(this.select()).FacilityID);
    $("#Description").val(this.dataItem(this.select()).Description);
    $("#Address1").val(this.dataItem(this.select()).Address1);
    $("#Address2").val(this.dataItem(this.select()).Address2);
    $("#City").val(this.dataItem(this.select()).City);
    $("#State").val(this.dataItem(this.select()).State);
    $("#Country").val(this.dataItem(this.select()).Country);

    if (this.dataSource.hasChanges()) {
        if (confirm("You have unsaved changes. Do you want to save them?")) {
            $('#FacilityGrid').data('kendoGrid').saveChanges();
        }
        else {
            $('#FacilityGrid').data('kendoGrid').cancelChanges();
        }
    };
}

グリッドのデータソースは、入力フィールドの変更によって更新されます。

 $(".GridLinked").change(function (event) {
     var grid = $('#FacilityGrid').data('kendoGrid');
// See if there are any pending changes
   debugger;

     var cell = event.target;
     var selectedRow = grid.select();
     var selectedRowIndex = selectedRow.index();
     grid.dataSource.data()[selectedRowIndex].set(cell.id, cell.value);
     grid.select(selectedRowIndex);
    // Set the focus back to the Grid
});

私が直面している問題は、セル値がグリッドに設定されると、フォーカス インジケーター (強調表示された行) が消え、(Grid.select(selectedRowIndex) を使用して) 再度設定しようとすると、rowChange イベントが発生することです。グリッドで発火し、ハンドラーがエラーをスローします

JavaScript runtime error: Unable to get property 'Name' of undefined or null reference

グリッド内の選択された行に関して何らかのインジケータを表示する方法について、誰か提案はありますか?

グリッド データソースを直接操作することは、適切な設計方法ですか?

4

1 に答える 1

0

dataSource.view() を使用して選択したグリッドをペイントすることにより、選択した行を強調表示できます。rowChange イベントで次のことを行うことをお勧めします。

var cell = event.target;  var selectedRow = grid.select();   
var selectedRowIndex = selectedRow.index() 
var dataView = this.dataSource.view();  
$("#FacilityGrid tbody").find("tr[data-uid=" + selectedRowIndex + "]").css("backgroundcolor", "grey");

これが役に立てば幸いです...幸せなコーディング

于 2013-10-03T08:54:19.700 に答える