Filter grid based on listview

[Trent]

Environment:
VS2010 - MVC4 Web Project
Server 2008 R2
IE 8 / FF 10
Telerik UI for ASP.NET MVC 2014.1 318
jQuery 1.9.0

I am not able to get a reference using the element.data("kendoGrid") syntax.  Every time I hit that code, my variable is undefined.

Can someone please point me to what I'm missing?

Html:

01.<div class="col-md-2">
02.    <div class="panel panel-default">
03.        <div class="panel-heading">Line of Business</div>
04.        <div class="panel-body" id="lobnav"></div>
05.    </div>
06.    <div class="panel panel-default">
07.        <div class="panel-heading">Application</div>
08.        <div class="panel-body" id="lobapp"></div>
09.    </div>
10.    <div class="panel panel-default">
11.        <div class="panel-heading">Filter</div>
12.        <div class="panel-body" id="jobfilter"></div>
13.    </div>
14.</div>
15.<div class="col-md-10">
16.    <div id="jobsgrid"></div>
17.</div>

Code:
​

001.$(document).ready(function () {
002.    function resizeGrid() {
003.        var gridElement = $("#jobsgrid"),
004.            dataArea = gridElement.find(".k-grid-content"),
005.            gridHeight = gridElement.innerHeight(),
006.            otherElements = gridElement.children().not(".k-grid-content"),
007.            otherElementsHeight = 0;
008.        otherElements.each(function () {
009.            otherElementsHeight += $(this).outerHeight();
010.        });
011.        dataArea.height(gridHeight - otherElementsHeight);
012.    };
013.
014.    function loadApplications(arg) {
015.        $("#lobapp").kendoListView({
016.            selectable: "single",
017.            change: function (e) {
018.                loadJobs(arg, false);
019.            },
020.            template: "<div>${Name}</div>",
021.            dataSource: {
022.                transport: {
023.                    read: {
024.                        url: "/api/App"
025.                    },
026.                    parameterMap: function (options, type) {
027.                        return { 'id': arg };
028.                    }
029.                }
030.            }
031.        });
032.    };
033.
034.    function filterJobs(arg) {
035.        var jgrid = $("#jobsgrid").data("kendoGrid");
036.        if (arg !== 1) {
037.            jgrid.dataSource.filter({
038.                field: "Status", operator: "eq", value: arg
039.            });
040.        } else {
041.            jgrid.dataSource.filter({});
042.        }
043.    };
044.
045.    $(window).resize(function () {
046.        resizeGrid();
047.    });
048.
049.    $("#jobfilter").kendoListView({
050.        selectable: "single",
051.        template: "<div id='filter-${Id}'>${Name}</div>",
052.        dataSource: {
053.            transport: {
054.                read: {
055.                    url: "/api/Theme"
056.                }
057.            }
058.        },
059.        change: function(e) {
060.            var itm = this.select().index(), dataItm = this.dataSource.view()[itm];
061.            filterJobs(dataItm.id);
062.        }
063.    });
064.
065.    $("#lobnav").kendoTreeView({
066.        select: function (e) {
067.            var tree = this, src = tree.dataItem(e.node);
068.            loadApplications(src.id);
069.            if (src.hasChildren) {
070.                loadJobs(src.id, true);
071.            } else {
072.                loadJobs(src.id, false);
073.            }
074.        },
075.        dataSource: {
076.            transport: {
077.                read: {
078.                    url: "/api/Lob"
079.                }
080.            },
081.            schema: {
082.                model: {
083.                    id: "Id",
084.                    hasChildren: "HasChildren"
085.                }
086.            }
087.        },
088.        loadOnDemand: false,
089.        dataTextField: "Name"
090.    });
091.
092.    function loadJobs(arg, parent) {
093.        $("#jobsgrid").kendoGrid({
094.            columns: [
095.                {
096.                    field: "owner",
097.                    title: "Application",
098.                    width: "5%"
099.                },
100.                {
101.                    field: "name",
102.                    title: "Process Name",
103.                    width: "18%"
104.                },
105.                {
106.                    field: "prcnt",
107.                    title: "Percent Complete",
108.                    template: "<div class='progress'></div>",
109.                    width: "30%"
110.                },
111.                {
112.                    field: "avgtime",
113.                    title: "Average Time",
114.                    format: "{0:hh:mm:ss}",
115.                    width: "12%"
116.                },
117.                {
118.                    field: "elapsed",
119.                    title: "Elapsed Time",
120.                    format: "{0:hh:mm:ss}",
121.                    width: "12%"
122.                },
123.                {
124.                    field: "dproc",
125.                    title: "Dependent Process",
126.                    width: "5%"
127.                },
128.                {
129.                    field: "status",
130.                    title: "Status"
131.                }
132.            ],
133.            sortable: {
134.                mode: "single",
135.                allowUnsort: true
136.            },
137.            pageable: true,
138.            scrollable: false,
139.            resizable: true,
140.            dataSource: {
141.                transport: {
142.                    read: {
143.                        url: "/api/Process?id=" + arg + "&parent=" + parent
144.                    }
145.                },
146.                schema: {
147.                    data: "Data",
148.                    total: "Count",
149.                    model: { id: "Id" }
150.                },
151.                pageSize: 15,
152.                serverPaging: true,
153.                serverFiltering: true
154.            },
155.            dataBound: function (e) {
156.                var grid = this;
157.                $(".progress").each(function () {
158.                    var row = $(this).closest("tr");
159.                    var model = grid.dataItem(row);
160.                    if (model.prcnt <= 100) {
161.                        $(this).kendoProgressBar({
162.                            value: model.prcnt,
163.                            type: "percent"
164.                        });
165.                    } else {
166.                        $(this).kendoProgressBar({
167.                            value: model.prcnt,
168.                            type: "percent"
169.                        }).html("<span class='k-progress-status-wrap'>" +
170.                            "<span class='k-progress-status'>Overtime</span></span>" +
171.                            "<div class='k-state-selected k-complete' style='width: 100%;'>" +
172.                            "<span class='k-progress-status-wrap overtime' style='width: 100%;'>" +
173.                            "<span class='k-progress-status overtime'>Overtime</span></span></div>");
174.                    }
175.                });
176.            }
177.        });
178.    };
179.});

