Can someone please help with my question:
The edit command in kendo grid isn't reaching my controller.
Am I missing something?
#(Html.Kendo().Grid<WEEKLY_ORDERS_LINES>()
.Name("orderDetails_edit" + Model.OrderID)
.Columns(columns =>
{
columns.Bound(e => e.ID).Hidden(true);
columns.Bound(e => e.INGRED_NAME).Title("Ingredient Name").Width(120).HeaderHtmlAttributes(new { style = "text-align: center;" }).HtmlAttributes(new { style = "text-align: center;" });
columns.Command(command => { command.Edit(); }).Width(60);
})
.Editable(e => e.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.Sort(sort => sort.Add("INGRED_NAME").Ascending())
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p => p.ID).DefaultValue(new Guid());
model.Field(f => f.INGRED_NAME).Editable(true);
})
.Update(update => update.Action("Update", "Food"))
.Read(read => read.Action("Read", "Food").Data("additionalInfo"))
)
.Events(events => events.Cancel("refreshView"))
)
And my controller is like this:
public ActionResult Update([DataSourceRequest] DataSourceRequest request, WEEKLY_ORDERS_LINES model)
{
if (model != null && ModelState.IsValid)
{
WEEKLY_FOOD dbFood = _db.WEEKLY_FOOD.Find(model.ID);
dbFood.INGRED_NAME = model.INGRED_NAME;
_db.SaveChanges();
}
ActionResult a = Json(new[] { model }.ToDataSourceResult(request, ModelState));
return a;
}
I'm a colleague of Rute.
The problem that was ocurring was that the kendo Update was calling other controller and not the right one. This was happening because all the results of the data that were being rendered didn't have an unique identifier.
This unique identifier is now assign to the model.Id and the problem is solved. I understood this after seeing this link http://www.telerik.com/forums/wrong-methods-are-fired.
Thanks for the help.
Related
I have the following Kendo().Grid():
#(Html.Kendo().Grid<TicketReportPropertyEntity>()
.Name("TicketReportPropertyGrid")
.Columns(columns =>
{
columns.Bound(c => c.ID).Hidden();
columns.Bound(c => c.PropertyName).Title("Property Name").EditorTemplateName("_PropertyNameEditor").Width(900);
columns.Bound(c => c.Amount).Title("Amount").Format("{0:C}").Width(90);
columns.Command(command => command.Destroy()).Width(150);
})
.Events(events => events.DataBound("Databound").SaveChanges("SaveGrid").Edit("Edit"))
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Navigatable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
//.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(c => c.ID);
model.Field(c => c.PropertyName);
model.Field(c => c.Amount);
})
.Create(create => create.Action("AddTicketReportProperty", "TicketReportProperty").Data("GetData"))
.Read(read => read.Action("GetData", "TicketReportProperty", Model))
.Update(update => update.Action("UpdateTicketReportProperty", "TicketReportProperty"))
.Destroy(delete => delete.Action("DeleteTicketReportProperty", "TicketReportProperty"))
)
)
And my controller's method:
[HttpPost]
public ActionResult DeleteTicketReportProperty([DataSourceRequest] DataSourceRequest request, TicketReportPropertyModel model)
{
var result = new TicketReportPropertyModel().DeleteTicketReportProperty(model.ID);
return Json(new[] { model }.ToDataSourceResult(request, ModelState));
}
Here is a "SaveGrid" function:
function SaveGrid(e) {
console.log("save")
var rowsCount = e.sender.dataSource.data().length;
var totalSum = 0;
if (rowsCount > 0) {
for (var i = 0; i < rowsCount; i++) {
totalSum += e.sender.dataSource.data()[i].Amount;
}
}
var ticketAmount = $('#Ticket_Amount').val();
console.log(ticketAmount);
if (totalSum != ticketAmount) {
console.log("failed");
//show the popup
e.preventDefault();
}
}
It should add, update and delete records. Now, I'm working on deleting the record. But the event does not call the controller.
I'm following telerik example here
What am I missing?
I believe you are not following exactly the example from telerik. When you create the Grid you're using an Entity TicketReportPropertyEntity, but in the Controller you are receiving a Model TicketReportPropertyModel.
Make sure you create your Grid using the Model, not the Entity, as the example you're following.
#(Html.Kendo().Grid<TicketReportPropertyModel>()
I have a kendo grid in which I want to form delete button to pass the details of the row to the controller (as I am using mvc). Then I will use these details to delete the row from the database.
I searched in kendo website and I found the part for the delete or destroy call but I don't know how to pass these details of the row to the controller.
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice).Width(140);
columns.Bound(p => p.UnitsInStock).Width(140);
columns.Bound(p => p.Discontinued).Width(100);
columns.Command(command => command.Destroy()).Width(110);
})
.ToolBar(toolbar => {
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.ProductID))
.Create("Editing_Create", "Grid")
.Read("Editing_Read", "Grid")
.Update("Editing_Update", "Grid")
.Destroy("Editing_Destroy", "Grid")
)
)
My grid:
<div id="grid">
#(Html.Kendo().Grid<dynamic>()
.Name("BrowseGrid")
.Columns(columns =>
{
foreach (System.Data.DataColumn c in Model.Grid.Columns)
{
columns.Bound(c.ColumnName).EditorTemplateName("String");
}
columns.Command(command =>
{
command.Destroy();
command.Custom("").Text("editteam").HtmlAttributes(new { id = "editteam", onClick = "editRow()" });
});
})
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model =>
{
//Define the model
foreach (System.Data.DataColumn column in Model.Grid.Columns)
{
model.Field(column.ColumnName, column.DataType);
model.Id("Id");
}
})
.Read(read =>
read.Action("BrowseGrid", "Configuration")
)
.Destroy( update => update.Action("Delete", "Configuration"))
//Data("{nodeID:"+#Model.nodeID+"}"
)
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(new int[] { 10, 100, 1000, 10000, 100000, 1000000 })
.ButtonCount(10)
)
)
Please change to:
.Destroy(update => update.Action("Process_Destroy", "controller name"))
and in controller,
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Process_Destroy([DataSourceRequest] DataSourceRequest request, ProductViewModel product)
{
if (product != null)
{
//write your code for delete action;
}
return Json(ModelState.ToDataSourceResult());
}
This will work.
I am assuming you only need the id of the row to delete it, but I think you can send the full model of the selected row. I am sending both.
Like this:
.Destroy(d => d.Action("controllerMethod", "controllerName").Data("jsFunction"))
And in javascript:
function jsFunction() {
var grid = $("#BrowseGrid").data("kendoGrid");
var id = grid.dataItem(grid.select()).Id;
return {
id: id
};
}
Your controller method should receive the parameter:
public ActionResult controllerMethod(string id)
I create Kendo UI Grid that can Create, Update and Delete Data. But it is not fire Update Action in my Controller.
Here is My Code :
<script src="~/Scripts/Kendo/jquery.min.js"></script>
<script src="~/Scripts/Kendo/kendo.all.min.js"></script>
<script src="~/Scripts/Kendo/kendo.aspnetmvc.min.js"></script>
#(Html.Kendo().Grid<SkuMetadata>()
.Name("Grid")
.Columns(colums =>
{
colums.Bound(p => p.CompanyName).Width(100);
colums.Bound(p => p.BrandName).Width(100);
colums.Bound(p => p.ProductName).Width(100);
colums.Bound(p => p.SkuName).Groupable(false).Width(100);
colums.Command(command => {
command.Edit();
command.Destroy(); }).Width(160);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new { style = "height: 500px;" })
.DataSource(dataSource =>
dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.PageSize(100)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.SkuId))
.Create(update => update.Action("CreateProducts", "Product"))
.Update(update => update.Action("UpdateProducts", "Product").Type(HttpVerbs.Post))
.Destroy(destroy => destroy.Action("DeleteProducts", "Product"))
.Read(read => read.Action("GetAllProducts", "Product"))))
My Action Is :
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateProducts([DataSourceRequest] DataSourceRequest request, SkuMetadata skuMetadata)
{
return Json(_basicUnit.Skus.GetAllSku().ToDataSourceResult(request));
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult DeleteProducts([DataSourceRequest] DataSourceRequest request, SkuMetadata skuMetadata)
{
return Json(_basicUnit.Skus.GetAllSku().ToDataSourceResult(request));
}
Create and Delete Works fine. I dont understand Why Update is not working. Am i miss any reference or what i doing wrong?
Use this
.DataSource(dataSource =>
dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.PageSize(100)
.Events(events => events.Error("error_handler"))
---->**.Model(model => { model.Id(p => p.ID); model.Field(p => p.ID).DefaultValue(16000000); })** <--------
.Create(update => update.Action("CreateProducts", "Product"))
.Update(update => update.Action("UpdateProducts", "Product").Type(HttpVerbs.Post))
.Destroy(destroy => destroy.Action("DeleteProducts", "Product"))
.Read(read => read.Action("GetAllProducts", "Product"))))
I would first take the grid out of batch edit mode to see if you can get the update action to fire after you update the record in the popup.
Try mark action with [GridAction] attribute.
And may be you must write actions something like:
[AcceptVerbs(HttpVerbs.Post)]
[GridAction]
public ViewResult(...)
{
//do what you need..and if .ToDataSourceResult(..) return IEnumerable try write
var model = _basicUnit.Skus.GetAllSku().ToDataSourceResult(request);
return View(new GridModel(model));
}
you have to change ServerOperation(false) to ServerOperation(true)
In your render action you must send ID value in model.
[PopulateViewData("PopulateViewData")]
public virtual ActionResult Novo()
{
domain = ...;
var model = new Model
{
Id = model.Id,
Propertyx = model.PropertyX,
...
};
return View(model);
}
I'm trying to populate a kendo grid within a kendo window in MVC and am unable to find what is wrong. The window is created, and the grid is created within the window... however the DataSource's Read method is never called.
Window:
#{
Html.Kendo().Window()
.Name("DListing")
.Title("Listing")
.Draggable()
.Resizable()
.Width(1000)
.Height(500)
.Visible(true)
.Modal(true)
.Actions(actions => actions
.Maximize()
.Close())
.LoadContentFrom("Dispatch", "Listing", new { Number = #ViewBag.Number })
.Render();}
The Dispatch method in the Listing controller returns back a partial view that contains the grid.
Grid:
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Events(events => events.Change("onChange"))
.HtmlAttributes(new { style = "height:400px;" })
.Columns(columns =>
{
columns.Bound(p => p.Number);
columns.Bound(p => p.DateTime).Format("{0:MM/dd/yyyy hh:mm tt}");
columns.Bound(p => p.Location);
columns.Bound(p => p.Name);
columns.Bound(p => p.Elapsed_Hours);
})
.Groupable()
.Pageable(pageable => pageable
.Numeric(false)
.Input(true)
.PageSizes(new[] { 5, 10, 25 }))
.Sortable()
.Scrollable(scrollable => scrollable
.Virtual(true))
.Filterable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(13)
.Sort(sort => { sort.Add(p => p.DateTime).Descending(); })
.Model(model => { model.Id(p => p.Number); })
.Read(read => read.Action("Listing_Read", "Listing", new { Number = #ViewBag.Number })))
)
Listing_Read Method:
public ActionResult Listing_Read([DataSourceRequest] DataSourceRequest request, int Number)
{
return Json(GetListing(branchNumber).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
Also, it should be noted that I went through and verified that the viewbag data is available for both the window and later on in the grid.
For a little more back info, I initially had the grid on it's own page and it was able to call the read method and populated with the data with no issues. After moving it to populate in the window is when this became a problem.
Monitoring the http requests, the grid never attempts to call the read method (so the request isn't failing). I tried manually refreshing the datasource after the window has loaded thinking that might force the call, but that doesn't call the read method either.
I've been scratching my head on this one for a few hours now trying different things, hoping someone can spot what the problem is :)
Here's what worked for me:
1) View (~/Views/Home/Index.cshtml)
#(Html.Kendo().Window()
.Name("myWindow")
.Title("Title")
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
//.Content(Html.Partial("gridCat").ToHtmlString())
.LoadContentFrom("Load_gridCat", "Home")
)
2) Partial View (~/Views/Shared/gridCat.cshtml)
#(Html.Kendo().Grid<TelerikMvcApp1.Models.Category>()
.Name("CategoriesGrid")
.Columns(columns =>
{
columns.Bound(c => c.CategoryID).Title("Category").Width("10%");
columns.Bound(c => c.CategoryName);
columns.Bound(c => c.Description);
})
.Filterable()
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.CategoryID))
.Read(r => r.Action("Categories_Read", "Home"))
)
.HtmlAttributes(new { style = "height:250px" })
)
3) Controller (~/Controllers/HomeController.cs)
public ActionResult Load_gridCat()
{
return PartialView("gridCat");
}
public ActionResult Categories_Read([DataSourceRequest]DataSourceRequest request)
{
using (var ctx = new NWindContext())
{
IQueryable<Category> categories = ctx.Categories;
DataSourceResult result = categories.ToDataSourceResult(request);
return Json(result, JsonRequestBehavior.AllowGet);
}
}
In an MVC project i have the following view where i use the Kendo Grid
<%: Html.Kendo().Grid<Milestone>()
.Name("MilestonesGrid")
.Columns(columns =>
{
columns.Bound(p => p.ContractMilestoneID).Hidden();
columns.Bound(p => p.MilestoneSN).Title("Κωδικός οροσήμου");
columns.Bound(p => p.EstimatedDate).Title("Εκτιμώμενη ημερομηνία");
columns.Bound(p => p.RealDate).Title("Πραγματική ημερομηνία");
columns.Bound(p => p.MilestoneDescription).Title("Περιγραφή");
columns.Bound(p => p.Payment).Title("Πληρωμή");
columns.Bound(p => p.PaymentRate).Title("Ποσοστό πληρωμής");
columns.Bound(p => p.IsCompleted).Title("Έχει ολοκληρωθεί");
columns.Command(command =>
{
command.Edit()
.Text("Επεξεργασία")
.CancelText("Ακύρωση")
.UpdateText("Αποθήκευση");
command.Destroy()
.Text("Διαγραφή");
});
})
.ToolBar(toolbar => toolbar.Create().Text("Προσθήκη νέου οροσήμου"))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Pageable()
.Filterable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.Model(model => model.Id(o => o.ContractMilestoneID))
.Model(model => model.Field(o => o.MilestoneSN))
.Model(model => model.Field(o => o.EstimatedDate))
.Model(model => model.Field(o => o.RealDate))
.Model(model => model.Field(o => o.MilestoneDescription))
.Model(model => model.Field(o => o.Payment))
.Model(model => model.Field(o => o.PaymentRate))
.Model(model => model.Field(o => o.IsCompleted))
.Batch(true)
.Create(create => create.Action("CreateMilestone", "Milestones"))
.Read(read => read.Action("DetailsJson", "Milestones",
new { id = ViewBag.ID }))
.Update(update => update.Action("UpdateMilestone", "Milestones"))
.Destroy(delete => delete.Action("DeleteMilestone", "Milestones")))
%>
Also i have a controller where i want to save a new entry in the Kendo Grid.
[HttpPost]
public ActionResult CreateMilestone([DataSourceRequest] DataSourceRequest request,
Milestone milestone)
{
if (milestone != null && ModelState.IsValid)
{
using (TADCEntities database = new TADCEntities())
{
tblSymvaseisOrosima item = new tblSymvaseisOrosima
{
fldEstimatedDate = milestone.EstimatedDate,
fldIsCompleted = milestone.IsCompleted,
fldMilestoneDescription = milestone.MilestoneDescription,
fldMilestoneSN = milestone.MilestoneSN,
fldPayment = milestone.Payment,
fldPaymentRate = milestone.PaymentRate,
fldRealDate = milestone.RealDate,
fldStoixeioYpoergouID = milestone.ElementSubProjectID
};
database.tblSymvaseisOrosima.Add(item);
database.SaveChanges();
return Json(new[] { item }.ToDataSourceResult(request, ModelState));
}
}
return View();
// should also return json
}
The problem is that the Milestone type (the parameter in the controller) is always null even if i enter data when i create a new entry in the grid and press save. Any idea what to do in order to pass the entered data in the milestone parameter? Thank you in advance
As I saw in the Fiddler the parameters is posting with models prefix, thus you must access them like this:
public ActionResult CreateMilestone([DataSourceRequest] DataSourceRequest request,
[Bind(Prefix="models")] List<Milestone> milestons)
{
Milestone milestone = milestons[0];
.
.
.
}