Set data manually / trigger read from javascript

[Moritz]

Hi guys,

 

I have a grid which should display some order information. There are multiple identifiers to find the order so i created an searchbar above the grid. The user can now enter the the order id into this searchbar, hit the search button and an ajax request will be performed.

Now i have the data as a javascript object and don't know how to assign the data to the grid in javascript.
An alternative would be to perform the ajax request, store the data in my pagemodel and then trigger the grid to perform a read operation. But I also didn't find a way to trigger the read function of the grid.

 

Best regards

Moritz

[Moritz]

Here is some example code:

 

<div class="row justify-content-center">
    <form asp-page-handler="RequestData" data-ajax="true" data-ajax-method="post" data-ajax-success="requestDataCallback">
    <div class="input-group mb-3">
        <span class="input-group-prepend">
            <span class="input-group-text">Auftragsnummer</span>
        </span>
        <input class="form-control" placeholder="queryString" id="queryString" name="queryString" />
        <span class="input-group-append">
            <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i></button>
        </span>
    </div>
    </form>
</div>

<div class="row flex-fill d-flex justify-content-start">
    <div class="col">
        @(Html.Kendo().Grid<Batch>().Name("Grid")
            .Sortable()
            .Scrollable()
            //.Filterable()
            .Columns(columns =>
            {
                columns.Bound(column => column.Id);
                columns.Template("<span>#: Number# / #: BatchCountForOrder#").Title("BatchNr");
                columns.Bound(column => column.TranslatedBatchStateString).Title("Status");
                columns.Bound(column => column.CreatedAt).Title("Erstellt").Format("{0:hh:mm:ss dd.MM.yyyy}");
                columns.Bound(column => column.ModifiedAt).Title("Bearbeitet").Format("{0:hh:mm:ss dd.MM.yyyy}");
                columns.Bound(column => column.CylinderCount).Title("Zylinder");
                columns.Bound(column => column.KeyCountMechanical).Title("Schlüssel");
                columns.Bound(column => column.LastHistoryEntry.ProductionStep.Name).Title("Letzter Arbeitsgang");
            })
            .Resizable(resize => resize.Columns(true)))
    </div>
</div>

<script>

    function requestDataCallback(response) {
        console.debug("callback called.");
        console.debug(response);
        setGridData(response.batches);
    }

</script>

 

[Tsvetomir]

Hi Moritz,

Generally, the Kendo UI Grid uses an instance of the Kendo UI DataSource. Therefore, any operations regarding the data of the grid should be executed over the data source of the grid. Therefore, the Read request would be initiated after calling the read() method of the data source:

$("#grid").getKendoGrid().dataSource.read();

There is an exposed filter() method which accepts an object which would be used for filtering. More information could be found in the following article:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/filter

With that said, with the next official release, planned for this week, a new widget would be introduced. You would be able to filter the data source of the grid based on an external input. 

Feel free to contact me in case additional information is required.


Best regards,
Tsvetomir
Progress Telerik