This is a migrated thread and some comments may be shown as answers.

Get Data Item from Button in Template

3 Answers 307 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 2
Iron
Iron
Iron
Joel asked on 16 Dec 2020, 07:59 PM

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, "&");
    }

 

3 Answers, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 21 Dec 2020, 12:16 PM

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:

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

 

Kind Regards,
Anton Mironov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Joel
Top achievements
Rank 2
Iron
Iron
Iron
answered on 04 Jan 2021, 04:05 PM

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]);
 
...
0
Accepted
Anton Mironov
Telerik team
answered on 07 Jan 2021, 12:12 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ListBox
Asked by
Joel
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Anton Mironov
Telerik team
Joel
Top achievements
Rank 2
Iron
Iron
Iron
Share this question
or