Resize grid into a window with template

[Dario]

Hi to all,

I followed example in dojo to do this (example in dojo.PNG) that is exactly what I need.

In my case, instead, I'm using a text/x-kendo-template, it's an only difference between my code and example's dojo.

Instead see same effect, I found that my grid is overflowed of window perimeter (examplemy grid.PNG), to see the footer of my grid I need to scroll down at the end (end of grid overflowed.PNG)

This is my style script

style>
    #itemLedgerEntriesWindow {
        padding: 0;
    }

    #ileGrid {
        border-width: 0;
        height: 100%; /* DO NOT USE !important for setting the Grid height! */
    }
    #ileTemplate {
        border-width: 0;
        height: 100%; /* DO NOT USE !important for setting the Grid height! */
    }

This is my code

<!--Template della window relativa ai dettagli-->
<input type="hidden" id="purchaseKey" name="purchaseKey" value="false" />
<script type="text/x-kendo-template" id="ileTemplate">
        <input type="hidden" id="itemNoKey" name="itemNoKey" value="#= No #" />
        @(Html.Kendo().Grid<ItemLedgerEntryModel>()
                    .Name("ileGrid")
                    .Filterable()
                    .AutoBind(true)
                    .Columns(columns =>
                    {
                        columns.Bound(f => f.DocumentNo);
                        columns.Bound(f => f.OrderNo);
                        columns.Bound(f => f.VendorNo);
                        columns.Bound(f => f.PostingDate).Format("{0:dd/MM/yyyy}");
                        columns.Bound(f => f.EntryType);
                        columns.Bound(f => f.UnitOfMeasureCode);
                        columns.Bound(f => f.Quantity).Format("{0:N2}").HtmlAttributes(new { style = "text-align: right;" });
                    })
                    .Sortable() // Enable sorting
                    .Pageable()
                    //.Scrollable(scrollable => scrollable.Virtual(true))

                    .DataSource(dataSource => dataSource //Configure the Grid data source.
                        .Ajax() //Specify that Ajax binding is used.
                        .PageSize(25)
                        .ServerOperation(true)
                        .Read(read => read.Action("LedgerEntries", "ItemLedgerEntry").Data("itemNoData"))
                    ).ToClientTemplate()
                    )
</script>

<!--Window dei dettagli dell'articolo-->
@(Html.Kendo().Window()
        .Name("itemLedgerEntriesWindow")
        .Title("Movimenti Magazzino")
        //.LoadContentFrom("GetItemLedgerEntries", "Home")
        .Visible(false)
        //.Iframe(true)
        .Height(600)
        .Width(1100)
        //.Resizable()
        //.Draggable()
        .Modal(true)
        //.Events(e=>e.Activate("onActivateIleWindow"))
    )
<!-- << DETTAGLIO MOVIMENTI ARTICOLO-->

 

How can I do this?

[Tsvetomir]

Hi Dario,

Thank you for the provided code snippets, screenshots, and details of the issue on hand. 

In general, the grid is being resized within the window due to the fact that the resize() method is called within the Activate event of the window. 

Whenever the resize() method is not called, the grid will not automatically adjust its dimensions. Could you share more details where the "ileTemplate" template is used? Is it a partial view that is returned via the "GetItemLedgerEntries" ActionMethod? If yes, you should uncomment the Activate event of the window and call the resize method of the grid within the handler.

Let me know in case the issue persists.

 

Regards,
Tsvetomir
Progress Telerik

[Dario]

Thank you Tsvetomir, but I tryed to add activate event, I have same problem.

This is all code about "show details"