[Alexander Valchev]

Hello Trent,

The way you get reference to the Grid looks correct. I am not sure what exactly causes the problem but I found a issue in the provided code which might be related - Grid widget is initialized multiple times which is not supported. I found that loadJobs function is called in select/change event handlers which are likely to be triggered multiple times.

In case you want to just change the url please consider defining it as a function.

• http://docs.telerik.com/kendo-ui/api/framework/datasource#configuration-transport.read.url (please check 2nd code example)

Then you will be able to just read the dataSource and pass the arg & parent arguments via read method:

http://docs.telerik.com/kendo-ui/api/framework/datasource#methods-read

Regards,
Alexander Valchev
Telerik

 

 

[Trent]

I refactored the page to fix the multi init issue.

I guess I don't understand the datasource (or javascript) well enough yet, because I don't see how I pass my parameters back to the web api service call.

I am no longer able to load the grid based on the listview or treeview selection.

You can see that I've got 2 empty functions that I think will be what I use to call .read on the datasource for the grid (or the other listview), but I don't know what to actually put in there.

Here is the refactored script -

001.$(document).ready(function () {
002.        var appsDataSource = new kendo.data.DataSource({
003.            transport: {
004.                read: {
005.                    url: "/api/App"
006.                },
007.                parameterMap: function(data, action) {
008.                    if (action === "read") {
009.                        return { 'id': data.id };
010.                    } else {
011.                        return data;
012.                    }
013.                }
014.            }
015.        });
016.
017.        var jobsDataSource = new kendo.data.DataSource({
018.            transport: {
019.                read: {
020.                    url: "/api/Process"
021.                }
022.            },
023.            schema: {
024.                data: "Data",
025.                total: "Total",
026.                model: { id: "Id" }
027.            },
028.            pageSize: 15,
029.            serverPaging: true,
030.            serverFiltering: true
031.        });
032.
033.        var appnav = $("#lobapp").kendoListView({
034.            selectable: "single",
035.            autoBind: false,
036.            change: function(e) {
037.
038.            },
039.            template: "<div>${Name}</div>",
040.            dataSource: appsDataSource
041.        });
042.
043.        var jobsfilter = $("#jobfilter").kendoListView({
044.            selectable: "single",
045.            loadOnDemand: false,
046.            template: "<div id='filter-${Id}'>${Name}</div>",
047.            dataSource: {
048.                transport: {
049.                    read: {
050.                        url: "/api/Theme"
051.                    }
052.                }
053.            },
054.            change: function(e) {
055.                var itm = this.select().index(), dataItem = this.dataSource.view()[itm];
056.                var jgrid = $("#jobsgrid").data("kendoGrid");
057.                if (dataItem.id !== 1) {
058.                    jgrid.dataSource.filter({
059.                        field: "status", operator: "eq", value: dataItem.id
060.                    });
061.                } else {
062.                    jgrid.dataSource.filter({});
063.                }
064.            }
065.        });
066.
067.        var lobnav = $("#lobnav").kendoTreeView({
068.            select: function (e) {
069.                var tree = this, src = tree.dataItem(e.node);
070.                loadApplications(src.id);
071.                if (src.hasChildren) {
072.                    loadJobs(src.id, true);
073.                } else {
074.                    loadJobs(src.id, false);
075.                }
076.            },
077.            dataSource: {
078.                transport: {
079.                    read: {
080.                        url: "/api/Lob"
081.                    }
082.                },
083.                schema: {
084.                    model: {
085.                        id: "Id",
086.                        hasChildren: "HasChildren"
087.                    }
088.                }
089.            },
090.            loadOnDemand: false,
091.            dataTextField: "Name"
092.        });
093.
094.        function loadJobs(e) {};
095.
096.        function loadApplications(e) {};
097.
098.        var jobgrid = $("#jobsgrid").kendoGrid({
099.            columns: [
100.                    {
101.                        field: "owner",
102.                        title: "Application",
103.                        width: "5%"
104.                    },
105.                    {
106.                        field: "name",
107.                        title: "Process Name",
108.                        width: "18%"
109.                    },
110.                    {
111.                        field: "prcnt",
112.                        title: "Percent Complete",
113.                        template: "<div class='progress'></div>",
114.                        width: "30%"
115.                    },
116.                    {
117.                        field: "avgtime",
118.                        title: "Average Time",
119.                        format: "{0:hh:mm:ss}",
120.                        width: "12%"
121.                    },
122.                    {
123.                        field: "elapsed",
124.                        title: "Elapsed Time",
125.                        format: "{0:hh:mm:ss}",
126.                        width: "12%"
127.                    },
128.                    {
129.                        field: "dproc",
130.                        title: "Dependent Process",
131.                        width: "5%"
132.                    },
133.                    {
134.                        field: "status",
135.                        title: "Status"
136.                    }
137.                ],
138.            sortable: {
139.                mode: "single",
140.                allowUnsort: true
141.            },
142.            pageable: true,
143.            autoBind: false,
144.            scrollable: false,
145.            resizable: true,
146.            dataSource: jobsDataSource,
147.            dataBound: function (e) {
148.                var grid = this;
149.                $(".progress").each(function () {
150.                    var row = $(this).closest("tr");
151.                    var model = grid.dataItem(row);
152.                    if (model.prcnt <= 100) {
153.                        $(this).kendoProgressBar({
154.                            value: model.prcnt,
155.                            type: "percent"
156.                        });
157.                    } else {
158.                        $(this).kendoProgressBar({
159.                            value: model.prcnt,
160.                            type: "percent"
161.                        }).html("<span class='k-progress-status-wrap'>" +
162.                                "<span class='k-progress-status'>Overtime</span></span>" +
163.                                "<div class='k-state-selected k-complete' style='width: 100%;'>" +
164.                                "<span class='k-progress-status-wrap overtime' style='width: 100%;'>" +
165.                                "<span class='k-progress-status overtime'>Overtime</span></span></div>");
166.                    }
167.                });
168.            }
169.        });
170.    });

