How to using Windows.LoadContentFrom with parameters

[Dario]

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?

[Dario]

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?

 

[Petar]

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

[Dario]

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>

[Petar]

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