We Keep Coding

ASP.NET MVC Kendo Grid how to call controller method from javascript

Because I have a custom modal confirmation popup, I'll need to call the the method .Destroy("Remove", "Attachment") from javascript. How do I call the Remove method from javascript? I've indicated in the code how to call where I'd like to be able to call the method. Also, how to pass through the OrderViewModel?
Here's my grid:
#(Html.Kendo().Grid<TelerikAspNetCoreApp7.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.OrderID).Filterable(false);
columns.Bound(p => p.Freight);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity);
columns.Command(command =>
{
command.Custom("Destroy")
.Click("showDeleteConfirmation")
.HtmlAttributes(new { style = "width:40%" });
}).Width("15%");
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Destroy("Remove", "Attachment")
.Read(read => read.Action("Orders_Read", "Grid"))
.Destroy(read => read.Action("Orders_Read", "Grid"))
)
)
The modal:
#(Html.Kendo()
.Dialog()
.Name("DeleteConfirmation")
.Modal(true)
.Title("Confirm Delete")
.Content("Are you sure you want to delete this item?")
.Visible(false)
.Actions(a =>
{
a.Add().Text("No").Action("cancelDelete");
a.Add().Text("Yes").Action("confirmDelete").Primary(true);
})
)
The scripts:
<script>
var modelToDelete;
function showDeleteConfirmation(e) {
e.preventDefault();
var grid = $("#grid").data("kendoGrid");
var dialog = $('#DeleteConfirmation').data("kendoDialog");
modelToDelete = grid.dataItem($(e.target).parents('tr'));
dialog.content("Are you sure you want to delete this item with ID - " + modelToDelete.OrderID + "?");
dialog.open();
}
function confirmDelete(e) {
//how to call .Destroy("Remove", "Attachment") from here
}
function cancelDelete() {
}
</script>
The controller:
public ActionResult Remove([DataSourceRequest] DataSourceRequest request, OrderViewModel attachmentVm)
{
Attachment attachment = _db.Attachments.FirstOrDefault(o => o.Guid == attachmentVm.Guid);
attachment.IsActive = false;
attachment.LastUpdated = DateTime.Now;
attachment.LastUpdatedBy = _sessionUser.Username;
_db.SaveChanges();
return Json(ModelState.ToDataSourceResult());
}

Here's the answer:
function confirmDeleteAttach(e) {
$.ajax({
url: '/Attachment/Remove',
data: { Guid: modelToDeleteAttach.Guid },
type: "POST",
success: function () {
gridToDeleteAttach.dataSource.remove(modelToDeleteAttach);
$('#DeleteConfirmationAttach').data("kendoDialog").close();
}
});
}

Why when reloading Kendo UI GRID page from browser url, all of data do not display and just display grid without data?

when i reload the kendo grid page,the Information is lost and you have to stop the program and restart it!? where is my problem and how to fix it?
this is my view of kendo ui grid in ASP.NET MVC 5:
#using Microsoft.AspNet.Identity.EntityFramework;
#using UserManagerSample.ViewModels;
#using Kendo.Mvc.UI
<script
src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.aspnetmvc.min.js">
#(Html.Kendo(). Grid<UserViewModel>() .Name("grid")
.Columns(columns =>
{
columns.Bound(p =>
p.UserName);
columns.Bound(p => p.password);
columns.Bound(p => p.ConfirmPassword);
columns.Bound(p =>
p.Fakerole).ClientTemplate("#=Fakerole.FakeRoleName#")
.Title("Role").EditorTemp
lateName("FakeRoleDropDownList").Width(180);
columns.Command(command => command.Destroy()).Width(150);
})
.ToolBar(toolBar =>
{
toolBar.Create();
toolBar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.ClientDetailTemplateId("Test")
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.UserId);
model.Field(p => p.UserId).Editable(false);
model.Field(e => e.password);
model.Field(e => e.ConfirmPassword);
model.Field(p => p.Fakerole).DefaultValue(
ViewData["defaultCategory"] as FakeRoleViewModel);
})
.PageSize(20)
.Read(read => read.Action("EditingCustom_Read", "MyUser"))
.Create(create => create.Action("EditingCustom_Create", "MyUser"))
.Update(update => update.Action("EditingCustom_Update", "MyUser"))
.Destroy(destroy => destroy.Action("EditingCustom_Destroy", "MyUser"))
)
)
<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function() {
message += this + "\n";
});
}
});
alert(message);
}
}
</script>
<script>
OrderDetails_Error = function (args) {
if (args.errors) {
var grid = $("#orderDetailsGrid").data("kendoGrid");
var validationTemplate =
kendo.template($("#orderDetailsValidationMessageTemplate").html());
grid.one("dataBinding", function (e) {
e.preventDefault();
$.each(args.errors, function (propertyName) {
// take the template and insert it into the placeholder
var renderedTemplate = validationTemplate({ field:
propertyName, messages: this.errors });
grid.editable.element.find(".errors").append(renderedTemplate);
});
});
}
};
</script>
<script type="text/x-kendo-template"
id="orderDetailsValidationMessageTemplate">
# if (messages.length) { #
<li>#=field#
<ul>
# for (var i = 0; i < messages.length; ++i) { #
<li>#= messages[i] #</li>
# } #
</ul>
</li>
# } #
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
It show all of the data for the first time, but when reload the the information, do not show data in grid!

