Kendo DropdownList MVC bind JS function on Read Success

Question

I am using Kendo ASP.NET MVC and have a Html.Kendo().DropDownListFor control with DataSource. The DataSource is binded in cshtml file. I need to capture the success event of read in jquery. In Kendo Jquery we can have something as follows.

        read: {
            url: "/Test/GetById",                
            success: function(result) {
                //custom code;
            }
        }

How can I have the same thing in MVC control.

            Html.Kendo().DropDownListFor(model => model.Prop)
            .DataTextField("Field")
            .DataValueField("Id")
            .DataSource(dataSource =>
            {
            dataSource.Read(read => read.Action("Action", "CTRL"));
            });
            

Is there any event that I should capture.

Answer 1

The requestEnd and the error events can be used for this. If for some reason your read method fails, the error event will be triggered. Otherwise, the requestEnd event will be triggered. You can then check for type in the event data to be equal to read, meaning the Read method successfully finsihed.

Here is an example:

<script>
    function onError(e) {
        console.log(e.status) // displays "error";
    },

    function onRequestEnd(e) {
        if (e.type === "read") {
            // Read method successfully finished
        }
    }
</script>

@(Html.Kendo().DropDownList()
  .Name("products")
  .DataTextField("ProductName")
  .DataValueField("ProductID")
  .DataSource(source => 
  {
      source.Read(read => read.Action("RemoteDataSource_GetProducts", "DropDownList"));
      source.Events(events => events.Error("onError").RequestEnd("onRequestEnd"));
  })
)

Take a look at the configuration page for kendo.data.DataSource to get more info on events.