event error handler javascript Undefined.

5 posts, 0 answers
  1. J
    J avatar
    8 posts
    Member since:
    Sep 2014

    Posted 21 Jul 2017 Link to this post

    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);
           }
  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2480 posts

    Posted 25 Jul 2017 Link to this post

    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.
  3. Jyothi
    Jyothi avatar
    2 posts
    Member since:
    Dec 2015

    Posted 24 Jan 2018 Link to this post

    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

  4. Jyothi
    Jyothi avatar
    2 posts
    Member since:
    Dec 2015

    Posted 24 Jan 2018 Link to this post

    Update:

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

  5. J
    J avatar
    8 posts
    Member since:
    Sep 2014

    Posted 24 Jan 2018 in reply to Jyothi Link to this post

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