How do I get functionality in Grid.MVC to work properly with Bootstrap?


I am using Grid.MVC with my ASP.NET MVC 4 Project. I am also using Bootstrap. I am not sure if there is a conflict between the stylesheets, or the Javascript between the two, or if it is something else altogether. I have the datagrid in a partialview. I don't know if maybe that is causing the issue, but: 1) when I add ".Sortable(true)" to the end of each column, the column headings change to red, but when I click them it reloads the page and my grid is gone. 2) When I rollover the rows on the grid, they don't highlight. When I click on the rows they don't highlight either. I know that the row is selected however because I created a test "alert" that pops up when the row is selected.
Jquery and Bootstrap are declared on the _Layout.cshtml shared view. How do I get this grid.MVC functionality to work properly? Below is the partialview for the grid:
 @using GridMvc.Html
 @model List<IntegrationQueryToolWebApp.Models.Request>

 @Html.Grid(Model0.Named("requestGrid").Columns(columns =>
      columns.Add(data => data.id).Titled("ID").Sortable(true);
      $(function ()  {
           pageGrids.requestsGrid.onRowSelect(fuinction (e)  {


Saineshwar wrote Sep 24, 2016 at 6:34 AM

The filter is not showing because you have 2 .css files in your project

1) site.css

2) Gridmvc.css

In site.css this is style for a:link which get executed when ever your click on filter icon of Grid.MVC .

You can just remove or commet this lines then you can see Filter is working
th a
display: block;
position: relative;

th a:link, th a:visited, th a:active, th a:hover
    color: #333;
    font-weight: 600;
    text-decoration: none;
    padding: 0;

th a:hover
    color: #000;
Check below link for reference