Grid InCell editing ClientTemplate not working

8 posts, 1 answers
  1. neet-o
    neet-o avatar
    8 posts
    Member since:
    Jun 2016

    Posted 09 Aug Link to this post

    Hi,

    ClientTemplate for the ID value is not working for me. Still outputs the ID to Service field. What am I missing?

    Main .cshtml:

    Main .cshtml:
    @(Html.Kendo().Grid(Model.ManualJobItems)
          .Name("gridBreakDowns")
          .Columns(columns =>
          {
              columns.Bound(p => p.ItemID).Hidden(true);
              columns.Bound(p => p.ParentID).Hidden(true);
              columns.Bound(p => p.FileName).Title("File").Width(130);
              columns.Bound(p => p.ServiceName).Title("Service").Width(200).ClientTemplate("#=ServiceName#").EditorTemplateName("ServiceId");
              columns.Bound(p => p.Country).Title("Country").Width(300).EditorTemplateName("CountryId");
              columns.Bound(p => p.Format).Title("Format").Width(200);
              columns.Bound(p => p.Method).Title("Service Level").Width(200);
              columns.Bound(p => p.Quantity).Title("Quantity").Width(100);
              columns.Bound(p => p.ItemWeight).Title("Item Weight").Width(200);
              columns.Bound(p => p.TotalWeight).Title("Total Weight").Width(200);
              columns.Bound(p => p.DespatchStatusString).Title("Status");
              columns.Command(command => { command.Destroy(); }).Width(100);
          })
          //.Events(events => events.Edit("onGridEdit").Save("onGridSave"))
          .Editable(editable => editable
              .Mode(GridEditMode.InCell))
                  .ToolBar(toolBar =>
                  {
                      toolBar.Custom().Text("Create").Name("addNewRow").Url("#").HtmlAttributes(new {onclick = "addNewCustomRow()" });
                      toolBar.Save();
                  })
                .Events(e => e.DataBound("onRowBound"))
                .DataSource(dataSource => dataSource
              .Ajax()
              .Batch(true)
              .Events(events => events.Error("onerror_handler"))
              .Create(create => create.Action("UpdateManualJobItem", "ManualJob"))
              .Read(read => read.Action("ReadManualJobItem", "ManualJob", new { jid = Model.JobID }))
              .Update(update => update.Action("UpdateManualJobItem", "ManualJob"))
              .Destroy(destroy => destroy.Action("DestroyManualJobItem", "ManualJob"))
              .Model(model =>
              {
                  model.Id(p => p.ItemID);
              })
    ))
     
    ServiceId.cshtml:
    @(Html.Kendo().DropDownListFor(m => m)
        .OptionLabel("Select Service...")
        .DataTextField("ServiceName")
        .DataValueField("ServiceID")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetCurrentNormalServices", "System");
            });
            source.ServerFiltering(true);
        }))
         
    CountryId.cshtml:
    @(Html.Kendo().DropDownListFor(m => m)
        .OptionLabel("Select Country...")
        .DataTextField("CountryName")
        .DataValueField("CountryID")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetServiceCountries", "System").Data("filterCountries");
            });
            source.ServerFiltering(true);
        })
        .CascadeFrom("ServiceID"))
         
    SystemController:
    public JsonResult GetCurrentNormalServices()
    {
        var services = _db.Services.GetAllCurrentNormalServices().Select(x => new { x.ServiceID, x.ServiceName }).ToList();
        return Json(services, JsonRequestBehavior.AllowGet);
    }

  2. neet-o
    neet-o avatar
    8 posts
    Member since:
    Jun 2016

    Posted 09 Aug Link to this post

    One more thing - how do I cascade Country (CountryId.cshtml) based on ServiceID?

    .CascadeFrom("ServiceID")) doesn't work since GetServiceCountries method is not getting a proper Guid:

    public JsonResult GetServiceCountries(Guid id)
    {
        if (id == Guid.Empty) return null;
        var service = _db.Services.Find(id);
        var tariff = _db.SupplierTariffs
            .GetCurrentTariffsByService(DateTime.Today, service)
            .FirstOrDefault();
     
        var countries = tariff.SupplierTariffPrices.GroupBy(x => x.Country)
            .Select(g => new { CountryCode = g.Key.Alpha2Code, g.Key.CountryName }).Distinct()
            .ToList();
        return Json(countries, JsonRequestBehavior.AllowGet);
    }

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 11 Aug Link to this post

    Hi Igor,

    From the provided code snippet it seems that the grid column is bound to the ServiceName field, while the ValueField of the DropDownList from the editor template is ServiceID. I would suggest that you unify both fields. Another approach is to:
        - Use foreignkey column - https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/grid-incell-editing-with-cascading-dropdownlist/KendoUIMVC5/Views/Home/Index.cshtml
        - Or use a Service field with two properties - ServiceID and ServiceName, similarly to this demo - http://demos.telerik.com/aspnet-mvc/grid/editing-custom

    Regarding the cascading dropdownlist editing you can refer to the first demo and this one - https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/grid-editing-cascading-dropdownlist/KendoUIMVC5/Views/Home/Index.cshtml

    Regards,
    Danail Vasilev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. neet-o
    neet-o avatar
    8 posts
    Member since:
    Jun 2016

    Posted 12 Aug Link to this post

    I've replaced ServiceName with ServiceId and now it works fine after you click on it.

    But when you go out of InCell editing (click anywhere else) - the label still defaults to the previous value ("ADS" in this case) for some reason. When you click on it again - it will change back to the selected value. I've attached screenshots when InCell editing and out of it. So even though it's now showing "ADS" when you click on it you will see USPS Registered. 

    So it looks like the model is updating but the grid is not or something.

    What was updated:

    columns.Bound(p => p.ServiceID).Title("Service").Width(200).ClientTemplate("#=ServiceName#").EditorTemplateName("ServiceId");

     

  6. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 16 Aug Link to this post

    Hi,

    I am afraid the behavior is pretty strange and without replicating the problem locally it will be hard to pinpoint the exact reason for it. I noticed that you have another editor template with a DropDownList widget in it. Could you please verify that the same behavior is observed when using it? Additionally I would appreciate if you can check for any client side exception which might prevent updating the cell value.

    Regards,
    Kostadin
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. neet-o
    neet-o avatar
    8 posts
    Member since:
    Jun 2016

    Posted 17 Aug in reply to Kostadin Link to this post

    Hi,

    I've used a Service field with two properties - ServiceID and ServiceName, like in this demo http://demos.telerik.com/aspnet-mvc/grid/editing-custom. DropDownList for Service is now working fine - it display the correct value and correct ID is used.

    The last problem I've yet to solve is cascading. No matter what I do I get null for the ServiceID in my controller method.

    Right now it's set like to CascadeFrom("Service")) but I've tried ServiceID as well. How do I set it up properly?

    What I've got now is:

    The model:
     
        public class ManualJobItemModel
        {
            public ManualJobItemModel()
            {
            }
     
            public ManualJobItemModel(JobLineDto jobLineDto)
            {
                ItemID = jobLineDto.ID;
                ParentID = jobLineDto.JobID;
                FileName = jobLineDto.FileName;
                ExpectedMailDate = DateTime.Parse(jobLineDto.ExpectedMailingDate);
                Service = new ServiceViewModel
                {
                    ServiceId = jobLineDto.Service.ServiceID,
                    ServiceName = jobLineDto.Service.ServiceName
                };
                Method = jobLineDto.ServiceLevel;
                Country = new CountryViewModel
                {
                    CountryId = jobLineDto.Country.CountryID,
                    CountryName = jobLineDto.Country.CountryName
                };
                Format = jobLineDto.DespatchFormat;
                Quantity = jobLineDto.Quantity;
                ItemWeight = jobLineDto.ItemWeight;
                TotalWeight = jobLineDto.ItemWeight * jobLineDto.Quantity;
                DespatchStatus = jobLineDto.DespatchStatus;
            }
     
            public Guid ItemID { set; get; }
            public Guid ParentID { set; get; }
            public DateTime ExpectedMailDate { set; get; }
            public string FileName { set; get; }
            public string Format { set; get; }
            public string InvoiceFormat { set; get; }
            public string Method { set; get; }
            public int PPI { set; get; }
            public int? Quantity { set; get; }
            public decimal? ItemWeight { set; get; }
            public decimal? TotalWeight { set; get; }
            public int DespatchStatus { set; get; }
            public ServiceViewModel Service { get; set; }
            public CountryViewModel Country { get; set; }
        }
     
        public class ServiceViewModel
        {
            public string ServiceName { set; get; }
            public Guid ServiceId { set; get; }
        }
     
        public class CountryViewModel
        {
            public string CountryName { set; get; }
            public int CountryId { set; get; }
        }
     
     
    Main.cshtml:
     
        @(Html.Kendo().Grid(Model.ManualJobItems)
              .Name("gridBreakDowns")
              .Columns(columns =>
              {
                  columns.Bound(p => p.ItemID).Hidden(true);
                  columns.Bound(p => p.ParentID).Hidden(true);
                  columns.Bound(p => p.FileName).Title("File").Width(130);
                  columns.Bound(p => p.Service).Title("Service").Width(200).ClientTemplate("#=Service.ServiceName#").EditorTemplateName("ServiceId");
                  columns.Bound(p => p.Country).Title("Country").Width(300).ClientTemplate("#=Country.CountryName#").EditorTemplateName("CountryId");
                  columns.Bound(p => p.Format).Title("Format").Width(200);
                  columns.Bound(p => p.Method).Title("Service Level").Width(200);
                  columns.Bound(p => p.Quantity).Title("Quantity").Width(100);
                  columns.Bound(p => p.ItemWeight).Title("Item Weight").Width(200);
                  columns.Bound(p => p.TotalWeight).Title("Total Weight").Width(200);
                  columns.Bound(p => p.DespatchStatusString).Title("Status");
                  columns.Command(command => { command.Destroy(); }).Width(100);
              })
              .Editable(editable => editable
                .Mode(GridEditMode.InCell))
                .ToolBar(toolBar =>
                {
                    toolBar.Custom().Text("Create").Name("addNewRow").Url("#").HtmlAttributes(new {onclick = "addNewCustomRow()" });
                    toolBar.Save();
                })
                .Events(e => e.DataBound("onRowBound"))
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .Events(events => events.Error("onerror_handler"))
                    .Create(create => create.Action("UpdateManualJobItem", "ManualJob"))
                    .Read(read => read.Action("ReadManualJobItem", "ManualJob", new { jid = Model.JobID }))
                    .Update(update => update.Action("UpdateManualJobItem", "ManualJob"))
                    .Destroy(destroy => destroy.Action("DestroyManualJobItem", "ManualJob"))
                    .Model(model =>
                    {
                        model.Id(p => p.ItemID);
                    })
            ))
     
    ServiceId.cshtml:
     
    @(Html.Kendo().DropDownListFor(m => m)
        .OptionLabel("Select Service...")
        .DataTextField("ServiceName")
        .DataValueField("ServiceID")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetCurrentNormalServices", "System");
            });
            source.ServerFiltering(true);
        }))
     
    CountryId.cshtml:
     
    @(Html.Kendo().DropDownListFor(m => m)
        .OptionLabel("Select Country...")
        .DataTextField("CountryName")
        .DataValueField("CountryID")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetServiceCountries", "System").Data("filterCountries");
            });
            source.ServerFiltering(true);
        })
        .CascadeFrom("Service"))
     
    Controller:
            public JsonResult GetServiceCountries(Guid id)
            {
                //id is always null for me here
                if (id == Guid.Empty) return null;
                var service = _db.Services.Find(id);
                var tariff = _db.SupplierTariffs
                    .GetCurrentTariffsByService(DateTime.Today, service)
                    .FirstOrDefault();
                var countries = GetCountries();
                return Json(countries, JsonRequestBehavior.AllowGet);
            }

  8. Answer
    Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 19 Aug Link to this post

    Hi,

    I am afraid cascading dropdowns during in cell editing mode is not supported because only one cell can be in edit mode at a time. This means that only one dropdown will be visible. Nevertheless, you can manually implement that following the suggestions in this help article. Also you can examine the following how to sample which demonstrates the same requirement.

    Regards,
    Kostadin
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. neet-o
    neet-o avatar
    8 posts
    Member since:
    Jun 2016

    Posted 19 Aug Link to this post

    I found what I've been looking for, thank you guys for your help!

    I've taken a look at example before but I've been missing the crucial thing from that example:

    function getCurrentEditedModel() {
        var grid = $("#Grid").data("kendoGrid");
        var editRow = grid.tbody.find("tr:has(.k-edit-cell)");
        return grid.dataItem(editRow);
    }
     
    function filterVendors() {
        var model = getCurrentEditedModel();
        return {
            customerId: model.CustomerId
        };
    }

    Now it's all good and ID is passed correctly!

Back to Top
UI for ASP.NET MVC is VS 2017 Ready