This is a migrated thread and some comments may be shown as answers.

Editor template pass the id

10 Answers 72 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 27 Feb 2019, 08:53 PM
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.

10 Answers, 1 is accepted

Sort by
0
Adam
Top achievements
Rank 1
answered on 01 Mar 2019, 04:40 AM

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.

0
Tsvetomir
Telerik team
answered on 04 Mar 2019, 09:05 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
David
Top achievements
Rank 1
answered on 04 Mar 2019, 04:39 PM
I am having an issue on accessing the activity lines in the razor though how would i do this.
0
David
Top achievements
Rank 1
answered on 04 Mar 2019, 04:40 PM

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);
     }
0
David
Top achievements
Rank 1
answered on 04 Mar 2019, 04:41 PM
If u look through the code for the view details you wil see the issue i am having trouble with. 
0
David
Top achievements
Rank 1
answered on 05 Mar 2019, 08:56 PM

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

 

 

0
David
Top achievements
Rank 1
answered on 05 Mar 2019, 09:06 PM

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;
 
 
  }
0
Tsvetomir
Telerik team
answered on 07 Mar 2019, 03:23 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
David
Top achievements
Rank 1
answered on 07 Mar 2019, 03:27 PM
I have a ticket that i am using in the support area still having issues the read is no longer reading correctly thanks.
0
Tsvetomir
Telerik team
answered on 12 Mar 2019, 02:17 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
David
Top achievements
Rank 1
Answers by
Adam
Top achievements
Rank 1
Tsvetomir
Telerik team
David
Top achievements
Rank 1
Share this question
or