Kendo().Grid on a Kendo().Window

13 posts, 0 answers
  1. Bob
    Bob avatar
    7 posts
    Member since:
    Jun 2012

    Posted 16 Nov 2012 Link to this post

    I can get the Kendo().Grid to show up populated on the .CSHTML page using the following code:
    @model IEnumerable<HCS.Model.FinancialInstitution>
     
    @(Html.Kendo().Grid(Model)
                    .Name("Grid")
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.MainRT).Groupable(false);
                        columns.Bound(p => p.LegalName);
                    })
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .Filterable()
                    .DataSource(dataSource => dataSource
                                .Ajax()
                                .ServerOperation(false))
    )
    But I can't get it to show up on the Kendo().Window using the following code:
    @model IEnumerable<HCS.Model.FinancialInstitution>
     
    @(Html.Kendo().Window()
        .Name("window")
        .Title("Choose a Financial Institution (FI)")
        .Content(() =>
            {
                @Html.Kendo().Grid(Model)
                    .Name("Grid")
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.MainRT).Groupable(false);
                        columns.Bound(p => p.LegalName);
                    })
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .Filterable()
                    .DataSource(dataSource => dataSource
                                .Ajax()
                                .ServerOperation(false));
            })
        .Draggable()
        .Resizable()
        .Events(ev => ev.Close("onClose"))
        .Width(400)
        )
    I get the Kendo().Window, but there is no grid and no errors.
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 20 Nov 2012 Link to this post

    Hello Bob,

    The correct syntax is:

    @{Html.Kendo().Window()
        .Name("window")
        .Title("Choose a Financial Institution (FI)")
        .Content(
            Html.Kendo().Grid()
            //..........
                .ToHtmlString()
        )
        .Render();
     }


    or

    @{Html.Kendo().Window()
        .Name("window")
        .Title("Choose a Financial Institution (FI)")
        .Content(@<text>
            @{Html.Kendo().Grid()
                .......
                .Render();
                }
            </text>
        )
        .Render();
        }


    All the best,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Bob
    Bob avatar
    7 posts
    Member since:
    Jun 2012

    Posted 20 Nov 2012 Link to this post

    Thanks for the response. I found a "messier" way to do it. I'll try to modify my code to implement this approach.

    Is there anyway to stop the Kendo().Window from displaying when the page loads.

    I only want it to pop up when I click a button. I also want it to be modal and centered. The .Modal(true) was easy.

    I've tried ...
    var window = $("#window");
     
            $("#btnAddRTs").click(function (e) {
                window.data("kendoWindow").center();
            });
    ...but it doesn't seem to work.
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Nov 2012 Link to this post

    Hi Bob,

    Please use .Visible(false) to make the Window initialize as a hidden element on the page.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Ezequiel
    Ezequiel avatar
    36 posts
    Member since:
    Oct 2011

    Posted 04 Apr 2014 in reply to Dimo Link to this post

    in my window I have a Grid but I want to put a filter on top of the grid.

    I have this as my Partial View for the Window:

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<FilterModel>" %>
    <%@ Import Namespace=" TelerikMvcApp2.Models" %>
     
    <% this.Html.Kendo().Window().Name("Window")
                .Modal(true)
                .Resizable().Visible(false).Height(450).Width(1120)
                .Title("Window")
                .Content(
                   this.Html.Kendo().Grid<Model1>()
                                    .Name("GridWindow")
                                    .ToolBar(toolbar => toolbar.Template(()=>
                                        {%>
                                        <input type="text" id="name"/>
                                        <input type="button" value="Search" />
                                        <%}
                                        ))
                                    .DataSource(dataSource => dataSource.Ajax()
                                                                        .Read(read => read.Action("Select", "Test")))
                                     .ToHtmlString()).Render();
                                %>

    in main window I have this:
    <% this.Html.RenderPartial("Window"); %>

    but the text field and button are displayed in my main window, as you can see in attached file.
    What do I need to change for this to work?




  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 09 Apr 2014 Link to this post

    Hello Ezequiel,

    The issue is caused by the unsuitable rendering sequence of the Window and Grid elements. Please use a string toolbar template:

    Html.Kendo().Window().Name("Window")
        .Modal(true)
        .Resizable().Visible(false).Height(450).Width(1120)
        .Title("Window")
        .Content(
            Html.Kendo().Grid<IEnumerable>()
                .Name("GridWindow")
                .ToolBar(toolbar => toolbar.Template("<input type='text' id='name'/><input type='button' value='Search' />"))
                .ToHtmlString()
        ).Render();


    Regards,
    Dimo
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. ajith
    ajith avatar
    21 posts
    Member since:
    Apr 2015

    Posted 01 May 2015 in reply to Dimo Link to this post

    Thank you so much!!!!!!
  9. DHHS
    DHHS avatar
    59 posts
    Member since:
    Mar 2015

    Posted 04 Jun 2015 in reply to Dimo Link to this post

    Hi Dimo, I am having the same issue. I have a grid, which is populating properly when i put on a page. I have put a button on the page which displays kendo window in which i have to show another grid. I can see the window showing with the grid columns but no records. When i debug i can see it is going to my read.action methods for both grids at the initial load of the page itself and see the data for both the grids in the json. For the main grid on the page itself is showing up the data. For the second grid on kendo window is not showing any records.

    <p><span id="undo" style="display:none" class="k-button k-primary">Add Business Units</span><br><div class="container-fluid"><br>    <div class="row"><br>        <div class="col-xs-18 col-md-12"><br>            @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.businessUnit>()<br>        .Name("grid")<br>        .Columns(columns =><br>        {<br>            columns.Bound(p => p.Id).Filterable(false).Width(50);<br>            columns.Bound(p => p.BU_Id);<br>            columns.Bound(p => p.Description);<br>            columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");<br>            columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");<br>            columns.Bound(p => p.Fund);<br><br><br>            columns.Command(command => command.Custom("Edit").SendDataKeys(true).Click("editClick"));<br>            columns.Command(command => command.Custom("View").SendDataKeys(true).Click("viewClick"));<br>            columns.Command(command => command.Custom("Delete").SendDataKeys(true).Click("deleteClick"));<br>        })<br>        .Pageable()<br>        .Sortable()<br>        .Scrollable()<br>        .Filterable()<br>        .Selectable()<br>        .HtmlAttributes(new { style = "height:350px;" })<br>        .DataSource(dataSource => dataSource<br>        .Ajax()<br>        .PageSize(20)<br>        .Read(read => read.Action("BU_Read", "Contract").Data("additionalInfo"))<br>        )<br>        .ToolBar(toolbar =><br>{<br>    toolbar.Template(@<text><br>        <div class="toolbar">            <br>            <button class="k-button k-button-icontext k-grid-add k-primary">Add Business Units</button><br>        </div><br>    </text>);<br>})<br><br>            )<br>        </div><br>    </div><br></div><br>@(Html.Kendo().Window()<br>    .Name("window")<br>    .Title("About Alvar Aalto")<br>    .Content((Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.businessUnit>()<br>        .Name("grid")<br>        .Columns(columns =><br>        {<br>            columns.Bound(p => p.Id).Filterable(false).Width(50);<br>            columns.Bound(p => p.BU_Id);<br>            columns.Bound(p => p.Description);<br>            columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");<br>            columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");<br>            columns.Bound(p => p.Fund);<br><br><br>            columns.Command(command => command.Custom("Edit").SendDataKeys(true).Click("editClick"));<br>            columns.Command(command => command.Custom("View").SendDataKeys(true).Click("viewClick"));<br>            columns.Command(command => command.Custom("Delete").SendDataKeys(true).Click("deleteClick"));<br>        })<br>        .Pageable()<br>        .Sortable()<br>        .Scrollable()<br>        .Filterable()<br>        .Selectable()<br>        .HtmlAttributes(new { style = "height:350px;" })<br>        .DataSource(dataSource => dataSource<br>        .Ajax()<br>        .PageSize(20)<br>            .Read(read => read.Action("GetAllBU_Read", "Contract"))<br>        )).ToHtmlString()<br>            )<br>            .Draggable()<br>    .Resizable()<br>    .Width(600)<br>    .Visible(false)<br>    .Actions(actions => actions.Pin().Minimize().Maximize().Close())<br>    .Events(ev => ev.Close("onClose"))<br>        <br>).Render();</p><p> </p><p>$(document).ready(function(){ <br>        $('#second').kendoWindow({<br>            width:200,<br>            position:{<br>                left:300<br>            },<br>            visible:false<br>        });<br>         $("#undo").bind("click", function() {<br>                $("#window").data("kendoWindow").open();<br>                $("#undo").hide();<br>            });<br>  <br>        $('button').click(function(){        <br>            alert("inside");<br>            $("#window").data("kendoWindow").open();           <br>        });<br>    });</p><p>   public ActionResult BU_Read([DataSourceRequest]DataSourceRequest request, int Id)<br>        {         <br>            return Json(BHEBS.Areas.Admin.Models.ContractModel.GetAllBU(Id).ToDataSourceResult(request));<br>        }<br>        public ActionResult GetAllBU_Read([DataSourceRequest]DataSourceRequest request)<br>        {<br>            return Json(BHEBS.Areas.Admin.Models.ContractModel.GetBU().ToDataSourceResult(request));<br>        }</p>

  10. DHHS
    DHHS avatar
    59 posts
    Member since:
    Mar 2015

    Posted 04 Jun 2015 in reply to DHHS Link to this post

     Sorry about the format. There is no way to edit my post so posting it again.
     
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-18 col-md-12">
                @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.businessUnit>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.Id).Filterable(false).Width(50);
                columns.Bound(p => p.BU_Id);
                columns.Bound(p => p.Description);
                columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.Fund);
     
     
                columns.Command(command => command.Custom("Edit").SendDataKeys(true).Click("editClick"));
                columns.Command(command => command.Custom("View").SendDataKeys(true).Click("viewClick"));
                columns.Command(command => command.Custom("Delete").SendDataKeys(true).Click("deleteClick"));
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .Selectable()
            .HtmlAttributes(new { style = "height:350px;" })
            .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("BU_Read", "Contract").Data("additionalInfo"))
            )
            .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
            <div class="toolbar">           
                <button class="k-button k-button-icontext k-grid-add k-primary">Add Business Units</button>
            </div>
        </text>);
    })
     
                )
            </div>
        </div>
    </div>
    @(Html.Kendo().Window()
        .Name("window")
        .Title("About Alvar Aalto")
        .Content((Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.businessUnit>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.Id).Filterable(false).Width(50);
                columns.Bound(p => p.BU_Id);
                columns.Bound(p => p.Description);
                columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.Fund);
     
     
                columns.Command(command => command.Custom("Edit").SendDataKeys(true).Click("editClick"));
                columns.Command(command => command.Custom("View").SendDataKeys(true).Click("viewClick"));
                columns.Command(command => command.Custom("Delete").SendDataKeys(true).Click("deleteClick"));
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .Selectable()
            .HtmlAttributes(new { style = "height:350px;" })
            .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
                .Read(read => read.Action("GetAllBU_Read", "Contract"))
            )).ToHtmlString()
                )
                .Draggable()
        .Resizable()
        .Width(600)
        .Visible(false)
        .Actions(actions => actions.Pin().Minimize().Maximize().Close())
        .Events(ev => ev.Close("onClose"))
     
    ).Render();
     
      
     
     $(document).ready(function(){
            $('#second').kendoWindow({
                width:200,
                position:{
                    left:300
                },
                visible:false
            });
             $("#undo").bind("click", function() {
                    $("#window").data("kendoWindow").open();
                    $("#undo").hide();
                });
       
            $('button').click(function(){       
                alert("inside");
                $("#window").data("kendoWindow").open();          
            });
        });
     
      
     
    public ActionResult BU_Read([DataSourceRequest]DataSourceRequest request, int Id)
            {        
                return Json(BHEBS.Areas.Admin.Models.ContractModel.GetAllBU(Id).ToDataSourceResult(request));
            }
            public ActionResult GetAllBU_Read([DataSourceRequest]DataSourceRequest request)
            {
                return Json(BHEBS.Areas.Admin.Models.ContractModel.GetBU().ToDataSourceResult(request));
            }

  11. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 05 Jun 2015 Link to this post

    Hello,

    Both Grids have the same ID, which causes the second one to NOT be initialized at all.

    Regards,
    Dimo
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. DHHS
    DHHS avatar
    59 posts
    Member since:
    Mar 2015

    Posted 05 Jun 2015 Link to this post

    Thanks a lot for the reply. Sorry for the silly mistake.

     

    Thanks,

    Veena

  13. Saquib
    Saquib avatar
    15 posts
    Member since:
    Mar 2015

    Posted 30 Mar Link to this post

    I have a Kendo mvc grid in Kendo Window. 

    The grid is in a partial view and I am loading the partial view via ajax call in a kendo window when a button is clicked. 

    The grid loads, shows data and everything works fine except the editor template. It is not recognizing the editortemplate at all. 

    @{Html.Kendo().Window()
          .Name("ActionWindow")
          .Title("Action")
          .Content(@<text><div id="ActionContent"></div></text>)
                  .Draggable()
                  .Visible(false)
                  .Width(600)
                  .Resizable()
                  .Actions(actions => actions.Close()).Render();
                  }

     

     @(Html.Kendo().Grid<MyViewModel>()
                .Name("myGrid")
                .Columns(columns =>
                {
                    columns.Bound(c => c.ShortName);
                    columns.Bound(c => c.Text).Width("40%");
                    columns.Bound(c => c.LastUpdated).ClientTemplate("#= (LastUpdated == null) ? '' : kendo.toString(LastUpdated, \"MM/dd/yyyy hh:mm tt\") #");
                    columns.Command(command =>
                    {
                        command.Custom(" ").HtmlAttributes(new { @class = "fa fa-eye" }).Click("showDetails");
                        command.Edit().Text(" ").HtmlAttributes(new { @class = "fa fa-pencil" });
                        command.Destroy().Text(" ").HtmlAttributes(new { @class = "fa fa-trash-o" });
                    });
                })
                .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("myEditor")
                    .Window(w => w.Title("Add/Edit").Name("editWindow").Width(650).Resizable()))
                .ToolBar(toolbar => toolbar.Create().Text(" ").HtmlAttributes(new { @class = "add", @style = "margin-right:15px", @title = "Add" }))
                .Events(e => { e.DataBound("OnDataBound"); e.Edit("onEdit"); })
                .DataSource(dataSource => dataSource
                .Ajax()
                .Sort(sort => sort.Add("OrderBy").Descending())
                .Sort(sort => sort.Add("LastUpdated").Descending())
                .Events(events => events.Error("grid_error"))
                .Model(model =>
                    {
                        model.Id(p => p.TextSnippetsID);
                        model.Field(p => p.ClassDescription).Editable(false);
                        model.Field(p => p.AttachedFileName).DefaultValue("??");
                    })
                        .Create(update => update.Action("TextSnippets_Create", "Actions").Data("GetCategoryName"))
                        .Update(update => update.Action("TextSnippets_Update", "Actions"))
                        .Destroy(update => update.Action("TextSnippets_Destroy", "Actions"))
                        .Read(read => read.Action("TextSnippets_Read", "Actions").Data("GetCategoryName"))
                        ))

  14. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 01 Apr Link to this post

    Hello Saquib,

    Your question does not look related to the previous discussion in this thread, so it is recommended to post it in a new forum thread. However, I see that you already have submitted a support ticket for it, so we will reply there.

    Regards,
    Dimo
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready