This is a migrated thread and some comments may be shown as answers.

[Solved] Formatting inconsistencies between Ajax and Server grids/How to display default button images for custom commands?

1 Answer 27 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Joe asked on 14 Feb 2012, 06:53 PM

I am trying to get an edit custom command to be just like the grid's default edit icon in an Ajax grid. Everything works fine if I do the grid via server binding, but not in Ajax. The little pencil icon refuses to show up, I even tried forcing the css class of HtmlAttributes and ImageHtmlAttributes to be t-icon t-edit, but it doesn't appear to change any of the generated markup.

Here is my grid code:

@(Html.Telerik().Grid<RequestModel>().Name("RequestsAjax")

.DataKeys(keys => keys.Add(x => x.RequestId))

.DataBinding(dataBinding => dataBinding.Ajax().Select("Ajaxbinding", "Request")

.Update("Edit", "Request")

.Delete("Delete", "Request"))

.Columns(columns =>

{

columns.Bound(x => x.DateStarted).Format("{0:d}");

columns.Bound(x => x.Building);

columns.Bound(x => x.RoomNumber);

columns.Bound(x => x.FormType).Title("Request Type");

columns.Bound(x => x.Status);

columns.Command(commands =>

{

commands

.Custom("Partial Copy")

.Text("Partial Copy")

.ButtonType(GridButtonType.Text)

.SendState(false)

.Action("PartialCopy", "Request");

commands

.Custom("Full Copy")

.Text("Full Copy")

.ButtonType(GridButtonType.Text)

.SendState(false)

.Action("FullCopy", "Request");

commands

.Custom("Edit")

.Text("Edit")

.ButtonType(GridButtonType.Image).ImageHtmlAttributes(new { @class = "t-icon t-edit t-test"})

.SendState(false)

.Action("Edit", "Request");

commands.Delete().ButtonType(GridButtonType.Image);

}).Title("Actions");

})

.Sortable(sorting => sorting.OrderBy(x => x.Add(y => y.DateStarted).Descending()))

.Filterable()

.Pageable(paging => paging.PageSize(25)))

It looks like in the Ajax Grid the markup gets rendered as:

<a href="/Request/Edit/22" class="t-button t-grid-Edit t-button-icon"><span class="t-icon t-Edit"></span></a>

While in the identical server-bound grid the markup gets rendered as:

<a class="t-button t-button-icon t-grid-Edit" href="/Request/Edit/22"><span class="t-icon t-edit"></span></a>

So the only difference is the inner span's class is a t-Edit with a capital T in the Ajax grid markup, which I was able to test and verify it goes off the custom command's name, this is what prevents the pencil icon from showing.

However upon trying to name the custom command "edit", this caused the grid to break and tell me there are no records to display. Doing the same thing to the server grid causes no problems, so not sure why that is happening.

How can I make it so the pencil icon shows in my Ajax grid?

[Solved] Formatting inconsistencies between Ajax and Server grids/How to display default button images for custom commands?

1 Answer, 1 is accepted