Grid - Ajax - Simple searchbox

7 posts, 0 answers
  1. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 05 Apr Link to this post

    I have tried most of the examples that come with the grid. My problem is this.

    this is my class that is bound to this view

    @model IEnumerable<VaultLeitarvefur.Models.vaultNidurstodur>

    this is my grid that is bound to said model

    @(Html.Kendo().Grid<VaultLeitarvefur.Models.vaultNidurstodur>(Model)
        .Name("grid")
        .Columns(columns =>
        {
            //columns.Bound(p => p.file.Name).Filterable(false);
            columns.Bound(p => p.Id).Filterable(false).Visible(false);
            columns.Bound(p => p.file.Name).Title("Heiti");
            columns.Bound(p => p.file.ModDate).Format("{0:dd/MM/yyyy}").Title("Breytingardags");
            columns.Bound(p => p.file.VerNum);
            columns.Bound(p => p.file.DesignVisAttmtStatus);
            columns.Bound(p => p.file.FileStatus);

        })
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .HtmlAttributes(new { style = "height:550px;" })

    I have a search textbox and a search button

    I have home/index which returns a list<vaultNidurstodur> which is the class that I want to display in the grid.

    currently when I start the project index is displayed and all data is populated in the grid, and filtering within the grid itself works fine.

    I want to be able to enter data into the textbox and do a contains on that string in vaultNidurstodur.Name column , when I try this the data in the grid never gets filtered. I would prefer if this was a ajax call so the grid can be updated without a refresh.

     

    I would like to start off with an empty grid and then use the search string to filter from list<> the reason is that I can expect 40-50000 results with file references and I would rather not send all that data.

     

    Can you point me in the right direction ?

     

    Regards,
    Emil Thor Emilsson

    Developer

    Snertill.is

  2. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 06 Apr in reply to Emil Link to this post

    Another thing I would like to add, I cannot use any kind of a databinding, since my data will come from a web service and is basicly a list of classes that need to be bound to the grid
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 06 Apr Link to this post

    Hi Emil,

    In order to implement the feature you can use the following example as starting point. It uses a ComboBox to filter the items in the Grid, however, the basic functionality is similar to what you describe.



    Regards,
    Viktor Tachev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 06 Apr in reply to Viktor Tachev Link to this post

    This example you pointed out, requires me to load all data into the grid and then filter that. Not quite what I had in mind, it would be a lot faster if I just loaded into the grid what matches my searchstring.

    Are you saying I cannot change the contents of a grid once I have loaded it with data ?

    I would like to reload data into the grid each time you press the search button with different results from different search strings.

     

    Regards,

    Emil

  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 07 Apr Link to this post

    Hi Emil,

    The number of items returned to the client depends on the configuration of the DataSource. You can configure the widget to use ServerOperations. This way you can perform paging, sorting, filtering, etc. on the server side and return only the relevant items (e.g. the items on the current page) to the client. Check out the following article that elaborates in more detail on the feature.


    Alternatively you can implement Custom Binding and implement how the data is requested based on your requirements.




    Regards,
    Viktor Tachev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Chung On
    Chung On avatar
    1 posts
    Member since:
    Aug 2015

    Posted 08 Apr Link to this post

     

    Hello, I also got the same problem too . I just build a testing project with the grid.

    Then I modified the grid in the home/index view. No records will be loaded in the beginning.

    After that I add a Javascript click event to the last button.

    The Javascript create a new datasource and use setDataSource function set to the grid.

    The I run the project and click the button. The ajax call was successful.

    I got the json data at client. But the grid did not refresh with the new datasource.

    Please advise. Thanks.

    1. Index.cshtml

                <p>
                    @(Html.Kendo()
                    .Button()
                    .Name("Button")
                    .Content("Button")
                    .HtmlAttributes(new { @class = "textButton" } )
                    .Events(ev => ev.Click("onClick"))
                    )
                </p>

            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-18 col-md-12">
                @(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
            .Name("grid")
            .EnableCustomBinding(true)
            .Columns(columns =>
            {
            columns.Bound(p => p.OrderID);
            columns.Bound(p => p.ShipName);
            columns.Bound(p => p.ShipCity);
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("OrdersEmpty_Read", "Grid"))
            )
            )
          </div>
        </div>
    </div>

    <script>
        function onClick(e) {

            var ds = new kendo.data.DataSource({
                transport: {
                    read: {
                        type: "POST",
                        dataType: "jsonp",
                        url: '/Grid/Orders_Read'
                    }
                },
                schema: {
                    model: {
                        id: "OrderID",
                        fields: {
                            OrderID: {type : "number"},
                            ShipName: {type : "string"},
                            ShipCity: {type : "string"}
                        }
                    }
                }
            });
            //ds.read();
            $("#grid").data("kendoGrid").setDataSource(ds);
        }
    </script>

    1. GridController.cs
    public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
            {
                var result = Enumerable.Range(0, 50).Select(i => new OrderViewModel
                {
                    OrderID = i,
                    Freight = i * 10,
                    OrderDate = DateTime.Now.AddDays(i),
                    ShipName = "ShipName " + i,
                    ShipCity = "ShipCity " + i
                });

                return Json(result.ToDataSourceResult(request));
            }

            public ActionResult OrdersEmpty_Read([DataSourceRequest]DataSourceRequest request)
            {
                var result = Enumerable.Range(0, 50).Select(i => new OrderViewModel
                {
                    OrderID = i,
                    Freight = i * 10,
                    OrderDate = DateTime.Now.AddDays(i),
                    ShipName = "ShipName " + i,
                    ShipCity = "ShipCity " + i
                });

                DataSourceRequest BlankResult = new DataSourceRequest();
                
                return Json(BlankResult);
            }
        }
  8. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 11 Apr Link to this post

    Hi Chung,

    In order to show an empty grid initially you can set the AutoBind property to false.

    Please examine the following thread that discusses similar behavior as the one you describe:



    Regards,
    Viktor Tachev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready