Kendo Window / Tab Strip with Razor Form

7 posts, 1 answers
  1. Kieran
    Kieran avatar
    5 posts
    Member since:
    Aug 2014

    Posted 13 Apr 2015 Link to this post

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

  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 15 Apr 2015 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Kieran
    Kieran avatar
    5 posts
    Member since:
    Aug 2014

    Posted 15 Apr 2015 in reply to Petur Subev Link to this post

    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

     

  5. Kieran
    Kieran avatar
    5 posts
    Member since:
    Aug 2014

    Posted 15 Apr 2015 in reply to Kieran Link to this post

    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'

  6. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 17 Apr 2015 Link to this post

    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.

     
  7. Kieran
    Kieran avatar
    5 posts
    Member since:
    Aug 2014

    Posted 17 Apr 2015 in reply to Petur Subev Link to this post

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

  8. Answer
    Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 21 Apr 2015 Link to this post

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready