Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
205
HierarchicalGrid with ASP.net MVC helper
posted

I'm unable to get the HierarchicalGrid to work. What i want to do is to make a unbound row with four columns with unbound data (buttons and text).

For each row in the grid i would like to add one unbound Hierarchical row with buttons and text. Like this one http://www.igniteui.com/hierarchical-grid/aspnet-mvc-helper but without dynamic data loading and just one row with buttons and text in the instead of Product listing. 

My datamodel

        public int Id { get; set; }
        public string Name { get; set; }

ASPX

@(Html.Infragistics().Grid(Model.AsQueryable(

.Columns(column =>

          {

              column.For(x => x.Id).HeaderText("ID").Width("15%");

              column.For(x => x.Name).HeaderText("Name").Width("20%");

          })

        .ColumnLayouts(layouts =>

        {

            layouts.For(x => x.???)

                .Key("?")

                .AutoGenerateColumns(false)

                .Columns(column =>

                {

                    column.Unbound("link").HeaderText("Links").DataType("text").Template("<div class='text-right'><a class='btn btn-default btn-sm' type='button' href='/Details/${Id}'><span class='glyphicon glyphicon-list-alt'></span>Details</a><a class='btn btn-default btn-sm' type='button' href='Edit/${Id}'><span class='glyphicon glyphicon-pencil'></span>Edit</a></div>").Width("15%");

                });

        }

))

  • 11095
    Offline posted

    Hello pytte,

    Thank you for contacting Infragistics Developer Support!

    Currently there is no feature out of the box as unbound row. However I suggest you to create a custom footer for each child grid, where you can set your html. This can be done on footerRendered event. 

    1
    .ClientEvents(new Dictionary<string, string>() { { "footerRendered", "onFooterRendered" } })

    where the key is the name of the event and the value is name of the handler in your JavaScript code. 

    Then you can set the footer of your table using the ui argument of the handler.

    1
    2
    3
    4
    function onFooterRendered(evt, ui) {
    	ui.owner.element.find("tfoot").html("<tr><td colspan='2'>Add your logic here <button>Click</button></td></tr>");
    	ui.owner.element.find("tfoot").css("display", "table-footer-group");
    }

    Please review the attached sample and if you have any additional questions, please do not hesitate to contact me.

    UnboundRowIssue.zip
  • 11095
    Offline posted

    Hello,

    I'm just following up to see if you need any further assistance with this issue. If so please let me know.