I'm using ASP.NET and the MVC pattern.
I have the following code which I use to style the columns:
<div id="grid">
#grid.GetHtml(columns: grid.Columns(
grid.Column("Amount", "Amount", canSort: true, style: "column"),
grid.Column("ShelfLife", "ShelfLife", canSort: true, style: "column"),
grid.Column("Size", "Size", canSort: true, style: "column"),
grid.Column("Type", "Type", canSort: true, style: "column"),
grid.Column("Unit", "Unit", canSort: true, style: "column")
))
</div>
I use the following code to load the data for the grid:
#{
ViewBag.Title = "ListView";
Layout = "~/Views/Shared/_Layout.cshtml";
var grid = new WebGrid(Model, defaultSort: "null");
}
It's probably a long and trivial way of doing this... but I'd like to know how I can manipulate what's in the grid? For example, I'd like to add a button for every row. I'd also like to recolour every second row. How would I do this?
You can use styles for changing the color of rows in grid and check this link for manipulating the grid.
You can define custom css class in a separate css file
.comments {
width: 500px;
}
and then assign this class to the corresponding elements:
webGrid.Column(columnName: "TRP_Comments", header: "Comments", style: "comments")
Related
I am using #grid.GetHtml gridview to show the grid in my ASP.NET MVC4 application.
I want to visible some columns in my grid view and also i will use these columns for my future functionality.
Please help how to make the columns as visible false in #grid.GetHtml razor grid.
My code
#grid.GetHtml(
htmlAttributes: new
{
id = "XXXX"
},
tableStyle: "table table-bordered table-condensed table-hover table-striped",
headerStyle: "info",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "gridrow",
columns: grid.Columns(
grid.Column("AAAA", "AAA"),
grid.Column("BBBB", "BBB")
)
Try adding the columns you wish to hide with
grid.Column("BBBB", "BBB", style:"hidecol")
Then write some css
.hidecol {
display: none;
}
If you wish to hide that column header as well, then you can use some JQuery like this
$(document).ready(function() {
$("#yourGridId th:nth-child(2)").hide();
}
Where you need to replace #yourGrid with an identifier for your grid. This will hide the header above the 2nd column.
I'm creating a simple webpage with Razor syntax and I have a little trouble with using buttons forms and input; how do I attach
db.Execute("exec dbo.deleteProject #0", #item.Key_Project);
to the input in last column of webgrid (via action or onclick)?
#{ //layout etc
var db = Database.Open("defaultConnection");
var ProjectNameGrid = new WebGrid(source: db.Query(SelectAllProjectKeysNamesStates),
canSort: false);}
#ProjectNameGrid.GetHtml(
columns: ProjectNameGrid.Columns(
ProjectNameGrid.Column("Key_Project", "ID", style: "smallColumn"),
ProjectNameGrid.Column("ProjectName", "Project", style: "LongColumn"),
ProjectNameGrid.Column("ProjectStartDate", "Starting date"),
ProjectNameGrid.Column("ProjectEndDate", "Ending date"),
ProjectNameGrid.Column("IsActive", "Active", style: "smallColumn"),
ProjectNameGrid.Column("Key_Project", "", format:
#<input type="submit" method="post" action="" value="delete" />) ),
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt")
use Razor ActionLink Like Bellow:
#Html.ActionLink("Text", "Action", "Controller", new {param1 = val1, param2 = val2}, null)
I have been trying to fin a way to override the URL generated for sorting & paging. As i need to put a session ID in the URL that it generates. I have tried putting in custom formats. But that didn't work. It there an easier way?
#{
var grid = new WebGrid(canPage: true, canSort: true, ajaxUpdateContainerId: "grid", rowsPerPage: #Model.Paging.PageSize, defaultSort: "Test");
grid.Bind(Model.TestUnit, rowCount: Model.Paging.TotalRecordCount, autoSortAndPage: false, );
grid.Pager(WebGridPagerModes.FirstLast, firstText: "First", lastText: "Last");
#grid.GetHtml(htmlAttributes: new { id = "grid" }, tableStyle: "table table-striped table-hover",
columns: grid.Columns(
grid.Column("", format: #<img class="thumb" src="#" height="35" width="35" alt="" />),
grid.Column("Test", header: "Test"),
grid.Column("Test2", header: "Test2"),
grid.Column("", format: #<text>#Html.ActionLink("Details", "Details", new { id = item.test}) </text>, canSort: false)
));
}
I am new to MVC 4. I am stuck in a situation and want some suggestions to resolve the problem. The problem scenario is:
I am rendering a WebGrid inside a partial view and the WebGrid format is as follows:
An IEnumerable collection is bound with the WebGrid. The view for binding WebGrid is:
#{
MIS.Areas.AdminModule.Models.AdminModuleViewModels.Module_UserGrp_Permission allPermissions = new MIS.Areas.AdminModule.Models.AdminModuleViewModels.Module_UserGrp_Permission();
}
#{
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 10, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "Title");
grid.Pager(WebGridPagerModes.NextPrevious);}
<div id="gridContent">
#grid.GetHtml(tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
selectedRowStyle: "select",
columns: grid.Columns(
grid.Column(header: "Select",
format: #<input class="select" id="assignChkBx" name="assignChkBx" type="checkbox" #allPermissions.intMenuId/>),
grid.Column(header: "MenuId", format: (item) => item.intMenuId, style: "description"),
grid.Column(header: "Menu", format: (item) => item.strMenuName, style: "description", canSort: true),
grid.Column(header: "Add", format: #<text><input name="Add" type="checkbox" #(item.boolAddPer == true ? "Checked" : null) id="chkboxIsActiveAdd" /></text>),
grid.Column(header: "Edit", format: #<text><input name="Edit" type="checkbox" #(item.boolEditPer == true ? "Checked" : null) id="chkboxIsActiveEdit" /></text>),
grid.Column(header: "Delete", format: #<text><input name="Delete" type="checkbox" #(item.boolDeletePer == true ? "Checked" : null) id="chkboxIsActiveDelete" /></text>),
grid.Column(header: "Grant", format: #<text><input name="Grant" type="checkbox" #(item.boolGrantPer == true ? "Checked" : null) id="chkboxIsActiveGrant" /></text>)
))
</div>
And fetching data from database as follows (I am NOT using EntityFramework) :
var result = from column in dt.AsEnumerable()
select new Module_UserGrp_Permission
{
intMenuId = Convert.ToInt32(column["MenuId"]),
intUserGrpId = Convert.ToInt32(column["UserGrpId"]),
strMenuName = Convert.ToString(column["MenuName"]),
boolAddPer = Convert.ToBoolean(column["boolGAdd"]),
boolEditPer = Convert.ToBoolean(column["boolGEdit"]),
boolDeletePer = Convert.ToBoolean(column["boolGDel"]),
boolViewPer = Convert.ToBoolean(column["boolGView"]),
boolGrantPer = Convert.ToBoolean(column["boolGGrant"])
};
return new List<MIS.Areas.AdminModule.Models.AdminModuleViewModels.Module_UserGrp_Permission>(result);
Now the problem is I have to save all the checked/unchecked items from this WebGrid.
What should I do to save all the values after clicking the 'Save' button.
Please suggest possible solutions.
Thank you all.
Since all of your check boxes have the same name you can do a
string result = Request.Form["assignChkBx"].ToString();
on your controller which will give you a list of all of the checked checkboxes. Hopefully this helps.
While it's not a coded worked solution, I've managed to get this working with a single checkbox. Should be simple enough to get it wired up for multiple: ASP.NET MVC Display an HTML Table with Checkboxes to Select Row Items
I have two modals on one page. The border for the first is defined in the jquery.ui.theme.css file in the .ui-widget-content class.
Is there a way to append a style attribute and overwrite the one defined by the css file?
I want the second modal to have a different color border.
Here is my div:
<div id="dialog-modal" title="Discharge Warning">
<p>Are you sure you want to discharge this Patient</p>
</div>
Here is the jQuery for my second modal:
$('#dialog-modal').dialog(
{
modal: true,
autoOpen: false,
resizable: false,
draggable:false,
show:
{
effect:"blind",
duration:500
},
buttons:
{
'discharge':
{
text: 'Discharge Patient',
click: function () { $('#DischargeReferralForm').submit(); },
class: 'btn purple',
style: 'font-family: "Segoe UI", Helvetica, Arial, sans-serif'
}
},
});
$('.ui-dialog-buttonpane')
.find('button:contains("Discharge")')
.prepend('<i class="icon-ok"></i>');
$('#DischargeMgs').click(function () { $("#dialog-modal").dialog("open"); });
FYI: The page inspect trace's the color back to the ui-widget-content class.
I took a closer look at jQuery UI Dialog individual CSS styling and added to my css file:
.ui-dialog-content1
{
border-color:#6d1b81 !important;
}
and to my jquery file:
dialogClass: 'ui-dialog-content1'