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

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

14 Answers 1220 Views
Window
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 16 Nov 2012, 08:00 PM
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.

14 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 20 Nov 2012, 09:23 AM
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!
0
Bob
Top achievements
Rank 1
answered on 20 Nov 2012, 07:22 PM
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.
0
Dimo
Telerik team
answered on 21 Nov 2012, 09:50 AM
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!
0
Ezequiel
Top achievements
Rank 2
answered on 04 Apr 2014, 05:14 PM
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?




0
Dimo
Telerik team
answered on 09 Apr 2014, 11:05 AM
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.

 
0
ajith
Top achievements
Rank 1
answered on 01 May 2015, 07:02 AM
Thank you so much!!!!!!
0
DHHS
Top achievements
Rank 1
answered on 04 Jun 2015, 10:13 PM

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>

0
DHHS
Top achievements
Rank 1
answered on 04 Jun 2015, 10:18 PM

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

0
Dimo
Telerik team
answered on 05 Jun 2015, 08:41 AM
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
0
DHHS
Top achievements
Rank 1
answered on 05 Jun 2015, 02:36 PM

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

 

Thanks,

Veena

0
Saquib
Top achievements
Rank 1
answered on 30 Mar 2016, 08:55 PM

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

0
Dimo
Telerik team
answered on 01 Apr 2016, 02:29 PM
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
0
Sandhya
Top achievements
Rank 1
answered on 14 Sep 2017, 01:07 PM

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

 

 

0
Dimo
Telerik team
answered on 15 Sep 2017, 08:27 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Window
Asked by
Bob
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Bob
Top achievements
Rank 1
Ezequiel
Top achievements
Rank 2
ajith
Top achievements
Rank 1
DHHS
Top achievements
Rank 1
Saquib
Top achievements
Rank 1
Sandhya
Top achievements
Rank 1
Share this question
or