I'm using webgrid to show data from my data base. The problem is that sort option is not working
Here is my webgrid code
#{
var grid = new WebGrid(Model, canPage:true ,canSort:true, rowsPerPage :4);
grid.Pager(WebGridPagerModes.NextPrevious);
#grid.GetHtml(tableStyle: "webGrid", htmlAttributes: new { id = "datatable" },
headerStyle: "webgrid-header",
selectedRowStyle : "webgrid-selected-row",
footerStyle : "webgrid-footer",
rowStyle: "webgrid-row-style",
alternatingRowStyle: "webgrid-alternating-row",
columns: grid.Columns(
grid.Column(header: "", format: (item) =>
Html.ActionLink("Détails", "Details", new { id = item.id_client }, new { #class = "details" }), style: "actions"),
grid.Column(header: "", format: (item) => Html.ActionLink("Modifier", "Edit", new { id = item.id_client }, new { #class = "modifier" }),style : "actions"),
grid.Column(header: "", format: (item) => Html.ActionLink("Supprimer", "Delete", new { id = item.id_client }, new { #class = "supprimer" }), style: "actions"),
grid.Column("Nom",canSort: true),
grid.Column("Prenom", "Prénom",canSort:true),
grid.Column("Email")));
}
You can try add the list of name columns for your webgrid, for example:
var grid = new WebGrid(canPage:true ,canSort:true, rowsPerPage :4);
grid.Bind(Model,columnNames: new[] { "Nom", "Prenom"}); //adding names of columns
grid.Pager(WebGridPagerModes.NextPrevious);
#grid.GetHtml(...
Sometimes web grid can't understand how bind your model with columns.
Yes, James's answer worked for me. The sort links were working for some of the columns and not others, adding the columnNames: made it work properly.
Steve
Related
I've 3 different Lists that I want to display next to each other, however for some reason they are being displayed under each other.
I am using JSViews.
Here is the relevant parts of my code and screenshot ;
in my JSView ;
var keysList = new sap.m.List(this.createId("keysList"), {
});
var valList1 = new sap.m.List(this.createId("valList1"), {
});
var valList2 = new sap.m.List(this.createId("valList2"), {
});
var vBox2 = new sap.m.VBox({
alignItems: "Start",
justifyContent: "Start",
items: [
keysList,
valList1,
valList2
]
}).addStyleClass("vbox2");
var oPageMerkliste2 = new sap.m.Page({
showHeader: false,
content: [
toolbar,
vBox1,
vBox2
]
});
return oPageMerkliste2;
my Controller ;
var keysList = this.byId("keysList");
var keysModel = new sap.ui.model.json.JSONModel();
keysModel.setData(keysObj);
console.log("keysList", keysList);
keysList.setModel(keysModel);
var template0 = new sap.m.CustomListItem({
content: [
new sap.m.VBox({
items: [
new sap.m.Text({
text : "{}"
})
]
}).addStyleClass("listSize")
]
}).addStyleClass("");
keysList.bindAggregation("items", "/", template0);
//val list 1
var valList1 = this.byId("valList1");
var valList1Model = new sap.ui.model.json.JSONModel();
valList1Model.setData(valsObj1);
console.log("valList1", valList1);
valList1.setModel(valList1Model);
var template1 = new sap.m.CustomListItem({
content: [
new sap.m.VBox({
items: [
new sap.m.Text({
text : "{}"
})
]
}).addStyleClass("listSize")
]
}).addStyleClass("");
valList1.bindAggregation("items", "/", template1);
//val2 list
var valList2 = this.byId("valList2");
var valList2Model = new sap.ui.model.json.JSONModel();
valList2Model.setData(valsObj2);
console.log("valList2", valList2);
valList2.setModel(valList2Model);
var template2 = new sap.m.CustomListItem({
content: [
new sap.m.VBox({
items: [
new sap.m.Text({
text : "{}"
})
]
}).addStyleClass("listSize")
]
}).addStyleClass("");
valList2.bindAggregation("items", "/", template2);
I thought VBox was actually for displaying the items next to each other but apparently in my case it doesn't behave in the way it actually should.
I tried to play with it on Chrome Dev. Tools and edited styles with changing width s but it didn't help either.
How can I display them next to each other ? ( Like 0. index of the first List is next to 0. index of the second List etc.)
And here is a screenshot how my "List" looks so far ( sorry about bad paint skills)
Try changing VBox with HBox.
sap.m.HBox
In your code, your using VBox, so it is doing the expected.
Given the following MVC5 code:
#Html.DropDownList(name: "Enhanced_Rijndael_AlgorithmID", optionLabel: null, selectList: EnhancedRijndaelAvailableHashAlgorithmList.Select(item => new SelectListItem
{
Value = item.RecordID.ToString(),
Text = item.HashAlgorithm,
Selected = "select" == item.RecordID.ToString()
}), htmlAttributes: new { #class = "form-control" })
Is it possible to set the "selected value" of this list?
The only thing I can think of is somehow setting the Selected value in the SelectListItem set.
Here is the what Ive come up with after being reminded of the DropDownListFor
#Html.DropDownListFor(expression: r => r.AlgorithmID, selectList: EnhancedRijndaelAvailableHashAlgorithmList.Select(item => new SelectListItem
{
Value = item.RecordID.ToString(),
Text = item.HashAlgorithm,
Selected = "select" == item.RecordID.ToString()
}),
htmlAttributes: new { #class = "form-control" }, optionLabel: "Algorithm")
I want to add custom class to Asp.net Razor MVC control #Html.DropDownListFor
I have following code
#Html.DropDownListFor(model => model.is_admin, new SelectList(
new List<Object>{
new { value = "true" , text = "Admin" },
new { value = "false" , text = "User" },
},
"value",
"text",
"false" ))
How can this same control be implemented in Asp.net MVC 5
Add a third parameter called htmlAttributes like following.
#Html.DropDownListFor(model => model.is_admin,
new SelectList(
new List<Object>{
new { value = "true" , text = "Admin" },
new { value = "false" , text = "User" },
}, "value", "text", "false"),
new { #class = "your_class_name" });
How to display a comment when the user mouse is over an action link? I'm using a gridview and here is one of my columns that contains an action link :
grid.Column(header: "", format: (item) => Html.ActionLink("Détails", "Details",
new { id = item.id_projet}, new { #class = "details" }), style: "actions")
Do you mean a title?
grid.Column(header: "", format: (item) => Html.ActionLink("Détails", "Details",
new { id = item.id_projet}, new { #class = "details", #title = "text here" }),
style: "actions")
This will display the text text here if you hover the link.
How can i get this work in MVC Telerik Grid Control
columns.Template(e =>
{
if (e.EndDate>DateTime.Now )
{
#Html.ActionLink("Stop", "StopMedication", "Medication",
new { id = e.PrescriptionID }, new { #class = "standard button" })
}
else {
#Html.ActionLink("Renew", "RenewMedication", "Medication",
new { id = e.PrescriptionID }, new { #class = "standard button" })
}
});
The following snippet should work perfectly fine in the Telerik Grid template column using Razor syntax:
columns.Template(
#<text>
#if (#item.EndDate > DateTime.Now)
{
#Html.ActionLink("Stop", "StopMedication", "Medication",
new { id = #item.PrescriptionID }, new { #class = "standard button" })
}
else
{
#Html.ActionLink("Renew", "RenewMedication", "Medication",
new { id = #item.PrescriptionID }, new { #class = "standard button" })
}
</text>
);
Taking use of the #<text></text> inside of the template, as well as using the #item object, which represents the current item (entity tied to the row) and it's properties, will allow you to have this template up and running.