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

[Bob]

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.

[Dimo]

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

[Bob]

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.

[Dimo]

Hi Bob,

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

Regards,
Dimo
the Telerik team

[Ezequiel]

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?

[Dimo]

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

 

 

[ajith]

Thank you so much!!!!!!

[DHHS]

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>

[DHHS]

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

[Dimo]

Hello,

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

Regards,
Dimo
Telerik

[DHHS]

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

 

Thanks,

Veena

[Saquib]

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

[Dimo]

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

[Sandhya]

Hello Dimo, 

I am trying to add a class to Popwindow titlebar, but for some reason cannot , I am using the template as popwindow through a grid.

So I am trying to do like below :

e.container.find(".k-window-titlebar .k-header").addClass("modal-header").removeClass(".k-window-titlebar .k-header")

Could you please suggest ?

Thanks

Sandhya

 

 

[Dimo]

Hello Sandhya,

The Window's titlebar is outside e.container, that's why the provided script cannot find it. You need to start from the Window's wrapper.

http://docs.telerik.com/kendo-ui/intro/widget-basics/wrapper-element

There are two ways to do that - attach an edit event handler to the Grid, or attach an open event handler to the popup Window via the editable settings.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-editable.window

@(Html.Kendo().Grid()
    .Events(ev => ev.Edit("onGridEdit"))
    .Editable(e => e.Mode(GridEditMode.PopUp).Window(w => w.Events(ev => ev.Open("onWindowOpen"))))
)

<script>

    function onWindowOpen(args) {
        console.log("Window Open");
        console.log(args.sender.wrapper);
    }

    function onGridEdit(args) {
        console.log("Grid Edit");
        console.log(args.container.data("kendoWindow").wrapper);
    }

</script>

Regards,
Dimo
Progress Telerik