MVC Controller getting null model all the time

Question

I am using kendo ui grid and having real trouble getting the id passing to this function when I am using it the activity comes through as null and I have to fetch is first

My Main question is how does one get the

<div class="form-group row">
  <div class="col-sm-12">                        
      @(Html.Kendo().Grid<ActivityTrackerDal.Models.ActivityLines>
                    ().Name("activityLines")
                     .Events(e => e.Edit("onEdit"))
                     .Columns(columns =>
                    {
                        columns.Bound(p => p.Description).Filterable(false);
                        columns.Bound(p => p.StartTime).Filterable(false);
                        columns.Bound(p => p.EndTime).Filterable(false);
                        columns.Bound(p => p.Status);
                        columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));

                    })
                            .ToolBar(toolbar => toolbar.Create())
                                        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ActivityEditor").Window(w => w.Title("Edit Provider").Width(500)))
                                    .Scrollable()
                                    .Pageable()
                                    .Sortable()
                                    .Filterable()
                                    .DataSource(dataSource => dataSource
                                    .Ajax()
                                            .Events(events => events.Error("error_handler"))
                                            .Model(model => model.Id(p => p.ActivityLineId))
                    .Events(events => events.Error("error_handler"))
                    .Read(read => read.Action("ActivityLines_Read", "Activity"))
                    .Update(update => update.Action("Activity_Update", "Activity").Type(HttpVerbs.Post)))

              )
 </div>
</div>

My Form Below for the popup

        <div id="details-container"> 
          <div class="form-group row">
                <div class="col-sm-9">
                    <label for="inputFirstname">Activty Name</label>
                    @Html.TextAreaFor(model => model.First().Name, new { @class = "whatever-class", @cols = 115, @rows = 10 })

                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-10">
                    <label for="inputLastname" class="form-control">Description</label>


                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-6">
                    <label for="inputLastname" class="form-control">Start Time</label>


                </div>
                <div class="col-md-6">
                    <label for="inputLastname" class="form-control">End Time </label>

                </div>
            </div>    
        </div>
        <input type="submit" class="btn btn-file px-4" value="Save Work Item" />


        <button type="button" class="btn btn-primary px-4">Cancel</button>

    </form>
</script>

Here are my two controller functions with acitivylines will always come in as null their fore i must go out to the database again and fetch them this doesnt seem right but i need to no how do i pass the acitivy id to those functions.

This is my models first

public class ActivityHeader
{ 
    public int ActivityHeaderId { get; set; } //(int, null)
    public DateTime? ActivityDate { get; set; } //(date, null)
    public string Name { get; set; } //(nvarchar(350), null)
    public DateTime? ActivityEndDate { get; set; } //(datetime, null)
    public string ProblemDescription { get; set; }
    public string Description { get; set; } //(nvarchar(max), null)

    public int? ActivityLinesId { get; set; } //(int, null)
    public int? HoursLeftOnProject { get; set; } //(time(7), null)
    public int? Status { get; set; } //(nchar(10), null)
    public string  StatusName { get; set; }
    public DateTime? CreatedDate { get; set; } //(date, null)
    public string CreatedBy { get; set; } //(nvarchar(50), null)
    public bool? isActive { get; set; } //(bit, null)
    public bool? isDeleted { get; set; } //(bit, null)
    public bool? isArchived { get; set; } //(bit, null)
    public int? SOP { get; set; } //(nvarchar(50), null)
    public int? OnSite { get; set; }
    public int? Remote { get; set; }

    public int? DepartmentId { get; set; } //(int, null)
    public string EmployeeName { get; set; } //(nvarchar(301), null)
    [ForeignKey("StaffId")]
    public int? StaffId { get; set; }
    public  virtual StaffMembers StaffMembers { get; set; }

    public ICollection<ActivityLines> ActivityLines { get; set; }


}

public class ActivityLines
{
    [Key]
    public int ActivityLineId { get; set; } //(int, not null)
    public int? ActivityHeaderId { get; set; } //(int, null)
    public string Description { get; set; } //(nvarchar(max), null)
    public string Notes { get; set; } //(nvarchar(max), null)
    public DateTime? StartTime { get; set; } //(time(7), null)
    public DateTime? EndTime { get; set; }
    public DateTime? StartDate { get; set; }
    public DateTime? EndDate { get; set; } //(time(7), null)
    public int? StaffMemeber { get; set; } //(int, null)
    public bool? isActive { get; set; } //(bit, null)
    public bool? isDeleted { get; set; } //(bit, null)
    public string CreatedBy { get; set; } //(nvarchar(50), null)
    public DateTime? CreatedDate { get; set; } //(date, null)
    public int? Status { get; set; } //(int, null)

}
    [AcceptVerbs("Post")]
