How to using Windows.LoadContentFrom with parameters

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

    Posted 22 Apr 2020 Link to this post

    Hi to all,

    I would create a colum custom to open a window that contains details (related table about relative row).

    I red Loading External Form and I'm thinking to use this approach.

    But I would pass a key of my row, so that I could retrieve details rows and show in a modal window.

    @(Html.Kendo().Window()
                .Name("ItemLedgerEntries")
                .Title("Movimenti")
                .LoadContentFrom("GetItemLedgerEntries", "Home").Additional("#= ItemNo #") //is my hope......
                .Iframe(true)
                .Resizable()
                .Draggable()
                .Modal(true)
            )

     

    How can I pass a key to window?

  2. Dario
    Dario avatar
    40 posts
    Member since:
    Jun 2018

    Posted 22 Apr 2020 Link to this post

    I have a news

    Click a custom column that should show details

    columns.Command(command => command.Custom("ItemLedgerEntryCommand").Text(" ").IconClass("k-icon k-i-arrow-drill").Click("showDetails"));

     

    function showDetails(e) {
                e.preventDefault();
     
                var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                var wnd = $("#ItemLedgerEntries").data("kendoWindow");
     
                var detailsTemplate = kendo.template($("#ileTemplate").html());
                wnd.content(detailsTemplate(dataItem));
                wnd.center().open();
            }

    After that get a key and inject value to kendo template and send to kendo window

    @(Html.Kendo().Window()
                .Name("itemLedgerEntries")
                .Title("Movimenti (DATI DEMO)")
                .Visible(false)
                .Height(600)
                .Width(1100)
                .Resizable()
                .Modal(true)
            )
    <script type="text/x-kendo-template" id="ileTemplate">
        <div id="details-container">
            <div>
                <div hidden id="itemNoKey">#= No #</div>
                @(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.
                        .Read(read => read.Action("LedgerEntries", "ItemLedgerEntry").Data("itemNoData"))
                    )
                    )
     
     
     
            </div>
        </div>
    </script>
     
    <script>
        function itemNoData(e) {
     
            var itemNoGet = $("#itemNoKey").value();
            alert(itemNoget);
            return {
                itemNo: itemNoGet
            }
        }
    </script>

     

     

    but window not appears! Wher I wrong?

     

  3. Petar
    Admin
    Petar avatar
    472 posts

    Posted 27 Apr 2020 Link to this post

    Hi Dario,

    Based on the provided code I would assume that the Window component is not opening because in the showDetails function we take reference to a Window with id ItemLedgerEntries but the name of the defined component is itemLedgerEntries. The casing of the first letter is different resulting in the inability to take reference and open the Window component. 

    Another thing that has to be added to the provided code is the .ToClientTemplate() configuration that is missing for the Grid inside the "ileTemplate" template. To achieve the targeted functionality, the definition should be like this:

    <script type="text/x-kendo-template" id="ileTemplate">
        <div id="details-container">
            <div>
                <div hidden id="itemNoKey">#= No #</div>
                @(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.
                        .Read(read => read.Action("LedgerEntries", "ItemLedgerEntry").Data("itemNoData"))
                    )
                    .ToClientTemplate()
                    )
            </div>
        </div>
    </script>

    I hope the above will help you resolve the issue. Let me know if you have additional questions related to the current case. 

    Regards,
    Petar
    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.
  4. Dario
    Dario avatar
    40 posts
    Member since:
    Jun 2018

    Posted 27 Apr 2020 in reply to Petar Link to this post

    Thank you Petar,

    I corrected code by your suggestions, but I have the same problems.

    Actually I have this code, if I remove HTML Helper of grid into template, window shows, but If I insert again HTML Helper, windows not shows.

    [...]
    //Main grid shows products list
    //User click on this button to open details of 1 product
    columns.Command(command => command.Custom("ItemLedgerEntryCommand").Text(" ").IconClass("k-icon k-i-arrow-drill").Click("showDetails"));
    [...]
     
    @(Html.Kendo().Window()
        .Name("itemLedgerEntries")
        .Title("Movimenti (DATI DEMO)")
        .LoadContentFrom("GetItemLedgerEntries", "Home")
        .Visible(false)
        .Iframe(true)
        .Height(600)
        .Width(1100)
        .Resizable()
        .Draggable()
        .Modal(true)
        .Events(e=>e.Activate("onActivateIleWindow"))
    )
             
    <script type="text/x-kendo-template" id="ileTemplate">
        <div id="details-container">
            <div>
                <div hidden id="itemNoKey">#= No #</div>
                <div>
                    @(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.
                            .Read(read => read.Action("LedgerEntries", "ItemLedgerEntry").Data("itemNoData"))
                        ).ToClientTemplate()
                        )
                </div>
         
            </div>
        </div>
    </script>
     
    <script>
     
    //Called by details grid (it contained by Telerik Window)
    function itemNoData(e) {
        e.preventDefault();
        var itemNoGet = $("#itemNoKey").value();
        //alert(itemNoget);
        return {
            itemNo: itemNoGet
        }
    }
     
     
    [...]
    //Called by custom command of main grid
    function showDetails(e) {
        e.preventDefault();
     
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#itemLedgerEntries").data("kendoWindow");
     
        //alert("Codice Articoli: " + dataItem.No);
     
        var detailsTemplate = kendo.template($("#ileTemplate").html());
        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }
    [...]
     
    </script>
  5. Answer
    Petar
    Admin
    Petar avatar
    472 posts

    Posted 30 Apr 2020 Link to this post

    Hi Dario,

    Attached to my reply you will find a runnable project that uses the provided Grid configuration and Window template but another DataModel. 

    You will notice that in addition to my comments in the previous reply, I've also modified the itemNoData function as follows:

        function itemNoData(e) {
            //e.preventDefault();
            var itemNoGet = $("#itemNoKey").val();
            //alert(itemNoget);
            return {
                itemNo: itemNoGet
            }
        }

    Commented the e.preventDefault() method and changed value() to val() as the last one is the valid jQuery method for getting the value of the itemNoKey hidden input.  

    The attached example doesn't have an implementation of a controller that returns data based on the passed itemNo variable but if you open the network tab of your browser, you will see that the variable is being sent.

    Regards,
    Petar
    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.
Back to Top