I have a Telerik Grid for asp.net MVC 4 using Kendo 2014.
The grid has a 1 foreign key and I am using the foreign key template.
The Grid is working properly as far as CRUD operations, however, the GridData source is not getting updated. Consequently when trying to use the new updated values from the grid.dataSource (visible in the grid) I am getting the old values:
I have tried to update the datasource but am not able to get any of the prescribed datasource events events triggered other than events.change which is not specific enough.
Here is my Grid:
@(Html.Kendo().Grid<
PMTWebReconcile.Models.ProcEquipViewModel
>()
.Name("ProcEqGrid")
//.HtmlAttributes(new { style = "height: 480px; margin-left: 260px" })
.Events(events => events.Edit("onEdit"))//.Events(events => events.Change("onChange"))
.Columns(columns =>
{
columns.Bound(p => p.peqID).Width(20).Title("ID");
columns.Bound(p => p.peqName).Width(120).Title("Name");
columns.Bound(p => p.peqTag).Width(120).Title("Tag");
columns.Bound(p => p.peqDescription).Width(200).Title("Description");
columns.ForeignKey(p => p.eqtID, (System.Collections.IEnumerable)ViewData["EqptTypes"], "TypeID", "Type").Title("Eqpt Type").Width(200);
//columns.Bound(p => p.eqtID).Width(120).ClientTemplate("<
span
tabindex
=
'0'
class
=
'k-widget k-dropdown k-header'
unselectable
=
'on'
><
span
class
=
'k-dropdown-wrap k-state-default'
unselectable
=
'on'
><
span
class
=
'k-input'
unselectable
=
'on'
>Select Type</
span
><
span
class
=
'k-select'
><
span
class
=
'k-icon k-i-arrow-s'
>select</
span
></
span
></
span
><
input
name
=
'Type'
id
=
'Type'
style
=
'display: none;'
type
=
'text'
data-role
=
'dropdownlist'
></
span
>");
columns.Bound(p => p.peqID).Width(10).Title("Edit Sizes")
.ClientTemplate("<
button
type
=
'button'
onclick=\"EditProcEquipment(this);\"
text
=
'text'
class
=
'k-button k-button-icontext k-grid-edit'
style
=
'min-width: 30px; min-height: 25px; height: 25px; padding-top: 0; padding-right: 0;'
><
span
class
=
'k-icon k-edit'
></
button
>");
columns.Bound(p => p.peqActive).Width(30);
columns.Command(commands =>
commands.Edit().HtmlAttributes(new { style = "min-width:64px;width:80px" });
//commands.Delete().ButtonType(GridButtonType.Image);
}).Width(200);
})
.ToolBar(toolbar => { toolbar.Create(); toolbar.Save(); }) // toolbar.Save(); })
//.ToolBar(toolBar => toolBar.Template("<
a
class
=
'k-button k-button-icontext k-grid-add'
href
=
'#'
onlick
=
'customCreateCmd()'
>Add new record</
a
>"))
.HtmlAttributes(new { style = "veritcal-align:top" })
.Selectable(s => s.Mode(GridSelectionMode.Single))
//.Selectable(s => s.Mode(GridSelectionMode.Multiple))
//.Editable(editable => editable.Mode(GridEditMode.InLine)) // Use inline editing mode.
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("errorHandler").Sync("onSync").RequestEnd("onRequestEnd"))//.Sync("sync_handler"))
//.Events(events => events.RequestEnd("onRequestEnd"))
//.Events(events => events.Change("onChange"))
//.Events(events => events.Push("onPush"))
//.Events(events => events.Edit("onEdit"))
.AutoSync(true)
.Model(model =>
{
model.Id(p => p.peqID); // Specify the property which is the unique identifier of the model.
model.Field(p => p.peqID).Editable(false); // Make the ProductID property not editable.
//model.Field(p => p.Type).DefaultValue(new PMTWebReconcile.Models.EquipTypeViewModel());
model.Field(p => p.eqtID).DefaultValue(16);
model.Field(p => p.plsID);//need to come from treeview selector
//model.Field(p => p.plsID).DefaultValue(Html.Kendo().TreeView("tvPH").select());
})
.Read(read => read.Action("ForeignKeyColumn_Read", "PlantHierArchy", new { plsID = (subUnitID) }))
.Create(create => create.Action("ForeignKeyColumn_Create", "PlantHierArchy"))
.Update(update => update.Action("ForeignKeyColumn_Update", "PlantHierArchy").Type(HttpVerbs.Post).Data("UpdateHandler"))
)
//.ClientDetailTemplateId
)
And my corresponding Update and Insert which are updating the Database Successfully.
[AcceptVerbs(HttpVerbs.Post)]
public
ActionResult ForeignKeyColumn_Create([DataSourceRequest] DataSourceRequest request,
[Bind(Prefix =
"models"
)]IEnumerable<ProcEquipViewModel> procEqs)
{
var results =
new
List<ProcEquipViewModel>();
if
(procEqs !=
null
&& ModelState.IsValid)
{
foreach
(var proc
in
procEqs)
{
CreateProcEquip(proc);
results.Add(proc);
}
}
return
Json(results.ToDataSourceResult(request, ModelState));
}
[AcceptVerbs(HttpVerbs.Post)]
public
ActionResult ForeignKeyColumn_Update([DataSourceRequest] DataSourceRequest request,
[Bind(Prefix =
"models"
)]IEnumerable<ProcEquipViewModel> procEqs)
{
if
(procEqs !=
null
&& ModelState.IsValid)
{
foreach
(var proc
in
procEqs)
{
//productService.Update(product);
UpdateProcEquip(proc);
}
}
DataSourceResult DSR = procEqs.ToDataSourceResult(request, ModelState);
JsonResult JR = Json(DSR);
return
JR;
}
How can I update my data source?
additionally it would also be nice to be able to capture and update other update items but The grid.datasource is the most important.
Hello Telerik team,
I just wanted to know if there are plans to decouple DataSourceRequest / DataSourceResult from the MVC subsystem ?
We want to use it between a WCF client and a WCF server but it does not serialize well with the SOAP MVC XML serializer.
We succeeded in serializing JSON in the WCF XMLmessage although it require us to convert/parse JSON to DataSourceRequest/DataSourceResult both at the client and the server.
By the way in order to achieve this the WCF hosting project has to reference a bunch of MCV assemblies just because the Kendo.Mvc.Ui assembly depends on it.
In addition to this serializing / deserializing JSON <-> DataSourceRequest/DataSourceResult is easy with the Newtonsoft JSON converter but it becomes complicated if we want to transfer an object instead of a JSON string (representing a serializable object similar to DataSourceRequest/DataSourceResult) ...
I may be wrong but it seems to me that all of this seems fairly complex for a task that sounds simple.
I saw the following post about using existing WCF service but I think this does work only with REST web service.
So is there any plan to be able :
- to use DataSourceRequest / DataSourceResult in wcf xml serialization out of the box
- to use the DataSourceRequest / DataSourceResult types in a convenient way without referencing all the MVC subsystem types (such as System.Web.Mvc.dll, System.Web.WebPages.dll, ...)
?
Thanks for your work and support,
Dev
Hi,
I use a Edit Template for the popup edit in my grid and it works fine except that if I change something and click save without closing the window the changes from the database (there are some computed columns) are reflecting in the grid but not in the popup - why?
(see also attached Pictures BeforeSave.jpg and AfterSave.jpg)
Isn't the popup window bind with MVVM in two way binding so changes in the grid should reflect in the window?
Robert
here is the html for the Template
<
div
class
=
"container-fluid"
>
<
div
class
=
"form-horizontal"
style
=
"width:750px"
id
=
"formFachgruppenzugehörig"
name
=
"formFachgruppenzugehörig"
>
@(Html.HiddenFor(m => m.Mitglied_ID, ""))
@(Html.HiddenFor(m => m.Berechtigung_ID, ""))
@(Html.HiddenFor(m => m.Sparte_ID, ""))
@(Html.HiddenFor(m => m.Fachgruppe_ID, ""))
@(Html.HiddenFor(m => m.FachgruppeSub_ID, ""))
@(Html.HiddenFor(m => m.Fachgruppe_Version_ID, ""))
@(Html.HiddenFor(m => m.Berufsgruppe_ID, ""))
@(Html.HiddenFor(m => m.Berufsgruppe_Version_ID, ""))
@(Html.HiddenFor(m => m.RowVersion, ""))
@(Html.HiddenFor(m => m.Timestamp, ""))
<
div
class
=
"row p-h-xs"
>
<
div
class
=
"form-group m-xxs"
>
<
label
class
=
"col-sm-3 control-label"
>Sparte:</
label
>
<
div
class
=
"col-sm-9"
>
<
p
class
=
"gpdbform-control-static"
>
<
span
class
=
"label label-success pull-right"
>@(Html.ValueFor(m => m.Sparte_ID, ""))</
span
>
<
span
data-bind
=
"text: Sparte"
></
span
>
</
p
>
</
div
>
</
div
>
<
div
class
=
"form-group m-xxs"
>
<
label
class
=
"col-sm-3 control-label"
>Fachgruppe:</
label
>
<
div
class
=
"col-sm-9"
>
<
p
class
=
"gpdbform-control-static"
>
<
span
class
=
"label label-success pull-right"
>@(Html.ValueFor(m => m.Fachgruppe_ID, ""))</
span
>
<
span
data-bind
=
"text: Fachgruppe"
></
span
>
</
p
>
</
div
>
</
div
>
<
div
class
=
"form-group m-xxs"
>
<
label
class
=
"col-sm-3 control-label"
>Berufsgruppe:</
label
>
<
div
class
=
"col-sm-9"
>
<
p
class
=
"gpdbform-control-static"
>
<
span
class
=
"label label-success pull-right"
>@(Html.ValueFor(m => m.Berufsgruppe_ID, ""))</
span
>
<
span
data-bind
=
"text: Berufsgruppe"
></
span
>
</
p
>
</
div
>
</
div
>
<
hr
class
=
"light"
/>
<
div
class
=
"form-group m-xxs"
>
<
label
class
=
"col-sm-3 control-label"
>Rechtsw.datum:</
label
>
<
div
class
=
"col-sm-4"
>
@(Html.EditorFor(m => m.Rechtswirksamkeitsdatum, ""))
@Html.ValidationMessageFor(model => model.Rechtswirksamkeitsdatum)
</
div
>
<
label
class
=
"col-sm-4 control-label"
>Hauptbetreuende Fachgruppe:</
label
>
<
div
class
=
"col-sm-1"
>
<
div
class
=
"checkbox"
>
<
label
>
@(Html.EditorFor(m => m.Hauptbetreuung, ""))
</
label
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"form-group m-xxs"
>
<
label
class
=
"col-sm-3 control-label"
>gelöscht:</
label
>
<
div
class
=
"col-sm-4"
>
@(Html.EditorFor(m => m.gelöscht, ""))
@Html.ValidationMessageFor(model => model.gelöscht)
</
div
>
<
label
class
=
"col-sm-4 control-label"
>Hauptgewerbe:</
label
>
<
div
class
=
"col-sm-1"
>
<
div
class
=
"checkbox"
>
<
label
>
@(Html.EditorFor(m => m.Hauptgewerbe, ""))
</
label
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"form-group m-xxs"
>
<
label
class
=
"col-sm-3 control-label"
>Aktuell:</
label
>
<
div
class
=
"col-sm-4"
>
<
div
class
=
"checkbox"
>
<
label
>
@(Html.EditorFor(m => m.Aktuell, ""))
</
label
>
</
div
>
</
div
>
<
label
class
=
"col-sm-4 control-label"
>Hauptgremium:</
label
>
<
div
class
=
"col-sm-1"
>
<
div
class
=
"checkbox"
>
<
label
>
@(Html.EditorFor(m => m.Hauptgremium, ""))
</
label
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"form-group m-xxs"
>
<
div
class
=
"col-sm-6"
>
</
div
>
<
label
class
=
"col-sm-5 control-label"
>Nebengremium:</
label
>
<
div
class
=
"col-sm-1"
>
<
div
class
=
"checkbox"
>
<
label
>
@(Html.EditorFor(m => m.Nebengremium, ""))
</
label
>
</
div
>
</
div
>
</
div
>
<
hr
class
=
"light"
/>
<
div
class
=
"form-group m-xxs"
>
<
label
class
=
"col-sm-3 control-label"
><
small
class
=
"text-muted"
>angelegt:</
small
></
label
>
<
div
class
=
"col-sm-3"
>
<
p
class
=
"gpdbform-control-static"
>
<
small
class
=
"text-muted"
><
span
data-format
=
"dd.MM.yyyy hh:mm:ss"
data-bind
=
"text: angelegt"
></
span
></
small
>
</
p
>
</
div
>
<
label
class
=
"col-sm-3 control-label"
><
small
class
=
"text-muted"
>Mitglied_ID:</
small
></
label
>
<
div
class
=
"col-sm-3"
>
<
p
class
=
"gpdbform-control-static"
>
<
small
class
=
"text-muted"
><
span
data-bind
=
"text: Mitglied_ID"
></
span
></
small
>
</
p
>
</
div
>
</
div
>
<
div
class
=
"form-group m-xxs"
>
<
label
class
=
"col-sm-3 control-label"
><
small
class
=
"text-muted"
>geändert:</
small
></
label
>
<
div
class
=
"col-sm-3"
>
<
p
class
=
"gpdbform-control-static"
>
<
small
class
=
"text-muted"
><
span
data-format
=
"dd.MM.yyyy hh:mm:ss"
data-bind
=
"text: geändert"
></
span
></
small
>
</
p
>
</
div
>
<
label
class
=
"col-sm-3 control-label"
><
small
class
=
"text-muted"
>Berechtigung_ID:</
small
></
label
>
<
div
class
=
"col-sm-3"
>
<
p
class
=
"gpdbform-control-static"
>
<
small
class
=
"text-muted"
><
span
data-bind
=
"text: Berechtigung_ID"
></
span
></
small
>
</
p
>
</
div
>
</
div
>
<
div
class
=
"form-group m-xxs"
>
<
label
class
=
"col-sm-3 control-label"
><
small
class
=
"text-muted"
>Benutzer:</
small
></
label
>
<
div
class
=
"col-sm-3"
>
<
p
class
=
"gpdbform-control-static"
>
<
small
class
=
"text-muted"
><
span
data-bind
=
"text: Benutzer"
></
span
></
small
>
</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
Hi,
I want to use my own Editor (PartialView) to edit row's from my Kendo MVC grid
(not use the build in template editing because off the limitations with the layout like save and cancel button location etc.)
attached you can see a Picture off my editing form (it uses i.e also Kendo Toolbar with save button...)
My question is: what is the best approach to implement this?
I have found two possibilities to solve this but not sure if these are good Solutions:
window.refresh({
url:
"/Mitglied/Fachgruppenzugehoerig/_Edit/"
,
data: {
mitgliedid: dataitem.Mitglied_ID,
berechtigungid: dataitem.Berechtigung_ID,
sparteid: dataitem.Sparte_ID,
fachgruppeid: dataitem.Fachgruppe_ID,
fachgruppesubid: dataitem.FachgruppeSub_ID,
fachgruppeversionid: dataitem.Fachgruppe_Version_ID,
berufsgruppeid: dataitem.Berufsgruppe_ID,
berufsgruppeversionid: dataitem.Berufsgruppe_Version_ID
}
in the partial view I use normal razor Syntax to bind to the model:
...
<div>
<label
class
=
"col-sm-3 control-label"
>Rechtsw.datum:</label>
<div
class
=
"col-sm-4"
>
@(Html.EditorFor(m => m.Rechtswirksamkeitsdatum,
""
))
@Html.ValidationMessageFor(model => model.Rechtswirksamkeitsdatum)
</div>
with this approach i have to refresh the grid after data changes...
2. Load the PartialView with the Kendo window and use "Kendo.bind" to bind the controls to the valus of the Kendo grid:
var
grid = $(
"#grid"
).data(
"kendoGrid"
);
var
dataItem = grid.dataItem(grid.select());
kendo.bind($(
'#externaleditor'
), dataItem);
here in the partial view I use different razor Syntax to bind to the grid values (see data_bind = "value: Rechtswirksamkeitsdatum") :
<label
class
=
"col-sm-3 control-label"
>Rechtsw.datum:</label>
<div
class
=
"col-sm-4"
>
@(Html.TextBox(
"Rechtswirksamkeitsdatum"
,
""
,
new
{ data_bind =
"value: Rechtswirksamkeitsdatum"
, @
class
=
"k-textbox"
}))
@Html.ValidationMessageFor(model => model.Rechtswirksamkeitsdatum)
</div>
robert
We have a set up where we have a grid in a dialog and are trying to fire a simple action ...
So the end configuration on the dialog looks like this ..
.Actions(actions =>
{
actions.Add().Text("Cancel");
actions.Add().Text("OK").Primary(true).Action("onActionOK");
})
the function is a pretty simple one right now.. just trying to make sure it is hit
function onActionOK(e) {
console.log("actionOK event");
}
But this is never hit and there are no messages in the console.... is there an alternate way that I should be defining the action?
Thanks
AJ
@(Html.Kendo().Grid<MyModels.Models.ViewModels.ProductCategoryViewModel>()
.Name(
"grid"
)
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.Bound(p => p.Category).ClientTemplate(
"#=Category.CategoryName#"
).Width(160);
columns.Bound(p => p.UnitPrice).Width(120);
columns.Command(command => command.Destroy()).Width(90);
})
.ToolBar(toolBar =>
{
toolBar.Create();
toolBar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(
new
{ style =
"height:430px;"
})
.DataSource(dataSource => dataSource
.Ajax()
.Batch(
true
)
.ServerOperation(
false
)
.Events(events => events.Error(
"error_handler"
))
.Model(model =>
{
model.Id(p => p.ProductID);
model.Field(p => p.ProductID).Editable(
false
);
})
.PageSize(20)
.Read(read => read.Action(
"GetAllProductsAndRelatedCategories"
,
"Product"
))
.Create(create => create.Action(
"AddProductsAndRelatedCategories"
,
"Product"
))
.Update(update => update.Action(
"UpdateProductsAndRelatedCategories"
,
"Product"
))
.Destroy(destroy => destroy.Action(
"RemoveProductsAndRelatedCategories"
,
"Product"
))
)
)
I have a Telerik MVC Grid with server binding. I configure it to have an 'all' page size option. The page size selection works and when I pick 'all' it does show all the records but the selected page size value in the dropdown resets to default. Is this a bug or I'm doing something wrong? Is there a workaround for this? I've attached an example project (excluded Kendo components from the archive).
Thank you.
Nik
I have a grid that has a command edit , I would like to retrieve the new text in the events.Save("onEdit")) javascript.
I cannot see how to do this, and cannot locate any samples in the forms.
My current function and grid is below. How can I retrieve the data from the email address when the update button is selected in edit more.
function onEdit(e) {
e.preventDefault();
alert("save 1");
var grid = $("#siteManagementNotifications").data("kendoGrid");
var tr = $(e.target).closest("tr");
var data = this.dataItem(tr);
alert(data.emailAddress);
}
@(Html.Kendo().Grid<WebSite.Library.Models.SiteNotifications>()
.Name("siteManagementNotifications")
.Columns(columns =>
{
columns.Bound(p => p.siteId).Title("Id").Width(50).Hidden();
columns.Bound(p => p.siteNotificationId).Title("Id").Width(50).Hidden();
columns.Bound(p => p.siteNotification).Title("Type").Width(50);
columns.Bound(p => p.emailAddress).Title("Notification").Width(120).EditorTemplateName("TextBoxEditor");
//columns.Command(command => command.Custom("Save").Click("SaveSiteNotification")).Width(180);
columns.Command(command => { command.Edit(); }).Width(250);
})
.Events(events => events.Save("onEdit"))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.NoRecords("No notifications exist.")
.DataSource(source => source
.Custom()
.Schema(schema => schema
.Model(m => m.Id(p => p.siteNotificationId)))
.Transport(transport => transport
.Read(read =>
{
read.Url("/Api/SiteInfo/_getNotifications/" + Model.SiteId)
.DataType("json");
})
))
)