Grid.MVC accessing row.dataItem.dataItem with JQuery

0

I'm using GridMVC to display a list of employerlocations and their address. ViewModel has a list of EmployerLocations called AllEmpLocations and within each EmployerLocation there is the Address model.

I'm able to bind this model to the grid and the address lines display on the screen but when I use Jquery to set the value of a text box based on the e.row.Address.AddressLine1,

0x800a138f - JavaScript runtime error: Unable to get property 'AddressLine1' of undefined or null reference

However if I inspect e.row.Address.AddressLine1 it is populated using the debugger

View

   <div class="col-md-12">

                        @Html.Grid(Model.AllEmpLocations).Named("employerLocationGrid").Columns(columns =>
                    {
                        columns.Add(item => item.EmpLocationID)
                            .Titled("EmployerLocationID")
                            .Css("grid-employerID")
                            .SetWidth("20px")
                            .Sortable(true);
                        columns.Add(item => item.Name)
                            .Titled("Name")
                            .Sortable(true).Filterable(true);
                        columns.Add(item => item.areaID, true);
                        columns.Add(item => item.Address.ID, true);
                        columns.Add(item => item.Alias)
                            .Titled("Alias");
                        columns.Add(item => item.Address.NameNumber)
                            .Titled("Name/Number");
                        columns.Add(item => item.Address.AddressLine1)
                            .Titled("Address Line 1");
                        columns.Add(item => item.Address.AddressLine2)
                            .Titled("Address Line 2");
                        columns.Add(item => item.Address.PostCode)
                            .Titled("Post Code");
                        columns.Add(item => item.Address.PhoneNumber)
                            .Titled("Tel No.");
                        columns.Add(item => item.Address.Town)
                            .Titled("Town")
                            .Sortable(true).Filterable(true);
                        columns.Add(item => item.Address.County)
                            .Titled("County")
                            .Sortable(true).Filterable(true);

                    }).WithPaging(10)

                    </div>

<script>
    $(function () {

        pageGrids.employerLocationGrid.onRowSelect(function (e) {
            debugger

            //add values to textboxes from model
            $('#NewLocation_Name').val(e.row.Name); //this works
            $('#NewLocation_Address_AddressLine1').val(e.row.Address.AddressLine1); //this errors Address is    
            $('#SubmitLocationBtn').val("Update");

        });
    });
</script>

AllEmpLocation Model

public int? EmpLocationID { get; set; }
    public string EmployerID { get; set; }
    public string EmployerName { get; set; }
    public string Alias { get; set; }
    [DisplayName("Location Name")]
    [Required()]
    public string Name { get; set; }
    public string areaID { get; set; }
    public string areaName { get; set; }
    [DisplayName("Area")]
    public IEnumerable<PlussAreaDisplayModel> AllAreas { get; set; }
    public AddressDetailsDisplayModel Address { get; set; }

Address Model

 public class AddressDetailsDisplayModel
{
    public string ID { get; set; }
    [DisplayName("Date From")]
    [DisplayFormat(DataFormatString = "{0:D}")]
    public DateTime? StartDate { get; set; }
    [DisplayName("Date To")]
    [DisplayFormat(DataFormatString = "{0:D}")]
    public DateTime? EndDate { get; set; }
    [DisplayName("Name/Number")]
    public string NameNumber { get; set; }
    [DisplayName("Address Line 1")]
    public string AddressLine1 { get; set; }
    [DisplayName("Address Line 2")]
    public string AddressLine2 { get; set; }
    [DisplayName("Town")]
    public string Town { get; set; }
    [DisplayName("County")]
    public string County { get; set; }
    [RegularExpression("^(([gG][iI][rR] {0,}0[aA]{2})|((([a-pr-uwyzA-PR-UWYZ][a-hk-yA-HK-Y]?[0-9][0-9]?)|(([a-pr-uwyzA-PR-UWYZ][0-9][a-hjkstuwA-HJKSTUW])|([a-pr-uwyzA-PR-UWYZ][a-hk-yA-HK-Y][0-9][abehmnprv-yABEHMNPRV-Y]))) {0,}[0-9][abd-hjlnp-uw-zABD-HJLNP-UW-Z]{2}))$", ErrorMessage = "Invalid UK Postcode")]
    [DisplayName("Post Code")]
    public string PostCode { get; set; }
    public string PostCodeLeft { get; set; }
    public string PostCodeRight { get; set; }
    [DisplayName("Address Phone Number")]
    public string PhoneNumber { get; set; }
    [DisplayName("Mobile Number")]
    public string MobileNumber { get; set; }
    [DisplayName("Email Address")]
    [DataType(DataType.EmailAddress)]
    [EmailAddress]
    public string EmailAddress { get; set; }
    [DisplayName("Address Type")]
    public string AddressType { get; set; }
    public string DisplayHeading { get; set; }
}
}

Thanks for looking

jquery
grid.mvc
dataitem
asked on Stack Overflow May 25, 2016 by paul

1 Answer

0

Whilst this is certainly not an elegant solution a quick fix is to go and get the address again using JSON.

$.getJSON("/Employer/GetAddressByEmpLocationID", { term: e.row.EmpLocationID },
             function (data) {
                 $('#PostCode').val(data.PostCode).prop("disabled", true).prop("readonly", "readonly");
                 $("#AddressID").val(data.ID).attr('value', data.ID);
                 $("#NewLocation_Address_NameNumber").val(data.NameNumber).prop("readonly", "readonly");
                 $("#NewLocation_Address_AddressLine1").val(data.AddressLine1).prop("readonly", "readonly");
                 $("#NewLocation_Address_AddressLine2").val(data.AddressLine2).prop("readonly", "readonly");
                 $("#NewLocation_Address_Town").val(data.Town).prop("readonly", "readonly");
                 $("#NewLocation_Address_County").val(data.County).prop("readonly", "readonly");
                 $("#NewLocation_Address_PhoneNumber").val(data.PhoneNumber).prop("readonly", "readonly");


             }, "json");   
answered on Stack Overflow May 26, 2016 by paul

User contributions licensed under CC BY-SA 3.0