how to provide a external (Serverside)search box to our Kendo UI grid? -
how provide external search box our kendo ui grid search in sever side?
function onsearch() { var q = $("#txtsearchstring").val(); var grid = $("#kgrid").data("kendogrid"); grid.datasource.query({ page:1, pagesize:20, filter:{ logic:"or", filters:[ {field:"id", operator:"contains",value:q}, {field:"title", operator:"contains",value:q}, ] } }); } $("#btnsearch").kendobutton({ click:onsearch }) $("#kgrid").kendogrid({ datasource:{ type:"odata", transport:{ read:"contacttype/getcontacttypes" }, schema:{ data:function(data){ return data.d.results }, total:function(data){ return data.d.__count }, }, serverpaging:true, serverfiltering:true, pagesize:20 }, height:550, pageable:true, columns:[ 'customerid', 'companyname', 'contactname', 'contacttitle', 'address', 'city', 'postalcode', 'country' ] }) } $(document).ready(onready);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!doctype html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script> </head> <body> <div> <div> <div> search id/title <input class=k-textbox type=text id="txtsearchstring" placeholder="enter search text..." /> <button id="btnsearch">search</button> </div> <br><br> <div id="kgrid"></div> </div> </div> </body> </html> public actionresult getcontacttypes() { using (var context = commercechambercontext.getcontext()) { var data = context.contacttypes.select(x => new { x.id, x.title }).tolist(); int count = data.count; var jsondata = new { total = count, data }; return json(jsondata, jsonrequestbehavior.allowget); } } i have code, not filter anything...
i have text box , button initiate search in server side.
you aren't doing query parameters in server action(getcontacttypes).
if @ posted if browser dev tools when click search button see in query string parameters:
$callback:jquery112305717723066421754_1473786887565 $inlinecount:allpages $format:json $top:20 $filter:(substringof('searchforthis',id) or substringof('searchforthis',title)) because have configured grid use serverfiltering: true, responsibility incorporate $filter(and $top, , $skip) parameter query appropriate clause uses passed $filter values.
as stands right now, server action being passed filter returning entire contacttypes list.
do want use client-side filtering? server filtering = filtering on server , return matching rows. client filtering = kendo filtering in javascript datasource has(will not call server action)
Comments
Post a Comment