Hello!
Could you please provide a sample project similar to this one, but with a foreign key column? I was trying to implement this on my own, but wasn't successful.
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/how-to/grid-bind-to-datatable
Best regards,
Kaan
Hi!
I have an editor template (DATETIMEEDIT.cshtml) for date times, which I use in a Grid and also in an ordinary form:
@model DateTime?
@(Html.Kendo().DateTimePickerFor(m => m)
.TimeFormat("HH:mm")
.HtmlAttributes(new { style = "width:100%;" })
)
The editor is bound to the Grid in this way:
var c = columns.Bound(fieldName);
c.EditorTemplateName("DATETIMEEDIT");
c.Format("{0:dd.MM.yyyy HH:mm}");
And this is how the editor is integrated into the HTML form:
@Html.EditorFor(v => dateTime, "DATETIMEEDIT", fieldName)
When I update the date and time, the Grid sends it back to the server as "3/21/2016 5:35:00 PM", and the form as "21.03.2016 17:35".
However, I need a reliable DateTime exchange format between the server and the client. "dd.MM.yyyy HH:mm" (24 hour) would be ok, but any other consistant solution would be alright too because if the server receives an unpredictable format, then I can't convert it into a C# DateTime object. Maybe there is another preferrable way to handle date times between the client and server? I don't even know why the Grid uses the American format as default because I work on a German workstation here.
Best,
Kaan
I have noticed many glaring omissions and incomplete documentation when trying to look up how to use some of these components. For example, for the MVC Grid documentation found at http://demos.telerik.com/aspnet-mvc/grid/remote-data-binding it shows in the cshtml code:
@(Html.Kendo().Grid<Kendo.Mvc.Examples.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);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(
new
{ style =
"height:550px;"
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action(
"Orders_Read"
,
"Grid"
))
)
)
Notice the Read method on the DataSource method, pointing to a GET Action called "Orders_Read" in the "Grid" controller. Of course looking at the controller code example only shows:
using
System.Web.Mvc;
using
Kendo.Mvc.UI;
using
Kendo.Mvc.Extensions;
namespace
Kendo.Mvc.Examples.Controllers
{
public
partial
class
GridController : Controller
{
public
ActionResult Remote_Data_Binding()
{
return
View();
}
}
}
No Orders_Read action there, and no clue as to what other actions the DataSource object can make use of in this Grid context. I assume the user is supposed to go look up the DataSource component now, which may or may not have an HtmlHelper. I've noticed that about a few other components... needing to do something, trying to find hhelp and it takes one to the Kendo UI documentation, where the syntax and building of these components is vastly different than the HTML Helpers of the MVC libraries.
So what is the best way to actually learn how to use these components? I'm looking for all levels of help, basic, intermediary, and advanced. Like using an MVC Grid and the MVVM model together from C# ASP.NET...
We have an Issue with the Server-side filtering feature from the kendoAutoComplete. This autocomplete is contained in a html form tag. When the request is performed on the asp.net mvc endpoint the DataSourceRequest is completly empty, becuase all the values for this object are in HttpContext.Request.Form, from where the DataSourceRequestAttribute doesn't parse it from. What should we do, to get the DataSourceRequest correctly bound?
HTML Code
<form class="navbar-form" role="search" method="post" action="@Url.Action("Results","Search")">
// some other controls
<div class="input-group">
<span class="k-widget k-autocomplete k-header k-state-default myClass">
<input type="text" id="autoCompleteSearch" name="autoCompleteSearch" class="form-control" />
</span>
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
JS Code:
$('#autoCompleteSearch').kendoAutoComplete({
minLength: 1,
dataTextField: 'Caption',
dataValueField: 'Value',
filter: "contains",
dataSource: {
serverFiltering: true,
transport: {
read: {
type: "post",
dataType: "json",
url: '@Url.Action("AdvancedSearchAutoComplete_Read", "AjaxValues")?searchType=' + window.searchType
}
},
schema: {
data: "Data"
}
}
});
Server-side:
[System.Web.Mvc.HttpPost]
public JsonResult AdvancesSearchAutoComplete_Read(int searchType, [DataSourceRequest] DataSourceRequest request)
{
//...
}
Thank you in advance!
Hello,
is it possible to remove the title and the Update and Cancel button so that I can use my own template?
(if yes how to call the upade and cancel with javascript)
I want to have my own Toolbar with update and cancel and some other bottons and also e special title bar...
robert
Hello,
I am a beginner with kendo UI and have a problem with the following input box:
<
input
data-role
=
"datepicker"
data-format
=
"dd.MM.yyyy"
data-bind
=
"enabled: isEnabled, value: DateToSave"
/>
The date is picked correctly (displayed on the page), but after saving to the server the value in the server table is one day off. The displayed value on the page (after saving) is also one day off from the picked value.
These are the project infos:
- Telerik ASP.NET MVC 4 (v2013.3.1119)
- culture: "de-AT"
editorTemplate and DateTimeModelBinder
@model DateTime?
<div
class
=
"span-datepricker"
>
<input name=
"datepicker"
/>
</div>
<script>
$(document).ready(function () {
// create DatePicker from input HTML element
$(
"input[name='datepicker']"
).kendoDatePicker();
});
</script>
using
System;
using
System.Globalization;
using
System.Web.Mvc;
namespace
Presentation.Host.App_Start
{
public
class
DateTimeModelBinder : IModelBinder
{
private
const
string
DateTimePattern =
"ddd MMM dd yyyy HH:mm:ss 'GMT'zzz"
;
public
object
BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
{
string
value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName).AttemptedValue;
if
(!
string
.IsNullOrWhiteSpace(value))
{
int
timeZoneInfoIndex = value.IndexOf(
" ("
, StringComparison.Ordinal);
if
(timeZoneInfoIndex > 0)
{
value = value.Substring(0, timeZoneInfoIndex);
return
DateTime.ParseExact(value, DateTimePattern, CultureInfo.InvariantCulture).AddDays(1);
}
return
DateTime.Parse(value);
}
return
null
;
}
}
}
ViewModel:
.....
public
DateTime? DateToSave {
get
;
set
; }
...
If you could give me some hints where to start looking I'd be thankful.
Best regards.
Manu
Hello,
I have the following grid with a deleteRow event where I want to use my own conformation (sweetalert). In the event I first cancel the delete operation and then ask the user if he will delete the row or not.
Which code is necessary to delete the current row with Javascript/jQuery (line 19. in the code)?
01.
function deleteRow(e) {
02.
03.
$("#grid").data("kendoGrid").cancelChanges();
04.
05.
swal({
06.
title: "Löschen",
07.
text: "Sind Sie sich sicher, dass Sie den aktuellen Datensatz löschen wollen?",
08.
type: "warning",
09.
showCancelButton: true,
10.
confirmButtonColor: "#DD6B55",
11.
confirmButtonText: "OK",
12.
cancelButtonText: "Abbrechen",
13.
closeOnConfirm: true,
14.
closeOnCancel: true
15.
},
16.
function (isConfirm) {
17.
if (isConfirm) {
18.
19.
20.
21.
}
22.
});
23.
}
Hi, Am using Telerik MVC wrappers for creating a grid. Done an ultra simple example of this and this seems to be enough to repeat the issue:
cshtml:
@Html.Kendo().Grid(Model.Records).Name("Search")
If I just use the above, I get the grid with all the data in it no problem, however if I decide I want to make it sortable on the fly, I run what I understand to be the correct js below, this just causes all the data to be deleted with no errors.
javascript:
$('#Search').data('kendoGrid').setOptions({ sortable: true });
is there something you have to do with MVC wrapper settings to make the javascript methods less flaky?
Also, am using latest trial version as of this date.
Thanks,
Gavin
Hi, I have seen this error in a number of threads on the forum, none of which seem to be caused by the same thing as I am trying.
All it amounts to is using the same 'Id' column in the expressions for both a custom command routing value and the datasource server() model id mapping. I dont really understand why using the id in these two places should cause this problem?
@(Html.Kendo().Grid(Model.DetailRecords).Name("MyGrid")
.Columns(columns =>
{
columns.Command(commands => commands.Custom("View").Action("Index", "Detail")
.DataRouteValues(rv => rv.Add(m => m.Id)));
columns.Bound(m => m.Heading);
})
.DataSource(ds => ds.Server().Model(model => model.Id(m => m.Id)))
)
If this is a bug, is there a work around I can use?
Thanks,
Gavin