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

event error handler javascript Undefined.

4 Answers 413 Views
Grid
This is a migrated thread and some comments may be shown as answers.
J
Top achievements
Rank 1
J asked on 21 Jul 2017, 06:37 PM

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

4 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 25 Jul 2017, 02:22 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jyothi
Top achievements
Rank 1
answered on 24 Jan 2018, 06:10 PM

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

0
Jyothi
Top achievements
Rank 1
answered on 24 Jan 2018, 06:36 PM

Update:

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

0
J
Top achievements
Rank 1
answered on 24 Jan 2018, 06:45 PM
Correct, Once I did that it worked for me as well.
Tags
Grid
Asked by
J
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Jyothi
Top achievements
Rank 1
J
Top achievements
Rank 1
Share this question
or