Preview Row (like Outlook)

[Robert Madrian]

Hello, is it possible to have a "Preview Row" (see attached picture) with MVC Grid?

robert

[Alexander Popov]

Hi Robert,

This layout is not supported out of the box, however it could be achieved easily in a couple of ways:

• Using a Detail Template
• Using a Row Template

Regards,
Alexander Popov
Telerik

[Robert Madrian]

Hello Alexander,

Is it possible to add the "Preview Row" functionality in the next release please?

see https://demos.devexpress.com/MVCxGridViewDemos/Rows/Preview

robert

[Alexander Popov]

Hello Robert,

Implementing this functionality is currently not planned, so I would encourage you to submit a new feature request on our feedback portal. This would allow to evaluate the idea and eventually - schedule its implementation.

Regards,
Alexander Popov
Telerik

[Robert Madrian]

Hi,

First off all, I'm a little bit confused about the possibilities - there are .RowTemplate and .ClientRowTemplate - which one is the right one?

 
and I have read that with "RowTemplates" I have some limitations like BatchEditing?
That is why i think it would be a good decision to have preview rows out of the box with no limitations

[Robert Madrian]

Now I have done it with a clientrowtemplate but my problem is that the column headers are not the same size that the columns in the rows? (see attached picture)
what I'm missing?

robert

 

 

[Robert Madrian]

another problem is, if I use a second <tr> in my template for the preview row then this row is the second row but I only want
to have the columns and the preview row as one row - how to do this?

01..ClientRowTemplate(
02.                                     "<tr data-uid='#: Sparte_ID #'>" +
03.                                     "<td>" +
04.                                     "#: Sparte_ID #" +
05.                                     "</td>" +
06.                                     "<td>" +
07.                                     "#: Sparte #" +
08.                                     "</td>" +
09.                                     "<td>" +
10.                                     "#: angelegt #" +
11.                                     "</td>" +
12.                                     "<td>" +
13.                                     "#: geändert #" +
14.                                     "</td>" +
15.                                     "<td>" +
16.                                     "#: Benutzer #" +
17.                                     "</td>" +
18.                                     "</tr>" +
19.                                     "<tr data-uid='#: Sparte_ID #'>" +
20.                                     "<td colspan=5>" +
21.                                     "Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association" +
22.                                     "</td>" +
23.                                     "</tr>")

[Alexander Popov]

Hello Robert,

The difference between RowTemplate and ClientRowTemplate is where they get compiled and rendered. As the name suggest, the latter is rendered on the client-side, while the RowTemplate - on the server. 
I also prepared a small proof of concept example illustrating how the preview row could be implemented using RowTemplates.

Regards,
Alexander Popov
Telerik

[Robert Madrian]

Hi Alexander,

 I have done the same but my grid is .Selectable() and if I klick on the preview row the onChange event
(.Events(events => events.Change("onChange"))) fires and in the folowing Javascript I load a second grid with data.

function onChange(e) {
                var dataItem = this.dataItem(this.select());
                var empId = dataItem.Sparte_ID;
                $("#Child").data("kendoGrid").dataSource.read({ FG_ID: empId });
            }

But in that case it loads the scond grid with the ID from the second row of the first grid - it seems the the "preview row" is the second row in the first grid (see picture)?

robert

[Alexander Popov]

Hi Robert,

In that case it would be better to use a detail template to render the "preview row" instead. You can use the Grid's dataBound event to immediately expand all detail rows. You can also hide the expand/collapse arrows using CSS or jQuery.

Regards,
Alexander Popov
Telerik

[Robert Madrian]

Hi Alexander, this is not a good workaround because what is if a need details and a preview row?
as you can see such a functionality should be available by design without workarounds which causes other problems...

isn't it possible to talk to the developers and ask how much work is it to implemen such a feature?

robert

[Alexander Popov]

Hi Robert,

As I mentioned previously, this feature is currently not on our to-do list. Requested features are usually implemented after enough users have expressed interest in the feedback portal. If interested, you can also contact our sales team and ask for an estimate.

Regards,
Alexander Popov
Telerik

[Robert Madrian]

OK - does this mean the only "workaround" is to use use a detail template?

a solution with a clientRowTemplate is not possible?

 robert

[Alexander Popov]

Hi Robert,

The Grid already provides the necessary tools to build such functionality. Whether it would be a rowTemplate or a detailTemplate is up to the developer.
Here is another proof of concept example of implementing the preview row using a rowTemplate.

Regards,
Alexander Popov
Telerik

[Robert Madrian]

Hello,

Thanks - some minor problems still exists:

- there is a small border (td) between grid header and rows (padding?)
    

[Alexander Popov]

This is a simplified proof of concept example - the final look and feel can be polished using custom-tailored CSS rules.

Regards,
Alexander Popov
Telerik

[Robert Madrian]

and the grid header is not on the same position as the grid columns (see picture)

robert