Kendo ui aspnet mvc grid bind json object returned from action to new row

I have autocomplete control on my grid. After selecting an element from autocomplete I call an event select "onSelectArticle" to import the object using LineBonLivraison_Add action and want to bind it as a json object and not just set values to columns.
The problem happens only to a new added row. For example, when I edit existing rows I can get the properties of the selected object and set values to it like (var item = grid.dataItem(select); item.set("Document", data.Document);) but for new a new row, "item" is null
#section LinesTab {
<style>
.k-widget .templateCell
{
overflow: visible;
}
</style>
<script>
function initMenus(e) {
$(".templateCell").each(function () {
eval($(this).children("script").last().html());
});
}
function onEditGrid(editEvent) {
// Ignore edits of existing rows.
if (!editEvent.model.isNew() && !editEvent.model.dirty) {
//alert("not new dirty")
return;
}
editEvent.container
.find("input[name=Document]") // get the input element for the field
.val("100") // set the value
.change(); // trigger change in order to notify the model binding
}
</script>
<div class="lines-tab-doc">
#(Html.Kendo().Grid<LineBonLivraison>()
.Name("grid-lines-doc")
// Declare grid column
.Columns(columns =>
{
// Cretae all the columns base on Model
columns.Bound(l => l.Article).EditorTemplateName("AutoCompleteArticle");
columns.Bound(l => l.Designation);
columns.Bound(l => l.Quantite);
columns.Bound(l => l.Unite);
columns.Bound(l => l.Commentaire);
columns.Bound(l => l.ReferenceExterne);
columns.Bound(l => l.Commentaire2);
// Edit and Delete button column
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(200);
})
.Events(ev => ev.DataBound("initMenus").Edit("onEditGrid"))
.DataSource(datasoure => datasoure.Ajax()
.Batch(true)
.Model(model =>
{
//model.Id(l => l.Document);
model.Id(l => l.Ligne);
})
.Read(read => read.Action("LinesBonLivraison_Read", "Achat"))
.Create(create => create.Action("LinesBonLivraison_Add", "Achat"))
.Update(update => update.Action("LinesBonLivraison_Update", "Achat"))
.Destroy(delete => delete.Action("LinesBonLivraison_Delete", "Achat"))
.PageSize(10)
)
// Add tool bar with Create button
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
// Set grid editable.
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
.Scrollable(scr => scr.Height(327))
.Sortable()
.Selectable(sel => sel.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.Navigatable()
.Pageable(pageable =>
{
pageable.Refresh(true);
pageable.PageSizes(true);
pageable.Messages(msg => msg.Empty(null));
})
)
</div>
}
AutoComplete Template
<script>
function onSelectArticle(e) {
var dataItem = this.dataItem(e.item.index());
var url = '#Url.Action("LineBonLivraison_Add", "Achat")';
$.ajax({
url: url,
data: {
doc: $("#Numero").val(),
line: e.item.index(),
article: dataItem.Code
}, //parameters go here in object literal form
type: 'GET',
datatype: 'json',
success: function (data) {
if (data == null)
//document.getElementById('labelx').innerHTML = "null";
else {
var grid = $("#grid-lines-doc").data("kendoGrid");
var select = grid.select();
var item = grid.dataItem(select); //prob if it a new row item is null
item.set("Document", data.Document);
item.set("Ligne", data.Ligne);
item.set("Article", data.Article);
//grid.refresh();
}
},
error: function (req, status, error) {
//document.getElementById('labelx').innerHTML = error;
}
});
}
function onAutoComplete() {
return {
text: $("#Article").val()
};
}
<div>
#(Html.Kendo().AutoComplete()
.Name("Article")
.HtmlAttributes(new { style = "width:" + width + ";" })
.DataTextField("Code")
.Filter(FilterType.Contains)
.Enable(enable)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetArticles", "Fiche").Data("onAutoComplete");
})
.ServerFiltering(true);
})
.Events(e =>
{
e.Select("onSelectArticle");
})
)
Action
public JsonResult LineBonLivraison_Add(int? doc, int? line, string article)
{
Models.Achat.LineBonLivraison l = new Models.Achat.LineBonLivraison()
{
Document = doc,
Article = article,
//Fournisseur = doc.Nom,
Ligne = line,
StyleLigne = "Style1",
ReferenceExterne = article
};
return Json(l, JsonRequestBehavior.AllowGet);
}

