This is a migrated thread and some comments may be shown as answers.

Kendo Window / Tab Strip with Razor Form

6 Answers 560 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Kieran
Top achievements
Rank 1
Kieran asked on 13 Apr 2015, 08:43 AM

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>)
)

6 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 15 Apr 2015, 07:11 AM
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
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Kieran
Top achievements
Rank 1
answered on 15 Apr 2015, 09:32 AM

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

 

0
Kieran
Top achievements
Rank 1
answered on 15 Apr 2015, 10:04 AM

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'

0
Petur Subev
Telerik team
answered on 17 Apr 2015, 08:45 AM
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
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Kieran
Top achievements
Rank 1
answered on 17 Apr 2015, 09:06 AM

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()
)

0
Accepted
Daniel
Telerik team
answered on 21 Apr 2015, 10:51 AM
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
 

See What's Next in App Development. Register for TelerikNEXT.

 
Tags
TabStrip
Asked by
Kieran
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Kieran
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or