Kendo Window / Tab Strip with Razor Form

[Kieran]

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 =>
          {
                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().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>)
)​

[Petur Subev]

Hello Kieran,

Indeed if you render a HTML.form element with the helper it will be rendered to the output before the tabstrip. In order to change this you need to use the render method of the TabStrip as well. I assume that the following approach should fix your case:

http://www.telerik.com/forums/issue-with-mvc-razor-form-inside-tabstrip#TIS-0KcGxUmF_Tn_x-XnSw

Let us know your findings.

Kind Regards,
Petur Subev
Telerik

 

 

[Kieran]

Hi Petur

I've tried adding .Render() to both TabStrip and Window in different combinations, I always get the error message of:

Compiler Error Message: CS1502: The best overloaded method match for 'System.Web.WebPages.WebPageExecutingBase.Write(System.Web.WebPages.HelperResult)' has some invalid arguments

Cheers

 

[Kieran]

Doesn't look like I can edit my previous post detailed error message

 

DefaultCollection\IT Management Tool\Trunk\ITManagementTool.UI\Areas\PM\Views\Team\Index.cshtml(39,1): error CS1502: The best overloaded method match for 'System.Web.WebPages.WebPageExecutingBase.Write(System.Web.WebPages.HelperResult)' has some invalid arguments

DefaultCollection\IT Management Tool\Trunk\ITManagementTool.UI\Areas\PM\Views\Team\Index.cshtml(49,71): error CS1503: Argument 1: cannot convert from 'void' to 'System.Web.WebPages.HelperResult'

[Petur Subev]

Hello Kieran,

Did you change the syntax from $(Html.Kendo().SomeWidget()) to @{Html.Kendo().SomeWidget().Render();} ?

Please demonstrate your case so we can investigate on.

Kind Regards,
Petur Subev
Telerik

 

 

[Kieran]

I tried to attach as a project but it was too large.

//AssignedTasksViewModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TestApp.Models
{
    public class AssignedTasksViewModel
    {
        public int ProjectId { get; set; }
        public int TaskId { get; set; }
        public DateTime? StartDate { get; set; }
        public DateTime? DateLastAdded { get; set; }
    }
}

 

@using TestApp.Models
@{
    ViewBag.Title = "_TestPartial";
}
@{

}


<h2>_TestPartial</h2>

@(Html.Kendo().TabStrip()
          .Name("tabstrip")
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("Existing Tasks")
                  .Selected(true)
                  .Content(
                @<text>
                    @(Html.Kendo().Grid<AssignedTasksViewModel>().Name("AssignedTasks").HtmlAttributes(new { @class = "top10" })
                          .DataSource(ds =>
                              ds.Ajax().AutoSync(true)
                                  .Read(r => r.Action("GetMyAssignedTasks", "TimesheetApi", new { area = "API" })
                                      .Data("getDateForTimeSheet")).Group(e => e.Add(f => f.ProjectId))

                          )
                          .Groupable(g => g.Enabled(true))
                          .Columns(c =>
                          {
                              c.ForeignKey(d => d.ProjectId, (SelectList)ViewBag.Projects).Title("Project");
                              c.ForeignKey(d => d.TaskId, (SelectList)ViewBag.Tasks).Title("Task");
                              c.Command(d => d.Custom("Add To Timesheet").Click("addToTimeSheet"));
                          })
                    )
                </text>);

              tabstrip.Add().Text("Create New Task")
                  .Content(
                @<text>
                    @Ajax.BeginForm(null, null, new AjaxOptions() { }, null){
                    @Html.Hidden("Id")
                    @Html.Hidden("Date")
                    <div class="row">
                        @Html.Label("Project", new { })
                        @(Html.Kendo().DropDownListFor(model => model.ProjectId).OptionLabel("--- Select ---").Name("ProjectId").DataTextField("Name").DataValueField("Id").DataSource(ds => ds.Read("GetAllProjects", "ProjectApi", new { area = "API" })))
                        @Html.ValidationMessageFor(model => model.ProjectId, "", new { @class = "text-danger" })
                    </div>
                    <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" type="submit">Submit</button>
                    </div>
                    }


                </text>);
          }).Render())

 

@*Index.cshtml*@

@{
    ViewBag.Title = "Home Page";
}

@(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(@<text>@Html.Partial("_TestPartial")</text>).Render()
)

[Daniel]

Hi,

The control should be defined in code block using curly brackets instead of code nugget when using the Render method e.g.

@{
    Html.Kendo().TabStrip()
    ...
    .Render();
}

@{
    Html.Kendo().Window()
        ...
    .Render();
}

Regards,
Daniel
Telerik