Grid not updating after the datasource is updated

[stephen]

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.

[Sameer]

try for fetch method.

 filterGrid.dataSource.fetch(); 

[stephen]

Fetch didn't work.

any other ideas?

cheers.
ste.

[Srinivasan]

Try KendoGrid refresh method.

filterGrid.refresh().

(BTW, I am new to Kendo , so apologize if this is not working)

[stephen]

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.

[Alison]

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>

[Scot]

Work for me Alison! Thanks for taking the time to post here!

[Joon]

Alison's approach worked for me as well. Thanks.

[Alison]

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.