Microsoft JScript runtime error: 'data.Employe

Question

HI I am stuck in getting data that i need to display in kendo UI GRID , Initially I am able to see the button and textbox and grid as well but when i enter the value in textbox and then press the button i need to show that entered values in kendo UI GRID ...

When I run this application in google chrome it was giving empty grid,after enters the value and then press the submit button but when I run this one in IE8 it was giving error like this at starting stage itself....

Unhandled exception at line 238, column 37 in Function code 0x800a138f - Microsoft JScript runtime error: 'data.EmployeeDetails.EmployeeId' is null or not an object

and this is my model

    public class TextBoxGrid
    {
        public string EnteredValue { get; set; }
        public List<EmployeeDetails> employees;
    }  
    public class ParentViewModel
    {
        public EmployeeDetails EmployeeDetails { get; set; }
        public TextBoxGrid TextBoxGrid { get; set; }
    }
    public class EmployeeDetails
    {
        public string EmployeeId { get; set; }
        public string ManagerId { get; set; }
    }

this is my controller

public class EnterValuesGridController : Controller
{
    private static List<EmployeeDetails> empdtls;
    public ActionResult Index( ParentViewModel model)
    {
        var viewmodel = new ParentViewModel
        {
            TextBoxGrid = new TextBoxGrid { employees = GetEmployee().ToList() }
        };
        return View(viewmodel);
    }      
    [HttpPost]
    public ActionResult PostValues(TextBoxGrid model)
    {
        TempData["enteringValue"] = model.EnteredValue;
        var viewmodel = new ParentViewModel
        {
            TextBoxGrid = new TextBoxGrid { employees = GetEmployee().ToList() }
        };
        //ParentViewModel p = new ParentViewModel();
        //TextBoxGrid t = new TextBoxGrid();
        //t.EnteredValue = "a";
        //TempData["a1"] = t.EnteredValue;
        //t.employees = GetEmployee().ToList();
        //p.TextBoxGrid = t;
        //return View("Index", p);   
        return View("Index", viewmodel);        
    }
    public  IEnumerable<EmployeeDetails> GetEmployee()
    {
        string enteredValueId =(string) TempData["enteringValue"];
        string managerId = "M" +enteredValueId;
        empdtls = new List<EmployeeDetails>();
        EmployeeDetails em1 = new EmployeeDetails();
        em1.EmployeeId = enteredValueId;
        em1.ManagerId = managerId;
        empdtls.Add(em1);
        return empdtls.AsEnumerable();
    }
    public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
    {
        return Json(GetOrders().ToDataSourceResult(request));
    }
    private IEnumerable<EmployeeDetails> GetOrders()
    {
        return GetEmployee().AsEnumerable();
    }
}

and this is my view

@model KendoPratapSampleMVCApp.Models.ParentViewModel
@{
    ViewBag.Title = "Index";
}    
@using (Html.BeginForm("PostValues", "EnterValuesGrid", FormMethod.Post))
{ 
     @Html.TextBoxFor(m=>m.TextBoxGrid.EnteredValue)    
     <input type="submit" name="Submitbutton1" value="Submit1" />               
     @(Html.Kendo().Grid<KendoPratapSampleMVCApp.Models.ParentViewModel>()    
    .Name("grid")
    .Columns(columns => {
        columns.Bound(s=>s.EmployeeDetails.EmployeeId).Filterable(false).Width(100);
        columns.Bound(s => s.EmployeeDetails.ManagerId).Filterable(false).Width(100);        
    })
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource       
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "EnterValuesGrid"))
     )
  )        
} 

I am not sure where I am doing wrong, Would you pls suggest any ideas on this one .. Many thanks...., Do i need to do any changes in UI GRID I have tried changing the post values method ...but it didnot worked for me ...

