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

Resize grid into a window with template

3 Answers 336 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dario
Top achievements
Rank 1
Veteran
Dario asked on 28 Apr 2020, 02:44 PM

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?

3 Answers, 1 is accepted

Sort by
0
Accepted
Tsvetomir
Telerik team
answered on 01 May 2020, 08:46 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Dario
Top achievements
Rank 1
Veteran
answered on 04 May 2020, 06:49 AM

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-->
0
Tsvetomir
Telerik team
answered on 06 May 2020, 10:10 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Dario
Top achievements
Rank 1
Veteran
Answers by
Tsvetomir
Telerik team
Dario
Top achievements
Rank 1
Veteran
Share this question
or