Bind to DataSource MVC Read

[Joel]

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

[Joel]

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);
            }

[Georgi Denchev]

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