I've been searching for examples but can't seem to find how I can use Bootstrap inside of a grid column in order to create a button. The following works but I would like to display an Edit button instead of just the text.
#grid.GetHtml(tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
rowStyle: "webgrid-row-style",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
footerStyle: "webgrid-footer",
columns: grid.Columns(
grid.Column(columnName: "CustomerName", header: "Customer Name"),
grid.Column(columnName: "Subject", header: "Subject"),
grid.Column(columnName: "CallDate", header: "Call Date"),
grid.Column(columnName: "Status", header: "Status"),
grid.Column(header: "Edit", format: (item) =>
{
var link = Html.ActionLink("Edit", "Edit", new { id = item.Id });
return link;
}),
Anyone know of an example I an look at to convert the Edit column to using a Bootstrap button?
Try adding the style argument for that specific column like so:
grid.Column(header: "Edit", format: (item) =>
{
var link = Html.ActionLink("Edit", "Edit", new { id = item.Id });
return link;
}, style: "btn btn-default")
Related
I have declared the webgrid inside a div in a partial view and my delete button is in Main View.Now I want a functionality in which when i click the delete button my webgrid should get refreshed only not whole page(Main View).
**I want to refresh only partial View which Contains webgrid using jquery in mvc
My partial View Code is as follows:
WebGrid grid = new WebGrid(source: Model, rowsPerPage: 10, canPage: true, defaultSort: "Station");
//WebGrid grid = new WebGrid(source: Model, rowsPerPage: 10, canPage: true, defaultSort: "Station", ajaxUpdateContainerId: "grid1");
string Message = "";
if (#ViewBag.NoData != null)
{
Message = ViewBag.NoData.ToString();
}
<div id="UserMainDiv">
#if (Model.Count() > 0)
{
<div id="grid1" class="row container" style="width:84%;margin-left:8%;">
<div class="col-md-12" style="width:100%;color:black;margin-top:10px;padding-left:0px;padding-right:0px;">
#grid.GetHtml(
htmlAttributes: new { id = "grid" },
tableStyle: "webgrid",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
//mode: WebGridPagerModes.All,
//firstText: "",
//lastText: ">>",
//previousText: "<",
//nextText: ">",
columns: grid.Columns
(
//Here I am going to add checkbox column
//Here I am going to add checkbox column
grid.Column(format: #<text> <input type="checkbox" value="#item.ID" name="ids" /> </text>, header: "{checkall}"),
//grid.Column("ID"),
#*grid.Column("Name",format: #<text>#Html.ActionLink((string)item.Name, "AddEdit", "gridchk", new { id = item.id })</text>),*#
grid.Column("Station", format: #<text>#Html.ActionLink((string)item.Station, "EditEmployee", "Manage", new { id = item.ID }, new { #class = "modal1" })</text>),
grid.Column("FlightNo", "Flight No", format: #<text>#Html.ActionLink((string)item.FlightNo, "EditEmployee", "Manage", new { id = item.ID }, new { #class = "modal1" })</text>),
grid.Column("FlightDate", "Flight Date", format: #<text>#Html.ActionLink((string)item.FlightDate.ToString("MM/dd/yy"), "EditEmployee", "Manage", new { id = item.ID }, new { #class = "modal1" })</text>),
//grid.Column("FlightDate", "Flight Date", format: (item) => item.FlightDate != null ? item.FlightDate.ToString("MM/dd/yy") : "NULL"),
grid.Column("PaxNo", "Pax No", format: #<text>#Html.ActionLink((string)item.PaxNo != null ? (string)item.PaxNo : "NULL", "EditEmployee", "Manage", new { id = item.ID }, new { #class = "modal1" })</text>),
//grid.Column("PaxNo", "Pax No", format: (item) => item.PaxNo != null ? item.PaxNo : "NULL"),
grid.Column("PaxNoOwnward", "PaxNo Onward", format: #<text>#Html.ActionLink((string)item.PaxNoOwnward != null ? (string)item.PaxNoOwnward : "NULL", "EditEmployee", "Manage", new { id = item.ID }, new { #class = "modal1" })</text>),
//grid.Column("PaxNoOwnward", "PaxNo Onward", format: (item) => item.PaxNoOwnward != null ? item.PaxNoOwnward : "NULL"),
grid.Column("TextMsg", format: #<text>#Html.ActionLink((string)item.TextMsg, "EditEmployee", "Manage", new { id = item.ID }, new { #class = "modal1" })</text>)
)
)
</div>
</div>
}
#*</div>*#
else
{
<div style="width:80%;margin-left:10%;">
<div class="row container">
<div class="col-md-12" style="width:100%;color:black;margin-top:10px;text-align:center;">
#Html.Label("", Message, new { id = "lblMessage" })
</div>
</div>
</div>
}
</div>
And My Main page view where i have delete button button code declared.
With that I am using Jquery
$('#btnDelete').click(function (e) {
var command = $('#btnDelete').val();
var myArray = [];
$("#gridtable tbody tr td:nth-child(1)").find('input[type="checkbox"]:checked').each(function () {
myArray.push(($(this).val()));
});
e.preventDefault();
var url = '#Url.Action("DeleteUser", "CreateUser")';
$.ajax({
url: url,
type: 'GET',
data: { ids: myArray },
dataType: 'html',
success: function (data) {
// $("#demoaArea").html(data);
location.reload();
// window.location.href = url;
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//alert('error; ' + eval(error));
alert("Status: " + textStatus); alert("Error: " + errorThrown);
//alert('Error!');
}
});
});
My Delete controller code:
public Actionresult DeleteStudent(int ids)
{
// delete the record from ID and return true else false
}
In your ajax call success, instead of reload , use the below one.
$('#UserMainDiv').html(data)
and in your controller return partialview instead of whole view.
public Actionresult DeleteStudent(int ids)
{
// delete the record from ID and return true else false
return PartialView("PartialViewName",model);
}
I am using a WebGrid in my mvc application.
<div class="grid-div" id="webgridid">
#grid.GetHtml(
tableStyle: "gridTable",
headerStyle: "gridHead",
footerStyle: "gridFooter",
columns: new[]
{
grid.Column("name","Name", canSort: true, style: "name"),
grid.Column("description","Description", canSort: true, style: "description"),
grid.Column("duration","Duration", canSort: true, style: "duration"),
})
</div>
I can edit the selected row values using a form. After editing this values, it is not reflecting in my webGrid. But it is reflecting in DataBase. To reflect this in to the webGrid, I need to refresh the webGrid by loading datas from DB. How can I reload contents to webGrid from DB? Also after reloading it, this pageNumber should the old one. How to do this?
Finally I find the solution for my problem. I have to define a <div> with ID and refer the div’s id in the ajaxUpdateContainerId attribute of WebGrid control that will allow WebGrid to update data asynchronously using Ajax.
<div id="ajaxgrid">
#{
var grid = new WebGrid(Model, rowsPerPage: 10, selectionFieldName: "SelectedRow", ajaxUpdateContainerId: "ajaxgrid");
}
</div>
Then, call the GetHtml method of WebGrid, so that Razor Engine can generate corresponding HTML for it. After the end of <div> tag.
#grid.GetHtml(
tableStyle: "gridTable",
headerStyle: "gridHead",
footerStyle: "gridFooter",
columns: new[]
{
grid.Column("name","Name", canSort: true, style: "name"),
grid.Column("description","Description", canSort: true, style: "description"),
grid.Column("duration","Duration", canSort: true, style: "duration"),
})
Then in my ajax call for updation I have added location.reload() to refresh my WebGrid.
$.ajax({
url: '#Url.Action("User", "UserDetails")',
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: formData,
contentType: false,
processData: false,
success: function (result) {
if (result == "OK") {
location.reload();
}
else
alert(result);
},
error: function (result) {
alert('Error!');
}
});
Now its working fine for me.
I want to add checkbox in my webgrid so anybody can tell me how can I do this? And also tell me how can I select all checkbox and delete them. This is my code:-
#{
var grid = new WebGrid(
Model, rowsPerPage: 5,
defaultSort: "CatagoryId",
columnNames: new[] { "Category_Name", "Parent_Category_ID", "Category_Desc", "IsGenderApplicable", "IsAgeApplicable", "IsActive" }
);
}
#grid.GetHtml(
fillEmptyRows: false,
mode: WebGridPagerModes.All,
columns:grid.Columns(
grid.Column("Category_Name", header: "Catagory Name"),
grid.Column("Parent_Category_ID", header: "Parant CatID"),
grid.Column("Category_Desc", header: "Description"),
grid.Column("IsGenderApplicable", header: "Gender Application"),
grid.Column("IsAgeApplicable", header:"Age Application"),
grid.Column("IsActive", header: "Active")
)
)
Add a checkbox as:
grid.Column(format: #<text><input name="chkbox"
type="checkbox" value="some value" /></text>),
Your second query: how can I select all checkbox ?
Please refer to this blog: http://www.codeproject.com/Questions/273164/mvc-checkbox-checked-rows-in-the-web-grid
I had read some tutorials of how to implement a MVC webgrid through AJAX but I want to understand what's happening under the hood, and which is the correct implementation for ajaxUpdateContainerId.
Example A:
#{
var grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "result");
#grid.GetHtml(htmlAttributes: new { id = "result" }, tableStyle: "webgrid",
grid.Columns(
grid.Column(columnName: "ID", header: "ID", canSort: true),
grid.Column(columnName: "Name", header: "Name", canSort: true)))
}
Example B
#{
var grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "result");
<div id="result">
#grid.GetHtml( tableStyle: "webgrid",
grid.Columns(
grid.Column(columnName: "ID", header: "ID", canSort: true),
grid.Column(columnName: "Name", header: "Name", canSort: true)))
</div>
}
Example C:
<div id="result">
#{
var grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "result");
#grid.GetHtml(tableStyle: "webgrid",
grid.Columns(
grid.Column(columnName: "ID", header: "ID", canSort: true),
grid.Column(columnName: "Name", header: "Name", canSort: true)))
}
</div>
I know that you have to bind the content to the grid and that you have to pass only the elements that you are going to display in the webgrid, but I'm trying to understand how ajaxUpdateContainerId works, so this examples work for this purpose.
Which of this examples is the correct way to update the content and why?
ajaxUpdateContainerId is doing a "Update" or really is doing a Replace content?
I hope someone can help me with this and this can be useful to someone else. Thanks In advance.
After a lot of tests I get the answer for this:
Which of this examples is the correct way to update the content and why?
The three examples are correct and will work, which one to use will depend on your needs, in my specific case I will use the Example A because I only want to update the content of the table(WebGrid) not everything inside the div, if for some reason every time you sort or change page you want to update something else you should use Example C.
Example B is pretty much like Example A but I don't need to put an extra div.
ajaxUpdateContainerId is doing a "Update" or really is doing a Replace content?
It's doing a update and will only update the content of the element with the specified ID in this case result.
And to understand how this works in Example A I did this:
#Html.Label("date", DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"))
#{
var grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "result");
#grid.GetHtml(htmlAttributes: new { id = "result" }, tableStyle: "webgrid",
grid.Columns(
grid.Column(columnName: "ID", header: "ID", canSort: true),
grid.Column(columnName: "Name", header: "Name", canSort: true)))
}
If you page/sort in the webgrid the time label will not change and this is
the expected behavior only the content of the table will change, if you do the same in the Example C and everything is wrapped inside the div every time you page/sort you will see that all the content will be updated including the time label.
This seems pretty logic now but I was confused how this works so I hope this can be useful to some one else.
Note: I was having a weird behavior where after paging and sorting I get an empty page with the content of the grid and it turns that it was because I was using history.js and I was pushing the content of the div that was wraping my partial view(which it's ok for Example C) but I was using Example A and really what I want is to push only the content of my webgrid wich is the one that was changing.
I have inserted the link buttons "Add New Record" and "Save All" at the bottom of my Webgrid. But I want them to be in the footer of the WebGrid. I have searched for this a lot, but found nothing. Can someone tell me how to add a link or button in the "footer" of a WebGrid.
Here is some code of my WebGrid
#model IEnumerable<MvcGrid2.Models.Employee>
#{
WebGrid grid = new WebGrid(
source: Model,
rowsPerPage: 4);
}
#grid.GetHtml(htmlAttributes: new { id = "WebGrid1" },
tableStyle:"gridTable",
headerStyle: "gridHead",
footerStyle: "gridFooter",
rowStyle: "gridRow",
alternatingRowStyle: "gridAltRow",
mode: WebGridPagerModes.All,
firstText: "<<",
previousText: "<",
nextText: ">",
lastText: ">>",
columns: grid.Columns(
#* grid.Column( columnName : "EmployeeId",
format: #<text>#item.EmpId</text>),*#
grid.Column(columnName: "Employee Id",
format: #<span>
<span id="spanEmpId_#(item.EmpId)">#item.EmpId</span>
#Html.TextBox("EmpId_" + (int)item.EmpId, (int)item.EmpId, new { #style = "display:none" })
</span>),
grid.Column(columnName: "Employee Name",
format: #<span>
<span id="spanEmpName_#(item.EmpId)">#item.EmpName</span>
#Html.TextBox("EmpName_" + (int)item.EmpId, (string)item.EmpName, new { #style = "display:none" })
</span>),
grid.Column(columnName: "Designation",
format: #<span>
<span id="spanEmpDesg_#(item.EmpId)" >#item.Designation</span>
#Html.TextBox("EmpDesg_" + (int)item.EmpId, (string)item.Designation, new { #style = "display:none" })
</span>),
grid.Column(columnName: "Action",
format: #<text>
Edit
Update
Cancel
Update
Cancel
Delete
</text>)
))
WebGrid doesn't have a modifiable footer per se. However if you view the tutorial on ASP.NET you'll see a way to make that happen in css.
What you can do is make your last row the same css class as your footer, or you can insert your buttons/links with javascript. Neither approach is clean, but as far as I can tell there is not a better way to accomplish your goal without rewriting the control. Many people have suggested looking into Telerik's controls, if you have/can get a license for their stuff.