Grid InCell editing ClientTemplate not working

[neet-o]

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

[neet-o]

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

[Danail Vasilev]

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

[neet-o]

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");

 

[Kostadin]

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

[neet-o]

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

[Kostadin]

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

[neet-o]

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!