Kendo網格使用自定義類插入新行

Question

這是我將新數據插入kendo網格的方法，但是我希望添加的行具有自定義類，因此我可以用不同的背景顏色設置添加的行的樣式。 我該如何實現？ 我搜索所有文檔都找不到任何相關文檔

    var dataSource = $('#grid').data('kendoGrid').dataSource;
    dataSource.insert(0, {
        "name":"ABC",
        "age": 99
    });

Answer 1

您可以通過其UID查找新添加的行，並將該類添加到該行。

我在此博客上探討了該解決方案： “ KendoUI網格中的簡單行着色”

 const sampleData = getSampleData(); $(document).ready(() => { $("#example-grid-wrapper").kendoGrid({ dataSource: { data: sampleData.data, schema: { model: { fields: sampleData.fields } } }, columns: sampleData.columns }); setTimeout(insertNewRecordAfterOneSecond, 1000); }); function insertNewRecordAfterOneSecond() { // Insert data let dataGrid = $('#example-grid-wrapper').data('kendoGrid'); dataGrid.dataSource.insert(0, { id: 1, name: "Sam", location: "B", color: "blue", status: 0 }); // Re-scan table and lookup newly added row. dataGrid = $('#example-grid-wrapper').data('kendoGrid'); let dataView = dataGrid.dataSource.view(); for (let i = 0; i < dataView.length; i++) { if (dataView[i].id === 1) { dataGrid.table.find("tr[data-uid='" + dataView[i].uid + "']").addClass("highlighted-row"); } } } function getSampleData() { return { data : [ { id: 2, name: "Grant", location: "A", color: "green", status: 1 }, { id: 3, name: "Vaughan", location: "B", color: "red", status: 0 }, { id: 4, name: "David", location: "A", color: "orange", status: 1 } ], fields : { id: { type: "number" }, name: { type: "string" }, location: { type: "string" }, color: { type: "string" } }, columns : [ { field: "id", title: "ID", width: "10%" }, { field: "name", title: "Name", width: "30%" }, { field: "location", title: "Location", width: "30%" }, { field: "color", title: "Color", width: "20%" }, { field: "status", title: "Status", width: "10%" } ] }; } 

 .highlighted-row { background: #FF0; /* Higlight row yellow */ } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="http://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.2.619/styles/kendo.blueopal.min.css" /> <div id="example-grid-wrapper"> <div id="example-grid"></div> </div> 

---

另類

如gaetanoM所建議。

 const sampleData = getSampleData(); var insertedUidList = []; $(document).ready(() => { $("#example-grid").kendoGrid({ dataSource: { data: sampleData.data, schema: { model: { fields: sampleData.fields } } }, columns: sampleData.columns, // Suggested by gaetanoM dataBound: function(e) { $.each(insertedUidList, function(idx, uid) { // Re-apply class to existing rows. $(`tr[data-uid="${uid}"]`).addClass('highlighted-row'); }); } }); // Insert two rows, one second apart. insertRowsWithDelay([ { id: 0, name: "Joseph", location: "A", color: "yellow", status: 1 }, { id: 1, name: "Sam", location: "B", color: "blue", status: 0 }, ], 1000) }); function insertRowsWithDelay(data, delayBetween) { if (data == null || data.length === 0) return; setTimeout(() => { insertNewRecord(data.pop()); insertRowsWithDelay(data, delayBetween); }, 1000); } function insertNewRecord(record) { record = $('#example-grid').data('kendoGrid').dataSource.insert(0, record); insertedUidList.push(record.uid); $(`[data-uid="${record.uid}"]`).addClass('highlighted-row'); } function getSampleData() { return { data : [ { id: 2, name: "Grant", location: "A", color: "green", status: 1 }, { id: 3, name: "Vaughan", location: "B", color: "red", status: 0 }, { id: 4, name: "David", location: "A", color: "orange", status: 1 } ], fields : { id: { type: "number" }, name: { type: "string" }, location: { type: "string" }, color: { type: "string" } }, columns : [ { field: "id", title: "ID", width: "10%" }, { field: "name", title: "Name", width: "30%" }, { field: "location", title: "Location", width: "30%" }, { field: "color", title: "Color", width: "20%" }, { field: "status", title: "Status", width: "10%" } ] }; } 

 .highlighted-row { background: #FF0; /* Higlight row yellow */ } .highlighted-row.k-alt { background: #DD0; /* Higlight row yellow */ } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="http://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.2.619/styles/kendo.blueopal.min.css" /> <div id="example-grid"></div> 

Answer 2

為了向每個新行添加一個新類，您可以使用.addClass（） 。 但是，每次您移至下一頁/上一頁或添加其他行時，都需要再次添加該類。

為了實現這一點，您可以將所有新添加的行uuid的列表保存在全局數組中，並在dataBound事件上重新應用該類。

在這里擺弄

var newUUID = [];
$("#grid").kendoGrid({
    navigatable: true,
    filterable: true,
    pageable: {
        pageSize: 5,
        alwaysVisible: false,
        pageSizes: [5, 10, 20, 100]
    },
    dataBound: function(e) {
        $.each(newUUID, function(idx, ele) {
            if ($(ele).length != 0) {
                $(ele).addClass('newRow');
            }
        })
    }
});
$('#btn').on('click', function(e) {
    var dataSource = $('#grid').data('kendoGrid').dataSource;
    var x = dataSource.insert(0, {
        "name":"ABC",
        "age": 99
    });
    newUUID.push("[data-uid='" + x.uid + "']");
    $("[data-uid='" + x.uid + "']").addClass('newRow');
})

Answer 3

您可以嘗試為網格創建數據綁定函數，然后在函數內部嘗試

  function onDataBound(e) { var dataSource = $("#GridName").data("kendoGrid").dataSource; var data = dataSource.data(); $.each(data, function (index, rowItem) { if (data.length > 0) { var rows = e.sender.tbody.children(); var row = $(rows[index]); if (data[index].name == "ABC" ) { row.addClass("NameColor"); } } }); } 

 <style> .NameColor { background-color: black; } </style> 

這樣你可以嘗試..