[Trent]

After playing with a it a bit more, I realize this isn't specific to the grid, but the datasource.

I need to make sure I'm passing id and parent to the my web api (in addition to the paging parameters (take, skip, page, pagesize) and any filters).

I found a post on passing parameters to a datasource, that looks helpful.  Specifically around the parameterMap as a function.  Would that solve my issue?  Can you provide an example of how I could use it to pass the id and parent params?

[Trent]

I made a couple of changes, but I'm still not getting the expected results.

I separated out my datasources and created 2 variables for Id and isParent.  When I check my request object, I don't see the paging information being passed.  The grid also does not show any paging information.

It looks like I've lost my connection between the grid and Total  (so no paging information).  I assume this is related to my use of the parameterMap, but I don't know how to fix it.

Here is the revised code:

$(document).ready(function () {
    var isParent, jobOwnerId;
    var appsDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/api/App"
            },
            parameterMap: function(data, action) {
                if (action === "read") {
                    data.id = jobOwnerId;
                    data.parent = isParent;
                    return data;
                } else {
                    return data;
                }
            }
        }
    });

    var jobsDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/api/Process"
            },
            parameterMap: function(data, action) {
                if (action === "read") {
                    data.id = jobOwnerId;
                    data.parent = isParent;
                    return data;
                } else {
                    return data;
                }
            }
        },
        schema: {
            data: "Data",
            total: "Total",
            model: { id: "Id" }
        },
        serverPaging: true,
        serverFiltering: true
    });

    var appnav = $("#lobapp").kendoListView({
        selectable: "single",
        autoBind: false,
        change: function(e) {
            var listvw = this, src = listvw.dataItem(e.node);
            jobOwnerId = src.id;
            isParent = false;
            jobsDataSource.read();
        },
        template: "<div>${Name}</div>",
        dataSource: appsDataSource
    });

    var lobnav = $("#lobnav").kendoTreeView({
        select: function (e) {
            var tree = this, src = tree.dataItem(e.node);
            jobOwnerId = src.id;
            isParent = src.hasChildren;
            appsDataSource.read();
            jobsDataSource.read();
        },
        dataSource: {
            transport: {
                read: {
                    url: "/api/Lob"
                }
            },
            schema: {
                model: {
                    id: "Id",
                    hasChildren: "HasChildren"
                }
            }
        },
        loadOnDemand: false,
        dataTextField: "Name"
    });

    var jgrid = $("#jobsgrid").kendoGrid({
        columns: [
                {
                    field: "owner",
                    title: "Application",
                    width: "5%"
                },
                {
                    field: "name",
                    title: "Process Name",
                    width: "18%"
                },
                {
                    field: "prcnt",
                    title: "Percent Complete",
                    template: "<div class='progress'></div>",
                    width: "30%"
                },
                {
                    field: "avgtime",
                    title: "Average Time",
                    format: "{0:hh:mm:ss}",
                    width: "12%"
                },
                {
                    field: "elapsed",
                    title: "Elapsed Time",
                    format: "{0:hh:mm:ss}",
                    width: "12%"
                },
                {
                    field: "dproc",
                    title: "Dependent Process",
                    width: "5%"
                },
                {
                    field: "status",
                    title: "Status"
                }
            ],
        sortable: {
            mode: "single",
            allowUnsort: true
        },
        pageable: {
            pageSizes: [15, 25, 50]
        },
        autoBind: false,
        scrollable: false,
        resizable: true,
        dataSource: jobsDataSource,
        dataBound: function (e) {
            var grid = this;
            $(".progress").each(function () {
                var row = $(this).closest("tr");
                var model = grid.dataItem(row);
                if (model.prcnt <= 100) {
                    $(this).kendoProgressBar({
                        value: model.prcnt,
                        type: "percent"
                    });
                } else {
                    $(this).kendoProgressBar({
                        value: model.prcnt,
                        type: "percent"
                    }).html("<span class='k-progress-status-wrap'>" +
                            "<span class='k-progress-status'>Overtime</span></span>" +
                            "<div class='k-state-selected k-complete' style='width: 100%;'>" +
                            "<span class='k-progress-status-wrap overtime' style='width: 100%;'>" +
                            "<span class='k-progress-status overtime'>Overtime</span></span></div>");
                }
            });
        }
    });

    var jobsfilter = $("#jobfilter").kendoListView({
        selectable: "single",
        loadOnDemand: false,
        template: "<div id='filter-${Id}'>${Name}</div>",
        dataSource: {
            transport: {
                read: {
                    url: "/api/Theme"
                }
            }
        },
        change: function (e) {
            var itm = this.select().index(), dataItem = this.dataSource.view()[itm];
            var grid = $("#jobsgrid").data("kendoGrid");
            if (dataItem.id !== 1) {
                grid.dataSource.filter({
                    field: "status", operator: "eq", value: dataItem.id
                });
            } else {
                grid.dataSource.filter({});
            }
        }
    });
});