public ActionResult Activity_Update([DataSourceRequest]DataSourceRequest request, ActivityLines activity,int? activityId)
    {
        int ActivityLineId =(int) activityId;
        ActivityLines nLines = _activityRepo.GetActivityLineById(activityId);
        nLines.Description = nLines.Description + "test do i savE";
        _activityRepo.UpdateActivityLines(nLines);
        return Json(new[] { nLines }.ToDataSourceResult(request, ModelState));
    }

public ActionResult ActivityLines_Read([DataSourceRequest]DataSourceRequest request, int? activityID)
    {
        if (activityID == 0)
        {
            activityID = 1;
       }

        var result = GetAllActivityLines(1);

        var dsResult = result.ToDataSourceResult(request);
        return Json(dsResult);
    }

As you see above I am using

var result = GetAllActivityLines(1);

Which is in correct it should be getting the id from the form any ideas im sure someone has done this before.

Javascript for the showDetails function

<script type="text/javascript">
var detailsTemplate = kendo.template($("#template").html());

   function showDetails(e) {
      e.preventDefault();

     var dataItem = this.dataItem($(e.currentTarget).closest("tr")); // dataItem contains the ActivityLineId
    var wnd = $("#Details").data("kendoWindow");

    wnd.content(detailsTemplate(dataItem));
    wnd.center().open();
}

function onEdit(e) {
    var model = e.model;
    var activityLinesGrid = e.container.find("#activityLines").data("kendoGrid");
    activityLinesGrid.dataSource.read({ activityID: model.ActivityID });
}

This is what i use to put my activity lines in my grid which does work as per screen shot.

public List<ActivityLines> GetActivityLines(int? activityHeaderId)
{
        int? _activityHeaderId = activityHeaderId;
        var staffRepo = new StaffRepositry(_db);

        List<ActivityLines> _activityLines = new List<ActivityLines>();
        _activityLines = _db.ActivityLines.AsNoTracking().Where(a=>a.ActivityHeaderId== _activityHeaderId).ToList();
        return _activityLines;


    }

Screen shot to prove activity lines getting data.

Edit 2

The actities is null when it goes back to the activity update function but my main asking here is how do i pass the id to the popup so that i can save and update the correct model i persumed the model should be passed back with the data in it but it is not as per below screenshot.

I am also using the View Model as part of it but when i go to model. its not bringing up the individual fields.

public   class ActivityEditViewModal
{
    public  int ActivityHeaderId { get; set; } //(int, null)
    public DateTime? ActivityDate { get; set; } //(date, null)
    public string Name { get; set; } //(nvarchar(350), null)
    public DateTime? ActivityEndDate { get; set; } //(datetime, null)
    public string Description { get; set; } //(nvarchar(max), null)
    public int? ActivityLinesId { get; set; } //(int, null)
    public int? HoursLeftOnProject { get; set; } //(time(7), null)
    public int Status { get; set; } //(nchar(10), null)
    public int ActivityType { get; set; } //(int, null)
    public DateTime? CreatedDate { get; set; } //(date, null)
    public string CreatedBy { get; set; } //(nvarchar(50), null)
    public bool? isActive { get; set; } //(bit, null)
    public bool? isDeleted { get; set; } //(bit, null)
    public bool? isArchived { get; set; } //(bit, null)
    public int? DepartmentId { get; set; } //(int, null)
    public string EmployeeName { get; set; } //(nvarchar(301), null)
    public int? SOP { get; set; } //(nvarchar(50), null)
    public int? OnSite { get; set; }
    public int? Remote { get; set; }
    public string StatusName { get; set; }
    public string StaffName { get; set; }        
    public int StaffID { get; set; }
    public enum ActivityTypeEnum
    {
        None,
        Project = 1,
        Case = 2,
        Development

    }
    public ICollection<ActivityLines> ActivityLines { get; set; }
    private ActivityTypeEnum _activityTypeEnum;
    public ActivityTypeEnum CurrentDifficulty
    {
        get { return _activityTypeEnum; }
        set { _activityTypeEnum = value; }
    }
}

Answer 1

I feel you have missed adding a hidden input for your model Id to your custom editor template "ActivityEditor".

 @Html.HiddenFor(model => model.ActivityLineId)