Make a cascading inline grid edit template for ASP.NET Core

[Jack]

Hello I have searched multiple forum responses on similar issues for this answer seen the cascading dropdown demos and the MVC5 dropdown demo. I can't seem to make my cascading inline grid dropdown recognize the parent object to enable the second dropdown.

I have been able to access the cascade effect when the initial dropdown is not in the grid. So I can make a dropdown that cascades I just cant seem to get it to work in the grid while editing.

Any suggestions? Thanks!

code below

subedit.cshtml

@model CircuitStatus
@(Html.Kendo().DropDownList()
          .Name("subdrop")
          .OptionLabel("Select option")
          .DataTextField("station_name")
          .DataValueField("station_id")
          .DataSource(source =>
            {
                source.Read(read =>
                        {
                            read.Action("station_Read", "CircuitStatus");
                        }).ServerFiltering(true);
            })
        )
 

cascadedropdowntemplate.chtml

@(Html.Kendo().DropDownList()
          .Name("circuit")
          .HtmlAttributes(new { style = "width:100%" })
          .OptionLabel("Select product...")
          .DataTextField("circuit_name")
          .DataValueField("circuit_id")
          .DataSource(source =>
                  {
              source.Read(read =>
              {
                  read.Action("cirucitBystation_Read", "CircuitStatus")
                      .Data("getSubstationName");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("subdrop")

          )

<script type="text/javascript">
    function getSubstationName() {
        console.log($("#subdrop").val());
        return {
            circuitbySubstationName: $("#subdrop").val()
        };
    }
</script>

finally the index.cshtml

<div class="row"><div class="col-12">
        @(Html.Kendo().Grid<QCReview.Models.CircuitStatus>()
                .Name("grid")
                .Columns(columns =>
                {
                columns.Bound(p => p.STATION_NAME).EditorTemplateName("subedit").Filterable(filterable => filterable.Multi(true).CheckAll(true));
                columns.Bound(p => p.CIRCUIT_ID).Title("Circuit ID").EditorTemplateName("cascadedropdowntemplate");
                    columns.Bound(p => p.QA_EXT).ClientTemplate("<input type='checkbox' disabled #=QA_EXT ? checked='checked' :'' # />").Title("QA Ready");
                    columns.Bound(p => p.OMS_READY).ClientTemplate("<input type='checkbox' disabled #=OMS_READY ? checked='checked' :'' # />").Title("OMS Ready");
                    columns.Bound(p => p.INSERT_DATETIME).Format("{0:MM/dd/yyyy}").Title("Insert Date");
                    columns.Bound(p => p.QA_DATETIME).Format("{0:MM/dd/yyyy}").Title("QA Date");
                    columns.Bound(p => p.LAST_UPDATE_DATETIME).Format("{0:MM/dd/yyyy hh:mm tt}").Title("Last Update Date");
                    columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);
                })
                .Events(events =>
                    events.Edit("edit")
                    )
                .ToolBar(toolbar => toolbar.Create())
                .Editable(editable => editable.Mode(GridEditMode.InLine))
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable(filter => filter.Extra(false)
                .Operators(operators => operators
                .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
                )))
                .Groupable()
                .HtmlAttributes(new { style = "height:550px;" })
                .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(50)
                .Events(events =>
                {
                    events.Error("error_handler");
                    events.Change("onChange");
                })
        .Model(model =>
        {
            model.Id(p => p.CIRCUIT_ID);
            model.Field(p => p.STATION_NAME).Editable(true);
            model.Field(p => p.CIRCUIT_ID).Editable(true);
            model.Field(p => p.INSERT_DATETIME).Editable(false);
            model.Field(p => p.SUBSTATION_NAME).Editable(true);
            model.Field(p => p.LAST_UPDATE_DATETIME).Editable(false);
    })
    .Create(create => create.Action("CircuitStatus_Create", "CircuitStatus"))
    .Read(read => read.Action("CircuitStatus_Read", "CircuitStatus"))
    .Update(update => update.Action("CircuitStatus_Update", "CircuitStatus"))
    .Destroy(update => update.Action("CircuitStatus_Destroy", "CircuitStatus"))

    )
    )
<script type="text/javascript">
    function getSubstationName() {
        console.log($("#subdrop").val());
        return {
            circuitbystationName: $("#subdrop").val()
        };
    }
</script>
 
    

 

 

 

[Alexander]

Hi Jack,

Thank you for reaching out and for taking the time to share the relevant configuration that is currently being held on your premises.

We have readily available online examples that demonstrate how to create cascading drop-down editors based on the editing scenario you have:

For both the InLine and PopUp edit modes of the Grid this would be:

• https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/grid-editing-cascading-dropdownlist

And for the InCell Editing would be:

• https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/grid-incell-editing-with-cascading-dropdownlist

Although the example tackles a Telerik UI for ASP.NET MVC scenario, the same approaches are also applicable for the Telerik UI for ASP.NET Core suite.

Additionally, I noticed that your current scenario involves normal HTML Helper components declaration for the editors. Notice, that the InLine and PopUp editing example, in particular, utilizes the <WidgetName>For Helpers instead, which are generally used for data-binding scenarios such as having an external custom editor.

When a normal HTML Helper component is used as an editor and bound to a field the "data_bind" attribute needs to be configured as well. This will ensure successful model binding when performing operations for the specified field. 

@(Html.Kendo().DropDownList()
    .Name("subdrop")
    ...
    .HtmlAttributes(new {data_bind="value:{fieldName}"})
)

To elaborate more, the "data_bind" attribute is commonly used for value-binding scenarios such as having an external editor template with a different name associated with an arbitrary column field within the Grid. The attribute's main purpose is to keep the component in which the attribute is specified and the value of a View-Model field in sync.

Furthermore, I noticed that both editors have the same unique identifiers which would cause duplicate initialization upon triggering a particular row's edit state. Thus, it is mandatory that each of the specified external editors have a different unique identifier.

I hope this information helps. Please give the aforementioned suggestions a try and let me know how it works out for you.

Kind Regards,
Alexander
Progress Telerik

[Alexander]

Hi Jack,

I noticed that you have edited your previous reply from the thread. Were you able to try out the aforementioned suggestions and if so, could you please let me know how did they work out for you?

Thank you in advance.