Hello,
I have a model defined as
public class Parent
{
public List<Child> Children { get; set; }
}
public class Child
{
property int Id { get; set;}
property string Name {get; set;}
property int Age {get; set;}
}
My goal is to have a grid on my main page whereas the model is the parent and the grid is used to populate the Children list. I do not want the grid to invoke any server method. It should just populate the Children list. When the parent is saved, I am intending that its Children list will contain the items added within the Parent's POST operation.
I can create the grid, but I can't seem to get it to add items. When I add the toolBar.Create() option, I get the following error;
"The Insert data binding setting is required by the insert command. Please specify the Insert action or url in the DataBinding configuration."
But I don't want any insert action to occur on the server. I just want the grid to populate the Children list on the client.
How can I do this?
Hi,
I read many threads about configuring custom popup editor in KendoUI Grid like this one.
http://www.telerik.com/forums/custom-popup-editor-with-additional-fields
I also found how to use a separate html file and use it as a template. However, I didn't find how to use javascript to access model inside this template. The answer il always to implement edit event to access model and change behavior. In my case, fields shown changes depending on many criterias like: Field 1 ID is 1 or 2 and Field 2 ID is 4 for example.
If it is possible to use AngularJs, it is better :-)
Thank you
I can't seem to get a drop down Editor Template working on my grid's popup editor. I am using a ViewModel rather than using my Entity Model directly, maybe that is part of the problem? I cannot use the Model directly as the database schema does not match the expected pattern, and one is supposed to always use a ViewModel I am told.
Here is what I've got:
View Models
The UIHint is added as required and I have the quarter property linked to the Quarter object per the pattern.
public
class
AquisitionNotesViewModel
{
public
int
noteid {
get
;
set
; }
public
int
sourceid {
get
;
set
; }
public
int
? cyear {
get
;
set
; }
[UIHint(
"QuarterDropDown"
)]
public
Quarter quarter {
get
;
set
; }
[Column(TypeName =
"text"
)]
public
string
note {
get
;
set
; }
[Column(TypeName =
"date"
)]
public
DateTime? datetime {
get
;
set
; }
}
public
class
Quarter
{
public
int
? quarter {
get
;
set
; }
}
Controller
The controller is returning a List of Quarter objects with valid values as well as the ViewModel to populate the grid.
public
ActionResult AquisitionNotes_Read([DataSourceRequest] DataSourceRequest request,
int
sourceid)
{
IList<Quarter> quartersList =
new
List<Quarter>();
quartersList.Add(
new
Quarter { quarter = 1 });
quartersList.Add(
new
Quarter { quarter = 2 });
quartersList.Add(
new
Quarter { quarter = 3 });
quartersList.Add(
new
Quarter { quarter = 4 });
ViewData[
"quarters"
] = quartersList;
IList<AquisitionNotesViewModel> notesVM =
new
List<AquisitionNotesViewModel>();
var Query = from notes
in
db.acquisitionnotes
where notes.sourceid == sourceid
select
new
{
noteid = notes.noteid,
sourceid = notes.sourceid,
quarter = notes.quarter,
cyear = notes.cyear,
note = notes.note,
datetime = notes.datetime
};
foreach
( var note
in
Query) {
notesVM.Add(
new
AquisitionNotesViewModel
{
noteid = note.noteid,
sourceid = note.sourceid,
quarter =
new
Quarter { quarter = note.quarter },
cyear = note.cyear,
note = note.note,
datetime = note.datetime,
});
}
return
Json(notesVM.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
Editor Template (named QuarterDropDown)
Since I do not have separate values and IDs I set DataValueField and DataTextField to my field (property) name. And I bind to the List of quarters.
@(Html.Kendo().DropDownList()
.Name(
"quarter"
)
// Name of the widget should be the same as the name of the property
.DataValueField(
"quarter"
)
// The value of the dropdown is taken from the EmployeeID property
.DataTextField(
"quarter"
)
// The text of the items is taken from the EmployeeName property
.BindTo((System.Collections.IEnumerable)ViewData[
"quarters"
])
// A list of all employees which is populated in the controller
)
And finally my Grid
@(Html.Kendo().Grid<AquisitionNotesViewModel>()
.Name(GridID)
.Columns(columns =>
{
columns.Bound(p => p.datetime ).Format(
"{0:dd/MM/yyyy}"
);
columns.Bound(p => p.quarter.quarter ).Width(120);
columns.Bound(p => p.cyear).Width(50);
columns.Bound(p => p.note).Width(120);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(
new
{ style =
"height:350px;"
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Sort(sort => sort.Add(
"datetime"
).Ascending())
//.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.noteid ))
.Create(update => update.Action(
"AquisitionNotes_Create"
,
"AquisitionNotes"
))
.Read(read => read.Action(
"AquisitionNotes_Read"
,
"AquisitionNotes"
).Data(
"GetCurrentSourceID"
))
//.Read(read => read.Action("AquisitionNotes_Read", "AquisitionNotes", new { sourceid = 383}))
.Update(update => update.Action(
"AquisitionNotes_Upodate"
,
"AquisitionNotes"
))
.Destroy(update => update.Action(
"AquisitionNotes_Destroy"
,
"AquisitionNotes"
))
)
)
What am I missing or doing wrong?
Thanks, Brad
Hi,
I currently filter my grid using a kendo dropdown box, that's all fine and it works well. I have a requirement here to add another dropdown that fitlers the grid data by the dates list but plus additional dates. For example the dropdown must take a date fromt he grid and add 21 days to it and show only the results for those items. How can this be accomplished?
Here is my code for my current filter
function periodChange() {
var ddl = document.getElementById("dates");
var value = this.value(),
grid = $("#Grid").data("kendoGrid");
if (value) {
grid.dataSource.filter({
field: "fixture_stop",
operator: "eq",
value: ddl.value
});
} else {
grid.dataSource.filter({});
}
}
Here is my grid code
@(Html.Kendo().Grid<
MyProject.ViewModels.VesselsViewModel
>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.vessel_idx).Title("")
.ClientTemplate("<
div
class
=
'status_flags'
></
div
>")
.Width(40);
columns.Bound(c => c.owner_company)
.Filterable(filterable => filterable.UI("companyFilter"))
.Title("Owner").Width(200);
columns.Bound(c => c.fixture_stop)
.ClientTemplate("#=fixture_stop ? kendo.toString(kendo.parseDate(fixture_stop), 'dd/MM/yyyy') : '' #")
.Title("Off Hire");
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Events(e => e.DataBound("prompt"))
.Sortable(sortable => sortable.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn))
.Groupable().ToolBar(toolbar =>
{
toolbar
.Template(@<
text
>
<
label
class
=
"date-label"
for
=
"periods"
>Period:</
label
>
@(Html.Kendo().DropDownList()
.Name("periods")
.OptionLabel("All")
.DataTextField("Text")
.DataValueField("Value")
.AutoBind(false)
.Events(e => e.Change("periodChange"))
.BindTo(new List<
SelectListItem
>() {
new SelectListItem() {
Text = "21 Days"
},
new SelectListItem() {
Text = "3 Months"
}
})
)</
text
>);
})//Toolbar
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => { events.RequestEnd("onRequestEnd"); })
.Sort(sort =>
{
sort.Add(
company => company.owner_company).Ascending();
})
.PageSize(40)
.Model(model =>
{
model.Id(p => p.vessel_idx);
})
.Read(read => read.Action("vessels_Read", "Home"))
.Update(update => update.Action("vessels_Update", "Home"))
))
What I need to do here is grab the date value from the grid and add 21 to it but I'm not sure how I would do this using my code. Any help is appreciated. Thanks.
I have a grid like this:
@(Html.Kendo().Grid<
License
>()
.Name("popupGrid")
.Columns(columns =>
{
columns.Bound(p => p.LicenseId).Width(20).Hidden().HeaderHtmlAttributes(new { @title = "License" });
columns.ForeignKey(p => p.CustomerId, (System.Collections.IEnumerable)ViewData["customers"], "CustomerID", "CustomerName")
.Title("Customer").Width(200);
columns.Bound(p => p.VendorId).Width(20).HeaderHtmlAttributes(new { @title = "Vendor" });
columns.Bound(p => p.ProductId).Width(20).HeaderHtmlAttributes(new { @title = "Product" });
columns.Command(p => p.Edit().Text("Edit").HtmlAttributes(new { @title = "Edit" })).Width(80);
})
.ToolBar(toolbar => toolbar.Create().Text("Add").HtmlAttributes(new { @title = "Add" }))
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("PopupEditView"))
.Events(e => e.Edit("onEdit"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.LicenseId))
.Create(create => create.Action("Create", "Home").Type(HttpVerbs.Post))
.Read(read => read.Action("Read", "Home").Type(HttpVerbs.Post))
.Update(update => update.Action("Update", "Home").Type(HttpVerbs.Post))
)
)
and PopupEditView.cshtml :
@(Html.Kendo().DropDownListFor(m => m.CustomerId).Name("CustomerId")
.ValuePrimitive(true)
.DataTextField("CustomerName")
.DataValueField("CustomerId")
//.OptionLabel("Select Customer...")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("GetCustomers", "Home"))
.ServerFiltering(true);
})
)
@Html.ValidationMessageFor(m => m.CustomerId)
HomeController :
[HttpPost]
public
JsonResult Create([DataSourceRequest] DataSourceRequest request, License license)
{
if
(license !=
null
&& ModelState.IsValid)
// licence.CustomerId is null Model.State is not valid
{
LicenseRepository.Repository.Insert(license);
}
return
Json(
new
[] { license }.ToDataSourceResult(request, ModelState));
}
public
JsonResult GetCustomers()
{
return
Json(CustomerRepository.Repository.Customers, JsonRequestBehavior.AllowGet);
}
If .OptionLabel("Select Customer...") is commented and submit create then licence then CustomerId is null. If user change DropDownList(CustomerId) then it works fine.
Is this a bug?
I'm using the Telerik MVC grid with the .Pdf function. It works fine, but I'd like to format it (page title, page size, etc) but I can't find any documentation regarding it. I followed the steps this this article http://demos.telerik.com/aspnet-mvc/grid/pdf-export and I'd tried to access the documentation referred in this article: http://demos.telerik.com/aspnet-ajax/editor/examples/overview/%5C%27http:/docs.telerik.com/kendo-ui/web/grid/print-export#exporting%5C%27 but the page seems to be down or no longer active.
Can anyone give me any indication on how to achieve this?
Thanks in advance.
Federico.
I have two grids, A and B.
After clicking on the save in A,
1. Before passing to the server, I like to automatically calculate values and process some values before sending back to the server.
2. if something wrong a message popup and don't send to the server
3. if everything is good, have a modal popup about sending the data to the server
4. after processing in the server, modal disappear
5. after modal disappear, retrieve the data again from the server for grid B
questions:
1. I think I can use ".Events(e => e.Save("onSave"))" as before saving?
2. Any event I should use for after saved?
3. anyway I can pass the data back to the server which is not inside the grid when people click on grid save.
thanks!
I would like to persist the layout of my grid. I save the layout when it changes, - the problem is when to restore it. If I try calling restoreGridLayout in document.ready() the grid hasn't been initialized yet. If I do it in the onNotesGridDataBound-event the data disappears. I've tried calling grid.dataSource.read() manually on a buttonClick after the onNotesGridDataBound-event, which reloads the data, but if I do it in the event in question I end up in an infinite loop reading data.
Any ideas?
<script>
function OnNotesGridLayoutChange(e) {
var grid = $("#notesGrid").data("kendoGrid");
var gridStoreName = getGridStoreName("notesGrid");
var name = gridStoreName + "-grid-options";
localStorage[name] = kendo.stringify(grid.getOptions());
}
function OnNotesGridDataBound(e) {
var gridStoreName = getGridStoreName("notesGrid");
var grid = $("#notesGrid").data("kendoGrid");
restoreGridLayout(grid, gridStoreName);
}
function restoreGridLayout(grid, gridStoreName) {
var name = gridStoreName + "-grid-options";
var options = localStorage[name];
if (options) {
grid.setOptions(JSON.parse(options));
}
}
</script>
@(Html.Kendo().Grid<
WebClient.Models.NoteViewModel
>()
.Name("notesGrid")
.AutoBind(false)
.HtmlAttributes(new { style = "height: 1000px;" })
.Filterable()
.Scrollable(s => s.Enabled(true))
.Resizable(r => r.Columns(true))
.Groupable()
.Sortable()
.ColumnMenu()
.Pageable(pageable => pageable
.PageSizes(new int[] { 2, 30, 100, 200 })
.ButtonCount(5)
)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("SearchForNotes", "Search"))
.PageSize(20)
.ServerOperation(false)
)
.Events(e => e.ColumnHide("OnNotesGridLayoutChange")
.ColumnResize("OnNotesGridLayoutChange")
.ColumnShow("OnNotesGridLayoutChange")
.ColumnReorder("OnNotesGridLayoutChange")
//.DataBinding("onNotesGridDataBinding")
.DataBound("OnNotesGridDataBound")
.Change("OnNotesGridLayoutChange")
.DataBound("OnNotesGridDataBound")
)
.Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
)
Hello,
the feature is to send mail as an attachment with an excel grid file. My question is how I can generate the excel file without clicking "Export Excel". ?
.ToolBar(tools => tools.Custom().Text(@Html.GetStringResource(Constantes.SendMail)).HtmlAttributes(new { id = "sendMail" }))
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName(Model.ExportExcelFileName + ".xlsx")
.ForceProxy(true)
.Filterable(true)
.AllPages(true)
.ProxyURL(Url.Action("ExcelSave", "Vol"))
)
See PJ.
Thank you.