asp.net mvc - Kendo Grid filter does not work inside a bootstrap modal -

i stuck asked issue last 1 day , totally clueless how fix it.

kendo ui grid filters not working inside bootstrap modal

i have modal set this:

<div class="modal fade" id="gapmodaldiv" role="dialog" aria-labelledby="mymodallabel" data-backdrop="static"> <div class="modal-dialog custom-class" role="document">   <div class="modal-content text-center">   <div id="gapfocusdiv">     <div class="modal-header">       <h4 class="modal-title" id="mymodallabel">eligible person - </h4>     </div>     <div class="modal-body">       @(html.kendo().grid(model)             .name("grid")             .toolbar(tools => tools.excel())             .excel(excel => excel                 .allpages(true)                 .filename("test.xlsx")             )             .columns(columns =>             {                 columns.bound(p => p.code).title("code").width(150);                 columns.bound(p => p.name).title("name").width(100);                 columns.bound(p => p.ri).title("ri").width(70);             })             .pageable()             .sortable()             .filterable()             .scrollable(scr => scr.height(430))             .datasource(datasource => datasource                .ajax()                .serveroperation(false)                .pagesize(20)            )       )     </div>     <br />      <div class="modal-footer">       <button type="button" class="btn btn-default" data-dismiss="modal">close</button>     </div>   </div> </div> 

would appreciate help. thanks.