Get Data Item from Button in Template

[Joel]

I have a ListBox with a Row Template that contains a Button.  There is no guarantee that the user will press the button for the "selected" item in the ListBox.  So, I need to capture the Data Item in the ListBox that is related to the button that was pressed.  How do I accomplish this?  

Thanks for your help, 

Joel

Note:  My goDetail script currently just grabs the listBox control and posts for the selected item.  It doesn't post based on the Row that contained the Button that fired the event.

        <div class="container">
            @(Html.Kendo().ListBox()
                .Name("listBox")
                .DataTextField("Name")
                .DataValueField("Id")
                .DataSource(source =>
                    source.Read(read =>
                        read.Action("IndexJson", "SessionOptionTemplates").Data("gridGetData"))
                )
                .TemplateId("item-template")
                .Toolbar(toolbar =>
                {
                    toolbar.Position(ListBoxToolbarPosition.Right);
                    toolbar.Tools(tools => tools
                        .MoveUp()
                        .MoveDown()
                        .Remove()
                        );
                })
                .Events(events => events
                    .Reorder("onReorder")
                    .Remove("onRemove"))
                .HtmlAttributes(new { style = "height:550px;width:530px" })
                .BindTo(new List<SessionOptionTemplate>()))
        </div>
    </div>
</div>

<script id="item-template" type="text/x-kendo-template">
    <span><input type="submit" value="Details" class="btn" onclick="goDetail()" style="margin:5px" /></span>
    <span class="k-state-default" style="margin-left:10px"><h5>#: data.Name #</h5><p>#: data.Description != null ? data.Description : '' #</p></span>
</script>

    function goDetail(e) {
        //alert("goDetail");

        var listbox = $("#listBox").data("kendoListBox");
        var element = listbox.select();
        var dataItem = listbox.dataItem(element[0]);

        var url = '@Url.Action("Details", "SessionOptionTemplates")?id=' + dataItem.Id + '@Model.GetUrlParameters()';

        // Replace & with & as the above encoding step changes & to &.
        window.location.href = url.replace(/&/g, "&");
    }

 

[Anton Mironov]

Hello Joel,

Thank you for the provided code snippet.

In order to get the dataItem for the currently selected button, I would recommend using the current target in the event handler. Here is an example:

var detailsTemplate = kendo.template($("#template").html());

The following approach demonstrates the implementation and behavior for a Kendo UI Grid, that also could be used for Kendo UI ListBox:

• https://demos.telerik.com/aspnet-core/grid/custom-command

Give a try to the approach above and let me know if further assistance is needed.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Joel]

The solution you provided has little to do with the scenario I presented.  I am using a ListBox; not a Grid.  I have a button but the behavior behind the button that I am after was not addressed.

But, this is what I was after:

    function onReorder(e) {
        //alert("onReorder");

        $("#isbusy").show();

        var dataSource = e.sender.dataSource;
        var element = e.sender.select();
        var dataItem = e.sender.dataItem(element[0]);

...

[Anton Mironov]

Hi Joel,

I took a step back to look at the initial requirement and still think that the provided demo should achieve the requirement. Feel free to correct me if I misunderstood something. For this case try the following:

    function showDetails(e) {
        e.preventDefault();

        var detailsTemplate = kendo.template($("#template").html());
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");

        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();
    }

Again, apologize if the requirement is another. Try the approach above and let me know if further assistance is needed.

If the needed implementation is another, in order to save time and resolve this one quickly for you, it will be great if I could receive more details and a runnable sample project in this thread. 

Thank you for your patience!

Best Regards,
Anton Mironov
Progress Telerik