UPDATE : changed tempData to view Bag...

    [HttpPost]
    public ActionResult PostValues(ParentViewModel model)
    {
        ViewBag.item = model.TextBoxGrid.EnteredValue;

        var viewmodel = new ParentViewModel
        {
            TextBoxGrid = new TextBoxGrid { employees = GetEmployee().ToList() }

        };

        //ParentViewModel p = new ParentViewModel();
        //TextBoxGrid t = new TextBoxGrid();
        //t.EnteredValue = "a";
        //TempData["a1"] = t.EnteredValue;
        //t.employees = GetEmployee().ToList();
        //p.TextBoxGrid = t;
        //return View("Index", p);   
        return View("Index", viewmodel);        
    }

    public  IEnumerable<EmployeeDetails> GetEmployee()
    {
        string enteredValueId = (string)ViewBag.item;
        string managerId = "M" +enteredValueId;
        empdtls = new List<EmployeeDetails>();
        EmployeeDetails em1 = new EmployeeDetails();
        em1.EmployeeId = enteredValueId;
        em1.ManagerId = managerId;
        empdtls.Add(em1);
        return empdtls;
    }

Answer 1

Hi pratap i just update your code,

Model

 public class TextBoxGrid
    {
        public string EnteredValue { get; set; }
        public List<EmployeeDetails> employees;
    }
    public class ParentViewModel
    {
        public EmployeeDetails EmployeeDetails { get; set; }
        public TextBoxGrid TextBoxGrid { get; set; }
    }
    public class EmployeeDetails
    {
        public string EnteredValue { get; set; }
        public string EmployeeId { get; set; }
        public string ManagerId { get; set; }
    }

View

@model TwoModelInSinglePageModel.EmployeeDetails
@{
    ViewBag.Title = "Index";
}
<script src="~/Script/Jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="~/Script/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Script/kendo.all.min.js")" type="text/javascript"></script>
<script src="~/Script/kendo.web.min.js" type="text/javascript"></script>
<script src="~/Script/kendo.aspnetmvc.min.js" type="text/javascript"></script>

@using (Html.BeginForm("PostValues", "Test", FormMethod.Post))
{ 
    @Html.TextBoxFor(m => m.EnteredValue)    
    <input type="submit" name="Submitbutton1" value="Submit1" />               
    @(Html.Kendo().Grid<TwoModelInSinglePageModel.EmployeeDetails>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(s => s.EmployeeId);
        columns.Bound(s => s.ManagerId);
    })
    .Filterable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
           .Read(read => read.Action("Orders_Read", "Test"))
     )
  )        
}

Controller

private static List<EmployeeDetails> empdtls;
    public ActionResult PostValues()
    {
        return View();
    }

[HttpPost]
public ActionResult PostValues(EmployeeDetails model)
{
    ViewBag.item = model.EnteredValue;

    ParentViewModel viewmodels = new ParentViewModel
    {
        TextBoxGrid = new TextBoxGrid { employees = GetEmployee().ToList() }

    };

    ParentViewModel viewmodel = new ParentViewModel();
    EmployeeDetails em1 = new EmployeeDetails();
    for (int i = 0; i < viewmodels.TextBoxGrid.employees.Count(); i++)
    {

        em1.EmployeeId = viewmodels.TextBoxGrid.employees[i].EmployeeId;
        em1.ManagerId = viewmodels.TextBoxGrid.employees[i].ManagerId;
        viewmodel.EmployeeDetails = em1;
    }
    Session["EM1"] = em1;
    return View("PostValues", em1);
}

public List<EmployeeDetails> GetEmployee()
{
    string enteredValueId = (string)ViewBag.item;
    string managerId = "M" + enteredValueId;
    empdtls = new List<EmployeeDetails>();
    EmployeeDetails em1 = new EmployeeDetails();
    em1.EmployeeId = enteredValueId;
    em1.ManagerId = managerId;
    if (Session["EM1"] != null)
    {
        em1 = Session["EM1"] as EmployeeDetails;

        empdtls.Add(em1);
        Session["EM1"] = null;
    }
    else
    {
        empdtls.Add(em1);
    }
    return empdtls;
}

public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request, EmployeeDetails model)
{
    return Json(GetEmployee().ToDataSourceResult(request));
}

Answer 2

OK, I read through your post again and you want to submit the form when click on the button actually. So, let's try to put the value in the session

Session["enteringValue"] = model.EnteredValue;

And you can retrieve it using

string enteredValueId = (string)(Session["enteringValue"]);