I'm using a WebGrid to create a paged/sortable list in MVC3. I've created an AJAX enabled Delete button which makes the delete call via AJAX, after which I'd like it to remove the row from the table.
The way I'd like to achieve this is by having an id or data-id attribute on the <tr> in the table so that I can easily manipulate it using jQuery. However I can't work out how to add attributes to rows when using a WebGrid.
I know that attributes can easily set at the grid level like so:
#grid.GetHtml(htmlAttributes: new { id = "gridMapping", style = "width:100%;" },
However I don't know how to achieve the same at the row/column level.
#grid.GetHtml(
columns: grid.Columns(
grid.Column(format: (item) => Html.CheckBox("SelectedInvoice",new { value=item.transactionId})),
//// rest of your columns here
)
)
so one way would be putting an HTML helper method in place that can handle your htmlAttributes.
Other way - using combination of format: and Html.Raw
And the last, but may be the easiest: javascript (jQuery)
so you can try something like :
$('#grid tr').each(function(){
$(this).attr('yourhtmlattribute','value');
});
and in similar way for TDs.
Here is how I achieved this
In your webgrid set up add this to one of the colums.
grid.Column("UserName", "User Name", format: #<text><span data-id='#item.Id'>#item.UserName</span></text>, canSort: true),
No when the HTML grid is rendered you will get this.
<tr jQuery45435434="3"> <span data-userid="1">Fred Smith</span></tr>
<tr jQuery45435434="4"> <span data-userid="2">Sally Smith</span></tr>
<tr jQuery45435434="5"> <span data-userid="3">Joe Smith</span></tr>
Related
I'm displaying dynamically selected columns as a grid(using webgrid) in partial view.When i perform paging on partial view webgrid,that partial view grid alone loading again in new page.I want to get the pagination for partial view without redirecting partialview alone into newpage.
Judging from the code you provided it seems that you are setting the ajaxUpdateContainerId to "result" but there is not any control with that id on your page you can set the id in .GetHtml() method by providing HtmlAttributes.
So the edited line would look something like this:
#grid1.GetHtml(htmlAttributes: new { id="result" },tableStyle: "WebGrid", headerStyle: "Header", alternatingRowStyle: "alt", columns: ViewBag.Columns)
Please check this link for more details
im using spring mvc framework with thymeleaf template engine
the problem is , i have 1 page with multiple check box iterated sing thymeleaf th:each iterator.When i clicked multiple check boxes i want to pass check box values to the controller method..
html content
<table>
<tr th:each="q : ${questions}">
<h3 th:text="${q.questionPattern.questionPattern}"></h3>
<div>
<p >
<input type="checkbox" class="ads_Checkbox" th:text="${q.questionName}" th:value="${q.id}" name="id"/>
</p>
</div>
</tr>
</table>
*Controller*
#RequestMapping(value = Array("/saveAssessment"), params = Array({ "save" }))
def save(#RequestParam set: String, id:Long): String = {
var userAccount: UserAccount = secService.getLoggedUserAccount
println(userAccount)
var questionSetQuestion:QuestionSetQuestion=new QuestionSetQuestion
var questionSet: QuestionSet = new QuestionSet
questionSet.setUser(userAccount)
questionSet.setSetName(set)
questionSet.setCreatedDate(new java.sql.Date(new java.util.Date().getTime))
questionSetService.addQuestionSet(questionSet)
var list2: List[Question] = questionService.findAllQuestion
var limit=list2.size
var qustn:Question=null
var a = 1;
for( a <- 1 to limit ){
println( a );
qustn= questionService.findQuestionById(a)
questionSetQuestion.setQuestion(qustn)
questionSetQuestion.setQuestionSet(questionSet)
questionSetQuestion.setCreatedDate(new java.sql.Date(new java.util.Date().getTime))
questionSetQuestionService.addQuestionSetQuestion(questionSetQuestion) } "redirect:/teacher/Assessment.html" }
I think you pretty much have it. With a checkbox, you can only send one piece of information back with the form...that being the value. So if you are trying to determine which checkboxes are checked when the user clicks the submit button, then I would have the checkboxes all use one name...like "id" (exactly like you have). Value is the actual id of the question (again like you have). Once submitted, "id" will be a String array which includes all the values of the checkboxes that were checked.
So your controller method needs to take param called "ids" mapped to parameter "id" which is a string[]. Now for each id, you can call questionService.findQuestionById.
(I'm not a Groovy guru so no code example sry :)
I have used JSTL with JSP and thymeleaf was something new. I read the THYMELEAF documentation.
There is a section which explains multi valued check boxes.
<input type="checkbox"
class="ads_Checkbox"
th:text="${q.questionName}"
th:value="${q.id}" name="id"/>
In the above code we are not binding the value to the field of the command object. Instead try doing this
<input type="checkbox"
class="ads_Checkbox"
th:text="${q.questionName}"
th:field="*{selectedQuestions}"
th:value="${q.id}" />
here the selectedQuestions is an array object present in the spring command object.
I am trying to use the new Kendo UI grid from asp.net mvc 3.
I am having a table the table is generated automatically from a controller in asp.net mvc 3.
And display it with Kendo.ui grid.
However, I am having the html code inside of the cells instead of the html controls
Example:
it display in the cell: <input checked="checked" class="check-box" disabled="disabled" type="checkb.. instead of an input, the code in the View is #html.input
or Edit | Details | <a href="/Adm instead of a link ( code in the View is #Html.actionLink)
How can I make it encode html code ?
This is my script:
$(document).ready(function() {
$("#calendrierMatch").kendoGrid({
});
});
Thanks
The KendoUI Grid automatically encodes the content of the grid, that's why you get the text <input type= ... instead of the actual input controll.
You can disable the encoding for a given column with using the encoded options (see documentation):
encoded: Boolean(default: true) Specified whether the column content
is escaped. Disable encoding if the data contains HTML markup.
So you need something like:
$(document).ready(function(){
$("#grid").kendoGrid({
//...
columns: [
{
field: "Column containing HTML",
encoded: false
}
]
});
});
in model binding kendo grid Razor Html Page use this code
#Html.Kendo().Grid(Model).Name("GridName").Columns(col =>{
col.Bound(m => m.ID);
col.Bound(m => m.Name);
col.Template(#<text>
#Html.Raw(HttpUtility.HtmlDecode( item.Text))
</text>);
})
You need to add the template feature of kendo grid.
In the below code i have created a text box inside the cell of kendo grid.
{
field: "Total",
title: "Total",
width: "40px",
template: "<input type='text' class=\"quantity_total\" id='txtTotal_${ItemId}'
name='txtTotal_${ItemId}' maxlength='8' onkeypress = 'return
fnCheckNumeric_total(event,this.id)' />"
},
I am doing a edit operation on a record in Grid . One of the column is DropDownValue.
When I go to Edit View , depending upon this dropdownvalue , I make few fields editable and readable. And , One more point is here, I didnt select the dropdown Yet, But whatever its value selected before is the one which I should retrieve. I know I have to use jQuery .But I didnt exact Syntax to do tht.
Here is my dropdown
<div id="dvstatus">
#Html.DropDownListFor(model => model.Study.StudyStatusId, Model.StatusSelectList, new { id = "ddlStatus" })
</div>
NOT SELECTED VALUE, BUT THE VALUE WITH WHICH IT IS LOADED
My requirement is how to get the dropdown value item , when it is loaded onto .cshtml
If you're not referring to the selected value of the dropdown then just pass the value from the controller to your view using your model if you're using a strongly-typed view or pass it some other way like using ViewBag and just set the value when it's passed on view.
You can add a hidden field to save the initially loaded value. Eg
<div id="dvstatus">
#Html.HiddenFor(model => model.Study.StudyStatusId)
#Html.DropDownListFor(model => model.Study.StudyStatusId, Model.StatusSelectList, new { id = "ddlStatus" })
</div>
Then you can use java script to compare current value of the drop down and the value of the hidden field(which has the initial value).
I need to replicate the functionality you get with an asp repeater that contains checkboxes, textboxes, and the occasional dropdownlist in an MVC application. Om traditional webforms you get a postback event and its pretty easy to get at all the controls and their values associated with the checkbox (id).
Anybody have any good suggestions on how to get the values back on a post for the items that have the checkbox checked. I am able to get some arrays back in the FormCollection (and even a strongly typed view) but I have not been able to figure out a good way to link the values effectivly.
All rows have a checkbox and a textbox, some rows also have a dropdownlist
To further explain...
row 1 has a checkbox and a textbox
row 2 has a checkbox a textbox, and a dropdown list.
if the user selects row 1 and 2, I need to get the values for all the form elements (for some calculations). Also, I haven't come up with a good method of handling validation errors.
any suggestions are greatly appreciated.
The simplest thing to do would be to iterate the collection for which you would have a repeater for. Using Razor syntax:
#using (Html.BeginForm()) {
<table>
#for (var i = 0; i < Models.Items.Count; i++) {
<tr>
<td>
#Html.CheckBoxFor(x => Model.Items[i].SomeBool)
</td>
<td>
#Html.TextBoxFor(x => Model.Items[i].SomeString)
</td>
</tr>
}
</table>
<button type="submit">Go</button>
}
Then a controller method:
[HttpPost]
public ActionResult Index(MyViewModel viewModel) {
// view model will be bound to values in form
}
Assuming the the Model in the view is of type MyViewModel. Once you have a sense of how this works you can look into ASP.NET MVC grid frameworks.