Grid Selection event not firing

[George]

Hello all,

I have a view that contains a Kendo Grid. The grid is bound to the model, and the model is a ClaimsViewModel. The view model contains a List<Claims> and the grid is bound to the list. This currently displays a list of claims and seems to be working. I want the UI user to be able to select a single claim(row) and then view that claim detail on a detail view. I have the row selection set to single, I have the change event set to javascript that should be able to pull the claimno, and send that to an action that would pass the value to the detail view.

However, the row selection is not firing. Please help.

This is the claims View

@using ProviderPortal.ViewModels;
@using Kendo.Mvc.UI

@model ClaimsViewModel

@{
    ViewBag.Title = "SearchClaims";
    Layout = "~/Views/Shared/_Layout.cshtml";
}



        @(Html.Kendo().Grid(Model.Claims)
            .Name("Grid")
            .Events(events => events.Change("itemselected"))
            .Columns(columns =>
            {
                columns.Bound(p => p.ClaimNo).Title("Claim #").Width(130);
                columns.Bound(p => p.ServiceDt).Title("Incurred From-To").Width(150);
                columns.Bound(p => p.TotalCharge).Title("Total Charge").Width(130);
                columns.Bound(p => p.TotalPaid).Title("Pd Amt").Width(130);
                columns.Bound(p => p.Name).Title("Patient Name").Width(230);
            })
            .Scrollable()
            .Selectable(selectable => selectable
                 .Enabled(true)
                 .Mode(GridSelectionMode.Single)
                 )
            .PersistSelection(true)
            .Navigatable()
            .HtmlAttributes(new { style = "height: 700px;" })
            
            .DataSource(dataSource => dataSource
                .Server()
                .Model(m => { m.Id(p => p.ClaimNo); })
                )
           )

    
<script type="text/javascript">

    function itemselected(e) {
        var selectedRow = this.select();
        var dataItem = this.dataItem(selectedRow);
        var id;
        id = dataItem.ClaimNo;

        window.location.href = "@Url.Action( "Claims", "DisplayClaim")" + "?ClaimID=" + id;
    }
</script>

 

Here is the Controller

public class ClaimsController : Controller
	{

		// GET: Claims
		public ActionResult Index()
		{
			return View();
		}

		[HttpPost]
		public ActionResult SearchClaims(string FromDt, string ToDt, string PatAcct, string policynumber, string GrpNo, string ClientCode, string ProvTaxID)
		{
			CIAWebService.CIAServiceClient wref = new CIAWebService.CIAServiceClient();
			var viewModel = new ClaimsViewModel();			
				try
				{
					if (String.IsNullOrEmpty(ProvTaxID)) { ProvTaxID = Session["ProvTaxId"].ToString(); }
					var MMDarray = wref.MemberLookup("P", policynumber, "G", null, null, null, null);
					if (MMDarray.Length > 0)
					{
					Session.Add("MemberData", MMDarray[0]);
						var claimHeader = wref.ClaimHeader(Int32.Parse(MMDarray[0].SeqNum), MMDarray[0].DependentCode, MMDarray[0].DB, GrpNo, "C", null, DateTime.Parse(FromDt), DateTime.Parse(ToDt), ProvTaxID);
						for (int i = 1; i < claimHeader.Length; i++)
						{
							if (claimHeader[i].PatAcct == PatAcct)
							{
								viewModel.Claims.Add(BuildClaimsModel(MMDarray[0], claimHeader[i]));
							}
						}
					}
				}
				catch (Exception Ex)
				{
					Log4.Error("ClaimsController - SearchClaims:", Ex);
					ViewBag.ErrMessage = "Error: " + Ex.ToString();
				}

			HttpContext.Session.Add("ClaimsList", viewModel.Claims);
			return View(viewModel);
		}
}

 

and here is the view model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ProviderPortal.ViewModels
{
	public class ClaimsViewModel: BaseViewModel
	{
		public List<ClaimData> Claims { get; set; }

		public ClaimsViewModel()
		{
			Claims = new List<ClaimData>();
		}
	}
}

[George]

I found the problem. 

Turns out it was .js file ordering issue.

This was an existing Net Framework 4.6 MVC C# project. I added the Telerik MVC components to the project using the "Convert to Telerik Application" feature on the project menu.

This added the needed references and it all appeared to be working. However, as I used the F12 (developer Tools) command in the browser, I noticed bootstrap.min.js and jquery.min.js errors.

Further research showed me that the Jquery js file needs to be listed first, then the Bootstrap js file, and then the Telerik js files could be listed after.

So after fixing them on the _layout.cshtml page, it still wasn't working.

then I found that if the JQuery js file is listed twice, and the second one is after the Telerik js files, then that would also cause issues. So I removed the second reference to the jQuery js file which was in a _scripts.cshtml file at the bottom of the _layout.cshtml file and everything started working perfectly.

[Lance | Senior Manager Technical Support]

Hi George. Yes, you cannot load jQuery twice. the function definitions in the 2nd one clash with the one that is already loaded. This essentially breaks everything.

Additionally, always load jQuery first, this is because Kendo UI (the web components behind the MVC wrappers) are jQuery widgets. If the components are listed first, then they cannot be initialized. If you're curious, you can find more information about that topic here => First Steps.