CODEWITHSUNDEEP
asp.net-mvcvisual-studio-2013asp.net-mvc-5
Abhinav
Abhinav

Reputation: 523

How to add column separator in Grid created by using grid.mvc and bootstrap in MVC5?

I've created grid in MVC5 like

image 1.

But I want a vertical line as a column separator like

image 2

I'm using grid.mvc (version: 3.0.0) of nugget package and default bootstrap for VS2013(MVC5).

Here is my Gridmvc.css

/***
*   Grid.Mvc stylesheet http://gridmvc.codeplex.com/
*   This file contains default styles for Grid.Mvc.
*/
/* Grid */
table.grid-table { margin: 0; }
    table.grid-table .grid-wrap { padding: 0; position: relative; }
    table.grid-table .grid-empty-text { color: #666; }

    /* Grid headers */
    table.grid-table .grid-header { position: relative; }
        table.grid-table .grid-header .sorted-asc .grid-sort-arrow:after { content: " \2193"; }
        table.grid-table .grid-header .sorted-desc .grid-sort-arrow:after { content: " \2191"; }
        table.grid-table .grid-header > .grid-header-title { border: #999999 1px solid;height: 21px;background-color: #f0f0f0;text-overflow: ellipsis;overflow: hidden; }

    /* Grid body */
    /*table.grid-table tr.grid-row-selected td { background: #4888C2 !important; color: white; }*/
    table.grid-table tr.grid-row-selected td { margin-bottom: 1px; padding-top: 0px; border: #000000 1px solid; height: 21px; }
    /*table.grid-table tr.grid-row-selected a { color: white; }*/
    table.grid-table tr.grid-row-selected a { margin-bottom: 1px; color: #000000; padding-top: 1px; border: #c4ddff 1px solid; height: 21px; background-color: #a7cdf0; }



/* Grid filtering */
input.grid-filter-input { padding: 4px; font-size: 13px; }
table.grid-table .grid-filter { position: relative; margin-top: 2px; float: right; width: 10px; height: 12px; }
table.grid-table .grid-filter-btn { cursor: pointer; display: block; width: 10px; height: 12px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJFJREFUKFNjkJSU/E8MZvj//78DMRhkoj+6bizYH2SiiIeHx2FjY+P/2DBIDqSGAQSOHTtmYWZm9hldEUgMJAdWBAJAHSzt7e056ApBYiA5qDIIAAoIhIaGroYpArFBYlBpVLB3715DmEIQGyqMCUDWwBRiWIkOYAqhXNwApMjX13c7lIsbgBQBrdWAcqGAgQEAdOGTrvsYKXIAAAAASUVORK5CYII=') no-repeat; }
    table.grid-table .grid-filter-btn.filtered { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJNJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2ZhZmb2GV0RSAwkB1YEAkAdLO3t7TnoCkFiIDmoMggACgiEhoauhikCsUFiUGlUsHfvXkOYQhAbKowJQNbAFGJYiQ5gCqFc3ACkyNfXdzuUixuAFAGt1YByoYCBAQAUDanUpFB4UQAAAABJRU5ErkJggg==') no-repeat; }
table.grid-table .grid-filter-buttons { padding: 0; }
table.grid-table .grid-filter-datepicker { font-size: 12px; }
    table.grid-table .grid-filter-datepicker table td { padding: 1px!important; }
    table.grid-table .grid-filter-datepicker .ui-datepicker { width: auto; }
table.grid-table .grid-dropdown-inner ul.menu-list li a.grid-filter-clear { white-space: nowrap; padding-left: 23px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAARpJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2axOC/396GinP/O+vpwRVbGxl92+vluXm1kuASsEKiD5VB99aG3eTH/HxjL/A/RUPsfrqb6f7e21uutlhbRYEUwAFQskOLmun2+lND/0xxM/7dycXzd6OxoCpVGBduWLjXv4+f/v5WF+f9RbtYvfeysqlApBKhhY2Hcxsy0+xAL038nbe3/m8W4ss/Jcx2GSiPAal6uvGtczP9TFOXBHgGJ7RHlmLGOjy0UrAAGzgT7rn7urP/P3NDgv6+v73aQWAMzM+dqTtbJYAUwsNzeyuhImE8GSBHQYxpQYYYJQCcxMDAwAAB7/bt5uWh9FAAAAABJRU5ErkJggg=='); background-position: 3px center; background-repeat: no-repeat; }
table.grid-table .grid-filter-choose.choose-selected { background-color: white!important; cursor: default; color: #999; }
table.grid-table .grid-popup-additional { padding: 3px 0 0 0; }

/* POP-UP */
.grid-dropdown { font-weight: normal; left: -102px; top: 16px!important; min-width: 180px; }
.grid-dropdown-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAl0lEQVQoU42PMQuFMAyE6xN5gpOjjsIb/P9/o3O3zh27dY25kIPq8DBwmLT35WoQkUEVOmGec84CaW2q7+N+AdCD6M9SisQYTei1jsfyCeCu+vjFVGs1AN++94DRfUOfuNLoKUiyRC5y2F5I8NdaM4P/l0EswvBorQTnfxBhLMRih+2pklIy+eEtjQPu6MNZwIBNbwteMBd5X4ZGHcwL3QAAAABJRU5ErkJggg==") no-repeat; height: 8px; left: 99px; position: absolute; top: -8px; width: 14px; }
.grid-dropdown-inner { padding: 5px 7px; }
.grid-dropdown ul.menu-list { list-style-type: none; margin: 3px 0 0 0; padding: 0; }
    .grid-dropdown ul.menu-list li a { text-decoration: none; background-position: 6px center; background-repeat: no-repeat; display: block; padding: 4px 5px; }
        .grid-dropdown ul.menu-list li a:hover { background-color: #EEE; text-decoration: none; }

Upvotes: 1

Views: 3785

Answers (2)

Abhinav
Abhinav

Reputation: 523

Added these two lines under GridBody in Gridmvc.css : 

table.grid-table tr td {border-right: solid 1px #666;} 
table.grid-table tr a {border-right: solid 1px #666;}

Upvotes: 6

heymega
heymega

Reputation: 9411

To add a right border to your table you need to apply it to your table headings and table data tags

Add this to your CSS and place it after the gridmvc.css.

td, th {
    border-right: 4px solid black;
}

Hope this helps

Upvotes: 0

Related Questions