Sortable Panel Click event

3 posts, 0 answers
  1. JC
    JC avatar
    9 posts
    Member since:
    Jul 2017

    Posted 14 Aug Link to this post

    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. Stefan
    Admin
    Stefan avatar
    1396 posts

    Posted 16 Aug Link to this post

    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.
  3. JC
    JC avatar
    9 posts
    Member since:
    Jul 2017

    Posted 17 Aug Link to this post

    Hi Stefan,

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

    Regards,

    Jen

Back to Top