Grid events hold previous data

9 posts, 0 answers
  1. Claudia
    Claudia avatar
    36 posts
    Member since:
    Jun 2017

    Posted 13 May 2019 Link to this post

    Hi

    I'm using a grid to show results from a search. Also I included the child grid for the details that shows in the detailInit event. The thing is if I change the search criteria the grid loads perfectly fine but once you click to see the details it shows the details from previous result.

    I tired this and didn't work:

    requestEnd: function () {
    var grid = $("#grid").data("kendoGrid");
    grid.refresh();
    },

    Also tried this:

    $('#grid').data("kendoGrid").unbind('change')

    With the "command" column works with unbind().click(...) but no with in de detailinit.

    Thank you in advanced

  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 15 May 2019 Link to this post

    Hi Claudia,

    Usually, when the Grid data is refreshed, all Grid rows are recreated and the detail items are also forced to refresh. Can you show me how you update the data in the Grid upon search, so I can see how it is refreshed?

    Also, can you show me how you bind the detail Grids. It is possible that they are bound using some parameter that doesn't get updated when there is a new search.

    It would be best if you could share the Grid and its detailInit event handler, as well as the code used to refresh the parent Grid after a search.

    Regards,
    Tsvetina
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Claudia
    Claudia avatar
    36 posts
    Member since:
    Jun 2017

    Posted 15 May 2019 in reply to Tsvetina Link to this post

    Hi Tsvetina

    Thank you for your answer. I was creating the grid every time the search btn was hit. I changed that and now is working. Thisis the code I have now.

    function search()
    {
         
        if ($("#grid").data("kendoGrid"))
            $("#grid").data("kendoGrid").dataSource.read();
        else {
            getDataSource();
            createGrid();
        }
    }
    function getDataSource()
    {   
        datasource = new kendo.data.DataSource({
            requestStart: function () {
                kendo.ui.progress($("#grid"), true);
            },
            requestEnd: function () {
                var grid = $("#grid").data("kendoGrid");
                grid.refresh();
            },
            transport: {
                read:
                    {
                        url: "api_URL"",
                        dataType: "json",
                        type: "POST"
                    },
                parameterMap: function (data, type) {
                    var result = {
                        ......
                    }
                    return kendo.stringify(result);
                }
            },
            change: function () {
                kendo.ui.progress($("#grid"), false);
            },
            pageSize: 10,
        });
    }
    function createGrid()
    {
        var element = $("#grid").kendoGrid({
            dataSource : datasource,
            sortable: true,
            pageable: true,
            detailInit: detailInit,
            dataBound: function (e) {
                ....
                });
            },
            columns: [
                ....
            ]
        });
    }
    function detailInit(e) {
        var trackId = e.data.TrackingID;
        $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource:{
                transport: {
                    read:
                    {
                        url: "api_url,
                        dataType: "json",
                        type: "POST"
                    },
                    parameterMap: function (data, type) {
                        var result = {
                            trackingId: trackId,                       
                        }
                        return kendo.stringify(result);
                    }
                },           
            },
            scrollable: false,
            sortable: true,
            pageable: false,
            columns: [
                ....
            ]
        });  
    }
  4. Priyank
    Priyank avatar
    4 posts
    Member since:
    Feb 2018

    Posted 01 Jul 2020 in reply to Claudia Link to this post

    Hi Claudia,

    I am facing the same issue you have posted here and am struggling since 2 days but have not got any solution yet.

    Can you please help me out.

    Regards

    Priyank

  5. Claudia
    Claudia avatar
    36 posts
    Member since:
    Jun 2017

    Posted 01 Jul 2020 in reply to Priyank Link to this post

    Sure..I solve my problem changing the fact that I was creating the grid every time I hit the search btn… I changed that to check first if the grid was already created and only refresh the data. If you can share your code either me or any admin will be able to help you.

    Regards

     

  6. Priyank
    Priyank avatar
    4 posts
    Member since:
    Feb 2018

    Posted 01 Jul 2020 in reply to Claudia Link to this post

    Thank you so much for looking into it.

    I have a different approach but problem is same.

    Explanation: "Cats" is a drop down and upon selecting values from drop down I am refreshing my grid named as "questionsGrid".

    Now I have detailInit event in my grid where based on ID of grid record , child row should be populated but somehow the ID is being picked from the old row of grid (when I had selected previous value from drop down).

    I hope this explains. Below is the code:

     $("#Cats").kendoDropDownList({
                dataTextField: "Category",
                dataValueField: "CategoryID",
                dataSource: {
                    serverFiltering: true,
                    serverPaging: true,
                    type: "odata",
                    transport: {
                        read: {
                            url: "LESServices.svc/GetQuestionSetsByLoanID",
                            dataType: "json",

                            data: {
                                loanId: $("#ctl00_ContentPlaceHolder1_ctl01_loanId").val(),
                                groupId: $("#ctl00_ContentPlaceHolder1_ctl01_roleId").val(),
                                categoryId: 0
                            },
                            cache: true
                        },
                        parameterMap: function (options, type) {
                            var paramMap = kendo.data.transports.odata.parameterMap(options);
                            delete paramMap.$inlinecount; // <-- remove inlinecount parameter.
                            delete paramMap.$format; // <-- remove format parameter.
                            return paramMap;
                        }

                    },
                    schema: {
                        data: "d",
                        model: {
                            id: "CategoryID",
                            fields: { CategoryID: { type: "number" }, Category: { type: "string" } }
                        }
                    },
                    requestEnd: function (e) { e.response.d.unshift({ Category: "-- Select Category --", CategoryID: -1 }); }
                },
                change: function (e) {
                   
                    var dropDown = $("#Cats").data("kendoDropDownList");
                    selcat = dropDown.value();
                    alert(selcat);
                    $("#questionsGrid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: {
                                    url: "LESServices.svc/GetQuestionSetsByLoanID",
                                    data: {
                                        loanId: $("#ctl00_ContentPlaceHolder1_ctl01_loanId").val(),
                                        groupId: $("#ctl00_ContentPlaceHolder1_ctl01_roleId").val(),
                                        categoryId: selcat
                                    },
                                    cache: false
                                }
                            },
                            batch: true,
                            schema: {
                                model: {
                                    fields: {
                                        CategoryID: { type: "number" },
                                        Category: { type: "string" },
                                        CategorySortName: { type: "string" },
                                        QuestionSetID: { type: "number" },
                                        Questions: { type: "string", editable: false },
                                        Answers: { type: "string" },
                                        FieldTypeID: { type: "number" },
                                        HasException: { type: "string" }
                                    }
                                }
                            },
                            filter: { field: "ParentID", operator: "eq", value: startParentID },
                            group: [
                                { field: "CategoryParentSortName" },
                                { field: "CategorySortName" },
                            ],
                            serverPaging: false,
                            serverFiltering: false,
                            serverSorting: false
                        },
                        height: "700px",
                        selectable: "single row",
                        navigatable: true,
                        groupable: false,
                        filterable: true,
                        sortable: false,
                        resizable: true,
                        pageable: false,
                        editable: true,
                        dataBound: questionsGrid_DataBound,
                        detailInit: function (e) {
                            alert(e.data.ID);
                            detailInit = true;
                            $("<div/>").appendTo(e.detailCell).kendoGrid({
                                dataSource: {
                                    type: "odata",
                                    transport: {
                                        read: {
                                            url: "LESServices.svc/GetQuestionSetsByLoanID",
                                            data: {
                                                loanId: $("#ctl00_ContentPlaceHolder1_ctl01_loanId").val(),
                                                groupId: $("#ctl00_ContentPlaceHolder1_ctl01_roleId").val(),
                                                categoryId: selcat
                                            }, cache: false
                                        }
                                    },
                                    batch: true,
                                    schema: {
                                        model: {
                                            fields: {
                                                ParentID: { type: "number" },
                                                QuestionSetID: { type: "number" },
                                                Questions: { type: "string", editable: false },
                                                Answers: { type: "string" },
                                                HasException: { type: "string" }
                                            }
                                        }
                                    },
                                    filter: { field: "ParentID", operator: "eq", value: e.data.ID},
                                    serverPaging: false,
                                    serverFiltering: false,
                                    serverSorting: false
                                },
                                groupable: false,
                                selectable: "single row",
                                navigatable: true,
                                filterable: false,
                                sortable: false,
                                pageable: false,
                                editable: true,
                               
                                save: questionsGrid_onSave,
                                columns: [
                                    {
                                        field: "Questions",
                                        title: "Question based on response",
                                        width: "100%",
                                        headerAttributes: {
                                            style: "display: none"
                                        }
                                    },
                                    {
                                        field: "Answers",
                                        title: "Answer",
                                        width: "150px",
                                        editor: questionEditor_Answer,
                                        template: "#=Answers#",
                                        filterable: false,
                                        attributes: { class: "editable-cell" },
                                        headerAttributes: {
                                            style: "display: none"
                                        }
                                    },
                                    {
                                        field: "HasException",
                                        title: "Info",
                                        width: "50px",
                                        editor: questionEditor_Info,
                                        template: questionTemplate_Info,
                                        filterable: false,
                                        editable: false,
                                        headerAttributes: {
                                            style: "display: none"
                                        }
                                    }
                                ]
                            });

                            $(".k-grid tbody .k-grid .k-grid-header").hide();

                        },
                        save: questionsGrid_onSave,
                        columns: [
                            {
                                field: "CategoryParentSortName",
                                title: "CategoryParentSortName",
                                width: "50px",
                                groupHeaderTemplate: "#= value.substring(4) #",
                                hidden: true
                            },
                            {
                                field: "CategorySortName",
                                title: "CategorySortName",
                                width: "50px",
                                groupHeaderTemplate: "#= value.substring(4) #",
                                hidden: true
                            },
                            {
                                field: "Questions",
                                title: "Question",
                                width: "500px",
                                filterable: true
                            },
                            {
                                field: "Answers",
                                title: "Answer",
                                width: "150px",
                                editor: questionEditor_Answer,
                                template: "#=Answers#",
                                filterable: false,
                                attributes: { class: "editable-cell" }

                            },
                            {
                                field: "HasException",
                                title: "Info",
                                width: "50px",
                                editor: questionEditor_Info,
                                template: questionTemplate_Info,
                                filterable: false
                            }
                        ]
                    });
                   
                }

            });

  7. Claudia
    Claudia avatar
    36 posts
    Member since:
    Jun 2017

    Posted 01 Jul 2020 in reply to Priyank Link to this post

    Hello Priyank

    Try to do what I did.. in your ddl change event check first if the grid was already created and if it was just refresh the dataSource. Lets see if it works that way ;)

    if ($("#questionsGrid").data("kendoGrid"))
     $("#questionsGrid").data("kendoGrid").dataSource.read();
    else {
     $("#questionsGrid").kendoGrid
      {
       //rest of your code here
      }
    }

     

     

  8. Priyank
    Priyank avatar
    4 posts
    Member since:
    Feb 2018

    Posted 01 Jul 2020 in reply to Claudia Link to this post

    Hi Claudia,

    I did that. First time (selection of first record in DD) data gets loaded in grid and second time when I change drop down selection, it just gets refreshed and stays with the rows whatever were there previously .

    Thanks for your patience.

  9. Priyank
    Priyank avatar
    4 posts
    Member since:
    Feb 2018

    Posted 01 Jul 2020 Link to this post

    Had to put this empty method in place to re-initiate the grid.

    if ($("#questionsGrid").data("kendoGrid")) {
                        $("#questionsGrid").empty(); // Empty the Grid content (inner HTML)

                    }

                    $("#questionsGrid").kendoGrid({
                        dataSource: {
                            type: "odata".........

     

    Thanks for your help :)

Back to Top