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

Grid behaviour is not understable

1 Answer 81 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bryan
Top achievements
Rank 1
Bryan asked on 19 Apr 2017, 07:43 PM

first scenario: pageSize:5
1. my grid is displaying 5 rows. on the right side of grid footer it says 1-3 of 3 items. how??
2. actual result have seven data items still grid doesn't allow me to go to the next page.

second scenario: pageSize:2
1. in the right side of grid footer it says 1-2 of 3 items, as soon as I clicked on second page it says 3-4 of 7 items.

i really do not understand why grid is behaving so weird. what am I doing wrong?
i have attached png files for both scenario and as well as in what form my data is coming. please take a look at those pictures.
the below one is my grid. please let me know what is wrong i'm doing.

references that I have follow to create this grid is http://www.telerik.com/forums/grid-support-for-data-in-array-form-instead-of-object-form#KyFQE9yl006Mm_iV0QM8fw

http://jsbin.com/utaquf/9/edit?html,js,output

001.$.ajax({
002.        type: "GET",
003.        url: "/Actionables/SearchSubmissions/",
004.        data: {
005.            filters: param,
006.            moduleToSearch: moduleID,
007.            moduleItemToSearch: moduleItemID,
008.        },
009.        success: function (result) {
010.            var defer = $.Deferred();
011.            function confirmation(result) {
012.                if (result.length > 1) {
013.                    $('#field' + questionID).append('<div id=dialog></div>');
014.                    $("#dialog").append('<div id=grid></div>');
015.                    $("#dialog").kendoDialog({
016.                        modal: true,
017.                        visible: false,
018.                        draggable: true,
019.                        closable: false,
020.                        title: "Please Select One Submission",
021.                        maxWidth: 500,
022.                        //maxHeight:300,
023.                        animation: {
024.                            open: {
025.                                effects: "slideIn:down fadeIn",
026.                                duration: 500
027.                            },
028.                            close: {
029.                                effects: "slide:up fadeOut",
030.                                duration: 500
031.                            }
032.                        },
033.                        actions: [
034.                            { text: 'OK', primary: true, action: onOK }
035.                        ]
036.                    });
037.                    $("#grid").kendoGrid({
038.                        dataSource: {
039.                           data: result,
040.                            schema: {
041.                                data: function (result) {
042.                          return $.map(result, function (item) {
043.                           return $.map(item, function (innerData) {
044.                            for (var i = 0; i < displayFields.length; i++){
045.                            if (displayFields[i] == innerData.FieldIDString)
046.                            {
047.                               return {
048.                              EntryGroupID: innerData.EntryGroupID,
049.                              FieldTextString : innerData.FieldTextString,
050.                              EntryValue: innerData.EntryValue
051.                                     }
052.                             }
053.                                   }
054.                               });
055.                           });
056.                        }
057.                     },
058.                     pageSize: 2,
059.                     group: { field: "EntryGroupID" }                         
060.                       },
061.                        filterable: {
062.                            mode: "row"
063.                        },
064.                        pageable: {
065.                            refresh: true,
066.                        },
067.                        noRecords: {
068.                            template: "No records to display"
069.                        },
070.                        groupable:false,
071.                        //scrollable: true,
072.                        selectable: true,
073.                        columns: [{
074.                            field: "EntryGroupID",
075.                            title: "Submissions",
076.                            filterable: {
077.                                cell: {
078.                                    operator: "contains"
079.                                }
080.                            }
081.                        }, {
082.                            field: "FieldTextString",
083.                            title: "Questions",
084.                            filterable: {
085.                                cell: {
086.                                    operator: "contains"
087.                                }
088.                            }
089.                        }, {
090.                            field: "EntryValue",
091.                            title: "Answers",
092.                            filterable: {
093.                                cell: {
094.                                    operator: "contains"
095.                                }
096.                            }
097.                        }]
098.                    });
099.                    var wnd = $("#dialog").data("kendoDialog");
100.                    wnd.wrapper.find('.k-dialog-title').css('background', CIMSFields.backgroundColour).css('color', IMSFields.textColour).css('width','100%').css('text-align','center');
101.                    wnd.open().center(true);
102. 
103.                    function onOK(e) {
104.                        var data = [];
105.                        var grid = $("#grid").data("kendoGrid");
106.                        var selectedItem = grid.dataItem(grid.select());
107.                        if (selectedItem != null) {
108.                            $.map(result, function (item) {
109.                     if (selectedItem.EntryGroupID == item[0].EntryGroupID) {
110.                                    data.push(item);
111.                                    defer.resolve(data);
112.                                }
113.                            });
114.                        }
115.                        else {
116.                            defer.resolve(data);
117.                        }
118.                        wnd.close();
119.                    }
120.                }
121.                else{
122.                    defer.resolve(result);
123.                }
124. 
125.                return defer.promise();
126. 
127.            }

1 Answer, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 21 Apr 2017, 12:20 PM
Hello Bryan,

Please, refer to this forum post:

http://www.telerik.com/forums/grid-support-for-data-in-array-form-instead-of-object-form

Regards,
Preslav
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Bryan
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Share this question
or