[Solved] Need help with searching a grid with textboxes outwith grid templete.

[Tommy]

Hi there,


I am trying to use my search for with a 'search' button to search the grid i have in place. The grid can be search on one textbox having information supplied or many, each of the textboxes relate to a column within the grid. Could someone please help me on how to do this? I tried to use the example for (http://demos.telerik.com/kendo-ui/grid/toolbar-template ) but this uses a toolbar templete and i would like to keep my search form as it stands but only search the form when the button for search is clicked. 

Any help would be very much appreicated as i have spent a while trying to figure this issue out.

Thanks

    <div class="container">

        <hr />

        <div class="form-group row">

            <label class="col-md-2 control-label">Fee Earner:</label>

            <div class="col-md-10">

                <input class="form-control" id="searchFeeEarner" />

            </div>

        </div>

        <div class="form-group row">

            <label class="col-md-2 control-label">Matter Number:</label>

            <div class="col-md-10">

                <input class="form-control" id="searchMatterNumber" />

            </div>

        </div>

        <div class="form-group row">

            <label class="col-md-2 control-label">Start Date:</label>

            <div class="col-md-10">

                <input class="" id="searchStartDate" />

            </div>

        </div>

        <div class="form-group row">

            <label class="col-md-2 control-label">End Date:</label>

            <div class="col-md-10">

                <input id="searchEndDate" />

            </div>

        </div>

        <div class="form-group row">

            <label class="col-md-2 control-label">Template Name:</label>

            <div class="col-md-10">

                <input id="searchTemplateName" class="form-control" />

            </div>

        </div>

 

        <div class="row">

            <div class="col-md-12">

                <button id="search" class="btn btn-default">Search</button>

                <button id="clear" class="btn btn-default">Clear</button>

            </div>

        </div>

        <div class="row" style="padding-top: 20px">

            <div class="col-md-12">

                <div id="sessionGrid"></div>

            </div>

        </div>

    </div>

<script>
    // jQuery on DOM ready function
    $(function () {

        // create a remote kendo Data Source pointing to Web API
        // session controller. Currently handles Get (read) and Post (create)
        // Schema / model has been set in order to support better behavior
        // on the grid.
        var sessionDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/api/Session/Get",
                    dataType: "json"
                },
                create: {
                    url: "/api/Session/Post",
                    type: "POST"
                }
            },
            pageSize: 10,
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number", editable: false, nullable: false, visible: false },
                        SessionId: { editable: false, nullable: true },
                        NetworkId: { type: "string" },
                        Comments: { type: "string" }
                    }
                }
            }
        });

        // Initialise a Kendo Grid on the div container,
        // using the data source created above.
        // Also adds a create toolbar and the columns
        $("#sessionGrid").kendoGrid({
            dataSource: sessionDataSource,
            pageable: true,
            editable: false,
            columns: [
            { field: "Matter", title: "Matter No." },
            { field: "NetworkId", title: "User Name" },
            { field: "TemplateName", title: "Template Name" },
            { field: "Comments", title: "Comments" },
            { command: [
                { name: "RecreateDocument", text: "Recreate Document", click: recreateDocument, width: "180px"  }]
            }]
        });


        function recreateDocument(e) {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            window.location = "api/Session/RecreateDocument/" + dataItem.SessionId;


            //$.ajax({
            //    type: "GET",
            //    url: "api/Session/RecreateDocument/" + dataItem.SessionId,
            //    //contentType: "application/json; charset=utf-8",
            //    //data: JSON.stringify( { sessionId : dataItem.SessionId} )
            //}).done(function (msg) {
            //    window.open(msg.d);
            //    alert("Document(" + dataItem.SessionId + ")" + "Recreated");
            //});
        }

        //Autocomplete FeeEarner

        $("#searchFeeEarner").kendoAutoComplete({
            dataSource: EmployeeDirectoryACDataSource,
            dataTextField: 'FullName',
            filter: "startswith",
            placeholder: "Search...",
            minLength: 3,
            suggest: true
        });


        //$("#searchFeeEarner").kendoAutoComplete({
        //    dataSource: sessionDataSource,
        //    dataTextField: 'NetworkId',
        //    dataValueField: 'NetworkId',
        //    filter: "startswith",
        //    minLength: 4
        //});



        //Autocomplete MatterNumber

        $("#searchMatterNumber").kendoAutoComplete({
            dataSource: AderantDataSource,
            dataTextField: 'MatterCode',
            filter: "startswith",
            placeholder: "Matter...",
            minLength: 4,
            suggest: true
        });

        //Picker Start Date
        $(document).ready(function () {
            $("#searchStartDate").kendoDatePicker({ format: "dd/MM/yyyy" });
        });

        //Picker End Date
        $(document).ready(function () {
            $("#searchEndDate").kendoDatePicker({ format: "dd/MM/yyyy" });
        });

        //Autocomplete TemplateName
        $("#searchTemplateName").kendoAutoComplete({
            dataSource: sessionDataSource,
            dataTextField: 'TemplateName',
            filter: "contains",
            placeholder: "Search..."
        });

        $("#searchButton").on('click', function () {
            var value = this.value();
            if (value) {
                grid.data("#sessionGrid").dataSource.filter({ field: "Matter", operator: "eq", value: parseInt(value) });
            } else {
                grid.data("#sessionGrid").dataSource.filter({});
            }
        });


        //Clear AutoComplete
        $('#clear').click(function (e) {
            e.preventDefault();
            autoComplete.data("kendoAutoComplete").value('');
            ds.filter({});
        });


    })
</script>

[Nikolay Rusev]

Hello Tommy,

The important bits in the example which you are referring is the change handler of the dropdown widget, i.e:

change: function() {
 var value = this.value();
 if (value) {
   grid.data("kendoGrid").dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
  } else {
   grid.data("kendoGrid").dataSource.filter({});
 }
}

All that this code does is building filter expression and applying it to the data source. In your form you must do the same thing. Gather the content of the widgets and based on your business logic build filter expression and apply it to the sessionDataSource. 

The examples in the following article demonstrates the filter expressions format. Its basic structure is as follows:

{
    // leave data items which are "Food" or|and "Tea"
    logic: "or" | "and",
    filters: [
      { field: "category", operator: "eq", value: "Food" },
      { field: "name", operator: "eq", value: "Tea" }
    ]
  }

You can nest this structure as much as you  like in order to build more sophisticated filter expressions.

Regards,
Nikolay Rusev
Telerik