Editor template pass the id

[David]

How does one pass the id to the template so one can use it basically i want 0 for adding a record then obv the id value for eidting a record how does one acheive this when using a custom command editor for template.

[Adam]

Hello David,

Creating a new record will pass an empty instance of your model to the template. When performing an update, an existing instance of your model must be passed to the template. To do this, you can use the following:

.DataSource(dataSource => dataSource.Model(model => model.Id(m => m.Id)))

This will use the Id of the record that you are editing to look up the remainder of the missing properties for that instance.

[Tsvetomir]

Hello,

By default, when a new record in the Kendo UI Grid is created, the ID is populated with the default value of the data type that is used for the field. For instance, if the ID is an integer, then the default value is 0. The record is sent to the server with the empty record. The ID has to be set on the server or by the database. It would not be expected a client-side grid to modify the ID. 

As per editing functionality of the grid, the ID must be specified in the data source's model beforehand, as shown by Adam's code snippet:

.DataSource(dataSource => dataSource.Model(model => model.Id(m => m.Id)))

This is mandatory for the editing of the grid to be working as expected. Also, it will be accessible in the custom template. 


Best regards,
Tsvetomir
Progress Telerik

[David]

I am having an issue on accessing the activity lines in the razor though how would i do this.

[David]

I am already doing this do you no what i am doing wrong here 

 

001.@model FuelActivityTrackerDal.ViewModels.ActivityEditViewModal
002.
003.
004.<div class="container py-5">
005.    <div class="row">
006.        <div class="col-md-10 mx-auto">
007.            <form>
008.                <div class="form-group row">
009.                    <div class="col-sm-9">
010.                        <label for="inputFirstname">Activty Name</label>
011.                        <input type="text" class="form-control" id="inputFirstname" placeholder="Activity name">
012.                    </div>
013.                </div>
014.                <div class="form-group row">
015.
016.                    <div class="col-sm-3">
017.                        <label for="inputLastname" class="form-control">Activity Start Date</label>
018.                        @Html.Kendo().DateTimePickerFor(model => model.ActivityDate)
019.                    </div>
020.                    <div class="col-sm-3">
021.                        <label for="inputLastname" class="form-control">Activity End Date</label>
022.                        @Html.Kendo().DateTimePickerFor(model => model.ActivityEndDate)
023.                    </div>
024.
025.                </div>
026.                <div class="form-group row">
027.
028.                    <div class="col-sm-3">
029.                        <label for="inputLastname" class="form-control">Location</label>
030.                        @foreach (var item in (SelectList)ViewBag.Location)
031.                        {
032.                            @Html.RadioButtonFor(model => model.OnSite, item.Value, false)
033.                            <label class="control-label">@item.Text</label>
034.                        }
035.                    </div>
036.
037.                </div>
038.                <div class="form-group row">
039.                    <div class="col-md-10">
040.                        <label for="inputLastname" class="form-control">Description</label>
041.                        @Html.TextAreaFor(model => model.Description, new { @class = "whatever-class", @cols = 115, @rows = 10 })
042.
043.                    </div>
044.                </div>
045.                <div class="form-group row">
046.                    <div class="col-sm-6">
047.                        <label for="inputCity">Status </label>
048.                        <select asp-for="Status"
049.                                class="form-control"
050.                                asp-items="@(new SelectList(@ViewBag.ProjectStatusTypes,"LookupCode", "LookupDescription"))"></select>
051.
052.
053.                    </div>
054.                    <div class="col-sm-3">
055.                        <label for="inputState">ActivityType </label>
056.                        <select asp-for="ActivityType"
057.                                class="form-control"
058.                                asp-items="@(new SelectList(@ViewBag.ProjectTypes,"LookupCode", "LookupDescription"))"></select>
059.
060.
061.                    </div>
062.                </div>
063.
064.                <div class="form-group row">
065.                    <div class="col-sm-6">
066.                        <label for="inputCity">Staff </label>
067.                        <select asp-for="StaffID"
068.                                class="form-control"
069.                                asp-items="@(new SelectList(@ViewBag.ListOfStaff,"StaffID", "FirstName"))"></select>
070.
071.                    </div>
072.                    <div class="col-sm-3">
073.                        <label for="inputState">Hours Left On Project </label>
074.                        <label for="inputState"><div class="badge" style="font-size:18px;">26</div> </label>
075.                        <label for="projecthours">If Porject hours fall below ten Contact Charlie.</label>
076.                    </div>
077.                </div>
078.
079.
080.                <div class="form-group row">
081.
082.                    <div class="col-sm-12">
083.
084.                        @(Html.Kendo().Grid<FuelActivityTrackerDal.Models.ActivityLines>
085.    ().Name("activityLines")
086.
087.    .Columns(columns =>
088.    {
089.    columns.Bound(p => p.Description).Filterable(false);
090.    columns.Bound(p => p.StartTime).Filterable(false);
091.    columns.Bound(p => p.EndTime).Filterable(false);
092.    columns.Bound(p => p.Status);
093.    columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
094.
095.    })
096.    .DataSource(dataSource => dataSource
097.    .Ajax()
098.    .Events(events => events.Error("error_handler"))
099.    .Model(model => model.Id(p => p.ActivityLineId))
100.    .Read(read => read.Action("ActivityLines_Read", "Activity"))
101.   .Update(update => update.Action("ActivityLines_Update", "Activity").Type(HttpVerbs.Post)))
102.
103.    ))
104.</div>
105.                </div>
106.
107.                <div class="form-group row">
108.                    <div class="col-sm-6">
109.
110.                    </div>
111.                </div>
112.
113.
114.                <button type="button" class="btn btn-primary px-4 float-right">Add Work Item</button>
115.                <button type="button" class="btn btn-primary px-4 float-right">Put Case & Client On Hold</button>
116.                <button type="button" class="btn btn-primary px-4">Cancel</button>
117.            </form>
118.        </div>
119.    </div>
120.    @(Html.Kendo().Window().Name("Details")
121.                    .Title("Activity Details")
122.                    .Visible(false)
123.                    .Modal(true)
124.                    .Draggable(true)
125.                    .Width(400)
126.    )
127.    <script type="text/x-kendo-template" id="template">
128.        <form method="post" action="@Url.Action("ActivityLines_Update", "Activity")">
129.
130.            <div id="details-container">
131.
132.                ActivitiyHeadId
133.                <div class="form-group row">
134.                    <div class="col-sm-9">
135.                        <label for="inputFirstname">Activty Name</label>
136.                        <input type="text" class="form-control" id="inputFirstname" placeholder="Activity name">
137.                    </div>
138.                </div>
139.                <div class="form-group row">
140.                    <div class="col-md-10">
141.                        <label for="inputLastname" class="form-control">Description</label>
142.
143.                    </div>
144.                </div>
145.                <div class="form-group row">
146.                    <div class="col-md-6">
147.                        <label for="inputLastname" class="form-control">Start Time</label>
148.
149.
150.                    </div>
151.                    <div class="col-md-6">
152.                        <label for="inputLastname" class="form-control">End Time </label>
153.
154.
155.                    </div>
156.                </div>
157.
158.            </div>
159.            <input type="submit" class="btn btn-file px-4" value="Save Work Item" />
160.
161.
162.            <button type="button" class="btn btn-primary px-4">Cancel</button>
163.
164.        </form>
165.    </script>
166.
167.    <script type="text/javascript">
168.        var detailsTemplate = kendo.template($("#template").html());
169.
170.        function showDetails(e) {
171.            e.preventDefault();
172.
173.            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
174.            var wnd = $("#Details").data("kendoWindow");
175.
176.            wnd.content(detailsTemplate(dataItem));
177.            wnd.center().open();
178.        }
179.    </script>
180.
181.
182.</div>

 

 

