Harry's Tech World

參考完黑暗執行緒的「在ASP.NET 4中使用Kendo UI Grid」，發現他在參數的部分是直接使用KendoGridRequest 來接，額外的參數就接在後面繼續傳。

//這段Code是從「黑暗執行緒」-在ASP.NET MVC 4中使用Kendo UI Grid 
//擷取下來的。       
public JsonResult Grid(KendoGridRequest request, string keywd)
{
  var result = SimMemberInfo.SimuDataStore.Where(o =>
  string.IsNullOrEmpty(keywd) || o.UserName.Contains(keywd));
  return Json(new KendoGrid<SimMemberInfo>(request, result));
}

但有一個比較不符合我們使用的是，我們可能會從前端得表單內傳回許多查詢條件，因此會使用Model 來接變數 ，

並且宣告一個Property 名稱為「KendoGridRequest」 型態為「KendoGridRequest」，希望可以讓Kendo 直接ModelBinding 到這個變數上，

public class QueryModel
{
   public KendoGridRequest KendoGridRequest { get; set; }
   public string Condition1 { get; set; }
   public string Condition2 { get; set; }
   public string Condition3 { get; set; }
}

為了日後開發上的方便性與擴充性，我們不希望每一個開發人員在定義Model 時還要自行宣告這個變數，

所以我們這個變數就定義在BaseModel 上，這樣日後所有的ViewModel 只需要繼承這個Model 就可擁有所有的共用變數，

public class QueryModel:BaseModel
{
   public string Condition1 { get; set; }
   public string Condition2 { get; set; }
   public string Condition3 { get; set; }
}

public class BaseModel
{
   public KendoGridRequest KendoGridRequest { get; set; }
}

當然，也可以直接繼承「KendoGridRequest」，由於影響層面的關係，這次我們並沒有這麼做，

但也正因為如此，在GridDataSource 的部份我們必須要動一些手腳，不然Kendo 傳回來的資料，會接不到

另外為了共用及維護性，我另外建立了一個Kendo Widget ，

<div id="grid"></div>
<script type="text/javascript">
    $(function () {
        //建立Kendo DataSource
        var dataSrc = new kendo.data.DataSource({
            transport: {
                read: {
                    //以下其實就是$.ajax的參數
                    type: "POST",
                    url: "@Url.Action("GetGridData", "KendoExt")",
                    dataType: "json",
                    data: function () {
                    }
                }
            },
            pageSize: 10,
            serverPaging: true,
            serverSorting: true
        }
        );
        //這是Kendo Widget
        $('#grid').kendoExtGrid({
            dataSource: dataSrc,
            columns: [
                { field: "Id", title: "ID" },
                {
                    field: "Name", title: "Name",
                }
            ]
        });
    })
</script>

上面這段Code 沒有什麼特別的，就是宣告DataSource 接著做Kendo Widget 的初始化，

比較特別得是下面的一段Kendo Widget  Code，我們必須要在parameterMap 的地方 把回傳的變數 KendoGridRequest 指為空的，

這個作法其實是為了讓資料拋回後端時，去觸發Model Binding，提醒系統記得幫我們把資料塞進這個變數裡面。

$(function () {
	kendoui = kendo.ui,
	Widget = kendoui.Widget

	var ExtGrid = Widget.extend({
		dataSource: null,
		pageable: true,
		sortable: {
			mode: "multiple",
			allowUnsort: true
		},
		dataBound: function () { },
		init: function (element, options) {
			var that = this;
			Widget.fn.init.call(that, element, options);
			if (options.sortable) {
				sortable = options.sortable;
			}
			if (typeof options.dataBound === "function") {
				dataBound = options.dataBound;
			}

			if (!$.isEmptyObject(options.dataSource)) {
				//因為Schema 無法後來再指給他,只好重新new 一個DataSource起來重塞.
				//這個做法式為了讓共用更好操作,使用者無需再自行設定Schema and 設定
				//trigger KendoGridRequest Model Binding
				that.dataSource = new kendo.data.DataSource({
					schema: {
						//取出資料陣列
						data: function (d) { return d.data; },
						//取出資料總筆數(計算頁數用)
						total: function (d) { return d.total; }
					},
					pageSize: options.dataSource.options.pageSize,
					serverPaging: options.dataSource.options.serverPaging,
					serverSorting: options.dataSource.options.serverSorting

				});
				that.dataSource.transport = options.dataSource.transport;
				that.dataSource.transport.parameterMap = function (data, type) {
					if (type == "read") {
						//trigger KendoGridRequest Model Binding
						data.KendoGridRequest = null;
						return data;
					}
				};
			}

			this._initWidget(element, that, options);
		},
		_initWidget: function (element, that, options) {
			$('#' + element.id).kendoGrid({
				pageable: that.pageable,
				columns: options.columns,
				dataSource: that.dataSource,
				sortable: that.sortable,
				dataBound: function () {
					that.dataBound();
					//沒資料塞一列顯示"查無資料"
					var grid = $("#" + element.id).data("kendoGrid");
					if (grid.dataSource.view().length == 0) {
						var colCount = that.options.columns.length;
						$("#" + element.id).find('.k-grid-content tbody').append('<tr class="kendo-data-row"><td colspan="' +
                                colCount +
                                '" style="text-align:center"><b>查無資料!</b></td></tr>');
					}
				}
			});
		},
		options: {
			name: "ExtGrid"
		}
	});
	kendoui.plugin(ExtGrid);

})

透過上述的方法，我們節省了大量客製化的Code ，直接讓Kendo 幫我們完成許多事情！

GitHub:

「https://github.com/changyuhao625/KendoExtension」