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

        }

telerik MVC Gridのページング方法は、戻り値を
ToDataSourceResult(request)　でラップすることで実装する。


using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;

        //申請一覧取得
        public ActionResult Approval_Read([DataSourceRequest] DataSourceRequest request) {

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

        private IEnumerable<ApprovalViewModel> Get申請一覧() {
            using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["db"].ToString())) {

                string sql = "select * from v申請H where 申請タイプ in (1, 2, 3, 4) and 申請者社員ID = @申請者社員ID order by ID desc";
                conn.Open();
                var recs = conn.Query<v申請H>(sql,
                    new {
                        申請者社員ID = Session["UserID"].ToString()
                    });

                List<ApprovalViewModel> 申請ViewModels = new List<ApprovalViewModel>();

                foreach (var rec in recs) {
                    ApprovalViewModel 申請ViewModel = new ApprovalViewModel() {
                        申請者社員姓 = rec.申請者社員姓,
                        状態 = rec.申請状態名,
                        申請書名 = rec.申請タイプ名称,
                        申請No = rec.ID,
                        決済No = rec.決済No,
                        件名 = rec.件名,
                        発注先 = rec.発注先名,
                        金額 = rec.金額
                    };
                    申請ViewModels.Add(申請ViewModel);
                }

                return 申請ViewModels;
            }
        }

kendo ui datasource template logic

templateに処理ロジックの記述が可能

例：項目EstimateRequestDateがnullなら、ブランクにしたい

                    #if (EstimateRequestDate != null) {#
                       #= EstimateRequestDate #
                    #}else{#
                       &nbsp;
                    #}#

# .. #の間がjavascript

項目の値を表示するには、#=

kendo ui datasource sort

                                    var dataSource = new kendo.data.DataSource({
                                        transport: {
                                            read: { url: "./data/repairdata.php", type: "GET", datatype: "json" }
                                        },
                                        batch: false,
                                        schema: {
                                            data: 'data',
                                            total: 'total'
                                        },
                                        pageSize: 10,
                                        sort: {
                                            field: "ReceiveDate", dir:"desc"
                                        },
                                    });

kendo ui use template + datasource + PHP datasourceresult

kendo ui と kendo のtemplate機能　データをphpのdatasourceresultから取得する

sample sourceから実行するが、ことごとくＮＧ
理由： PHPのdatasourceresultのjsonにtotalがあるから

従って、datasourceのschemaにdataを設定する必要がある

    <div id="details"></div>

    <script type="text/x-kendo-template" id="template">
        <h3 style='text'>修理詳細</h3>

        <table>
            <tr>
                <td>
                </td>
            <tr>
        </table>

            #= RepairNo #

    </script>
  
    <script>
            var template = kendo.template($("#template").html());

            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: { url: "./data/RepairdataDetail.php?id=" + vId, type:"GET", datatype: "json" }
                },
                batch: false,
                schema: {
                    data: 'data'                }
            });

            dataSource.bind("change", function () {
                $("#details").html(kendo.render(template, dataSource.data()));
            });

            dataSource.read();
        });
    </script>

オレンジ色した部分がミソ
１．datasourceのschemaにdataを指定すること
２．datasourdceのデータをbindするには、viewではなく、dataだった

kendo wapper PHP DataSourceResultの接続文字列設定

kendo wapper PHP DataSourceResultの接続文字列設定

DataSourceResultのソースを見るとデータベースに接続する方法が
PDOになっている。

従って、PDOと同じ文字列を設定すればＯＫ

     $result = new DataSourceResult(

'mysql:host=yourhost;dbname=yourdb;charset=utf8'

,

'user', 'password');

Kendo UI Wapper PHP DatasourceResult read and filter

PHP source



    $result = new DataSourceResult(DB_STRING, DB_USER, DB_PASSWORD);

    $columns = array('RepairNo','ReceiveNo','Status','UnitName','SubUnitName','SerialNo',
                     'EstimateRequestDate','EstimateAnswerDate','ReceiveDate','ShipDate',
                     'Transporter','TransportNo','RepairAmount','AcceptDate','CustomerCd','AccountCd');

    //セッションの顧客ＣＤを条件とする
    $result->field = 'CustomerCd';
    $result->operator = 'eq';
    $result->value = $_SESSION['customercd'];
    //    $result->value = '010010';

    $result->filter = $result;

    $result = $result->read('repairdata', $columns, $result);

    header('Content-Type: application/json');
    echo json_encode($result, JSON_NUMERIC_CHECK);


DataSourceResultのクラスにfilterメソッドが有り
そのfilterメソッドに値を設定することで、SQL のwhere句が生成されるようです。