Populate grid data based on search field

[Joe Lozina]

Hi

I would like to populate the grid data based on a text field and only once a user clicks the search button.

            <div class="row-fluid">

                <div class="span3">

                    CID            

                    <input class="input-small" type="text" id="cid">

                </div>

                <div class="span3">

                    <button type="button" id="Search" class="btn btn-primary btn-small">Search</button>

                    <button type="button" id="Reset" class="btn btn-small">Reset</button>

 

                </div>

            </div>

 

   <div class="span12">

        @(Html.Kendo().Grid(Model).Name("grid").Columns(columns =>

    {

        columns.Bound(p => p.CopyComment)

                   .Title("Copy")

                   .ClientTemplate("<input type='checkbox' #= CopyComment ? checked='checked': '' # class='chkbx' />")

                   .HtmlAttributes(new { style = "text-align: center" })

                   .Width(50);

        columns.Bound(p => p.CID);

        columns.Bound(p => p.Surname);

        columns.Bound(p => p.Suburb);

        columns.Bound(p => p.FID);

        columns.Bound(p => p.CommentDate);

        columns.Bound(p => p.SalesClerk);

        columns.Bound(p => p.Comments);

        columns.Bound(p => p.Village);

        columns.Bound(p => p.CommentClass);

        columns.Bound(p => p.UnitNo);

        columns.Bound(p => p.ActivityTypeName);

        columns.Bound(p => p.ActivityMethodName);

        columns.Bound(p => p.HeardAbout);

        columns.Bound(p => p.NewspaperName);

        columns.Bound(p => p.CampaignName);

    }).Sortable()

      .Scrollable(scr => scr.Height(400))

      .DataSource(dataSource => dataSource

        .Ajax()

        .Read(read => read.Action("GetSalesComments", "CopySalesComments")

        

 

      )

   )

)

    </div>

public ActionResult GetSalesComments(int? cid)
        {
//Do search here  and return result
            return Json(...);
        }

[Dimiter Madjarov]

Hi Joe,


To achieve this, you should specify the AutoBind(false) option for the Grid, which will cause the dataSource to not bind on initialization.
E.g.

@(Html.Kendo().Grid<Employee>()
    .Name("Grid")
    .AutoBind(false)

When the search button is clicked, you should read the dataSource data. The Data method of the Grid Action Builder could be used to specify the JavaScript function which will return the additional search parameters for the controller.
E.g.

.DataSource(ds => ds
  .Ajax()
  .Read(read => read.Action("Employees_Read", "Home").Data("additionalInfo"))
)

To clarify the described approach I prepared a sample project for you. Feel free to modify it according to your needs.

 

Regards,
Dimiter Madjarov
the Telerik team