Hi everybody,
I have this:
[code]
@using Multitask.Regenboog.Medicijnverstrekking.WebApplication.ViewModels.Medicijn
@{
ViewBag.Title = "Volgorde";
}
@section Head
{
@Styles.Render("~/content/kendo/style")
@Styles.Render("~/content/toastr")
}
<style>
.k-grid-filter.k-state-active {
background-color: #fff;
}
</style>
<div class="row">
<div class="col-md-8">
<h2>Medicijnen</h2>
</div>
</div>
<div id="grid"></div>
@(Html.Kendo().Grid<MedicijnVolgordeViewModel>()
.Name("medicijnenGridVolgorde")
.Columns(columns =>
{
columns.Bound(c => c.Id).Hidden().IncludeInMenu(false);
columns.Bound(c => c.Naam).Title("Naam").HtmlAttributes(new { @style = "width:400px;" }).Width(100);
columns.Bound(c => c.Volgorde).Title("Volgorde").Width(150);
})
.Sortable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single)
.Type(GridSelectionType.Row))
.Filterable()
.Reorderable(reorder => reorder.Columns(true))
.ColumnMenu()
.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("Volgorde", "Medicijn"))
.Sort(sort => sort.Add(m => m.Naam).Ascending())
.ServerOperation(true)
)
.Resizable(resize => resize.Columns(true))
.Deferred()
)
<div style="margin-top: 10px;">
@Html.ActionLink("Toevoegen", "Create", "Medicijn", null, new { @class = "btn btn-success" })
</div>
@(Html.Kendo().Tooltip()
.For("#medicijnenGridVolgorde")
.Filter("th")
.Position(TooltipPosition.Top)
.ContentHandler("GetColumnTitle")
.Deferred()
)
<script type="text/javascript">
function onMedicijnCustomClick(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var id = dataItem.Id;
var url = Medicijnverstrekking.baseUrl + 'Medicijn/Edit?id=' + id;
parent.window.location.href = url;
}
function formatBoolean(bool) {
if (bool == null)
return "";
if (bool) {
return "Ja";
} else {
return "Nee";
}
}
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
Naam: { type: "string" },
Volgorde: { type: "number" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
columns: ["Id", "Naam", "Volgorde"]
}).data("medicijnenGridVolgorde");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
hint: function (e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function (e) {
var target = dataSource.get($(e.draggable.currentTarget).data("Id")),
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.get(dest.parent().data("Id"));
//not on same item
if (target.get("id") !== dest.get("Id")) {
//reorder the items
var tmp = target.get("position");
target.set("position", dest.get("position"));
dest.set("position", tmp);
dataSource.sort({ field: "position", dir: "asc" });
}
}
});
</script>
@section scripts
{
@Scripts.Render("~/bundles/Kendo")
@Scripts.Render("~/bundles/toastr")
@Scripts.Render("~/bundles/Q")
@Scripts.Render("~/bundles/knockout")
@Html.Kendo().DeferredScripts()
<script type="text/javascript">
kendo.culture("nl-NL");
function GetColumnTitle(e) {
var target = e.target; // element for which the tooltip is shown
return $(target).text();
}
</script>
<script type="text/javascript">
function formatBoolean(bool) {
if (bool == null)
return "";
if (bool) {
return "Ja";
} else {
return "Nee";
}
}
</script>
}
[/code]
But how to drag a row in the kendo grid?
Thank you