如何根据kendogrid中的第一个下拉值过滤第二个下拉列表

Question

如何根据Kendogrid中的第一个下拉值过滤第二个下拉列表

enter code here
  @(Html.Kendo().Window().Name("windowFactorDefination").Iframe(true)
                                .Title("Rating Factor Definition")
                                .Draggable()
                                .Resizable()
                                .Modal(true)
                                .Visible(false)
                                .Actions(actions => actions.Close())
                                .Width(850)
                                .Events(e => e.Close("OnCloseFactorWindow"))
                                .Position(settings => settings.Top(30))
                                .Position(settings => settings.Left(100))
                                .Content(@<text>
                                    @(Html.Kendo().Grid<WeezerSetup.Model.RatingGroup>()
                                .Name("FactorDefinationGrid")
                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.RatingFactorDefinitionID).Visible(false);
                                                                            columns.Bound(c => c.FactorDefinationDescription).Title("Factor Definition Description").HeaderHtmlAttributes(new { title = "Rating Factor description" });
                                    columns.ForeignKey(b => b.FactorTypeID, (SelectList)ViewBag.FactorList).Width(120).Title("Factor Type").HeaderHtmlAttributes(new { title = "Data type for Rating Factor" });
                                    columns.ForeignKey(c => c.TableID, (SelectList)ViewBag.TableList).Width(300).EditorTemplateName("TableTypeEditorDropDown").Title("SYS_Table").HtmlAttributes(new { id = "drpTableType" });
                                    columns.ForeignKey(c => c.FieldID, (SelectList)ViewBag.FieldList).Width(300).EditorTemplateName("FieldTypeEditorDropDown").Title("SYS_Table_Field").HtmlAttributes(new { id = "drpFieldType" });
                                    columns.ForeignKey(b => b.WildCard, (SelectList)ViewBag.WildCardList).Width(300).Title("Wild Card").HeaderHtmlAttributes(new { title = "Used when any remaining values have the same results" });
                                    columns.Command(command =>
                                    {
                                        command.Edit().Text(" ").HtmlAttributes(new { id = "btnEdit", @style = "text-align:center;", data_toggle = "tooltip", data_placement = "top", title = "Edit" });
                                    }).HeaderTemplate("Action").Width(210);
                                    columns.Command(command => { command.Destroy().Text(" ").HtmlAttributes(new { @class = "fe-delete", title = "DELETE" }); }).HeaderTemplate("Action").HeaderHtmlAttributes(new { title = "Clicking the icon will Delete specific row" });
                                })
                                    .Resizable(resize => resize.Columns(true))
                                    .Sortable()
                                    .AutoBind(true)
                                    .ToolBar(toolbar => toolbar.Create())
                                    .Pageable(pageable => pageable
                                    .Refresh(true)
                                    .PageSizes(true)
                                    .ButtonCount(5))
                                    .Filterable()
                                    .Editable(editable => editable.Mode(GridEditMode.InLine))
                                    .Events(events => { events.Edit("onEditGrdMyBenefitsGrid"); events.DataBound("onRowDataBoundGrdMyBenefitsGrid"); })

                                    .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .PageSize(5)
                                    .Read(read => read.Action("GetRatingFactorDefination", "RateSetup"))
                                    .Model(model =>
                                    {
                                        model.Id(p => p.RatingFactorDefinitionID);
                                    })
                                    .Create(update => update.Action("AddFactorDefination", "RateSetup"))
                                    .Update(update => update.Action("UpdateFactorDefination", "RateSetup"))
                                    .Destroy(delete => delete.Action("DeleteRatingFactorDefinition", "RateSetup").Data("DeleteRecord"))
                                    ))
                                    @(Html.Kendo().Tooltip()
                                 .For("#FactorDefinationGrid")
                                .Filter("th")
                                .Position(TooltipPosition.Top)
                                .Width(160)
                                .Events(events => events.Show("onShow"))
                                    )
                                </text>))}

因此在上面的代码中有2列NameListID和FieldID都是依赖列，显示为Kendo Grid UI中的下拉列表。

请给我解决方案来过滤下拉列表。

Answer 1

我假设你正在寻找像级联下降的行为。请参阅此demo link

您需要执行以下操作： -

1）从属性添加级联到FieldId的编辑器模板

.CascadeFrom("TableId")

2）向脚本文件添加一个函数以返回选定的表id

function filterFields() {
                return {
                    tableId: $("#TableId").val()
                };
            }

3）在读取调用中添加脚本函数

.DataSource(source => {
                  source.Read(read =>
                  {
                      read.Action("ActionName", "ControllerName")
                          .Data("filterFields");
                  })
.ServerFiltering(true);