This is a migrated thread and some comments may be shown as answers.

Dynamic Kendo Grid Issue.

1 Answer 48 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Palanisamy
Top achievements
Rank 1
Palanisamy asked on 10 Oct 2015, 01:53 PM

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

Sort by
0
Georgi Krustev
Telerik team
answered on 14 Oct 2015, 08:21 AM
Hello Palanisamy,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Palanisamy
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Share this question
or