<!-- >> DETTAGLIO MOVIMENTI ARTICOLO-->

    <script>

        $(function () {
            $(".k-grid-excel").on("click", function (e) {
                var grid = $("#itemGrid").getKendoGrid();
                kendo.ui.progress(grid.element, true);

                $("#textSearchButton").addClass("k-state-disabled");
                $("#dateFilterDatepicker").addClass("k-state-disabled");
                $("#brandComboBox").addClass("k-state-disabled");
                $("#tipologyComboBox").addClass("k-state-disabled");

            });
        })

        function onRequestEnd(e) {
            var grid = $("#itemGrid").getKendoGrid();
            setTimeout(function () {
                kendo.ui.progress(grid.element, false);

                $("#textSearchButton").removeClass("k-state-disabled");
                $("#dateFilterDatepicker").removeClass("k-state-disabled");
                $("#brandComboBox").removeClass("k-state-disabled");
                $("#tipologyComboBox").removeClass("k-state-disabled");

            });
        }

        function onActivateIleWindow(e) {
            var grid = $("#ileGrid").data("kendoGrid").value();
            grid.resize();
        }

        //Recupera il codice articolo
        function itemNoData() {
            //alert($("#itemNoKey").val());
            var itemNoGet = $("#itemNoKey").val();
            var selectedDate = $("#dateFilterDatepicker").data("kendoDatePicker").value();
            var purchase = $("#purchaseKey").val();

            return {
                itemNo: itemNoGet,
                dateFilter: selectedDate,
                purchaseFilter: purchase
            }
        }

        //Invia al template il codice articolo ed apre la window
        function showDetails(e) {
            e.preventDefault();

            $("#purchaseKey").val("false");
            //alert($("#purchaseKey").val());

            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var wnd = $("#itemLedgerEntriesWindow").data("kendoWindow");
            var title = "Movimenti magazzino di " + dataItem.No;
            wnd.title(title);


            var detailsTemplate = kendo.template($("#ileTemplate").html());
            wnd.content(detailsTemplate(dataItem));
            wnd.center().open();
        }

        //Invia al template il codice articolo ed apre la window
        function showPurchaseDetails(e) {
            e.preventDefault();

            $("#purchaseKey").val("true");
            //alert($("#purchaseKey").val());

            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var wnd = $("#itemLedgerEntriesWindow").data("kendoWindow");
            var title = "Movimenti magazzino di " + dataItem.No;
            wnd.title(title);

            var detailsTemplate = kendo.template($("#ileTemplate").html());
            wnd.content(detailsTemplate(dataItem));
            wnd.center().open();
        }

        //In apertura effettua l'aggiornamento del datasource della grid
        /*function onActivateIleWindow() {
            var grid = $("#ileGrid").data("kendoGrid");
            grid.dataSource.read(); // rebind the Grid's DataSource
        }*/
    </script>

    <!--Template della window relativa ai dettagli-->
    <input type="hidden" id="purchaseKey" name="purchaseKey" value="false" />
    <script type="text/x-kendo-template" id="ileTemplate">
        <input type="hidden" id="itemNoKey" name="itemNoKey" value="#= No #" />
        @(Html.Kendo().Grid<ItemLedgerEntryModel>()
                        .Name("ileGrid")
                        .Filterable()
                        .AutoBind(true)
                        .Columns(columns =>
                        {
                            columns.Bound(f => f.DocumentNo);
                            columns.Bound(f => f.OrderNo);
                            columns.Bound(f => f.VendorNo);
                            columns.Bound(f => f.PostingDate).Format("{0:dd/MM/yyyy}");
                            columns.Bound(f => f.EntryType);
                            columns.Bound(f => f.UnitOfMeasureCode);
                            columns.Bound(f => f.Quantity).Format("{0:N2}").HtmlAttributes(new { style = "text-align: right;" });
                        })
                        .ToolBar(tools => tools.Excel())
                        .Excel(excel => excel
                            .FileName("MovimentiContabiliArticoli.xlsx")
                            .Filterable()
                            .AllPages(true)
                        )
                        .Sortable() // Enable sorting
                        .Pageable()
                        //.Scrollable(scrollable => scrollable.Virtual(true))

                        .DataSource(dataSource => dataSource //Configure the Grid data source.
                            .Ajax() //Specify that Ajax binding is used.
                            .PageSize(25)
                            .ServerOperation(true)
                            .Read(read => read.Action("LedgerEntries", "ItemLedgerEntry").Data("itemNoData"))
                        ).ToClientTemplate()
                        )
    </script>

    <!--Window dei dettagli dell'articolo-->
    @(Html.Kendo().Window()
            .Name("itemLedgerEntriesWindow")
            .Title("Movimenti Magazzino")
            //.LoadContentFrom("GetItemLedgerEntries", "Home")
            .Visible(false)
            //.Iframe(true)
            .Height(600)
            .Width(1100)
            //.Resizable()
            //.Draggable()
            .Modal(true)
            .Events(e=>e.Activate("onActivateIleWindow"))
        )
    <!-- << DETTAGLIO MOVIMENTI ARTICOLO-->

[Tsvetomir]

Hi Dario,

I have examined the provided code snippets and I have noticed that within the handler of the Window, there is a value() method called after the grid's instance, could you try removing it and see if it makes a difference?

        function onActivateIleWindow(e) {
            var grid = $("#ileGrid").data("kendoGrid");
            grid.resize();
        }
 

Feel free to contact me back if the issue persists.

 

Regards,
Tsvetomir
Progress Telerik