Two header row with one column row span and other columns with column span

8 posts, 0 answers
  1. Shashi
    Shashi avatar
    3 posts
    Member since:
    Apr 2013

    Posted 26 Apr 2013 Link to this post

    We're currently using Telerik controls for ASP.NET MVC, basically we have grid looks like attached image, is this possible using  Kendo UI grid?
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2288 posts

    Posted 26 Apr 2013 Link to this post

    Hi Shashi,


    To achieve this with the Kendo UI Grid you should specify a Header Template for the columns. Please take a look at the attached project which demonstrates a sample implementation.

    I wish you a great day!

     

    Regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Shashi
    Shashi avatar
    3 posts
    Member since:
    Apr 2013

    Posted 29 Apr 2013 Link to this post

    Hi Dimiter,

    Thanks for quick response, but i am unable to open the project in my VS 2010, i am using VS 2010 professional edition with MVC 3 as well as MVC 4 installed on it.
  4. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 30 Apr 2013 Link to this post

    Hi Shashi,

     
    Please find attached the same project converted to VisualStudio 2010 format. 

    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Abu Bakker
    Abu Bakker avatar
    3 posts
    Member since:
    Dec 2018

    Posted 14 Dec 2018 in reply to Dimiter Madjarov Link to this post

    Hi,

    I am trying to create table with multiple row-spans in angular, something like the attached screenshot. However I am unable to achieve row-span. I see there are controls for column-span, however I don't see any controls for row span.

    I am using a complex object like the one below:

    [
    {
    "Metric": "MetricValue",
    "AttainedValue": "120",
    "NetWeight":20,
    "Products": [
    {
    "ProductName":"ProductName",
    "PGValue":100,
    "PGWeight":25,
    "Price": "100,000,000 USD",
    "Sold": " 60,000,000 USD",
    "Left":"40,000,000 USD",
    "MetricEarnings":"11,000 JPY",
    "SInformation": [
    {
    "SName":"Source",
    "Start":"Oct 9, 2018 8:44",
    "End":"Oct 10, 2018, 9:00 AM "
    },
    {
    "SName":"Source",
    "Start":"Oct 9, 2018 8:44",
    "End":"Oct 10, 2018, 9:00 AM "
    },
    {
    "SName":"Source",
    "Start":"Oct 9, 2018 8:44",
    "End":"Oct 10, 2018, 9:00 AM "
    }
    ]
    },
    {
    "ProductName":"ProductName",
    "PGValue":100,
    "PGWeight":25,
    "Price": "100,000,000 USD",
    "Sold": " 60,000,000 USD",
    "Left":"40,000,000 USD",
    "MetricEarnings":"11,000 JPY",
    "SInformation": [
    {
    "SName":"Source",
    "Start":"Oct 9, 2018 8:44",
    "End":"Oct 10, 2018, 9:00 AM "
    }
    ]
    },
    {
    "ProductName":"ProductName",
    "PGValue":100,
    "PG":25,
    "Price": "100,000,000 USD",
    "Sold": " 60,000,000 USD",
    "Left":"40,000,000 USD",
    "MetricEarnings":"11,000 JPY",
    "SInformation": [
    {
    "SName":"Source",
    "Start":"Oct 9, 2018 8:44",
    "End":"Oct 10, 2018, 9:00 AM "
    }
    ]
    },
    {
    "ProductName":"ProductName",
    "PGValue":100,
    "PGNetWeight":25,
    "Price": "100,000,000 USD",
    "Sold": " 60,000,000 USD",
    "Left":"40,000,000 USD",
    "MetricEarnings":"11,000 JPY",
    "SInformation": [
    {
    "SName":"Source",
    "Start":"Oct 9, 2018 8:44",
    "End":"Oct 10, 2018, 9:00 AM "
    }
    ]
    }
    ]
    }
    ]

    Please let me know if there is a way to achieve this in kendo grid.

    Thanks,

  6. Abu Bakker
    Abu Bakker avatar
    3 posts
    Member since:
    Dec 2018

    Posted 14 Dec 2018 in reply to Abu Bakker Link to this post

    PFA the image
  7. Abu Bakker
    Abu Bakker avatar
    3 posts
    Member since:
    Dec 2018

    Posted 14 Dec 2018 in reply to Abu Bakker Link to this post

    PFA the file
  8. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 17 Dec 2018 Link to this post

    Hi Abu,

    The Kendo UI Grid have multi-column headers feature, but row-span is not supported and it renders each dataItem on separate row:
    The only option that we could suggest is to handle the "dataBound" event of the Grid and manipulate the TABLE element with jQuery or JavaScript manually:

    Regards,
    Konstantin Dikov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top