Wednesday, September 24, 2014

Kendo UI Grid: Send Custom request parameter or replace filter parameter

One day I need to pass the Kendo UI grid filter to server ( The idea is to re-use the filter pre-configured from the original grid for the new grid ). However KendoUI  API does not provide the way for you to override the filter request as obvious as other parameters such as pagesize, schema etc.

There are 2 ways to override the filter for KendoUI grid:

1. add filter param into transport.read.data as below
    $('#MemberGrid').on('dblclick', " tbody > tr", function () {
        var $grid = $("#MemberGrid").data("kendoGrid");
        var data = $grid.dataItem(this);        
        var datasourceFromGrid = $grid.dataSource;        
        $theForm = $("#detailswithNav");

        //..append a hidden input that holds passing val
        $("<input type='hidden' />")
        .attr("name", "myDetailReqParam")
        .val(JSON.stringify(new DetailParamModel(datasourceFromGrid._filter,datasourceFromGrid._page,datasourceFromGrid._pageSize,datasourceFromGrid._sort,datasourceFromGrid._take,datasourceFromGrid._skip,datasourceFromGrid.transport.options.read, datasourceFromGrid.options.schema, data.privateData)))
        .appendTo($theForm);

        $theForm.attr("action", $theForm.attr("action") + "/" + data.privateData).submit();           
        });       
        
        
        });

        function DetailParamModel(_filter,_page,_pageSize,_sort,_take,_skip,_read,_schema,_dataRow){
            var detailParam = this;
            detailParam.page = _page;
            detailParam.pageSize = _pageSize;
            detailParam.sort = _sort;
            detailParam.take = _take;
            detailParam.skip = _skip;
            detailParam.read = _read;
            if( typeof _filter !== 'undefined' )
                detailParam.read.data.filter = _filter;
            detailParam.schema = _schema;
            detailParam.privateData = _dataRow;
        
        }

2. add filter param into options as below:
transport: {
                    type: "json",
                    read: _navParam.read,
                    parameterMap: function (options, type) {
                        if (type === "read") {

                            //Added to options for custom request 
                            options.filter = _navParam.filter;

                            return kendo.stringify(options);
                        }
                    }
                }

No comments:

Post a Comment