Search code examples
jqueryasp.net-mvc-4mvcjqgrid

how to display the alternate rows with different colours in mvcjqgrid


jqgrid and need to display the alternate rows with 2 colours please help me iam new to mvcjqgrid

@(Html.Grid("TermsAndConditions")
                .SetJsonReader(new MvcJqGrid.DataReaders.JsonReader { Id = "PurchaseOrderId", RepeatItems = false })
                .AddColumn(new Column("Template Name").SetKey(true).SetEditable(false).SetSearch(true))
                .AddColumn(new Column("Type").SetAlign(MvcJqGrid.Enums.Align.Center).SetSearch(true).SetSortable(false).SetWidth(65).SetEditable(false))
                        .SetAutoWidth(false)
                        .SetWidth(700)
                        .SetHeight(120)
                        .SetVirtualScroll(true)
                        .SetRowNum(50)
                        .SetViewRecords(true)
                        .SetPager("pager")
                        .SetSearchToolbar(true)
                        .SetSearchOnEnter(false)
                )

Solution

  • First add a onLoadComplete event:

    @(Html.Grid("TermsAndConditions")
        ...
        .OnLoadComplete("onLoadComplete()"))
    

    This will call the onLoadComplete function which is defined like this:

    <script type="text/javascript">
        function onLoadComplete() {
            $("tr.jqgrow:odd").css("background", "#E0E0E0");
        }
    </script>
    

    Now, after each request to the server the background colors will be set.