2018年1月18日木曜日

Telerik MVC Kendo Gridをdropdownの条件で表示を変更する

Telerik MVC Kendo Gridをdropdownの条件で表示を変更する

header部分にdrondownlistを配置する。
明細部分にgirdを配置する。
gridのdatasourceを以下の通りに配置

.DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(5)
                    .Read(read => read.Action("Apply_Read", "APP", new { iSelect = ViewBag.SelectSearch }))
                    .Model(model => model.Id(p => p.申請No))
                )

ミソは、read.Action(アクション名, コントロール名, new {渡したいパラメータ})

これをコントロール側で受ける
public ActionResult Apply_Read([DataSourceRequest] DataSourceRequest request, string iSelect) {

            return Json(Get申請一覧(iSelect).ToDataSourceResult(request));
        }

        private List<ApprovalViewModel> Get申請一覧(string iSelect) {
           ココでレコードの取得
       }

iSelectはViewBagで渡しているので、view側で

            @(Html.Kendo().DropDownList()
                .Name("Search")
                .Events(ev => ev.Change("onSelect"))
                .DataTextField("Text")
                .DataValueField("Value")
                .BindTo(new List<SelectListItem>() {
                    new SelectListItem() {
                        Text = "下書き/差戻し",
                        Value = "0"
                    },
                    new SelectListItem() {
                        Text = "申請済/承認中",
                        Value = "1"
                    },
                    new SelectListItem() {
                        Text = "承認済",
                        Value = "2"
                    },
                    new SelectListItem() {
                        Text = "すべて",
                        Value = "9"
                    }
                })
                .HtmlAttributes(new { style = "width: 150px;" })
                .Value(ViewBag.SelectSearch)
            )

javascriptでeventを記述
 //検索条件の処理
            function onSelect(arg) { //検索が変更された場合、再表示を行う
                var dataItem = this.dataItem(arg.item);
                //alert("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");

                var url = $("#BaseUrl").val() + dataItem.Value;
                //alert("url= " + url);

                location.href = url;
            }

コントロール側でdropdownlistの値がurlのidとして受け取ったら
ViewBagにセットすれば、gridの表示側は制御できた。

get側
        public ActionResult APPIndex(string id) {
            ViewBag.SectionName = Session["SectionName"].ToString();
            ViewBag.UserName = Session["UserName"].ToString();

            if (id == null) {
                ViewBag.SelectSearch = "0";
            }
            else {
                ViewBag.SelectSearch = id;
            }

            return View();
        }

0 件のコメント:

コメントを投稿