Here is the web api controller:

01.public class ProcessController : ApiController
02.    {
03.        private const int PageSize = 15;
04.        private const int PageIndex = 0;
05.        private readonly HttpRequest _request;
06.
07.        public ProcessController()
08.        {
09.            _request = HttpContext.Current.Request;
10.        }
11.
12.        public Response Get()
13.        {
14.            var skip = _request["skip"] == null ? PageIndex : int.Parse(_request["skip"]);
15.            var take = _request["take"] == null ? PageSize : int.Parse(_request["take"]);
16.            int? ownerid = int.Parse(_request["id"]);
17.            var isparent = _request["parent"] != null && bool.Parse(_request["parent"]);
18.            return Stub(take, skip, ownerid, isparent);
19.        }
20.
21.        private Response Stub(int pgsize, int pgnum, int? id, bool parent)
22.        {
23.            var nav = TempData.Processes();
24.            Dictionary<int, string> num;
25.
26.            if (parent)
27.            {
28.                num =
29.                    TempData.LineOfBusinesses()
30.                        .Where(lb => lb.ParentId == id || lb.Id == id)
31.                        .Select(x => new {x.Id, x.Name})
32.                        .ToDictionary(x => x.Id, x => x.Name);
33.            }
34.            else
35.            {
36.                num =
37.                    TempData.LineOfBusinesses()
38.                        .Where(lb => lb.Id == id)
39.                        .Select(x => new { x.Id, x.Name })
40.                        .ToDictionary(x => x.Id, x => x.Name);
41.            }
42.
43.            var y = nav.Where(c => num.ContainsKey(c.OwnerId)).Select(n => new
44.            {
45.                id = n.Id,
46.                owner = num[n.OwnerId],
47.                name = n.Name + "-" + n.Id,
48.                dproc = n.DependentProcess,
49.                avgtime = n.AverageTime.ToString(@"hh\:mm\:ss"),
50.                elapsed = n.ElapsedTime.ToString(@"hh\:mm\:ss"),
51.                status = n.Status,
52.                prcnt = Math.Round((double) n.ElapsedTime.Ticks/n.AverageTime.Ticks*100)
53.            }).ToList();
54.
55.            var cnt = y.Count();
56.
57.            return new Response(y.Skip(pgsize * pgnum).Take(pgsize).ToArray(), cnt);
58.        }
59.    }

Here is the Response object:

01.public class Response
02.   {
03.       public int Count { get; set; }
04.       public Array Data { get; set; }
05.
06.       public Response(Array data, int count)
07.       {
08.           Data = data;
09.           Count = count;
10.       }
11.   }

[Trent]

I realized that I had bound the schema total to "Total", when I am returning "Count".  Once I fixed that, it worked as expected.

[Alexander Valchev]

Hi Trent,

I am glad that you managed to resolve the issue. Are there any unanswered questions left or we can consider this case as resolved and closed?

Regards,
Alexander Valchev
Telerik