Nested Kendo Grid (details) into Kendo Window

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

    Posted 23 Apr 2020 Link to this post

    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?

     

  2. Answer
    Martin
    Admin
    Martin avatar
    299 posts

    Posted 28 Apr 2020 Link to this post

    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

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

    Posted 28 Apr 2020 in reply to Martin Link to this post

    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?

  4. Answer
    Plamen
    Admin
    Plamen avatar
    3079 posts

    Posted 30 Apr 2020 Link to this post

    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

    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