Nested Kendo Grid (details) into Kendo Window

[Dario]

I saw demo about custom command, where it shows details into a Telerik Windows (modal).

We suppose thatwe have product list, and we want obtain ledger entries relative.

I met a problem to pass the Product ID to grid that I want to use for filter ledger entries.

I try to insert a TAG Helper into kendo template

<script type="text/x-kendo-template" id="template">

    <div id="details-container">

         <div>

        <h2>#= description #</h2>

        <em>#= ID #</em>

      </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(new {itemNo: #= ID #})) //How can I do this????
)
)

    </div>

</script>

 

but it not "receives" Produc ID.

Where I wrong?

 

[Martin]

Hello Dario,

Thank you for the code snippet.

In order to pass additional data to the controller, you can implement a simple JS Function as shown below:

.Read(read => read.Action("LedgerEntries", "Home").Data("sendData")) //How can I do this????

function sendData() {
    return {
        itemNo: 1
    };
}

Attached you will find a small project to demonstrate the above. I have used a hardcoded value instead of ID as I am not sure where is it coming from.

Let me know if you have any further questions.

Regards,
Martin
Progress Telerik

[Dario]

Thank you martin, but this approach I already know it.

The problem is that this grid is contained by a text/x-kendo-template tag, other JS script set template data into this text/x-kendo-template.

For this reason before grid is <em>#= ID #</em> tag also.

Then I need to "set" this data #= ID # AS additional data to Read grid method.

How can I "get" value of ID variables and inject into a grid action called by Read method?

[Plamen]

Hello,

Thank you for elaborating the issue.

Since sendData is a javascript function you can find the 'em' element on the DOM with jQuery in it,  get its content and use it as a value for your filter logic. 

Hope this will help you solve the issue.

Regards,
Plamen
Progress Telerik