I have a grid where each row has a custom command that opens a details modal. The details modal is populated with the contents of a kendo template. I want to include a kendo grid inside of that template.
Data structure is Contract (main page)->CoveredEquipment (first grid)->WearableParts (grid on modal)
My problem is that I get a javascript "invalid template" error when the page is loaded. It seems to not like
#= kendo.render(kendo.template($("\#wearablePartsGridTemplate").html()), WearableParts); #
in the modal template.
What am I doing wrong?
<script id=
"wearablePartsGridTemplate"
type=
"x-kendo-template"
>
@(Html.Kendo().Grid<FieldServiceWeb.Areas.Admin.Models.ServiceContract.WearablePartViewModel>()
.Name(
"wearablePartsGrid"
)
.DataSource(dataSource =>
dataSource.Ajax()
.Model(model => model.Id(p => p.PartNumber))
.ServerOperation(
false
)
.Update(
"Update"
,
"ServiceContracts"
,
new
{ area =
"Admin"
})
.Destroy(
"Delete"
,
"ServiceContracts"
,
new
{ area =
"Admin"
})
.Create(
"Create"
,
"ServiceContracts"
,
new
{ area =
"Admin"
})
)
.Columns(columns => {
columns.Bound(c => c.PartNumber).Title(
"Part"
);
columns.Bound(c => c.Description);
columns.Bound(c => c.IsActive).Title(
"Active"
);
columns.Command(c => c.Destroy().Text(
"Delete"
));
})
.ToClientTemplate())
</script>
<script type="text/x-kendo-template" id="wearablePartsContent">
<label>Wearable parts for <strong>#: CSPId # - #: Description #</strong></label>
#= kendo.render(kendo.template($("\\#wearablePartsGridTemplate").html()), WearableParts); #
</script>
<script>
function openWearableParts(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$("#wearablePartsModal").find(".modal-body").html(wearablePartsTemplate(dataItem));
//createGrid();
$("#wearablePartsModal").modal("show");
}
</script>
I have a Service Contract that can have many pieces of Covered Equipment. I would like to use the grid control to let users add and edit equipment BEFORE the parent object is created (basically storing it all client-side, and then sending it back with the parent info in one form POST).
Is this scenario possible? All of the examples I've found are using AJAX calls on each edit, which I can't do.
I've got the following code which doesn't seem to render correctly, it moves the fields outside of the form, so the form is an empty tag. I tried adding .Render() to both tabstrip and window at different times and gained a .NET error
"CS1502: The best overloaded method match for 'System.Web.WebPages.WebPageExecutingBase.Write(System.Web.WebPages.HelperResult)' has some invalid arguments "
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(tabstrip =>
{
@*More tabs*@
tabstrip.Add().Text("Create New Task")
.Content(
@<
text
>
@using (Ajax.BeginForm(null, null, new AjaxOptions { Url = Url.Action("UserAddNewTask", "ProjectApi", new { area = "API" }), OnSuccess = "CloseAndRefreshTaskGrid()" }, new { @id = "newTaskForm" }))
{
@Html.Hidden("Id")
<
div
class
=
"container-fluid"
>
@*More fields*@
<
div
class
=
"row top10"
>
@Html.Label("Task Name", new { })
@Html.Kendo().TextBoxFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</
div
>
<
div
class
=
"row top10"
>
<
button
class
=
"btn btn-success"
id
=
"btnNewTaskSubmit"
type
=
"submit"
>Submit</
button
>
</
div
>
</
div
>
}
</
text
>);
}))
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(tabstrip =>
{
t
abstrip.Add().Text("Create New Task")
.Content(
@<
text
>
@using (Ajax.BeginForm(null, null, new AjaxOptions { Url = Url.Action("UserAddNewTask", "ProjectApi", new { area = "API" }), OnSuccess = "CloseAndRefreshTaskGrid()" }, new { @id = "newTaskForm" }))
{
@Html.Hidden("Id")
<
div
class
=
"container-fluid"
>
@*More fields*@
<
div
class
=
"row top10"
>
@Html.Label("Task Name", new { })
@Html.Kendo().TextBoxFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</
div
>
<
div
class
=
"row top10"
>
<
button
class
=
"btn btn-success"
id
=
"btnNewTaskSubmit"
type
=
"submit"
>Submit</
button
>
</
div
>
</
div
>
}
</
text
>);
}))
​
@(Html.Kendo().Window()
.Name("editTaskModal")
.Modal(true)
.Draggable()
.Actions(a => a.Pin().Maximize().Minimize().Close())
.Title("Edit Task")
.Width(800)
.Visible(false)
.Position(p => p.Top(150))
//.Content(@Partial/_TimesheetNewTask")
.Content(@<
text
>@Html.Partial("Partial/_TimesheetNewTask")</
text
>)
)
​01.
@(Html.Kendo().Window()
02.
.Name("editPasswordPopUp")
03.
.Visible(false)
04.
.Modal(true)
05.
.Width(600)
06.
.Height(500)
07.
.Position(settings =>
08.
settings.Top(70).Left(200))
09.
.Title("Edit your password")
10.
.Content("loading user info...")
11.
.LoadContentFrom("EditPassword", "Member")
12.
.Iframe(true)
13.
.Resizable()
14.
.Draggable()
15.
)
1.
public
ActionResult EditPassword() {
2.
return
PartialView();
3.
}
1.
[HttpPost]
2.
[ValidateAntiForgeryToken]
3.
public
ActionResult EditPassword(EditPasswordViewModel viewModel)
4.
{
5.
[....]
6.
return
RedirectToAction(
"Profile"
,
"Member"
,
new
{id = viewModel.Id});
7.
[....]
8.
}
01.
@using Devoteam.CustomerPortal.Application.Helpers
02.
@model Devoteam.CustomerPortal.ViewModels.EditPasswordViewModel
03.
@{
04.
ViewBag.Title = "Edit";
05.
Layout = null;
06.
}
07.
08.
@Styles.Render("~/Content/css")
09.
@Scripts.Render("~/bundles/jquery")
10.
@Scripts.Render("~/bundles/jqueryval")
11.
@Scripts.Render("~/bundles/kendo")
12.
13.
@using (Html.BeginForm())
14.
{
15.
@Html.AntiForgeryToken()
16.
17.
<
div
id
=
"messageError"
>
18.
@Html.ValidationSummary()
19.
</
div
>
20.
[...] // Fields
21.
22.
<
div
class
=
"buttons"
>
23.
<
input
type
=
"submit"
value
=
"Confirm"
class
=
"big-button"
/>
24.
<
input
type
=
"submit"
value
=
"Cancel"
class
=
"big-button"
/>
25.
</
div
>
26.
}
function deleteCommand(e) {
var grid = $('#reimbursementsGrid').data('kendoGrid');
var rows = grid.select();
rows.each(
function () {
var record = $(this).data();
alert('Selected : ' + record.Id);
}
)
}
@(Html.Kendo().Grid(Model)
.Name("reimbursementsGrid")
.DataSource(dataSource => dataSource
.Server()
.Model(model =>
{
model.Id(r => r.Id);
...
.Columns(columns =>
{
columns.Bound(o => o.Id).Hidden(true);
...
Picture of the chart: http://i.imgur.com/K88FEJd.png
I cannot get the chart to do categories correctly. If you look at the dates in the following data they are all different except if it is a different department. But in the picture they seem to merge for some reason. Can someone explain this?
Here is my return JSON data...
[{"DepartmentName":"Information Technology","TicketDate":"2015-04-01","TicketCt":3},{"DepartmentName":"Information Technology","TicketDate":"2015-04-16","TicketCt":1},{"DepartmentName":"Human Resources","TicketDate":"2015-04-14","TicketCt":1},{"DepartmentName":"Human Resources","TicketDate":"2015-04-15","TicketCt":1}]
Here is my code:
@(Html.Kendo().Chart<
Guardian.ViewModels.TicketCount
>()
.Name("LastTwoWeeks_Tickets")
.Title("Ticket Count In The Past 30 Days")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.DataSource(ds => ds.Read(read => read
.Action("_NewTicketCtOverTwoWeeks_Read", "Home"))
.Group(group => group.Add(model => model.DepartmentName))
.Sort(sort => sort.Add(model => model.TicketDate).Ascending())
)
.Series(series => series.Line(model => model.TicketCt).Name("#= group.value #"))
.CategoryAxis(axis => axis
.Categories(model => model.TicketDate)
)
.ValueAxis(axis => axis.Numeric()
.Labels(labels => labels.Format("{0:N0}"))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Shared(true)
.Format("{0:N0}")
)
)
I have scoured the forums and following all of the instructions to try to get the DropDownlist to properly behave. What I am doing is using a wizard (in Jquery) form and each time the next button is called the following code is hit:
if (wizardForm.valid()) {// validate the form
wizardForm.validate().focusInvalid();
.............}
The problem is when I change the ignore option to "", from ignore: ":hidden" the validation looks like it is successful and without validation errors however the next button does not advance to the next page.
I have also tried the example from the "KendoInputs_Validation" project but that does not work at all in Visual Studio.
Hi,
Is there a way to use Kendo().Menu() with complex
ItemDataBound ?
While creating simple menu with several menu option &
several children’s is ok, I did not managed to understand how to implement menu
item with several children & images & dropdown list & buttons.
In the attached image you will find the best explanation in
order to understand what I want I've attached an image
Thanks
Hello,
I have a grid with the filterMenuInit event set up to fire a custom function. However, the event is not firing when I open the filter menu. Here is some of the code for the grid:
@(Html.Kendo().Grid(Model)
.Name("Grid")
.ColumnMenu()
.Columns(columns =>
{
columns.Bound(m => m.Number)
.Title("Number")
.Width(140)
.Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(true).Template("NumberFilter")));
columns.Bound(m => m.FirstName)
.Title("First Name")
.Width(140)
.Filterable(ftb => ftb.Cell(cell => cell.Delay(@serverSideDelay).ShowOperators(true)));
columns.Bound(m => m.LastName)
.Title("Last Name")
.Width(140)
.Filterable(ftb => ftb.Cell(cell => cell.Delay(@serverSideDelay).ShowOperators(true));
})
.Pageable(pageable => pageable
.Refresh(true)
.ButtonCount(10))
.ColumnMenu(menu =>
{
menu.Filterable(false);
menu.Columns(false);
})
.Sortable(s => s
.AllowUnsort(false)
.SortMode(GridSortMode.SingleColumn))
.Selectable()
.EnableCustomBinding(true)
.Events(e => e.FilterMenuInit("hideFilter"))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(m => m.ID))
.Sort(s =>
{
s.Add("LastName").Ascending();
})
.PageSize(10)
.ServerOperation((bool)@ViewBag.IsServerSide)
.Read(read => read.Action("ReadAction"))
.Total((int)ViewBag.Count)
.Events(events => events.Error("onKendoDataSourceError").RequestStart("checkFilter"))
)
.Events(e => e.Change("selectObject").DataBound("checkFilter"))
)
I'm using version 2014.3.1316. Can you please help with this? Thanks.