[AcceptVerbs("Post")]
     public bool SaveWorkItem(ActivityLines activityLines)
     {

         return _activityRepo.UpdateActivityLines(activityLines);


     }

     [AcceptVerbs("Post")]
     public ActionResult EditingPopup_Update([DataSourceRequest] DataSourceRequest request, ActivityHeader activity)
     {
         if (activity != null)
         {
             UpdateActivity(activity);
         }

         return Json(new[] { activity }.ToDataSourceResult(request, ModelState));
     }
     [AcceptVerbs("Post")]
     public ActionResult ActivityLines_Update([DataSourceRequest] DataSourceRequest request, ActivityLines activityLines)
     {

         if (activityLines != null)
         {
             _activityRepo.UpdateActivityLines(activityLines);
         }
         return Json(new[] { activityLines }.ToDataSourceResult(request, ModelState));



     }
     public ActionResult ActivityLines_Read([DataSourceRequest]DataSourceRequest request)
     {

         var result = GetAllActivityLines();

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

     }



     public ActionResult Activity_Read([DataSourceRequest]DataSourceRequest request)
     {
         var result = GetAllActivityHeader();

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

[David]

If u look through the code for the view details you wil see the issue i am having trouble with. 

[David]

My model is as follows

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 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; }


   }

 

Activity Lines

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)

  }

 

MyContext for upadting the poopup contents its here i need to no the id.

 

public bool UpdateActivityLines(ActivityLines activityLines)
       {


           bool retval = false;

           _db.Update(activityLines);
           _db.SaveChanges();



           return retval;
       }

       public bool UpdateActivityHeader(ActivityHeader activitys)
       {

           bool retval = false;

           _db.Update(activitys);
           _db.SaveChanges();



           return retval;


       }

 

 

[David]

This is how i get all the activity lines for an acitivy i obv need to find also a way to pass the main id to the actitivy lines function.

 

public List<ActivityLines> GetActivityLines()
  {

      var staffRepo = new StaffRepositry(_db);

      List<ActivityLines> _activityLines = new List<ActivityLines>();
      _activityLines = _db.ActivityLines.AsNoTracking().ToList();
      return _activityLines;


  }

[Tsvetomir]

Hi David,

I have noticed that the data item is passed to the template:

167.    <script type="text/javascript">
168.        var detailsTemplate = kendo.template($("#template").html());
169.
170.        function showDetails(e) {
171.            e.preventDefault();
172.
173.            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
174.            var wnd = $("#Details").data("kendoWindow");
175.
176.            wnd.content(detailsTemplate(dataItem));
177.            wnd.center().open();
178.        }
179.    </script>

Which means that all of the fields of the model are accessible in the initial template. They can be accessed by using the "#=  #" syntax:

127.    <script type="text/x-kendo-template" id="template">

132.                <div>#=ActivitiyHeadId#</div>

Try the suggestion above and let me know in case the issue persists.


Best regards,
Tsvetomir
Progress Telerik

[David]

I have a ticket that i am using in the support area still having issues the read is no longer reading correctly thanks.

[Tsvetomir]

Hi David,

Based on the provided information, both here and in the official Support ticket, I assume that you would like firstly to pass the id of the master row to the template. And, secondly, to pass the id to the Read ActionMethod in the Controller, is that correct?

If so, then the additional parameter can be passed to the controller via the data source. For example:

.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))

And it can be retrieved as follows: 

public ActionResult HierarchyBinding_Orders(int employeeID, [DataSourceRequest] DataSourceRequest request)
{
     // logic to load data in the child grid
}

This approach has been depicted in our Hierarchy live demo which can be found here:

https://demos.telerik.com/aspnet-core/grid/hierarchy


Kind regards,
Tsvetomir
Progress Telerik