How do I create an empty column?

[Jonathan]

Hi,
I'm very new to Kendo and inthis case, ASP.NET so your help would be appreciated.  I'm creating a web page using ASP.NET MVC4 with an entity framework over a SQL DB to create my Views and Controllers.

I've created a view that uses a Kendo grid thus:

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.FirstName).Template(@<text>@item.FirstName</text>);
        columns.Bound(p => p.MiddleName).Template(@<text>@item.MiddleName</text>);
        columns.Bound(p => p.LastName).Template(@<text>@item.LastName</text>);
        columns.Bound(p => p.DateOfBirth).Template(@<text>@item.DateOfBirth</text>);
    })
    .Groupable()
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    )

This works really well but I would like to add another column that isn't bound to data so that I can insert some buttons for editing, deleting etc.  Ideally I'd like to show a link called 'Edit' that takes the user to another page for editing.

Many Thanks for your help!

[Alexander Popov]

Hi Jonathan,


I would recommend checking the following tutorials:

• Grid Ajax Editing
• Grid Server Editing

They should get you familiar with the basics, as well as the built-in CRUD functionality. Also you can check this example which demonstrates how to add a custom command buttons.

In case you need to add an an empty column, you can do so using the Template method as shown below:    

columns.Template(@<text> </text>).Title("Column Title");

 
Kind Regards,
Alexander Popov
Telerik

[Curt Rabon]

For those using AJAX-bound, it would be nice if just using .ClientTemplate() were enough, instead of having to call .Template() and pass an empty set of @<text>.

[Stefan]

Hello, Curt,

Thank you for the suggestion.

The main reason for this requirement is that the ClientTemplate is a property of the bound columns. That is why the template column is made for not bound column scenarios.

The template column will also work with an empty string:

columns.Template("");

Regards,
Stefan
Progress Telerik

[Curt Rabon]

In an Ajax-bound grid with a bound column, there are still common scenarios where you need to add a CSS class to a cell based on the data for that cell, so ClientTemplate() is common.  Also, in Ajax-bound grids, if I understand your documentation correctly, the Template() is ignored, and if so, it would seem like you should not require it when using ClientTemplate.

[Stefan]

Hello, Curt,

The Template property on the bound columns of the Ajax bound Grid is ignored. I understand that this may be confusing due to the matching names. When a column is bound to a field there are two scenarios:

1) ClientTemplate for Ajax bound Grids.

columns.Bound(p => p.ProductID).ClientTemplate(
    "<a href='" +
        Url.Action("ProductDetails", "Product") +
        "/#= ProductID #'" +
    ">Show Product Details</a>"
);

2) Template for Server bound Grid.

columns.Bound(p => p.ProductID).Template(@<text>
          @Html.ActionLink("Show Product Details", "ProductDetails", new { id = @item.ProductID } )>
    </text>);

Still, the template which is referred here is used when a column is not bound to a specific field(regardless of the Ajax or Server binding), and it is for Template column:

columns.Template(""); //The column is not bound to a field.

I hope this description will provide more insights on why the Template column is used in this scenario.

Regards,
Stefan
Progress Telerik

[Curt Rabon]

Yes, you are right...the Template() is still used in AJAX mode for non-bound columns, and I even use that.  Thanks for the clear explanation.

I realize this is off-topic, but in the ClientTemplate, it would be very helpful if the JavaScript function was passed a reference to the <td> container, so that we could put a CSS class on that cell dynamically.  Yes, you can put a <div> inside the cell with your css class on it, but it some cases it would be much easier to access the <td> itself, such as when we want to override the default padding of that cell, etc.  Yes, you can use the dataBound event and find the cell you are interested in, but it makes more sense to access the <td> inside your ClientTemplate function.

[Stefan]

Hello, Curt,

Thank you for the feedback.

I can suggest submitting a feature request in our UserVoice portal, as this is helping us to prioritize the most useful the requested functionality:

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback?category_id=170280

Regards,
Stefan
Progress Telerik