how to prevent opening of kendo grid editor pop up in javascript

I have two grid. When first has selected row, from other grid,user can create new row correctly. If first has not selected row, a function in javascript alert but can not prevent to opening of pop-up. I need how can i prevent or how to close grid pop-up
Two Grid
//grid code in view
#(Html.Kendo().Grid<Kurslar.Models.DonemKursu>()
.Name("donemGrid")
.Columns(columns =>
{
columns.Bound(p => p.DersAdi).Title("Ders").Width(85);
columns.Bound(p => p.EgitmenAdiSoyadi).Title("Eğitmen").Width(200);
columns.Bound(p => p.SinifKontenjanSayisi).Title("Kontenjan").Width(80);
columns.Bound(p => p.DonemBaslangicBitis).Title("Dönem").Width(157);
columns.Bound(p => p.DonemId).Visible(false);
columns.Bound(p => p.DersId).Visible(false);
columns.Bound(p => p.EgitmenId).Visible(false);
columns.Command(command => { command.Edit().Text("Güncelle"); command.Destroy().Text("Sil"); }).Width(164);
})
.Pageable()
.Sortable()
.Selectable()
.HtmlAttributes(new { style = "max-width:700px", id = "donemGrid" })
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.Window(conf => conf.Title("Yeni Kurs"))
.TemplateName("DonemKursuTemplate"))
.ToolBar(toolbar => toolbar.Create().Text("Kurs Ekle"))
.Events(e => e.Edit("onEdit").Change("change"))
.DataSource(dataSource => dataSource
.Ajax()
.Read("GridDonemKurslari", "Tanim")
.Create(create => create.Action("DonemKursuOlustur", "Tanim"))
.Update(update => update.Action("DonemKursuGuncelle", "Tanim"))
.Destroy(destroy => destroy.Action("DonemKursuSil", "Tanim"))
.PageSize(20)
.Model(model => model.Id(p => p.DonemId))
)
)
</td>
<td style="vertical-align:top;max-width:600px">
<h4>Sınıflar</h4>
#(Html.Kendo().Grid<Kurslar.Models.DonemKursSinifi>()
.Name("sinifGrid")
.Columns(columns =>
{
columns.Bound(p => p.Tanim).Width(50).Title("Tanim");
columns.Bound(p => p.DersAdi).Width(50).Title("Ders");
columns.Bound(p => p.EgitmenAdiSoyadi).Width(50).Title("Eğitmen");
columns.Bound(p => p.KontenjanSayisi).Width(50).Title("Kontenjan");
columns.Bound(p => p.DonemBaslangicBitis).Width(50).Title("Dönem");
columns.Bound(p => p.TarifeId).Width(50).Title("Tarife");
columns.Bound(p => p.DonemId).Visible(false);
columns.Bound(p => p.DersId).Visible(false);
columns.Bound(p => p.EgitmenId).Visible(false);
columns.Command(command => { command.Edit().Text("Güncelle"); command.Destroy().Text("Sil"); }).Width(180);
})
.Pageable()
.Sortable()
.AutoBind(false)
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.Window(conf => conf.Title("Yeni Sınıf"))
.TemplateName("DonemKursSinifiTemplate"))
.Name("pencere")
.ToolBar(toolbar => toolbar.Create().Text("Sınıf Ekle"))
.Events(e => e.Edit("onEditSinif"))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GridDonemKursSinifi", "Tanim").Data("data"))
.Create(create => create.Action("DonemKursSinifiOlustur", "Tanim").Data("dataCreate"))
.Update(update => update.Action("DonemKursSinifiGuncelle", "Tanim"))
.Destroy(destroy => destroy.Action("DonemKursSinifiSil", "Tanim"))
.PageSize(20)
.Model(model => model.Id(p => p.Id))
)
.Resizable(resize => resize.Columns(true))
)
// some unnecessary code block
onEditSinif function in javascript
function onEditSinif(e) {
var grid = $("#donemGrid").data("kendoGrid");
var rows = grid.select();
if (e.model.isNew()) {
try {
var kontenjan = grid.dataItem(rows).SinifKontenjanSayisi;
var dersAdi = grid.dataItem(rows).DersAdi;
var egitmenAdiSoyadi = grid.dataItem(rows).EgitmenAdiSoyadi;
var donemBaslangicBitis = grid.dataItem(rows).DonemBaslangicBitis;
$("#DonemBaslangicBitis").val(donemBaslangicBitis);
$("#DersAdi").val(dersAdi);
$("#EgitmenAdiSoyadi").val(egitmenAdiSoyadi);
var firstItem = $('#sinifGrid').data().kendoGrid.dataSource.data()[0];
firstItem.set('KontenjanSayisi', kontenjan);
$("#KontenjanSayisi").val(kontenjan);
} catch (f) {
alert("Please select Kurslar first");
// i need to prevent pop up here **
}
}
else {
$('.trhideclass1').hide();
}
}
is there anyone know how it is?
Thanks

