How do I create an empty column?

8 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    2 posts
    Member since:
    Jan 2013

    Posted 16 Aug 2013 Link to this post

    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!
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 19 Aug 2013 Link to this post

    Hi Jonathan,


    I would recommend checking the following tutorials:


    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Curt Rabon
    Curt Rabon avatar
    79 posts
    Member since:
    Dec 2008

    Posted 23 Nov 2017 Link to this post

    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>.
  4. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 27 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Curt Rabon
    Curt Rabon avatar
    79 posts
    Member since:
    Dec 2008

    Posted 27 Nov 2017 in reply to Stefan Link to this post

    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.
  6. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 29 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Curt Rabon
    Curt Rabon avatar
    79 posts
    Member since:
    Dec 2008

    Posted 29 Nov 2017 in reply to Stefan Link to this post

    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.

  8. Stefan
    Admin
    Stefan avatar
    2880 posts

    Posted 01 Dec 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top