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

Bind to DataSource MVC Read

2 Answers 16 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 15 Dec 2020, 11:41 PM

I am able to get data from the source.Read method as pictured.  However, the control doesn't display back the data.

Once I get that working, I need to post changes to the item order.  If I have:

  1. a
  2. b
  3. c

Then I move c up one:

  1. a
  2. c
  3. b

How do I capture the position of c and the position of b to update the database using the Order property?  I assume I capture the onReorder event.  

    public partial class Option
    {
        public int Id { get; set; }
 
        [MaxLength(50)]
        public string Name { get; set; }
        [MaxLength(128)]
        public string Description { get; set; }
 
        public int Order { get; set; }
...
@(Html.Kendo().ListBox()
    .DataTextField("Name")
    .DataValueField("Id")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("IndexJson", "SessionOptionTemplates").Data("gridGetData");
        });
    })
    .Toolbar(toolbar =>
    {
        toolbar.Position(ListBoxToolbarPosition.Right);
        toolbar.Tools(tools => tools
            .MoveUp()
            .MoveDown()
            .Remove());
    })
    .Events(events => events
        .Remove("onRemove")
        .Reorder("onReorder")
    ))

 

Thanks in advance for your help, Joel

2 Answers, 1 is accepted

Sort by
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 15 Dec 2020, 11:45 PM

IndexJson looks like this:

...pull data from db
            response = await sessionOptionTemplateClient.GetAllAsync();
 
            if (response.IsSuccess)
            {
                ICollection<optionTemplate> sessionOptionTemplates =
                    response.Result.OrderBy(
                            x => x.IsActive)
                        .ThenBy(x => x.Order)
                        .ToList();
 
                var dsResult =
                    await sessionOptionTemplates.ToDataSourceResultAsync(request);
                return Json(dsResult);
            }
            else
            {
                log.LogError(response.Message);
                return CustomResponseToError(response);
            }
0
Accepted
Georgi Denchev
Telerik team
answered on 18 Dec 2020, 02:35 PM

Hi Joel,

Thank you for the provided details.

You are correct, the Reorder event can be used in this situation. Here is an example on how to get the Order value of the item that you moved, as well as the item below or above it.

function onReorder(e) {
    // Get the current item .
    let currentItem = e.dataItems[0];
    let currentItemOrder = currentItem.Order;
    // Get the item below or above.
    let swappedItemPosition = this.dataSource.indexOf(currentItem) + e.offset;
    let swappedItem = this.dataSource.at(swappedItemPosition);
    let swappedItemOrder = swappedItem.Order;
    // Perform any other actions and save the updated Order to the database.
}

You can also check the following Knowledge Base article which describes how to change the order inside the DataSource without a property.

Let me know if you have any questions.

Best Regards,
Georgi Denchev
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 1
Veteran
Iron
Iron
Answers by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Georgi Denchev
Telerik team
Share this question
or