2014-01-17 2 views
2

Я использую команды редактирования и удаления сетки Kendo UI для управления данными.Kendo UI Grid on Cancel event

Проблема, с которой я сталкиваюсь, заключается в том, что у меня есть собственный стиль, который необходимо применить к кнопке удаления. Я могу добавить классы в событие DataBound, однако, когда пользователь пытается отредактировать данные, стилизация уходит на кнопку и возвращается к стандарту UI по умолчанию Kendo.


Jquery используется для определения стиля

function onRowBound(e) { 
    $(".k-grid-delete").removeClass("k-button k-button-icontext").addClass("btn btn-danger"); 
} 

Кендо MVC События

columns.Command(command => command.Edit()).Title("Edit"); 
columns.Command(command => command.Destroy()).Title("Remove") 
.........  
.Events(e => 
     { 
      e.DataBound("onRowBound"); 
      e.Cancel("onRowBound"); 
      e.Edit("onRowBound"); 
     })) 

Я попытался с тем же метод пожара на ОТМЕНА событие, но стиль все еще возвращается до значения по умолчанию. Есть ли способ установить стиль, желательно без использования функции «ClientTemplate»?

ответ

4

Поскольку kendoUI не предоставляет каких-либо механизмов для предотвращения изменения их стиля, единственный способ, на мой взгляд, использовать функцию SetTimeout для изменения стиля кнопки после kendo. Измените onRowBoundFunction так:

function onRowBound(){ 
    setTimeout(function(){ 
      $(".k-grid-delete").removeClass("k-button k-button-icontext").addClass("btn btn-danger"); 
    },1); 
} 

Рабочая JSFiddle: http://jsfiddle.net/a6Ek2/10/

+1

Это сработало для меня. Хотя я чувствую, что это не лучший способ сделать это, похоже, что это единственный способ, который действительно работает. Спасибо – sevargdcg

+0

Работал для меня, но кажется немного взломан? Как он прошел тестирование для всех вас? – GP24

-1

Я не знаю о MVC, но я могу стиль таких кнопок. Ниже приведен код из определения столбца сетки. Вы можете использовать свойство className и/или атрибуты.

{ 
    command: [{ text: "Edit", click: showDetails, className: "rebtn" }, 
    { text: "Request New Engagement", click: showEngagement }], 
     attributes: {style:"padding:10px"}, 
     title: " ", 
     width: "200px" 

} 
0

На мой взгляд, правильный способ сделать это, чтобы не удалить класс кендо, а изменить их стили для того, что вы хотите. Затем, если вы хотите использовать другую сетку, вам не нужно снова менять классы вручную. Таким образом, в вашем CSS вы можете использовать запятую и написать что-то вроде:

.btn, .k-grid .k-button { 
    your properties 
} 

.btn-danger, .k-grid .k-button { 
    your properties 
} 

Я знаю, что вы должны изменить несколько ок-кнопку свойств кендо кнопки, чтобы посмотреть exacly но вы хотите, но я не знаю, лучший способ.

+0

Это не очень хороший вариант, так как стиль, который я использую это стиль Twitter Bootstrap для кнопок. – sevargdcg