Resize grid into a window with template

4 posts, 1 answers
  1. Dario
    Dario avatar
    40 posts
    Member since:
    Jun 2018

    Posted 28 Apr 2020 Link to this post

    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?

  2.
  3. Answer
    Tsvetomir
    Admin
    Tsvetomir avatar
    796 posts

    Posted 01 May 2020 Link to this post

    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.
  5. Dario
    Dario avatar
    40 posts
    Member since:
    Jun 2018

    Posted 04 May 2020 in reply to Tsvetomir Link to this post

    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-->
  7. Tsvetomir
    Admin
    Tsvetomir avatar
    796 posts

    Posted 06 May 2020 Link to this post

    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.
  8.
Back to Top