2013-12-19 1 views
2

저는 현재 ASP MVC와 Kendo의 현재 릴리스를 사용하고 있습니다. Kendo 창에 너무 많은 정보를 추가하면 수직으로 스크롤됩니다. 그러면 하단에 생성 된 취소/업데이트 버튼이 숨겨집니다. 나는 이것을 보여줄 필요가있다. 사용자는 히트 취소로 스크롤 할 필요가 없습니다. "form-horizontal"스크롤과 "k-window"스크롤을 어떻게 만들 수 있습니까?Kendo 창 정적 업데이트/취소 버튼이있는 스크롤 변경

전체 창 : 스크롤와

Full window

창 :

Scroll window

코드 :

@(Html.Kendo().Grid(Model.CompanyList) 
     .Name("grid") 
     .Columns(columns => { 
      columns.Bound(o => o.Company.Name); 
      columns.Bound(o => o.Company.DealerId); 
      columns.Bound(o => o.Company.CityState).Title("City, " + stateTitle); 
      columns.Bound(o => o.Company.CountryCode); 
      columns.Bound(o => o.Company.Phone); 
      columns.Bound(o => o.CompanyStatus).Title("Status"); 
      columns.Command(com => { com.Edit(); }); 
     }) 
     .Pageable() 
     .Sortable() 
     .DataSource(
      dataSource => dataSource 
       .Server() 
       .Sort(sort => sort.Add("Name").Ascending()) 
       .Model(model => model.Id(m => m.Company.Id)) 
       .Update(up => up.Action("UpdateCompany", "Home")) 
     ) 
     .Editable(ed => ed 
      .Mode(GridEditMode.PopUp) 
      .TemplateName("Company") 
      .Window(w => w 
       .Title("Edit company") 
       .Draggable() 
       .Resizable() 
       .Width(436) 
       .Modal(true) 
       .Animation(false) 
      ) 
     ) 
    ) 
+0

을 할 수 바랍니다

그래서, 그렇게하기 위해, 창 open 이벤트를 핸들러를 첨부 보기에서 일부 코드를 제공하여 작업중인 것을 확인하십시오. –

+0

나는 무슨 뜻인지 보여주는 사진과 코드를 추가했다. 버튼이 스크롤되지 않아야합니다. 스크롤 막대는 창 아래쪽에서 멈춰야합니다. 나는이 버튼이나 창을 생성하지 않기 때문에 내가 사용하고있는 코드가 적절하다고 생각하지 않는다. ASP 창 옵션을 호출합니다. – Paul

+0

나는 현재 같은 상황에있다. 나는 이것을위한 해결책을보기 때문에 기쁠 것이다. –

답변

2

이러한 레이아웃을 달성하려면 창에두기보다는 자신의 요소에서 스크롤링을 처리해야합니다. 여기에는 그리드 기능을 손상시킬 수있는 일부 사용자 지정이 포함되므로 은 지원되지 않는 것으로 간주합니다 (). 이후에 예고없이 중단 될 수 있습니다. Suggesting this on UserVoice은 공식적으로 구현 될 수 있으므로 장기적으로는 더 나을 것입니다. 또한 버튼 래퍼에 스타일을 추가해야합니다

var buttonWrapper = $(".k-edit-buttons"); 
var formContainer = $(".k-edit-form-container"); 
formContainer.css({ 
    overflow: "auto", // make the container scroll 
    maxHeight: 300 // maximum height of the window content, sans the chrome 
}); 
buttonWrapper.insertAfter(formContainer); 

: 당신이

.k-edit-form-container .k-edit-buttons { 
    clear: both; 
    text-align: right; 
    border-width: 1px 0 0; 
    border-style: solid; 
    position: relative; 
    bottom: -1em; 
    padding: .6em; 
} 
0

승리에서 Resizable() 속성을 제거하십시오 다우. 내 검도 창에 대해 일반적으로 Height() 또는 Resizable() 속성을 지정하지 않습니다.

+0

아무런 차이가 없습니다. – Paul

+0

폼의 래퍼에'k-edit-form-container' 클래스가 있습니다.'height : auto'를 설정할 때 아무 것도 바뀌나요? –

+0

아무 것도 변경하지 않습니다. 나는 Chrome의 F12 윈도우에서 속성을 변경하면서 1 톤 정도 놀았지만 어떤 조합도 효과가 없습니다. – Paul