Split cell in grid

[Jason]

Hello,

 

I have a grid for my ASP.NET Core Razor page, and have it bound to the Model object.

In the interest of saving horizontal space, and for readability, we would like to split some cells to show Start date / End date in one cell, rather than have two columns for this data.  Both data should be editable.

Is this possible?

Thanks

[Eric]

I believe this is possible, but with some effort.  To begin, the "display" of both values in one field can be done with a client template.  Here is one approach (certainly not the only one).  Let's break this down...

First, see the example of using a "custom editor." In this example, you see a view model ("ProductViewModel.cs) with a "UIHint."  (To view in this example, click "View Source" then on the tab for "ProductViewModel.cs.")

On the property "CategoryViewModel" you will see [UIHint("ClientCategory")].  The "CategoryViewModel" (found at the bottom of the file "ProductViewModel.cs") has two properties: "CategoryID" and "QuantityPerUnit."

Essentially what this defines is a property that the Grid uses that is in itself, a data model.  You can make a model of your own which contains a start date and an end date.

Next, "UIHint"....  Note that the attribute has parens with the value "ClientCategory."

This data attribute indicates a custom "Editor" to be used for your data model.  In the example see the source file "ClientCategory.cshtml". What the UIHint is doing is it says to use the custom editor "ClientCategory.cshtml" with the property "CategoryViewModel" when in edit mode.

You can create an editor of your own that has two date selectors.

There is obviously more steps beyond this. But I hope it gives you some ideas.

 

[Aleksandar]

Hi Jason,

For the following model:

    public class OrderViewModel
    {
     ....
        public DateTime? OrderDate
        {
            get;
            set;
        }
        public DateTime? ShipDate
        {
            get;
            set;
        }

    }

You can define a Bound column and use a ClientTemplate to show both dates in a single column. You will also need a custom EditorTemplate that will initialize editors for both properties and will need to use MVVM binding to ensure correct binding.

Column configuration:

columns.Bound(p=>p.ShipDate)
                                    .Width(400)
                                    .EditorTemplateName("CustomEditor")
                                    .ClientTemplate("Ordered: #= kendo.toString(OrderDate,'dd-MMM-yyyy')#, Shipped: #= kendo.toString(ShipDate,'dd-MMM-yyyy')#");

CustomEditor.cshtml

<div>
    Ordered:
    @Html.Kendo().DatePicker().Name("OrderDate").Format("dd-MMM-yyyy").HtmlAttributes(new { style="width:30%;",data_bind="value: OrderDate"})
</div>
<div>
    Shipped:
    @Html.Kendo().DatePicker().Name("ShipDate").Format("dd-MMM-yyyy").HtmlAttributes(new { style="width:30%;", data_bind="value: ShipDate"})
</div>

I hope this helps.

Regards,
Aleksandar
Progress Telerik

[Eric]

Nice Aleksandar!

[Jason]

Thank you so much!

Also helps me see the structure of what is possible.

[Jason]

Is there a way to force a line break in the cell, so that the top data and bottom data are on separate lines?

Right now, it works on my machine, but my user sometimes changes the browser sizes and then the wrap doesn't work. 

 

Still, this is great help.

[Aleksandar]

Jason, you can add a <br> tag between the wrapping div elements to insert a line break.