Hi dimka

thanks for your help but its not running on my system am using VS2010 and mvc4

and also i want to know that , at the top most left side there is small triangle(at that place I want the + sign to expand all the rows of the grid and if all the rows are expanded then i want - for collapse all the rows will you please inform me on this how to achieve this.

Hello Mayuri,

Thank you for the additional details.

In order to style all child grid headers by a single style it is needed to add the following style in your view file:

    .ui-widget-header {

    background: none repeat scroll 0 0 #FF0000;

    border-bottom: 1px solid #777777;

    color: #FFFFFF;

    font-weight: normal;

}

Since this class will apply the style to the parent grid header it is also necessary to edit the igHierarchicalGrid header separately. This could be achieved by applying style to each of the header cells. Actually this is the most straight-forward approach since the header of the parent grid does not have its own id but the cells included in it are assigned with id-s or classes which define the uniquely:

   #grid1_ProductId {

    background:blue;

    }

    #grid1_Name {

    background:blue;

    }

    .ui-iggrid-expandheadercell {

    background:blue !important;

    }

I have attached an MVC sample for your reference.

If you have any further questions regarding this matter feel free to contact me again.

Hi Dimka

As the example give by you is using the json data binding will you pls give me the solution means writing the javascript and adding the css class for that tr using model as a database

  @(Html.Infragistics().Grid(Model.DoctorName.AsQueryable())
                .EnableHoverStyles(false)
                .ID("hierarchicalGrid")          
                .Width("90%")
                .Height("70%")
                .LoadOnDemand(false)
                .ExpandCollapseAnimations(true)
                .ShowHeader(true)
                .FixedHeaders(true)
                .AutoGenerateColumns(false)
                .PrimaryKey("DoctorID")
                .AutoGenerateLayouts(true)
                .Columns(column =>
                {

                    column.For(x => x.DoctorName).HeaderText("DoctorName").DataType("string");
                    column.For(x => x.DoctorID).HeaderText("DoctorID").DataType("int").Hidden(true);
                 
                })
                .ColumnLayouts(layouts =>
                {
                    layouts.For(x => x.patient)
                    .PrimaryKey("patientID")
                    .ForeignKey("DoctorID")
                    .EnableHoverStyles(false)
                    .ShowHeader(true)
                    .AutoGenerateLayouts(true)
                    .RenderCheckboxes(true)
                    .AutoGenerateColumns(false)
                    .Features(features =>
                    {

                        features.Sorting().Mode(SortingMode.Single).ModalDialogAnimationDuration(5).ColumnSettings(settings =>
                        {

                          

                        });
                        features.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Cell);

                    })
                    .Columns(childcols1 =>
                    {
                        childcols1.For(x => x.patientID).HeaderText("patientName ID").DataType("int").Hidden(true);

                        childcols1.For(x => x.patientName).HeaderText("patientName").DataType("string");
                      

                    });
                })
                            .Features(features =>
                            {

                             
                                features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings =>
                                {
                                  
                                });
                                features.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Row);

                            })

        .Width("100%")
        .DataBind()
        .Render( ))

so pls help me that how can write the javascript function for changing the css of such grid

yes I want the same background color for first child of parent as shown in image but for my grid the number of columns are not fixed as they coming from data base and as the solution given by you previously defines the color with proper name but for that the issue is we have add that much css class for every child cell. Is there any solution that we can get the entire row of child header's of that grid so that's why we are able to add the same css for that row.

and one more thing I want that blue header(parent header ) repetitive for every child with same css.suppose I expand the 3rd row then it should be repetitive for that child also means whatever number of expanded rows there should be same number of repetitive parent header

Hello Mayuri,

In order to change text color in all header cells it is needed to use the style below:

   .ui-iggrid-headertext

    {

        color: yellow !important;

    }

If this does not fit your requirements could please give more details on them? Is it needed to change the text color of just particular child grid headers?

A mockup image would be appreciated to investigate further if needed.

Look forward to hearing from you.