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

Grid events hold previous data

8 Answers 896 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Claudia
Top achievements
Rank 1
Claudia asked on 13 May 2019, 07:09 PM

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

8 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 15 May 2019, 11:59 AM
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.
0
Claudia
Top achievements
Rank 1
answered on 15 May 2019, 01:02 PM

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: [
            ....
        ]
    });  
}
0
Priyank
Top achievements
Rank 1
answered on 01 Jul 2020, 02:23 PM

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

0
Claudia
Top achievements
Rank 1
answered on 01 Jul 2020, 02:57 PM

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

 

0
Priyank
Top achievements
Rank 1
answered on 01 Jul 2020, 03:10 PM

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
                        }
                    ]
                });
               
            }

        });

0
Claudia
Top achievements
Rank 1
answered on 01 Jul 2020, 03:42 PM

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
  }
}

 

 

0
Priyank
Top achievements
Rank 1
answered on 01 Jul 2020, 04:04 PM

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.

0
Priyank
Top achievements
Rank 1
answered on 01 Jul 2020, 05:19 PM

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 :)

Tags
Grid
Asked by
Claudia
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Claudia
Top achievements
Rank 1
Priyank
Top achievements
Rank 1
Share this question
or