Hey, I'm trying to sort the data in the MultiSelectFor, so it can be displayed in alphabetical order.

                            @(Html.Kendo().MultiSelectFor(model => model.UserIds)
                                .HtmlAttributes(new { @class = "large" })
                                .Placeholder("Select users ...")
                                .DataValueField("Value")
                                .DataTextField("Text")
                                .AutoClose(false)
                                .DataSource(.DataSource(ds => ds.Read("AvailableUsers", "UserApi"))
                                 )

I've searched for this issue and tried some suggested things but with no success: 

                            @(Html.Kendo().MultiSelectFor(model => model.UserIds)
                                .HtmlAttributes(new { @class = "large" })
                                .Placeholder("Select users ...")
                                .DataValueField("Value")
                                .DataTextField("Text")
                                .AutoClose(false)
                                .DataSource(ds => ds.Custom()
                                            .Transport(t => t
                                                .Read(r => r
                                                    .Action("AvailableUsers", "UserApi")
                                                    .Data("{ any: false }")
                                                )
                                            )
                                            .Sort(s => s
                                                .Add("Value")
                                                .Descending()
                                            ))
                                
                            )

 public JsonResult AvailableUsers()
 {
     var userRepo = new UserRepository(ntfy);
    var result = userRepo.GetAll().Select(_ => new SelectListItem
           {
                Text = string.Format("{0} ({1} {2})", _.Username, _.Firstname, _.Lastname),
                Value = _.Id.ToString()
           });
     return this.Json(result, JsonRequestBehavior.AllowGet);
 }

Hi,

I have a Kendo grid on a page that is created using this code in my cshtml file

 @(Html.Kendo().Grid<Entity>()
        .Name("productsGrid")
        .Columns(columns =>
        {
            columns.Bound(schema => schema.Ns).Width(150)
                .Filterable(false).Sortable(false);
            columns.Bound(schema => schema.Name).Title("Entity Name").Width(250);
            columns.Bound(schema => schema.Desc).Title("Description")
                .ClientTemplate("#= preserveDirtyFlag(data, data.Desc) #")
                .Filterable(false).Sortable(false);
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(true)
            .PageSize(100)
            .Model(model =>
            {
                model.Id(entity => entity.Id);
                model.Field(entity => entity.Ns).Editable(false);
                model.Field(entity => entity.Name).Editable(false);
                model.Field(entity => entity.Desc);
            })
            .Read(read => read.Action("GetEntityList", "Products").Data("getQuery"))
            .Events(e => e.RequestStart("onPageChange"))
        )
        .Events(e => e.DataBound("onDataBound"))
        .ClientDetailTemplateId("fieldDescriptions")
)

Everything works perfectly fine on first load. 

The pagination works perfectly (have removed the code for that from above). Even the filtering works smoothly. super smooth.

The only issue is with sorting. 

---

As the code shows that sorting is enabled on the single column: 'Entity name'

As soon as that column title is clicked in order to sort the data, the browser redirects to a new URL

earlier it was at

/CatalogManager/Descriptions

but after clicking on the 'Entity Name' in order to sort that table, it redirects to:

/CatalogManager/Descriptions/GetEntityList?sortField=Relevancy&sortFieldValue=_score&descriptionsGrid-sort=Name-desc

and then shows the pure JSON output that the GetEntityList controller returns instead of rendering in the grid.

Why does filtering and pagination work well but sorting breaks the page?

---

The amazing thing is, if I remove the '/GetEntityList' from the url manually and just navigate to:

/CatalogManager/Descriptions?sortField=Relevancy&sortFieldValue=_score&descriptionsGrid-sort=Name-desc

Then the table is displayed in its full glory sorted by the required field. So they question is, why does it navigate to the API url and display the raw JSON data in the first place?

I have a project that uses Kendo UI version 2019 R3 SP 1.

I got some issues when I do the sorting on the content that contains rich text editor (RTE).

I made some demo in the dojo (https://dojo.telerik.com/@septovan_nalysa/IsEgIxAQ)

You can open the demo try to move one of 2 contents.

The issues are the RTE that you moved:

1. becomes like a read-only/disabled field;

2. has empty value.

I tried to change the Kendo UI version 2021 R1 SP2 but I'm still facing the same issues.

Does anyone can help me?
Thanks.

In the attached below, I don't want an Empty to be dragged to another Empty.   But anything else is allowed.

Is there an undo event?

Thanks

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?