Implementing Search criteria using MVC return no record

2 posts, 1 answers
  1. David
    David  avatar
    20 posts
    Member since:
    Oct 2012

    Posted 15 Apr 2013 Link to this post

    I am trying to implement search criteria which bind to Kendo Ui grid.
    However it return no record and no error display. Is there something i
    missed?

    Controller code :

    [HttpPost]
    public ActionResult SearchProduct(ProductSearchCriteria criteria)
    {
    string nameCriteria = string.Empty;
    string descCriteria = string.Empty;

    TTSEntities dc = new TTSEntities();
    if (!string.IsNullOrWhiteSpace(criteria.Name)) nameCriteria = criteria.Name.ToLower().Trim();

    if (!string.IsNullOrWhiteSpace(criteria.Community)) descCriteria = criteria.Desc.ToLower().Trim();

    var results = dc.Products.AsQueryable();
    if (criteria.Name!= null)
    results = results.Where(b => b.Name== criteria.Name);

    if (criteria.Desc!= null)
    results = results.Where(b => b.Desc== criteria.Desc);


    return PartialView("_ProductGrid", results.ToList());
    }



    Index.cshtml


    @model HHIMS_Web_App.Models.ProductSearchCriteria

    @using (Html.BeginForm())
    {
    <div id="headerpanel">
    <fieldset>
    <legend style="font-size:14px">Search Criteria</legend>
    <div>
    <div class="editor-label">
    @Html.LabelFor(model => model.Name)

    </div>
    <div class="editor-field">
    @Html.EditorFor(model => model.Name)
    </div>

    </div>
    <div>
    <div class="editor-label">
    @Html.LabelFor(model => model.Desc)

    </div>

    <div class="editor-field">
    @Html.EditorFor(model => model.Desc)
    </div>

    <div class="smallBox">

    <input type="button" value="Search" id="btnProductSearch" style="height:33px; font-size:14px; background-color:#3399FF" class="k-button" />

    </div>
    </div>
    </fieldset>

    </div>
    }




    <script type="text/javascript">

    $(document).ready(function () {

    $('#btnProductSearch').click(function (e) {
    var searchParameters = GetSearchParameters();
    var jsonData = JSON.stringify(searchParameters, null, 2);

    $.ajax({
    url: '@Url.Content("~/ProductDetails/SearchProduct/")',
    type: 'POST',
    data: jsonData,
    datatype: 'html',
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
    $('#btnProductSearch').replaceWith(data);
    },
    error: function (request, status, err) {
    alert(status);
    alert(err);
    }
    });

    });


    function GetSearchParameters() {
    var hrn = $("#Name").val();
    var community = $("#Desc").val();


    return { Name: name,
    Desc: desc

    };
    }



    });

    </script>

    _ProductGrid.cshtml

    <div>
    <fieldset class="searchResults">
    <legend style="font-size:14px">Search Result</legend>
    <br />
    <div>
    @(Html.Kendo().Grid<TTP.Models.ProductModel>()

    .Name("Product")
    .HtmlAttributes(new { @Style = "align:center; font-size:10px; width:500px" })
    .Columns(columns =>
    {

    columns.Bound(p => p.Name);
    columns.Bound(p => p.Desc);

    })
    .AutoBind(false)
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Sortable()
    //.Pageable()
    .Pageable(paging => paging
    .Input(false)
    .Numeric(true)

    .PreviousNext(true)
    .PageSizes(new int[] { 5, 10, 25, 50 })
    .Refresh(false)

    )
    .Selectable()
    .Scrollable()
    .ColumnMenu(c => c.Columns(false))
    .DataSource(dataSource => dataSource
    .Ajax()//bind with Ajax instead server bind
    .PageSize(10)
    .ServerOperation(true)
    .Model(model =>
    {
    model.Id(p => p.Name);

    })




    )
    )

    </div>
    </fieldset>
    </div>
  2. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 17 Apr 2013 Link to this post

    Hello David,

    Basically to filter the Grid you should either use the filter method of the dataSource or the read method and pass additional parameters (your search criteria).

    Based on the parameters send to the server you should return different number of records.

    Or you can perform your own $.ajax request and return collection from the server which you can pass to the data method of the dataSource.


    Kind regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top