Rank 1
My View
---------------------------------
@using FOS.WC3.WebUILayer.ViewModels;
@{
ViewBag.Title = "ViewLinkedProcessingClients";
Layout = "~/Views/Shared/DefaultLayout.cshtml";
}
<div id="linkedProcessingClientGrid"></div>
@{
var gridName = "FSN_GRLP02";
var viewName = "FSN_GRLP02";
var componentParam = "&@AID=212";
var gridModel = new GridModel
{
GridName = gridName,
ViewName = viewName,
ComponentParam = componentParam
};
@Html.Partial("~/Views/Shared/GridView.cshtml", gridModel);
}
My Partial View
---------------------------
@using FOS.WC3.Framework.Common
@model FOS.WC3.WebUILayer.ViewModels.GridModel
<script src="@Url.Content("~/Scripts/FOS/Common/Grid/FOSKendoGrid.js")"></script>
<body>
<div>
<div id="GridContainer_@(@Model.GridName + "_" +Model.ViewName)"></div>
</div>
</body>
<script>
var gridName = '@Model.GridName';
var viewName = '@Model.ViewName';
var configUrl = '@Url.Action("GetGridConfig", "Grid")' + "?gridName=" + gridName + "&viewName=" + viewName;
var customParam = '@Html.Raw(Model.ComponentParam)';
var initCallBack = '@Model.InitCallBack';
var gridReadUrl = '@Url.Action("GetGridData", "Grid")' + "?gridName=" + gridName + "&viewName=" + viewName + customParam;
var kendoGrid;
$(document).ready(function () {
var successCallback = function (data) {
if (typeof data.Result != 'undefined') {
if (typeof data.Result.columns != 'undefined') {
var model = {};
var gridId = "GridContainer_" + gridName + "_" + viewName;
var gridConfig = data.Result;
kendoGrid = FOSKendoGrid.Initialize(gridId, gridConfig, gridReadUrl, initCallBack);
}
}
};
var errorCallback = function (xhr) {
};
$.ajax({
url: configUrl,
dataType: "json",
success: successCallback,
error: errorCallback
});
});
</script>
My KendoGridJS
----------------------------------
var FOSKendoGrid = function () {
// var initialize = function (columnOptions, dataModel, readUrl) {
var initialize = function (gridId, gridConfig, gridReadUrl, initCallBack) {
var container = $('#' + gridId).html('<div></div>');
var grid = $('div', container);
var filterOption = {
extra: false,
operators: {
string: {
eq: "Is Equal To",
startswith: "Starts With",
contains: "Contains",
endswith: "Ends With"
}
}
};
//var vm = kendo.observable({
// nameTemplate: '<img src="Content/Images/3dots.png" />',
// buildGrid: buildGrid
//});
//function buildGrid() {
// if (vm.nameTemplate !== '') {
// gridConfig.columns[6].template = vm.nameTemplate;
// }
var gridOptions = {
dataSource: {
transport: {
read: {
url: gridReadUrl,
contentType: "application/json",
type: "GET"
}
},
schema: { data: "ComponentData", total: "Total", model: { id: "ID" } },
serverPaging: true,
serverSorting: gridConfig.sortable,
serverFiltering: false
},
//schema: dataModel,
columns:gridConfig.columns,
height: 300,
sortable: {
mode: "single",
allowUnsort: false
},
filterable: false,
pageable: {
pageSize: gridConfig.rowsperpage,
refresh: true,
messages: {
refresh: "Refresh the grid"
}
}
};
grid.kendoGrid(gridOptions);
if (initCallBack) {
initCallBack(grid);
}
return grid;
};
var refresh = function (gridId) {
var grid = $('#' + gridId + '>div');
if (grid.length < 1) {
return;
}
grid.data("kendoGrid").dataSource.read();
};
//var viewModel = function (gridId) {
// var grid = $('#' + gridId + '>div');
// kendo.observable({
// ordersSource: grid.data("kendoGrid").dataSource,
// selectedRow: null,
// change: function (eventArgs) {
// alert('sds');
// this.set("selectedRow", eventArgs.sender.dataItem(eventArgs.sender.select()));
// }
// });
// kendo.bind(grid, viewModel);
//}
return {
Initialize: initialize,
Refresh: refresh
};
}();
Here I have place the dynamic grid code. My issue is, I need event handler for this dynamic kendo grid. I need full controll for this dynamic kendo grid. For that my thinking is, I planned to pass javascript callback function to "Partial View". I dont want to create event in kendo.js.Since we are planning to make generic.So for this, we need to handle in partial view only.Please provide the solution for this.
1 Answer, 1 is accepted
I reviewed the code and noticed the initCallBack function passed to the initialize method. I suppose that want after widget initialization to attach some events. If this is the case, you can just use the Grid's API: For instance, in the initCallBack, you can wire the grid's save event like this:
function initCallBack(grid) { grid.bind("save", {your callback here});}Please note that the standard support service covers only issues directly related to the Kendo UI issues. General implementation details fall out of the scope of the entitled support.
Regards,
Georgi Krustev
Telerik