Grid events hold previous data

[Claudia]

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

[Tsvetina]

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

[Claudia]

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

[Priyank]

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

[Claudia]

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

 

[Priyank]

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

        });

[Claudia]

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

 

 

[Priyank]

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.

[Priyank]

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