Using .NET Core, have a grid bound to a local data source. We are adding a similar item after selecting via a multiselect control. We have this working, however when we add it to the bound data source, any CSS changes we may have made to other rows disappear. We are trying to make it so the CSS is either retained on the existing row or where we can restore it via an "item data bound" like event.
From the code below, I'm assuming the changed event on the data source occurs before the grid is rebound. And I cannot seem to identify a valid event on the grid for after the grid has been rebound to restore any CSS placed from the remove command.
Grid:
<kendo-grid name="TaskGrid" persist-selection="true" selectable="single row" height="300" datasource-id="gridDataSource" on-page="LoadRoleToTask()">
<columns>
<column hidden="true" field="TaskId" />
<column title="Task" field="TaskName" />
<column>
<commands>
<column-command name="Remove" click="RemoveTask" text="Remove"></column-command>
</commands>
</column>
</columns>
<groupable enabled="false" />
<sortable enabled="true" allow-unsort="false" initial-direction="ascending" />
<filterable enabled="true" />
</kendo-grid>
Javascript:
var gridDataSource = new kendo.data.DataSource({ change: AddCSS });
function LoadRoleToTask()
{
@foreach(var r2t in Model.RoleToTasks)
{
<text>
var roleToTask =
{
TaskId: "@r2t.TaskId",
TaskName: "@r2t.TaskName",
IsDeleted: false
};
gridDataSource.add(roleToTask);
</text>
}
}
function AddCSS(e)
{
var grid = $("#TaskGrid").data("kendoGrid");
if (!grid) return;
var headerCells = grid.element.find("th");
for (var row = 0; row < grid.dataSource.total(); row++)
{
var dataItem = grid.dataSource.at(row);
var rowCells = grid.element.find("tr[data-uid=" + dataItem.uid + "] td");
var currentTask = FindTask(dataItem.TaskId);
if (!currentTask.isDeleted) continue;
for (var i = 1; i < headerCells.length; i++)
{
var cell = $(rowCells[index]);
cell.addClass("deletedRole");
}
}
}
function AddTask()
{
var multi = $("#TaskMultiSelect").getKendoMultiSelect();
var multiDataItems = multi.dataItems();
if (multiDataItems.length == 0) return;
for (var i = 0; i < multiDataItems.length; i++)
{
var selectedTask = multiDataItems[i];
var currentTask = FindTask(selectedTask.TaskId);
if (currentTask) continue; //if already in data source, don't re-add
var newRole =
{
TaskId: selectedTask.TaskId,
TaskName: selectedTask.Name,
IsDeleted: false
};
gridDataSource.add(newRole); //successful but removes any CSS already in place
}
}
function RemoveTask(e)
{
e.preventDefault();
var grid = $("#TaskGrid").data("kendoGrid");
var headerCells = grid.element.find("th");
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var rowCells = grid.element.find("tr[data-uid=" + dataItem.uid + "] td");
var currentTask = FindTask(dataItem.TaskId);
if (!currentTask.IsDeleted)
{
currentTask.IsDeleted = true;
e.target.innerText = "Undo";
for (var index = 1; index < headerCells.length; index++)
{
var cell = $(rowCells[index]);
cell.addClass("deletedRole");
}
}
else
{
currentTask.IsDeleted = false;
e.target.innerText = "Remove";
for (var index = 1; index < headerCells.length; index++)
{
var cell = $(rowCells[index]);
cell.removeClass("deletedRole");
}
}
}
function FindTask(taskId)
{
for (var i = 0; i < gridDataSource.data().length; i++)
{
var currentTask = gridDataSource.data()[i];
if (currentTask && currentTask.TaskId == taskId)
{
return currentTask;
}
}
}
1 Answer, 1 is accepted
If you would like to apply custom styles to the Grid based on the data I would suggest using the dataBound event. It is raised after the data operations in the Grid are completed. The example below illustrates how the Grid cells can be styled based on the data that is contained in them.
Give the approach a try and let me know how it works for you.
Regards,
Viktor Tachev
Progress Telerik