event error handler javascript Undefined.

[J]

I am trying to use the events(e => e.Error("onError") in my grid that is ajax bound.  I keep getting a javascript error "onError" is undefined.  the grid is on a partial page that is loaded via ajax call. 

when I put the script in the main view the onError function runs event if there is no error thrown.  if I put it in a document ready function  I get undefined.

not sure what to do.

index view

@model Jlo4MVC.Models.UserToSend

@{
    ViewBag.Title = "JLO";
}

<div id="userinput" class="row">
    <ul class="userrentry">
        <li>
            @Html.Label("User ID")
            @Html.Kendo().TextBox().Name("searchuserid")
        </li>
        <li>
            @Html.Kendo().Button().Name("findUser").Content("Search for Sessions").HtmlAttributes(new { @class = "k-button" })
        </li>
    </ul>
</div>
<div id="sessionsfound" class="row grid-centered" style="display:none">

</div>
<div id="status" class="row grid-centered" style="display:none">
</div>
<script type="text/javascript">

    $(document).ready(function(){
        function onError(e) {
            alert("Some Error");
        }
    })

    $('#findUser').click(function () {
        var myurl = '@Url.Action("getSessionsView", "home")';
        var model = { userID: $("#searchuserid").val() };
        $('#userinput').css("display", "none");
        $('#sessionsfound').css("display", "block");
        $.ajax({
            url: myurl,
            type: "POST",
            datatype: "html",
            data: model,
            success: function (data) {
                $('#sessionsfound').html(data);
            }
        });

    });
</script>

 

Partial view

@model Jlo4MVC.Models.UserToSend


<div>
    @(Html.Kendo().Grid<Jlo4MVC.Models.SessiondataDTO>()
        .Name("VSM_Grid")
        .NoRecords("NO Sessions Found")
        .Columns(c =>
            {
                c.Template(t => { }).ClientTemplate("<input type='checkbox' class='checkbox' />");
                c.Bound(i => i.id).Title("ID").Width(10);
                c.Bound(i => i.farmName).Title("Farm").Width(25);
                c.Bound(i => i.domainName).Title("Domain").Width(25);
                c.Bound(i => i.applicationName).Title("App Name").Width(75);
                c.Bound(i => i.serverName).Title("Server").Width(25);
                c.Bound(i => i.sessionID).Title("Session ID").Width(10);
                c.Bound(i => i.userID).Title("User ID").Width(40);
            })

        .DataSource(data => data
        .Ajax()
        .Events(events => events.Error("onError"))
        .Model(m => m.Id(p=>p.id))
        .Read(read => read.Action("sessionsread", "Home", new {userID = Model.userID})))

    )


</div>

<div id="imentry" class="userrentry-gridsession">
    <label for="tbIMnumber" class="required">Incident Number</label>
    <input type="text" id="imnum" name="tbIMnumber" class="k-textbox" placeholder="Incident num" required validationmessage="Enter a valid Incident ID" style="width: 220px;" />
</div>
<div class="kbutton-centered">
    @Html.Kendo().Button().Name("endselected").Content("End Sessions").HtmlAttributes(new { @class = "k-button" })
</div>
<div id="showErrors" style="display:none">

</div>
<script>


    var checkedvalues = [];
    var jsonObj = [];

    $(function () {
        var validator = $("#imentry").kendoValidator().data("kendoValidator");
        var myurl = '@Url.Action("SessionsEnded", "home")';

        $("#endselected").click(function () {
            if (validator.validate()) {
                var imnum = $('#imnum').val();

                var datatosend = {
                    imnumber: imnum,
                    sessionDTO: jsonObj
                };

                $('#sessionsfound').css("display", "none");
                $('#status').css("display", "block");
                $.ajax({
                    url: myurl,
                    type: "POST",
                    datatype: "html",
                    data: datatosend,
                    success: function (data) {
                        $('#status').html(data);
                    }
                });


            }

        });


        var grid = $("#VSM_Grid").getKendoGrid();
        grid.table.on("click", ".checkbox", selectRow);


    })



    function selectRow() {
        var checked = this.checked,
            row = $(this).closest("tr"),
            grid = $("#VSM_Grid").data("kendoGrid"),
            dataItem = grid.dataItem(row);
        jsonObj.push(dataItem);



        //checkedvalues[dataItem.userID] = checked;
        if (checked) {
            //-select the row
            row.addClass("k-state-selected");
        } else {
            //-remove selection
            row.removeClass("k-state-selected");
        }

    }




</script>

 

public class HomeController : Controller
   {
       [HttpGet]
       public ActionResult JLO()
       {
           UserToSend usertoSend = new UserToSend();
           return View(usertoSend);
       }


       public ActionResult sessionsread([DataSourceRequest] DataSourceRequest request, UserToSend usertosend)
       {

           List<SessiondataDTO> sdto = new List<SessiondataDTO>();
           sdto.Add(new SessiondataDTO { applicationName = "testapplication", farmName = "testFarm", domainName = "MS", id = 1, serverName = "server01", userID = usertosend.userID, sessionID = 01 });
           sdto.Add(new SessiondataDTO { applicationName = "testapplication4", farmName = "testFarm", domainName = "MS", id = 2, serverName = "server02", userID = usertosend.userID, sessionID = 18 });
           sdto.Add(new SessiondataDTO { applicationName = "testapplication3", farmName = "testFarm", domainName = "MS", id = 3, serverName = "server12", userID = usertosend.userID, sessionID = 15 });
           sdto.Add(new SessiondataDTO { applicationName = "testapplication7", farmName = "testFarm", domainName = "MS", id = 4, serverName = "server00", userID = usertosend.userID, sessionID = 8 });

           //List<SessionData> sessiondatas = new List<SessionData>();
           //FarmInterfaceserviceClient svc = new FarmInterfaceserviceClient();

           //SessiondataDTO sessiondatadto = new SessiondataDTO();

           //List<SessiondataDTO> sdto = sessiondatadto.sessiondataTOSessionDTO(svc.GetSessionData(usertosend.userID));

           DataSourceResult result = sdto.ToDataSourceResult(request);

           return Json(result, JsonRequestBehavior.AllowGet);
       }

      [HttpPost]
       public ActionResult getSessionsView(UserToSend usertosend)
       {

           return PartialView("_GetSessionsView", usertosend);
       }

[Viktor Tachev]

Hi,

The error can be observed if the Grid component is initialized when the scripts are not yet loaded.

Please add the JavaScript handler for the error event in the same partial View as the Grid component and see how the behavior changes.

Regards,
Viktor Tachev
Progress Telerik

[Jyothi]

I face the same issue. I tried different ways but keep getting javascript runtime error "onError" is undefined. The grid is inside a partial View which is loaded with a Ajax call and I have the onError method declared in the Partial View.

Strangely when I name the method as "error" instead of "onError" I don't see the error but then there is another runtime error saying object does not support "call" from Kendo.web.min.js

[Jyothi]

Update:

I moved my OnError() to the parent view from partial view and it seems to be working.

[J]

Correct, Once I did that it worked for me as well.