Read custom bound update data in controller

3 posts, 1 answers
  1. Paul Ridden
    Paul Ridden avatar
    35 posts
    Member since:
    Mar 2007

    Posted 28 Oct 2013 Link to this post

    Hello,

    I am using the Kendo UI Grid control with the following key features activated:
    • Custom Toolbar
    • Batch Editing
    I would like to get a string from a textbox in the custom toolbar when the user saves the changes made in grid. Here my code:

    @(Html.Kendo().Grid(Model.TrackAndTraceTypeList)
        .Name("Grid")
        .Columns(columns =>
        {  
            columns.Bound(item => item.CustomerLevel).Title("Customer<br/>Level").Width(80);
            columns.Bound(item => item.TrackAndTraceTypeId).Title("T&T<br/>Type Id").Width(80);
            columns.Bound(item => item.TrackAndTraceTypeName).Title("T&T Type<br/>Name");
            columns.Bound(item => item.Level).Title("Level").Width(60);
            columns.Bound(item => item.Description).Title("Description");
            columns.Bound(item => item.MTC).Title("MTC").Width(60);
            columns.Bound(item => item.Failure).Title("Failure").Width(80);
            columns.Bound(item => item.Success).Title("Success").Width(80);
            columns.Bound(item => item.Multiple).Title("Multiple").Width(80);
            columns.Bound(item => item.Photo).Title("Photo").Width(60);;
            columns.Bound(item => item.MessageTypeId).Title("Msg<br/>Type Id").Width(80);
        })
        .ToolBar(toolbar =>
            {
                toolbar.Template(@<text>          
                <div class="k-toolbar k-grid-toolbar k-grid-top">
                    <table style="width:400px">
                        <tr>
                            <td>
                                <a class="k-button k-button-icontext k-grid-save-changes" href="javascript:void(0)">
                                     <span class="k-icon k-update"></span>Save changes
                                </a>
                                <a class="k-button k-button-icontext k-grid-cancel-changes" href="javascript:void(0)">
                                    <span class="k-icon k-cancel"></span>Cancel changes
                                </a
                            </td>
                            <td>                   
                                <label class="category-label" for="category">Version No:                           
                                    <input id="txtVersionNumber" type="text" style="width: 80px" />
                                </label>
                            </td>
                        </tr>
     
                    </table>
               </div>      
            </text>);
            })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Groupable()
        .Pageable(page => page.PageSizes(new int[] { 10, 20, 30, 50 }))
        .Sortable()
        .Filterable()
        .Selectable(s => s.Mode(GridSelectionMode.Single))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Events(events => events.Error("error_handler"))
            .Model(model => {
                model.Id(ttt => ttt.TrackAndTraceTypeId);
                model.Field(ttt => ttt.TrackAndTraceTypeId).Editable(false);
                model.Field(ttt => ttt.TrackAndTraceTypeName).Editable(false);
                model.Field(ttt => ttt.CustomerLevel).Editable(false);
                model.Field(ttt => ttt.Level).Editable(false);
                model.Field(ttt => ttt.MessageTypeId).Editable(false);
            })
            .PageSize(20)
            .Read(read => read.Action("TrackAndTrace_Read", "Customers"))
            .Update(update => update
                .Action("TrackAndTrace_Update", "Customers")
                .Data("versionNumber"))
         )
         .Resizable(resize => resize.Columns(true))
    )
    </div>
     
    <script type="text/javascript">
        function error_handler(e) {
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function () {
                            message += this + "\n";
                        });
                    }
                });
                alert(message);
            }
        }
     
        function versionNumber(){
            return {version: $("#txtVersionNumber").val()};
        }
     
    </script>
    And my Controller look like this:
    public ActionResult TrackAndTrace_Read([DataSourceRequest] DataSourceRequest request)
           {
               // Get the customer Id from the URL
               int customerIdValue = 0;
     
               if (Request.UrlReferrer.Segments.Length > 1)
               {
                   string customerId = Request.UrlReferrer.Segments[Request.UrlReferrer.Segments.Length - 1];
                   int.TryParse(customerId, out customerIdValue);
               }
     
               var data = GetCustomerTrackAndTraceTypeDetails(customerIdValue, request.Page).TrackAndTraceTypeList.AsEnumerable();
     
               return Json(data.ToDataSourceResult(request));
           }
     
           [AcceptVerbs(HttpVerbs.Post)]
           public ActionResult TrackAndTrace_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<CustomerTrackAndTraceType> trackAndTraceTypes)
           {
               if (trackAndTraceTypes != null && ModelState.IsValid)
               {
                   int customerIdValue = 0;
                    
                   if (Request.UrlReferrer.Segments.Length > 1)
                   {
                       string customerId = Request.UrlReferrer.Segments[Request.UrlReferrer.Segments.Length - 1];
                       int.TryParse(customerId, out customerIdValue);
                   }
     
                   Customer currentCustomer = db.Customers.Find(customerIdValue);
     
                   foreach (var tttItem in trackAndTraceTypes)
                   {
                       // Save the Track And Trace Type Updates
                       db.AddCustomerTrackAndTraceTypeLink(tttItem.TrackAndTraceTypeId,
                           tttItem.CustomerId,
                           tttItem.Description,
                           tttItem.MTC,
                           tttItem.Failure,
                           tttItem.Multiple,
                           tttItem.Success,
                           tttItem.Photo,
                           User.Identity.Name); // record who made the change
     
                       // Update the customer level for the Grid
                       tttItem.CustomerLevel = currentCustomer.Name;
                   }
               }
     
               return Json(trackAndTraceTypes.ToDataSourceResult(request, ModelState));
           }
    To summarize, I need to pass the data in the txtVersionNumber into the db.AddCustomerTrackAndTraceTypeLink() method.

    Thanks in advance,
    Paul
  2. Answer
    nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 28 Oct 2013 Link to this post

    Try adding "version" as a parameter in your TrackAndTrace_Update controller action.

    So it would be:
    public ActionResult TrackAndTrace_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<CustomerTrackAndTraceType> trackAndTraceTypes, string version)

    Hope this helps.
  3. Kendo UI is VS 2017 Ready
  4. Paul Ridden
    Paul Ridden avatar
    35 posts
    Member since:
    Mar 2007

    Posted 29 Oct 2013 Link to this post

    Thank you!

    I knew it had to be simple.
Back to Top