Thanks Dimka

right now i have one another query here I want the parent header to be repetitive for each expanded child. In below example I want dr name row  will be there for Mohite row( above the mohite row)

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

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

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,

Have you changed the styles to correspond to your grid column id-s?

# hierarchicalGrid_DoctorName

{

                background:blue;

}

# hierarchicalGrid_DoctorID

{

                background:blue;

}

.ui-iggrid-expandheadercell {

    background:blue !important;

 }

.ui-widget-header {

    background: none repeat scroll 0 0 #FF0000;

    border-bottom: 1px solid #777777;

    color: #FFFFFF;

    font-weight: normal;

}

From the code you have provided they should be something like the id-s above.

I have tested this on a couple of projects and this works as expected.

Hello Mayuri,

Do you want me to consider any additional specificities of your scenario? If so, don’t hesitate to post here your requirements.