|
<script type="text/javascript">
$.views.converters("value", function(val) {
return ej.globalize.format(val,"D2");//get the formatted value
});
</script>
<div style="margin:30px">
@(Html.EJ().Grid<object>("Grid")
.Datasource(d=>d.Json((IEnumerable<object>)ViewBag.data).InsertURL("/Home/Insert").UpdateURL("/Home/Update").RemoveURL("/Home/Delete").Adaptor(AdaptorType.RemoteSaveAdaptor))
. . . .
.Columns(col =>
{
col.Field("Id").HeaderText("ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Add();
col.Field("TestColumn").Add();
col.Field("Time").HeaderText("Time").EditTemplate(editTemp=>editTemp.Create("create").Write("write").Read("read")).Template("{{:Time.Hours}} : {{value:Time.Minutes}} : {{value:Time.Seconds}}").Add();//show the timespan value using template property; Time property will be obtained as complex object.
})
.ClientSideEvents(eve=>eve.Create("onGridCreate"))
)
</div>
<script type="text/javascript">
function onGridCreate(args) {
this.model.columns[2].allowEditing = true; //if the column index is undefined, you can get the column object using the getColumnByField or getColumnByHeaderText method and thus update this property.
}
function create(args) {
return $("<input>");
}
function write(args) {
//convert the element to ejTimePicker control
args.element.ejTimePicker({
value: args.rowdata["Time"],
interval: 15,
timeFormat: "HH:mm:ss",
width: "100%"
});
}
function read(args) {
return args.ejTimePicker("getValue");//get the value from the TimePicker control
}
</script> | 
