or

<script id="action-template1" type="text/x-kendo-template"> <button class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> Approve</button></script><script id="action-template2" type="text/x-kendo-template"> <button class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> Delete</button></script>$grid.kendoGrid({ dataSource: gridDS, autoBind: true, columnMenu: true, scrollable: false, sortable: false, filterable: { extra: false, operators: { string: { eq: "Is equal to", neq: "Is not equal to" } } }, pageable: false, columns: [ { template: createActionTemplate, title: "Action", }, ]});function createActionTemplate(dataItem: any): any { if(dataItem.Status == "SUCCESS") return kendo.template($("#action-template1").html()); else return kendo.template($("#action-template2").html());} <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>