검도 ASPNET MVC 그리드 필터 행, 검색 아이콘 또는 자리 표시 자 검색 내

Question

검도 UI ASP .Net 필터 행, MVC 코드 안에 첨부 된 스크린 샷과 같이 검색 아이콘 또는 자리 표시 자 문자열을 추가하려고합니다.

코드 ASP 닷넷 MVC를 검색 :

    @(Html.Kendo().Grid<EaseOfApprovalModels.Models.HandShake>() 
        .Name("grid1") 
        .Columns(columns => 
        { 
         columns.Bound(p => p.CompanyID).Visible(false); 
         .Filterable(x => x.Enabled(false)).Width(25).Title(""); 
         columns.Bound(p => p.CompanyName).Width(200).Filterable(ftb => ftb.Multi(true)).Title("Company Name"); 
         columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' onclick='SelectCompanyRow(this);' />").Width(50).Title("Status"); 

        }) 
        .Sortable() 
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row)) 
        .Pageable(pageable => pageable 
        .Refresh(true) 
        .PageSizes(true) 
        .ButtonCount(5)) 
        .DataSource(dataSource => dataSource 
        .Ajax() 
        .PageSize(5) 
       ) 

내가 제공하는 검색 아이콘 또는 장소 HTML5 자리를 추가 할 수있는 옵션을 찾을 수없는, 사용자는 그리드에 사용 가능한 검색 상자에 대한 감각을 가지고 필터 행의 열입니다.

Answer 1

이렇게하는 한 가지 방법은 문서에 자리 표시 자 텍스트를 추가하는 것입니다. 이 같은

뭔가 :

$(document).read(function(){ 
    $('input[data-text-field="{Your Column Title here}"') 
     .prop('placeholder', "<insert some text>"); 
}); 

그냥 당신이 열/행 열 이름을주는 제목에 데이터를 텍스트 필드 요소를 교환합니다. 당신이 무엇인지 확실하지 않다면 dev 도구를 사용하여 그 정보를 노출하십시오. 그런 다음 원하는 장소 소유자 텍스트를 변경하여 추가하십시오.

function someFilterHere(element) 
    { 
     var dataSource = $('#grid1').data('kendoGrid').dataSource; 

     element.element.removeAttr("data-bind"); 
     element.element.prop('placeholder', 'some search text here'); 
     element.element.kendoAutoComplete({ 
      dataSource: dataSource , 
      autoBind: true, 
      serverFiltering: false, 
      filter:"contains", 
      dataTextField:"Title" 
     }).data('kendoAutoComplete'); 
    } 

이 것이다 다음 바인딩 :

columns.Bound(c => c.Title).Width(300).Filterable(filter => 
      filter.Cell(cell => cell.Template("someFilterHere")) 

다음과 같은 기능을 사용하여 : 같은

다른 대안은 필터 행 템플릿 자신과 "공예"제어 수동으로 무언가를 제공하는 것입니다 새로운 자동 완성 컨트롤이 그리드의 데이터 소스에 연결되어 사용 가능한 옵션을 표시합니다.

개인적으로이 컨트롤에 대한 새로운 데이터 소스를 만들겠습니다. 즉, 그리드의 데이터 소스를 잡으면 불행한 결과를 초래할 수 있습니다. 예기치 않은 그리드 새로 고침 등

참고 : 이것은 수행 할 수있는 작업의 예입니다.

속도와 구성이 부족한 경우 첫 번째 옵션이 가장 적합 할 수 있습니다.

두 가지 방법의 데모가 포함 된 dojo http://dojo.telerik.com/OrAVO을 제공합니다.