web-dev-qa-db-ja.com

MVCグリッドセルの剣道UIの背景色を変更する方法

MVCのKendo UIを使用してアプリを開発していて、セルの背景を変更できるようにしたいのですが、列のセルのbackgroundプロパティの値を取得する方法がわからないので、設定できます。

 @(Html.Kendo().Grid(Model)
        .Name("LineItems")
        .Events(e=> e
            .DataBound("LineItems_Databound")
        )
        .Columns(columns =>
            {
                columns.Bound(o => o.Ui).Title("UI").Width(20);
                columns.Bound(o => o.QtyOrdered).Title("Qty Ord").Width(30);
                columns.Bound(o => o.Nomenclature).Width(200);
                columns.Bound(o => o.QtyShipped).Width(20).Title("Qty Sent");
                columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx");
                columns.Bound(o => o.ReqID).Width(50);
                columns.Bound(o => o.JCN_Job).Width(50).Title("Job/JCN");
                columns.Bound(o => o.ManPartID).Width(100).Title("Part#");
                columns.Bound(o => o.Requestor).Width(100).Title("Requestor");
            })
                     .ToolBar(toolbar =>
                     {
                         //toolbar.Create();
                         toolbar.Save();
                     })


                .Editable(editable => editable.Mode(GridEditMode.InCell))
                .Sortable()
                .Selectable()
                .Resizable(resize => resize.Columns(true))
                .Reorderable(reorder => reorder.Columns(true))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(p => p.ID))
                    .Batch(true)
                    .ServerOperation(false)
                    .Read(read => read.Action("Editing_Read", "Shipping"))
                    .Update(update => update.Action("UpdateShipment", "Shipping"))
                    //.Destroy(update => update.Action("Editing_Destroy", "Shipping"))
                )
)

私のスクリプトには、.databoundのグリッドをループするコードがあります

 function LineItems_Databound() {
      var grid = $("#LineItems").data("kendoGrid");
      var data = grid.dataSource.data();
      $.each(data, function (i, row) {
          var qtyRx = row.QtyReceived;
          var qtySx = row.QtyShipped;


          if (qtyRx < qtySx) {
             // Change the background color of QtyReceived here
          }



      });
   }
kendo-ui
15
Alan Fisher

Ajaxバインディングあり

Jqueryを使用すると、行のuid（一意のID）を使用してその行のn番目の子を選択することにより、グリッドのセルの背景色を選択および変更できます。

function LineItems_Databound() {
    var grid = $("#LineItems").data("kendoGrid");
    var data = grid.dataSource.data();
    $.each(data, function (i, row) {
      var qtyRx = row.QtyReceived;
      var qtySx = row.QtyShipped;

      if (qtyRx < qtySx) {
        //Change the background color of QtyReceived here
        $('tr[data-uid="' + row.uid + '"] td:nth-child(5)').css("background-color", "red");
      }
    });
}

更新

アランフィッシャー コメントで、彼はKendoUIの人々から学んだ、これを解決する別の方法を提案しました。 QtyReceived列は、データバインドイベントにパラメーターを渡すClientTemplateを使用します。

@(Html.Kendo().Grid(Model)
  .Name("LineItems")
  .Events(e => e.DataBound("LineItems_Databound"))
  .Columns(columns =>
  {
    columns.Bound(o => o.Ui).Title("UI").Width(20);
    columns.Bound(o => o.QtyOrdered).Title("Qty Ord").Width(30);
    columns.Bound(o => o.Nomenclature).Width(200);
    columns.Bound(o => o.Requestor).Width(100);
    columns.Bound(o => o.QtyShipped).Width(20).Title("Qty Sent");
    columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx")
      .ClientTemplate("#= LineItems_Databound(QtyShipped,QtyReceived)#");
    columns.Bound(o => o.ReqID).Width(50);
    columns.Bound(o => o.JCN_Job).Width(50).Title("Job/JCN");
    columns.Bound(o => o.ManPartID).Width(100).Title("Part#");
    columns.Bound(o => o.ReceivedBy).Width(100).Title("Received By");
    columns.Bound(o => o.RecAtSiteDate).Width(100).Title("Received Date")
      .Format("{0:dd MMM, yy}");
  })
)

<script>
  function LineItems_Databound(qtySx, qtyRx) {
      if (qtyRx < qtySx) {
        return "<div style='background: pink'>" + qtyRx + " </div>";
      }
      else {
       return qtyRx;
      }
  }
</script>

サーバーバインディングあり

Ajaxデータバインディングではなくサーバーデータバインディングを使用している場合、CellActionがこれを行うためのより良い方法かもしれません。

@(Html.Kendo().Grid(Model)
    .Name("LineItems")
    .CellAction(cell =>
    {
      if (cell.Column.Title.Equals("QtyReceived"))
      {
        if (cell.DataItem.QtyReceived.Value < cell.DataItem.QtyShipped.Value)
        {
          cell.HtmlAttributes["style"] = "background-color: red";
        }
      }
    })
    .Columns(columns =>
    {
        columns.Bound(o => o.Ui).Title("UI").Width(20);
        columns.Bound(o => o.QtyOrdered).Title("Qty Ord").Width(30);
        columns.Bound(o => o.Nomenclature).Width(200);
        columns.Bound(o => o.QtyShipped).Width(20).Title("Qty Sent");
        columns.Bound(o => o.QtyReceived).Width(20).Title("Qty Rx");
        columns.Bound(o => o.ReqID).Width(50);
        columns.Bound(o => o.JCN_Job).Width(50).Title("Job/JCN");
        columns.Bound(o => o.ManPartID).Width(100).Title("Part#");
        columns.Bound(o => o.Requestor).Width(100).Title("Requestor");
    })
)
29
Daniel

MVCビューモデルからグリッドにデータを入力する場合、これを行う簡単な方法を次に示します。 CSSスタイルを作成します。

_   <style>
        .TrunkSummaryLightYellow {
            background: LightYellow;
        }

        .TrunkSummaryPink {
            background: Pink;
        }

        .TrunkSummaryLightGreen {
            background: LightGreen;
        }
    </style>
_

次に、次のようにドキュメント対応関数を使用します。

_$(document).ready(function () {
    var grid = $("#TrunkSummaryGrid").data("kendoGrid");
    var gridData = grid.dataSource.view();

    for (var i = 0; i < gridData.length; i++) {
        if (gridData[i].SomeProperty == SomeValue) {
            grid.table.find("tr[data-uid='" + gridData[i].uid + "']").addClass("TrunkSummaryLightYellow");
        }
    }
})
_

この提案をしてくれたDave Glick（ link ）に感謝します。

個々のセルの背景色を次のように設定できることを確認しました。

grid.table.find("tr[data-uid='" + gridData[i].uid + "']")[0].cells[4].style.backgroundColor = 'pink';

1
Graham Laight