Grid behaviour is not understable

2 posts, 0 answers
  1. Bryan
    Bryan avatar
    8 posts
    Member since:
    Jul 2014

    Posted 19 Apr 2017 Link to this post

    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.            }
  2. Preslav
    Admin
    Preslav avatar
    571 posts

    Posted 21 Apr 2017 Link to this post

    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.
Back to Top