Hi Everybody,
I have some questions about the way the ClientTemplates are working inside the Grid.
Today I have the following code.
Which are working fine.
@(Html.Kendo().Grid<
Felix.DomainModel.BusinessEntities.ManuallyCreatedEntities.LandsforeningerModel
>
().BindTo(Model.Countries).Name("Countries")
.ToolBar(configurator =>
{
configurator.Create();
})
.Editable(e => e.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
.Events(e => e.Edit("onEditItem")).Events(e => e.Save("onSaveItemLandsForening"))
.Columns(columns =>
{
columns.Bound(m => m.Name).Encoded(true).EditorTemplateName("RelatedCountries").ClientTemplate("#= Name #" +
"<
input
type
=
'hidden'
name
=
'Countries[#= indexCountries(data)#].Name'
value
=
'#= Name#'
/>" +
"<
input
type
=
'hidden'
name
=
'Countries[#= indexCountries(data)#].Id'
value
=
'#= Id #'
/>"
);
columns.Bound(m => m.Startdate).Width(150).Encoded(true).ClientTemplate("#= kendo.toString(kendo.parseDate(Startdate,'dd/MM/yyyy'), '" + "dd-MM-yyyy" + "') #" +
"<
input
type
=
'hidden'
name
=
'Countries[#= indexCountries(data) #].Startdate'
value
=
'#= Convert2StringDate(Startdate) #'
/>").Format("{0: dd-MM-yyyy}");
columns.Command(m => m.Destroy()).Width(100);
})
.DataSource(dataSource => dataSource.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
})
))
My question: is it possible to allow more formats in the input field, like ddMMyy and ddMMYYYY and not only dd-MM-YYYY.
How should this be done?
Hello,
I have been through all samples but non match the Scenario i have. My Kendo grid is inside a vertical splitter and the columns are dynamic. So in datagrid read Event the Controller picks a variable select stetement and then the columns and column Header names are stored in viewbag and in view the columns get bound to viewbag and datab\able returned from controlller method. One column should be editable as Dropdown and rest all not editable.
Attached is my view code and this is the column i am trying to use adropdown editortemplate and when i add this editable line i get crash
.Editable(editable => editable.Mode(GridEditMode.InCell))
Templates can be used only with field access, property access, single-dimension array index, or single-parameter custom indexer expressions.
if (ViewBag.ObjAdressHeader[k, 0] == "Obj_AddressType"){
columns.Bound(ViewBag.ObjAdressHeader[k, 0]).Title(ViewBag.ObjAdressHeader[k, 1]).EditorTemplateName("AvailableValues").Width(70);
// columns.ForeignKey("Obj_AddressType", (System.Collections.IEnumerable)ViewBag.AddressTypes, "Value", "Text").EditorTemplateName("AvailableValues").Title("Typ").Width(70);
}
My editortemplatelooks like
@(Html.Kendo().DropDownList().Name("Obj_AddressType")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>
{
new SelectListItem {Text = "Kunde", Value = "0"},
new SelectListItem {Text = "Kunde", Value = "1"},
new SelectListItem {Text = "Rechnungsadresse", Value = "2"}
}))
and view code
rightverticalPanes.Add()
.HtmlAttributes(new { id = "bottom-pane" })
.Resizable(true)
.Collapsible(false)
.Content(@<text>
@(Html.Kendo().Grid(Model)
.Name("Grid_ObjAdress")
.DataSource(dataSource1 => dataSource1
.Ajax()
.PageSize(100)
.Model(model1 =>
{
if (Model != null)
{
foreach (System.Data.DataColumn ocolumn in Model.Columns)
{
if( ocolumn.ColumnName == "Obj_AddressType"){
model1.Field(ocolumn.ColumnName, ocolumn.DataType).Editable(true);
}else{
model1.Field(ocolumn.ColumnName, ocolumn.DataType).Editable(false);
}
}
}
})
.Read(read => read.Action("ObjectAdress_Read", "ObjektActivity"))
.ServerOperation(false)
)
.Resizable(resize => resize.Columns(true))
.Columns(columns =>
{
if (ViewBag.ObjAdressHeader != null)
{
for (int k = 0; k < ViewBag.ObjAdressHeader.GetLength(0); k++)
{
if (ViewBag.AdrVisibleCols[k] == "0")
{
columns.Bound(ViewBag.ObjAdressHeader[k, 0]).Title(ViewBag.ObjAdressHeader[k, 1]).Visible(false);
}
else
{
if (ViewBag.ObjAdressHeader[k, 0] == "Obj_AddressType"){
columns.Bound(ViewBag.ObjAdressHeader[k, 0]).Title(ViewBag.ObjAdressHeader[k, 1]).EditorTemplateName("AvailableValues").Width(70);
// columns.ForeignKey("Obj_AddressType", (System.Collections.IEnumerable)ViewBag.AddressTypes, "Value", "Text").EditorTemplateName("AvailableValues").Title("Typ").Width(70);
}
else
{
columns.Bound(ViewBag.ObjAdressHeader[k, 0]).Title(ViewBag.ObjAdressHeader[k, 1]).Width(120);
}
}
}
}
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.Sortable()
.Scrollable()
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
))
)
.Groupable()
.Reorderable(r => r.Columns(true))
.Resizable(r => r.Columns(true))
)
Thanks
Anamika
I am working on single click for ASP.NET MVC scheduler. But the problem is when the custom event editor pop ups, there is only startdate and endate. How can I get other resource such as TechName?
@(Html.Kendo().Scheduler<
TaskViewModel
>()
.Name("schedulerJob")
.Date(DateTime.Today)
.StartTime(7, 0, 0)
.Height(700)
.EventTemplate("#if(title == 'Reservation') {#" +
"<
div
class
=
'reservationClass'
style
=
'float: left;'
>" +
"<
img
src
=
'http://www.alegoo.com/images05/newyear/calendar-b11/015/calendar-icon-15.png'
style
=
'width:22px;'
/>" +
"#= title #" +
"</
div
>" +
"#}" +
"else {#" +
"<
div
class
=
'jobClass'
style
=
'float: left;'
>" +
"<
img
src
=
'http://www.gratispos.com/wp-content/uploads/2011/06/User-Group-Home.png'
style
=
'width:22px;'
/>" +
"#= title #" +
"</
div
>" +
"#}#")
.Views(views =>
{
views.TimelineView(v => v.Selected(true));
})
.Events(e =>
{
e.Edit("schedulerJob_edit");
e.Navigate("schedulerJob_navigate");
e.Remove("schedulerJob_remove");
e.Save("schedulerJob_save");
e.DataBinding("schedulerJob_dataBinding");
e.DataBound("schedulerJob_dataBound");
e.MoveEnd("schedulerJob_moveend");
e.ResizeEnd("schedulerJob_resizeend");
})
.Group(group => group.Resources("Techs").Orientation(SchedulerGroupOrientation.Vertical))
.Resources(resource =>
{
resource.Add(m => m.TechName)
.Title("Techs")
.Name("Techs")
.DataTextField("TechName")
.DataValueField("emm_code")
.DataSource(d => d.Read("Techs", "JOBS"));
})
.DataSource(d => d
.Model(m =>
{
m.Id(r => r.emm_code);
})
.ServerOperation(true)
.Read(r => r.Action("JobSchedule_Read", "JOBS").Data("passFilter"))
.Create("JobSchedule_Create", "JOBS")
.Update("JobSchedule_Update", "JOBS")
.Destroy("JobSchedule_Delete", "JOBS")
)
.Editable(e => {
e.TemplateId("schedulerJobEditor").Window(w => w.Title("Time Slot Reservation").Name("schedulerJobEditor"));
})
)
Custom editor code
<
script
id
=
"schedulerJobEditor"
type
=
"text/x-kendo-template"
>
<
div
>
<
table
style
=
"border-collapse: initial;"
>
<
tr
>
<
td
align
=
"right"
>
<
label
for
=
"Start"
>Job Date:</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"jobDateTextbox"
class
=
"k-input k-textbox"
name
=
"start"
data-bind
=
"value: StartViewDate"
style
=
"border-width: 0px;"
disabled
=
"disabled"
>
</
td
>
<
td
align
=
"right"
>
<
label
for
=
"ReservedDate"
>Reserved On:</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"reservedDateTextbox"
class
=
"k-input k-textbox"
name
=
"reservedDate"
data-bind
=
"value: ReservationViewDate"
style
=
"border-width: 0px;"
disabled
=
"disabled"
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"right"
width
=
"25%"
>
<
label
for
=
"StartViewTime"
>Job Time:</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"jobTimeTextbox"
class
=
"k-input k-textbox"
name
=
"start"
oninput
=
"JobTimeInput()"
onblur
=
"JobTimeBlur()"
data-bind
=
"value: StartViewTime"
>
<
input
type
=
"hidden"
id
=
"keyFlagTextbox"
class
=
"k-input k-textbox"
name
=
"keyflag"
data-bind
=
"value: KeyFlag"
>
</
td
>
<
td
align
=
"right"
width
=
"14%"
>
<
label
for
=
"ReservedTime"
>Time:</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"reservedTimeTextbox"
class
=
"k-input k-textbox"
name
=
"reservedTime"
data-bind
=
"value: ReservationViewTime"
style
=
"border-width: 0px;"
disabled
=
"disabled"
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"right"
>
<
label
for
=
"Duration"
>Duration:</
label
>
</
td
>
<
td
>
<
select
name
=
"duration"
id
=
"durationDropDownList"
onchange
=
"DurationChange()"
data-bind
=
"value: Duration"
>
@foreach (var dur in (List<
ServicePROWeb.ServiceProWCFService.TypeMstr
>)HttpContext.Current.Session["DurationList"])
{
<
option
value
=
'@dur.ty_desc'
>@dur.ty_desc</
option
>
}
</
select
>
</
td
>
<
td
align
=
"right"
>
<
label
for
=
"ReservationID"
>Reservation ID:</
label
>
</
td
>
<
td
>
<
input
type
=
"text"
id
=
"reservationIDTextbox"
class
=
"k-input k-textbox"
name
=
"reservationID"
data-bind
=
"value: ReservationID"
style
=
"border-width: 0px;width:100%"
disabled
=
"disabled"
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"right"
>
<
label
for
=
"TechName"
>Tech:</
label
>
</
td
>
<
td
colspan
=
"3"
>
<
input
type
=
"text"
class
=
"k-input k-textbox"
name
=
"techName"
data-bind
=
"value: TechName"
disabled
=
"disabled"
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"right"
>
<
label
for
=
"Title"
>Reason for Reservation:</
label
>
</
td
>
<
td
colspan
=
"3"
>
<
input
type
=
"text"
class
=
"k-input k-textbox"
name
=
"title"
data-bind
=
"value: title"
style
=
"width: 60%;"
>
</
td
>
</
tr
>
<
tr
>
<
td
>
</
td
>
<
td
colspan
=
"3"
>
<
input
type
=
"checkbox"
id
=
"chkRecurring"
data-bind
=
"value: IsRecurring"
onmouseup
=
"toggleRecurringDiv()"
>Recurring Reservation
</
td
>
</
tr
>
</
table
>
<
br
/>
<
div
id
=
"divRecurring"
style
=
"width: 95%; margin-left: 5px; padding: 10px;display: none;"
>
<
input
type
=
"radio"
class
=
"rdoTech"
name
=
"rdoTech"
value
=
"c"
checked
=
"checked"
>Current Tech
<
input
type
=
"radio"
class
=
"rdoTech"
name
=
"rdoTech"
value
=
"a"
style
=
"margin-left: 15px;"
>All Techs
<
span
style
=
"margin-left: 24px;"
>Every: </
span
><
input
type
=
"text"
id
=
"everyTextbox"
class
=
"k-input k-textbox"
name
=
"recurrenceNumber"
data-bind
=
"value: Frequency"
>
<
input
type
=
"radio"
class
=
"rdoRecurrenceFrequency"
name
=
"rdoRecurrenceFrequency"
value
=
"d"
checked
=
"checked"
style
=
"margin-left: 15px;"
>Day(s)
<
input
type
=
"radio"
class
=
"rdoRecurrenceFrequency"
name
=
"rdoRecurrenceFrequency"
value
=
"w"
style
=
"margin-left: 15px;"
>Weeks(s)
<
input
type
=
"radio"
class
=
"rdoRecurrenceFrequency"
name
=
"rdoRecurrenceFrequency"
value
=
"m"
style
=
"margin-left: 15px;"
>Month(s)
<
br
/><
br
/>
<
input
type
=
"checkbox"
id
=
"chkIncludeBusinessDays"
data-bind
=
"value: IsNonBusinessDaysIncluded"
>Include Non-Business Days
<
label
for
=
"UntilDate"
style
=
"margin-left: 30px;"
>Until: </
label
>
<
input
type
=
"text"
id
=
"untilDateTextbox"
class
=
"k-input k-textbox"
name
=
"UntilDate"
data-bind
=
"value: UntilDate"
>
<
span
style
=
"margin-left: 15px;"
>(max. 3 months)</
span
>
</
div
>
</
div
>
</
script
>
Script for single click. Only startdate and endate are being passed for the new event. How can I pass other resource like "TechName" here.
$(
function
() {
var
scheduler = $(
"#schedulerJob"
).data(
"kendoScheduler"
);
$(
"#schedulerJob"
).on(
"mouseup touchend"
,
".k-scheduler-table td, .k-event"
,
function
(e) {
target = $(e.currentTarget);
ee=e;
if
(target.hasClass(
"k-event"
)) {
var
event = scheduler.occurrenceByUid(target.data(
"uid"
));
scheduler.editEvent(event);
}
else
{
slot = scheduler.slotByElement(target[0]);
scheduler.addEvent({
start: slot.startDate,
end: slot.endDate
});
}
});
})
Thanks
I have a decimal property in my modal which keeps loosing decimal precision whenever i bind it to Kendo grid.
Here is the example.
If the value is 501.14, grid will display 501.14. (correct)
If the value is 501.10, grid will display 501.1 (wrong, it should have displayed 501.10)
If the value is 501.00, grid will display 501 (wrong, it should have displayed 501.00)
I know i can easily solve this issue by using 'Format' function in the grid, i.e. .Format("{0: n2}") but the issue is i won't know how many decimal places i will be getting during the call so i won't be able be to hard code the value in 'Format' function. Also, i need to display all the decimal places even though it is just 0 at the end i.e .00 or .10.
Any suggestion how i can fix this issue?
Thanks
Avinash
Hello,
tried a simple chart with remote data, but theres no POST to PPM_Read on page load/refresh ...
everything else is working fine, grids, dropdownlist, etc ...
Maybe anyone knows what i'm doin wrong here ?
Greetings, Oliver
Controller:
public ActionResult PPM_Read()
{
var data = db.viewPointCipWqsScrapPartsMonthPPM;
return Json(data, JsonRequestBehavior.AllowGet);
}
View:
@(Html.Kendo().Chart<MapsMvc.Areas.mPointCip.Models.viewPointCipWqsScrapPartsMonthPPM>().Name("chart2")
.Title("WQS")
.Legend(legend => legend
.Position(ChartLegendPosition.Top))
.DataSource(dataSource => dataSource.Read(read => read.Action("PPM_Read", "WQS")))
.Series(series =>
{
series.Column(model => model.PPM).Name("PPM");
})
.CategoryAxis(axis => axis
.Categories(model => model.LastProcess)
.Labels(labels => labels.Rotation(0))
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format("{0:N0}"))
.MajorUnit(1000)
.Line(line => line.Visible(true))
.Max(10000)
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:N0}")
)
)
how can I add a blank item at the top of TimePicker list?
My code looks like this,
function timeEditor(container, options) {
$('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoTimePicker({
//interval: 15
//max: new Date(2000, 0, 1, 22, 0, 0) //date part is ignored
//min: new Date(2000, 0, 1, 8, 0, 0) //date part is ignored
});
}
$("#HoursGrid").kendoGrid({
dataSource: {
data: @Html.Raw(Json.Encode(Model.HoursList)),
schema: {
model: {
fields: {
DealerID: {type: "int", editable: false},
dayNo: {type: "int", editable: false},
dayName: { type: "string", editable: false },
OpenTime: { type: "date", editable: true },
CloseTime: { type: "date", editable: true }
}
}
}
},
//toolbar: ["save"],
columns:[
{ field: "dayName", title: "Day of Week" },
{ field: "OpenTime", title: "Sales Hours - Open From", type: "date", format: "{0:hh:mm tt}", editor: timeEditor },
{ field: "CloseTime", title: "Close At", type: "date", format: "{0:hh:mm tt}", editor: timeEditor }
],
editable: true,
scrollable: false,
save: function(e){
},
databound: DD.Kendo.AddExtraStyleToGrid // this is where the hover effect function is bound to grid
});
A I have a simple diagram (a vertical line of connected circles, of variable length) which I want to display in a pop-up window, to display a graphical indication of where a record is within a workflow.
I can get everything to work, except that by default the diagram has a lot of surrounding white space, that causes the windows scrollbars to show, even when the whole diagram easily fits into the visible space.
I would like to scale the diagram to always fit in the window (without showing scrollbars). I've tried using the bringIntoView method on the databound event, but this doesn't work (the API documentation doesn't give any clues as to what exactly the View area is). I would also like to keep the zoom functionality disabled.
My current window definition is:-
@(Html.Kendo().Window()
.Name("historyWnd")
.Title("Approval History")
.Content(@<
text
>
@(Html.Kendo().Diagram()
.Name("diagram")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("GetHistory", "MyVacancies").Data("vFilter")
)
.Model(m => m.Children("Items"))
)
.Editable(false)
.Pannable(false)
//.Zoom(0)
.Layout(l => l.Type(DiagramLayoutType.Layered))
.ShapeDefaults(sd => sd
.Visual("visualTemplate")
.Content(c => c
.Template("#= dataItem.PositionName #")
.FontSize(8)
.Color("white")
)
)
.ConnectionDefaults(cd => cd
.Stroke(s => s
.Color("#979797")
.Width(2)
)
)
.Events(events => events.DataBound("onDataBound"))
)
</
text
>)
.Modal(true)
.Visible(false)
.Height(450)
.Width(300)
)
and the template is:-
<script>
function
visualTemplate(options) {
var
dataviz = kendo.dataviz;
var
g =
new
dataviz.diagram.Group();
var
dataItem = options.dataItem;
g.append(
new
dataviz.diagram.Circle({
width: 70,
height: 70,
fill: dataItem.Colour,
stroke: {
width: 0
}
}));
return
g;
}
</script>
Thanks
Is it possible to enter the date without having to type the century? It seems that 1/1/16 is not valid, you have to enter 1/1/2016. Most of the time the century is the current one. In fact not entering the year at all would be even better, so that the year defaults to this year. Either of these things possible?
Thanks