You cannot prevent the editing like this, because the edit event is triggered after the Window has opened, which means - it is too late :).
What you can do instead is to create template column with a button inside which triggers a JavaScript function and based on your condition you can use the methods of the Grid addRow / editRow and so on. Most of the things I mentioned are covered here.

You can close popup edit form, that has been already created by inner mechanism of Kendo editing:
function Grid_OnEdit(e) {
if (!isCorrectStatus(e.model.StatusID)) {
var grid = this;
setTimeout(function () {
grid.cancelRow();
alert("Bad status!");
});
}
}
But the popup edit form flicks...
There is no good way to prevent showing the editing form correctly, only do it "by hand"...

Start editing form “by hand”. With checking before editing:
function editDoc () {
var grid = $("#DocGrid").data("kendoGrid");
var rows = grid.select();
var currentDataItem = grid.dataItem(rows);
var status = currentDataItem.StatusID;
if (!isDocumentGoodStatus(status)) {
showWarning(“Bad status!”, null);
return;
}
// fire edit event
grid.editRow(currentDataItem);
}
Function editDoc is called from menu or any button instead off “standard way” by means of clicking edit button in command column in grid

not able to get the correct row count for parent grid

I am not able to get child grid data like as getting parent grid data and getting wrong number of rows from parent grid ... I am using kendo ui Grid hierarchy grid format , I am using below code for that purpose
<script type="text/javascript">
$(document).ready(function () {
$('#btnMove').click(function () {
var count = $('#Gridparent').data('kendoGrid').tbody[0].rows.length;
alert(count); // here I am getting 5 number but actually i hav 4 rows
var sourcegrid = $('#GridParent').data('kendoGrid');
alert(' first button clicked'); // here is ok
var destinationgrid = $('#grid_#=CostPage#').data('kendoGrid');
alert('second button clicked'); // not getting this alert
and this is my view
#using (Html.BeginForm())
{
#(Html.Kendo().Grid<Topco.TopMapp.MVC.Models.CostPageSearch>()
.Name("Gridparent")
.Columns(columns =>
{
columns.Template(#<text></text>).ClientTemplate("<input id='checkbox' onclick='grdChkBoxClick(this); ' class='chkbxq' type='checkbox' />").Width(30);
columns.Bound(e => e.CostPage).Width(100);
columns.Bound(e => e.Description).Width(100);
columns.Bound(e => e.VendorName).Width(100);
columns.Bound(e => e.BillTypeDirect).Width(100);
columns.Bound(e => e.BillTypeWarehouse).Width(100);
columns.Bound(e => e.VendorName).Width(100);
})
.ClientDetailTemplateId("client-template")
.HtmlAttributes(new { style = "height:480px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(6)
.Read(read => read.Action("HierarchyBinding_Employees", "CostPageDisplay"))
)
.Events(events => events.DataBound("dataBound"))
)
<script id="client-template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<Topco.TopMapp.MVC.Models.ItemsDescriptionModel>()
.Name("grid_#=CostPage#")
.Columns(columns =>
{
columns.Template(#<text></text>).ClientTemplate("<input id='checkbox' onclick='grdChkBoxClick(this); ' class='chkbxq' type='checkbox' />").Width(30);
columns.Bound(o => o.ItemId).Width(100);
columns.Bound(o => o.ItemDescription).Width(100);
columns.Bound(o => o.BrandCode).Width(100);
columns.Bound(o => o.PackSize).Width(100);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("HierarchyBinding_Orders", "CostPageDisplay" , new { employeeID = "#=CostPage#" }))
)
.ToClientTemplate()
)
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
//alert('1');
}
</script>
I am not able to see the alert second button clicked and not able to get the correct row count as well for the below code
var count = $('#Gridparent').data('kendoGrid').tbody[0].rows.length;
would any one pls help on this .. many thanks....

I have solved the problem with these lines ....I am getting data from first line and and i am getting correct row count from second line...
var childGriddata = $('#GridParent').closest(".k-grid").data("kendoGrid");
var actualrowcount = $('#Gridparent').data("kendoGrid").dataSource.total();