Syntax/Examples for a igHierarchicalGrid ASP.NET MVC usingRazor

135

Richard Tamouzian posted over 1 year ago

Cannot find a good example of how to use the igHierarchicalGrid in ASP.NET MVC c#, using Razor not using jQuery or coding in the controller like the one example I saw.

I have a simple usage of the HierarchicalGrid where I want to list all order nos, order dates and order amounts by customer where the order number is a hyperlink to another page that passes the order id to it. I have been looking for hours and cannot find any examples in the environment that I am developing in. Would appreciate a good example sent me.

Thanks!

Parents

380

Offline Georgi Anastasov posted over 1 year ago

Hello Richard,

I have been looking into your question and in fact, we provide a large set of Hierarchical Grid samples as well as documentation and help topics.

Here you can find a ready-made sample that you can test and look at how to create an igHierarchicalGrid that supports editing. Additionally, here you will find HierarchyGrid related documentation on what options, properties, events, and methods it offers.

Perhaps the most important help topic in our Ignite UI documentation, which explains step by step how to create your own hierarchical grid, can be found here. More additional help topics for grid initialization can be found here and for some ASP.NET MVC features with igHierarchicalGrid here.

Here is a code snipped for better vizualization:

@(Html.Infragistics().Grid(Model.Customers.AsQueryable()).
    ID("grid123").
    AutoGenerateColumns(false).
    AutoGenerateLayouts(false).
    Height("600px").
    Width("700px").
    PrimaryKey("CustomerID").
    Columns(column =>
    {
        column.For(x => x.CustomerID).HeaderText("Customer ID").DataType("string").Template("<a href='https://www.google.com/search'> ${CustomerID} </a>");
        column.For(x => x.CompanyName).HeaderText("Company Name").DataType("string");
        column.For(x => x.ContactName).HeaderText("Contact Name").DataType("string");
        column.For(x => x.Address).HeaderText("Address").DataType("string");
        column.For(x => x.City).HeaderText("City").DataType("string");
    }).
    ColumnLayouts(layouts =>
    {
        layouts.For(x => x.Orders).
        Width("100%").
        ForeignKey("CustomerID").
        PrimaryKey("OrderID").
        AutoGenerateColumns(false).
        AutoGenerateLayouts(false).
            Columns(childcolumn =>
            {
                childcolumn.For(x => x.OrderID).HeaderText("Order ID").DataType("number");
                childcolumn.For(x => x.ShipAddress).HeaderText("Ship Address").DataType("string");
                childcolumn.For(x => x.ShipName).HeaderText("Ship Name").DataType("string");
            });
    }).
DataBind().
Render())

After you create your hierarchical grid and initialize the columns, you can template each column by submitting its content to be wrapped in an A tag as a link to redirect to another page. You can also view additional information about column templating here.

  Columns(column =>
             {
                 column.For(x => x.CustomerID).HeaderText("Customer ID").DataType("string").Template("<a href='https://www.google.com/search'> ${ CustomerID} </a>");
                 column.For(x => x.CompanyName).HeaderText("Company Name").DataType("string");
                 column.For(x => x.Address).HeaderText("Address").DataType("string");
             }).

The described scenario could be observed here:

In addition, I also have prepared small sample where I have initialized igHierarchicalGrid which I attached here. Please test it on your side and let me know how it behaves.

5123.igHierarchicalGrid.zip

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics