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

Sortable Panel Click event

2 Answers 20 Views
Sortable
This is a migrated thread and some comments may be shown as answers.
JC
Top achievements
Rank 1
JC asked on 14 Aug 2017, 02:32 PM

Hi,

I am trying to get a click event on my sortable panels and I am not having the best of luck. Basically I have 3 columns (i.e. #main-content1) that can have 1 - 4 panels in each column and I need to go to a specific page based on what panel is clicked.

I am using the following:
@(Html.Kendo().Sortable()
.For("#main-content1")
.ConnectWith("#main-content2,#main-content3")
.Cursor("move")
.PlaceholderHandler("placeholder")
.HintHandler("hint")
)
@(Html.Kendo().Sortable()
.For("#main-content2")
.ConnectWith("#main-content1,#main-content3")
.Cursor("move")
.PlaceholderHandler("placeholder")
.HintHandler("hint")
)
@(Html.Kendo().Sortable()
.For("#main-content3")
.ConnectWith("#main-content1, #main-content2")
.Cursor("move")
.PlaceholderHandler("placeholder")
.HintHandler("hint")
)

 
This is what I am using to render the tiles:
@helper renderTiles(IPublishedContent Section)
{
var title = Section.GetPropertyValue<string>("Title", String.Empty);
var link = Section.GetPropertyValue<string>("link", String.Empty);
var id = Section.GetPropertyValue("Icon", -1);
<div id = "blogs" class="widget">
<h3>@title<span class="collapse k-icon k-i-arrowhead-n"></span></h3>
<div class="widget-image">
@if(ImageId != -1)
{
<img src="@Umbraco.TypedMedia(id).Url" alt="=@Umbraco.TypedMedia(id).Name"/>
}
</div>
</div>
}



I have tried the following:
$(document).ready(function ()
{
$("#blogs").on("click", function (e)
{
alert("Hello");
});
}

But I only get an alert on the first panel in the first column.

Any ideas/pointers would be appreciated.
Thanks

2 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 16 Aug 2017, 08:35 AM
Hello Jen,

Thank you for the provided information.

I made an example based on the provided details and the click is successfully fired when clicked on one of the panels.

If the issue still occurs, please use the attached example as a reference and modify it in order to reproduce the issue, as this will help us to provide a suggestion best suited for it.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
JC
Top achievements
Rank 1
answered on 17 Aug 2017, 08:02 AM

Hi Stefan,

Thank you for your reply, this has been a great help.

Regards,

Jen

Tags
Sortable
Asked by
JC
Top achievements
Rank 1
Answers by
Stefan
Telerik team
JC
Top achievements
Rank 1
Share this question
or