Hello, when using a sortaable list is it possible to ignore more than one type of input?  Here is my code:

As you can see I have defined "ignore" to pass over input fields so that the user can still enter data, I have other elements though which I need it to ignore.  Can you define multiple elements for the sortable list to ignore?

Thanks

Hi,

I was hoping someone could help me with the issue I have in storing the order of sortable panels within the local storage.

Here is some example code I am using:

-----------------------------------------------------------------------------------------

.........

string name = string.Format("main-content{0}", colCounter);
<div id = "@name" >
      @{
              foreach (var colItem in cols)
              {            
                    @renderTiles(colItem);
               }

          }
</div>

..................

@(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")
        )

.............
        <script>
            var localStorageSupport = (('localStorage' in window && window['localStorage'] !== null)),
           data,
           html;

            if (localStorageSupport) {
                data = JSON.parse(localStorage.getItem("sortableData"));             
            } else {
                alert("your browser does not support local storage");
                  }

            $(document).ready(function ()
            {
                 $('.widget').click(function (e) {
                    window.location.href = $(e.target).attr('href');
                })

                 $('.widget').change(function (e) {
                     var item = data.splice(e.oldIndex, 1)[0];
                     data.splice(e.newIndex, 0, item); 
                     localStorage.setItem("sortableData", kendo.stringify(data))
                 })
       
            })
  </script>

@helper renderTiles(IPublishedContent Section)
{
var title = Section.GetPropertyValue<string>("tiitle", String.Empty);
var icon = Section.GetPropertyValue<string>("icon", String.Empty);
int intLink = Section.GetPropertyValue<int>("intLink", 0);
var extLink = Section.GetPropertyValue<string>("extLink", String.Empty);
var imgId = Section.GetPropertyValue("icon", -1);
var Url = string.Empty;

if (@intLink == 0 && @extLink.Length > 0)
{
    Url = @extLink;
}
else if (@intLink != 0 && @extLink.Length == 0)
{
    Url = Umbraco.NiceUrl(@intLink);
}
        <div id="panes" class="widget" header="@title" href="@Url">
            <div header="@title" href="@Url">
                @title
                <div class="widget-image" header="@title" href="@Url">
                    @if (imgId != -1)
                    {
                        <img src="@Umbraco.TypedMedia(imgId).Url" alt="=@Umbraco.TypedMedia(imgId).Name" title="@title" header="@title" href="@Url" />
                    }
                </div>
            </div>
        </div>
}

I have looked at the following:

http://docs.telerik.com/kendo-ui/controls/interactivity/sortable/overview

http://docs.telerik.com/kendo-ui/controls/interactivity/sortable/how-to/persist-order-in-localstorage

http://www.telerik.com/forums/saving-sortable-state

These do make sense but I am having a bit of a senior moment with what I am trying to do.

Many thanks.

J

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

when i Integrate sortable with listview,I found that when editable,the textbox cannot focus with mouse,only can use tab focus

the listview like this:

    @(Html.Kendo().ListView<txlcinfo.Web.Areas.Institute.Models.UserModel>()
                .Name("AllUserView")
                .TagName("div")
                .ClientTemplateId("UserTemplate")
                .DataSource(dataSource =>
                {
                    dataSource.Create(create => create.Action("Users_Create", "Home"));
                    dataSource.Read(read => read.Action("Users_Read", "Home"));
                    dataSource.Destroy(destory => destory.Action("Delete_User", "Home"));
                    dataSource.Model(model => { model.Id("ID"); });
                })                
                .Editable(edt=>edt.TemplateName("UserModelTemplate"))
                )
    @(Html.Kendo().Sortable()
    .For("#AllUserView")
    )
and the template like this :

@model txlcinfo.Web.Areas.Institute.Models.UserModel
    <div class="product UserPanel list-view-container" style="width:240px;margin:5px;" data-bind="#:ID#" data-id="#:isSelected#" data-old-id="#:isSelected#">
        <div class="row" style="margin:9px;margin-top:15px;">
            <label for="Name" class="select-period">名字</label>
            @(Html.EditorFor(p => p.Name))
            <!-- ProductName validation message placeholder -->
            <span data-for="Name" class="k-invalid-msg"></span>
        </div>
        <div class="row" style="margin:9px;">
            <label for="Name" class="select-period">性别</label>
            @(Html.Kendo().TextBoxFor(p => p.Male))
            <!-- ProductName validation message placeholder -->
            <span data-for="Male" class="k-invalid-msg"></span>
        </div>
        <div class="row" style="margin:9px;">
            <label for="PhoneNum" class="select-period">电话</label>
            @(Html.EditorFor(p => p.PhoneNum))
            <!-- ProductName validation message placeholder -->
            <span data-for="Name" class="k-invalid-msg"></span>
        </div>
        <div class="edit-buttons row" style="margin:10px;float:right;">
            <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>保存</a>
            <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>取消</a>
        </div>
        <div class="row" style="margin:5px;"></div>
        </div>
the result is the textbox cannot focus with mouse ,only can focus with ‘tab' key?

Hello,

Is it possible to drag & drop multiple items from one listview to another at once?

I then had a requirement to be able to 'order' and save the order of the rows. I decided to use the Sortable - again this was fine I could drag the rows and then on the onChange event of Sortable I updated the Grid datasource Order numbers. All good!
However when I attempt to edit a cell I run into problems which I'll detail below:

1. String\Text cell:
   1. dosnt retain the updated value or have the 'dirty' graphi iin top left of cell
   2. wont allow me to mouse click the right of the cell text - i have to use the arrow keys to append to the text.
2. Numeric cell: cant use the spinners to update the number

On the Sortable widget I tried different variations of .Filter(), .Handler() etc.. but couldnt get  it working properly. My Sortable code is below: