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

Grid not updating after the datasource is updated

8 Answers 2190 Views
Grid
This is a migrated thread and some comments may be shown as answers.
stephen
Top achievements
Rank 1
stephen asked on 16 Jul 2012, 08:11 AM
Hi guys - I'm currently in the process of evaluating the Kendo UI toolkit and im just wondering if you can help me with this problem!

Ive got a KendoDropDownList control and when the selected item changes I update the DataSource on my grid (hopefully).. the problem is when its changed the grid doesn't reflect the changes

View code:
<div class="filter-definitions" style="width: 100%;">
    @(Html.Kendo().DropDownList()
           .Name("filters")
           .DataTextField("Name")
           .DataValueField("Id")
           .HtmlAttributes(new { style = "width: 95%;" })
           .SelectedIndex(-1)
           .DataSource(source => source.Read(read => read.Action("GetUserFilters", "Grid")))
           .Events(e => e.Select("filter_select"))
          )
    <input type="button" value="Add" />
</div>
<div class="filter-grid-container" style="width: 100%; margin-top: 20px;">
    @(Html.Kendo().Grid<GridFilterResult>()
           .Name("filter-grid-results")
           .Columns(columns =>
                       {
                           columns.Bound(p => p.Name);
                           columns.Bound(p => p.DOB);
                       }
                   )
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
          )
</div>
<script>


and my Javascript

    function filter_select(e) {
        debugger;

        var selectedItem = this.dataItem(e.item.index());

        var filterGrid = $("#filter-grid-results").data("kendoGrid");

        filterGrid.dataSource = new kendo.data.DataSource({
            type: "json",
            transport: {
                prefix:"filter-grid-results-",
                read: {
                url: "/Grid/GetFilterResults",
                contentType: 'application/json; charset=utf-8',
                type: 'GET',
                dataType: 'json'
            }
              , parameterMap: function (data, type) {
                  var values = {};
                  values["filterId"] = JSON.stringify(selectedItem);
                  return values;
              },
                schema: { data: "Data", total: "Total", errors: "Errors", model: { fields: { Name: { type: "string" }, DOB: { type: "date"}}} }
            }
        });
        filterGrid.dataSource.read();
    }

everything looks fine but it just doesn't work and I cant figure out why - can anyone help me with this?


cheers.
ste.

8 Answers, 1 is accepted

Sort by
0
Sameer
Top achievements
Rank 1
answered on 16 Jul 2012, 11:20 AM
try for fetch method.

 filterGrid.dataSource.fetch(); 
0
stephen
Top achievements
Rank 1
answered on 16 Jul 2012, 12:55 PM
Fetch didn't work.

any other ideas?

cheers.
ste.
0
Srinivasan
Top achievements
Rank 1
answered on 20 Jul 2012, 11:00 AM
Try KendoGrid refresh method.

filterGrid.refresh().

(BTW, I am new to Kendo , so apologize if this is not working)
0
stephen
Top achievements
Rank 1
answered on 30 Jul 2012, 07:58 AM
None of these approaches worked.

any other ideas?

I don't want to to give up so soon Kendo but it looks like ill have too.

Have I done anything wrong? 

cheers.
ste.
0
Alison
Top achievements
Rank 1
answered on 31 Jul 2012, 12:53 AM
Hi stephen

I'm pretty new to KendoUI so not sure if this helps.  I've spent the last few hours trying to figure out how to update the datasource and finally gotten this to work.

The scenario is that I have a datepicker called txtEMMDate with a "view" button that refreshes the grid when clicked. Variable to be passed through to the web service is called dte.  This is based off the KendoUI .asmx example (http://www.kendoui.com/code-library/web/grid.aspx), important bits I had to work out was the "Stringify" in the paramaterMap (.asmx quirk) and how to send through (data variable in datasource : transport : read) and refresh the parameter in my rebind function.

Hope this helps someone who is also battling to find an example of datasource parameter refresh for KendoUI Web Grid.

Regards, Alison
<input type="text" id="txtEMMDate" class="datepicker" value="27-Jul-2012" />
<input id="btnView" type="button" value="view" onclick="JavaScript: rebind();" />
<div id="grid"></div>

<script type="text/javascript">
            $(function () {
                $(".datepicker").kendoDatePicker({
                    format: "d-MMM-yyyy",
                    value: new Date()
                });
 
                var sharableDataSource = new kendo.data.DataSource({
                    schema: {
                        data: "d", // ASMX services return JSON in the following format { "d": <result> }. Specify how to get the result.
                        model: { // define the model of the data source. Required for validation and property types.
                            id: "DocId",
                            fields: {
                                DocId: { editable: false, nullable: true },
                                DocNum: { editable: false, nullable: true },
                                Description: { validation: { required: true} },
                                clnum: { editable: false, nullable: true },
                                matter: { editable: false, nullable: true },
                                CreateTime: { editable: false, nullable: true }
                            }
                        }
                    },
                    batch: true, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
                    transport: {
                        read: {
                            url: "sEMM.asmx/getEMMData", //specify the URL which data should return the records. This is the Read method of the Products.asmx service.
                            contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                            type: "POST", //use HTTP POST request as the default GET is not allowed for ASMX
                            data: { dte: $('#txtEMMDate').val() }
                        },
                        update: {
                            url: "Products.asmx/Update", //specify the URL from which should update the records. This is the Update method of the Products.asmx service.
                            contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
                            type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX
                        },
                        parameterMap: function (data, operation) {
                            if (operation != "read") {
                                // web service method parameters need to be send as JSON. The Create, Update and Destroy methods have a "products" parameter.
                                return JSON.stringify({ products: data.models })
                            } else {
                                return JSON.stringify(data);
                            }
                        }
                    }
                });
 
                $("#grid").kendoGrid({
                    columns: [
                        { field: "DocNum", width: "100px", title: "Doc #" },
                        "Description",
                        { field: "clnum", width: "80px", title: "Client #" },
                        { field: "matter", width: "80px", title: "Matter #" },
                        { field: "CreateTime", width: "100px", title: "Created" },
           ],
                    editable: true, // enable editing
                    toolbar: ["save", "cancel"], // specify toolbar commands
                    dataSource: sharableDataSource
                });
            });
            function rebind() {
                var gridDS = $("#grid").data("kendoGrid").dataSource;
                gridDS.transport.options.read.data.dte = $('#txtEMMDate').val();
                gridDS.read();
            }
});
</script>
0
Scot
Top achievements
Rank 1
answered on 06 Sep 2012, 06:52 PM
Work for me Alison! Thanks for taking the time to post here!
0
Joon
Top achievements
Rank 1
answered on 11 Sep 2012, 09:21 AM
Alison's approach worked for me as well. Thanks.
0
Alison
Top achievements
Rank 1
answered on 12 Sep 2012, 02:45 AM
Thanks for the feedback - glad it managed to help.

I must admit, I've been using the grid wherever I can at the moment. Development is so much quicker using it.
Tags
Grid
Asked by
stephen
Top achievements
Rank 1
Answers by
Sameer
Top achievements
Rank 1
stephen
Top achievements
Rank 1
Srinivasan
Top achievements
Rank 1
Alison
Top achievements
Rank 1
Scot
Top achievements
Rank 1
Joon
Top achievements
Rank 1
Share this question
or