Preview Row (like Outlook)

17 posts, 0 answers
  1. Robert Madrian
    Robert Madrian avatar
    93 posts
    Member since:
    Apr 2003

    Posted 08 Oct 2015 Link to this post

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

    robert

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 12 Oct 2015 Link to this post

    Hi Robert,

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

    Regards,
    Alexander Popov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Robert Madrian
    Robert Madrian avatar
    93 posts
    Member since:
    Apr 2003

    Posted 06 Nov 2015 in reply to Alexander Popov Link to this post

    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

  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 09 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Robert Madrian
    Robert Madrian avatar
    93 posts
    Member since:
    Apr 2003

    Posted 09 Nov 2015 in reply to Alexander Popov Link to this post

    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

  7. Robert Madrian
    Robert Madrian avatar
    93 posts
    Member since:
    Apr 2003

    Posted 09 Nov 2015 in reply to Robert Madrian Link to this post

    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

     

     

  8. Robert Madrian
    Robert Madrian avatar
    93 posts
    Member since:
    Apr 2003

    Posted 09 Nov 2015 Link to this post

    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>")
  9. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 11 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Robert Madrian
    Robert Madrian avatar
    93 posts
    Member since:
    Apr 2003

    Posted 11 Nov 2015 in reply to Alexander Popov Link to this post

    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

  11. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 13 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. Robert Madrian
    Robert Madrian avatar
    93 posts
    Member since:
    Apr 2003

    Posted 13 Nov 2015 in reply to Alexander Popov Link to this post

    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

  13. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 16 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  14. Robert Madrian
    Robert Madrian avatar
    93 posts
    Member since:
    Apr 2003

    Posted 16 Nov 2015 in reply to Alexander Popov Link to this post

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

    a solution with a clientRowTemplate is not possible?

     robert

  15. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 18 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  16. Robert Madrian
    Robert Madrian avatar
    93 posts
    Member since:
    Apr 2003

    Posted 18 Nov 2015 in reply to Alexander Popov Link to this post

    Hello,

    Thanks - some minor problems still exists:

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

  17. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 18 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  18. Robert Madrian
    Robert Madrian avatar
    93 posts
    Member since:
    Apr 2003

    Posted 18 Nov 2015 in reply to Robert Madrian Link to this post

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

    robert

Back to Top
UI for ASP.NET MVC is VS 2017 Ready