Telerik ASP .NET MVC Grid - добавление пользовательской кнопки удаления

Question

В настоящее время используется Telerik ASP .NET MVC Controls версия 2011.2.712

Привет всем, я пытаюсь реализовать пользовательскую кнопку удаления.Причина этого в том, что у меня в строке сетки есть несколько других пользовательских команд, и я хотел бы сохранить их все вместе.Я также хотел бы отметить, что сетка встроена во вкладку на большом дисплее, которая включает в себя другие обновляемые сетки.Мое определение сетки выглядит следующим образом:

Html.Telerik().Grid<CommentDto>()
    .Name("ReportCommentGrid")
    .DataKeys(keys => keys.Add(o => o.Id))
    .Editable(editing => editing.Mode(GridEditMode.InLine))
    .DataBinding(dataBinding => dataBinding.Ajax()
        .Select("SelectReportComment", "DebtRisk", new { id = Model.ReportCommentId })
        .Delete("DeleteReportComment", "DebtRisk")
        )
    .Columns(columns =>
    {
        columns.Bound(o => o.AssetGroupTypeCode).Title("Group").Width("10em").ReadOnly();
        columns.Bound(o => o.Text).Title("Comment").Width("25em").ReadOnly();
        columns.Bound(o => o.Id).ClientTemplate(
                "<# if(CreatedBy != null) { #>"
                + "<a class='t-button' href='#' onclick=\"LaunchCommentEditWindow('/DebtRisk/EditReportComment/<#= Id #>')\">Edit</a>"
                + "<a class=\"t-button t-grid-delete\" href=\"#\">Delete</a>"
                + "<# }  #>"
        ).Width("15em").Title("Related Data").ReadOnly(true).HtmlAttributes(new { @class = "t-last"})
    })
    .ClientEvents(events => events.OnRowDataBound("ReportCommentGrid_onRowDataBound"))
    .Footer(false)
    .Render();

У меня есть следующий javascript для обработчика событий «ReportCommentGrid_onRowDataBound»:

function  ReportCommentGrid_onRowDataBound(e)
{
    $(e.row).find('.t-grid-delete').click(function (ev)
    {
        ev.stopPropagation();
        ev.stopImmediatePropagation();
        ev.preventDefault();
        var grid = $("#ReportCommentGrid").data('tGrid');
        grid.deleteRow($(this).closest('tr'));

        return false;
    });
}

Когда я запускаю код и нажимаю кнопку «Удалить»Я получаю ошибку «Объект не поддерживает это свойство или метод» на «grid.deleteRow».У кого-нибудь есть предложения относительно того, почему это происходит

Answer 1

Я так и не понял, как реализовать кнопку «Команда» вне столбца команд. Я смог использовать новую настраиваемую команду, доступную в выпуске Q3 2011 года (в настоящее время бета-версию), для реализации своей настраиваемой кнопки редактирования в качестве настраиваемой команды.

Эта пользовательская кнопка редактирования запускает всплывающее окно, содержащее форму редактирования для данных в строке сетки. Я не смог заставить работать встроенное редактирование всплывающих окон. Вот код ниже.

Определение кнопки пользовательского редактирования:

commands.Custom("EditReportComment")
.Text("Edit")
.Ajax(true)
.Action("EditReportComment","DebtRisk")
.HtmlAttributes(new { @class="edit-report-comment" })
.DataRouteValues(route => route.Add(o => o.Id).RouteKey("id"))
;

Клиентское событие, необходимое для присоединения события, связанного со строкой, для кнопки редактирования:

.ClientEvents(events => events.OnRowDataBound("ReportCommentGrid_onRowDataBound"))

Связка по нажатию: (извлекает href из определения кнопки для URL окна)

function ReportCommentGrid_onRowDataBound(e)
{
    var editLink = $(e.row).find('.edit-report-comment')
    editLink.click(function (ev)
    {
        ev.stopPropagation();
        ev.stopImmediatePropagation();
        ev.preventDefault();
        LaunchCommentEditWindow(editLink.attr("href"));
        return false;
    });
}

Средство запуска всплывающих окон:

function LaunchCommentEditWindow(editUrl)
{
    var newWindow = $("<div id='EditReportComment'></div>").tWindow(
        {
        title: 'Edit Comment',
        contentUrl: editUrl,
        modal: true,
        resizeable: false,
        scrollable: false,
        width: 550,
        height: 200,
        onClose: function (e){ e.preventDefault(); newWindow.data('tWindow').destroy(); }
    });
    newWindow.data("tWindow").center().open();
    return false;
}

Answer 2

В третьем квартале 2011 года доступна опция команды бета-версии настраиваемого столбца. Смотрите демоверсию здесь

Html.Telerik().Grid<UserManagement.Models.vmmodel>()
    .Name("setupEmployees")
   .HtmlAttributes(new { style = "float:left;" })
        .Columns(colums =>
        {                
                colums.Command(commands => commands
                .Custom("Edit")
                .Text("Edit")
                .SendState(false)  
                .DataRouteValues(route =>
                {                        
                    route.Add(o => o.EmployeeID).RouteKey("orderID");                        
                })                    
                  .Ajax(true)
                .Action("actionresult", "mycontroller"));

                colums.Command(commands => commands
                    .Custom("delete")
                    .Text("delete")
                    .SendState(false)
                    .DataRouteValues(route =>
                    {
                        route.Add(o => o.EmployeeID).RouteKey("orderID");
                    })
                      .Ajax(true)
                    .Action("actionresult", "mycontroller"));

            colums.Bound(o => o.EmployeeID);
            colums.Bound(o => o.EmployeeID);

        })

    .Sortable()
    .Filterable()        
    .PrefixUrlParameters(false)

    .Render(); 

%>

Answer 3

если вы не добавите команды, то сетка telerik не добавит javascript, который поддерживает это действие.Разве ваша ссылка удаления не должна просто идти на действие на вашем контроллере в любом случае?зачем вообще использовать javascript?