I am using teleik grid in MVC3, i am binding my grid data with model response value.
now my requrement is i have to add a checkbox in only those columns which status are completed.
Html.Telerik().Grid(Model.response)
.Columns(columns =>
{
columns.Bound(grid => grid.CaseStatus).Width(80);
columns.Bound(grid => grid.CaseID).Title("").Format("<input type='checkbox'name='checkedRecords' value='{0}' id ='{0}'/>").Encoded (false).Width(5);
})
i am binding my check box like this but i have to bind checkbox only with those rows, which status will completed.
please let me know how to check the value of CaseStatus here.
thanks
Use columns.Template to add checkbox. Like here:
columns.Template(o =>
{
%>
<input name="checkedRecords" type="checkbox" value="<%= o.CaseID %>"
<% if (checkedRecords.Contains(o.CaseID)) {
%> checked="checked" <%
} %>
/>
<%
}).Title("").Encoded(false).Width(5);
See more details here: http://demos.telerik.com/aspnet-mvc/grid/checkboxesserverside
Related
I am trying to use the helper collection_radio_buttons to show an image as a label, and want to save the image_id to the model so that I can retrieve the url, so far I have come up with this which shows a radio button and the image_url as the label.
Something I have noticed already is that I can only click the radio button once and it then just stays in its on state:
<%= f.collection_radio_buttons(:default_image_id, DefaultImage.all, :id, :image) %>
The html generated looks like so:
<input id="campaign_default_image_id_1" name="campaign[default_image_id]" type="radio" value="1" />
<label for="campaign_default_image_id_1">https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/1/vandals_portfolio.png</label>
How do I set this up correctly? Can I wrap the label in a image_tag ?
Edit
So after some more research and trying to piece this together I can now render an image and a radio button, but the image is the default image I uploaded with carrierwave and not the resized :small version that I would like. Can I pass the :small version through?
<%= f.collection_radio_buttons(:default_image_id, DefaultImage.all, :id, :image) do |b| %>
<%= b.label { image_tag("#{b.text}") + b.radio_button } %>
b.text retrieves the url
https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/2/ymca_portfolio.png
But I would like it to prefix the filename with fancy_box_array, like so:
https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/2/fancy_box_array_ymca_portfolio.png
The html generated with this new code is:
<label for="campaign_default_image_id_1"><img alt="Vandals portfolio" src="https://calcuttatest.s3.amazonaws.com/uploads/default_image/image/1/vandals_portfolio.png" />
<input id="campaign_default_image_id_1" name="campaign[default_image_id]" type="radio" value="1" /></label>
thanks
There is a good reference on what you are trying to do. Try something like:
f.collection_radio_buttons(:default_image_id, DefaultImage.all, :id, :image) do |b|
b.label { b.radio_button + image_tag(b.object.image) }
end
I need some help on rails forms. I currently have:
<div class="field">
<%= f.label :student_id %>
<%= f.collection_select(:student_id, Student.active.order('first_name'), :id, :proper_name, :prompt => true) %>
</div>
<br />
<div class="field">
<%= f.label :section_id %>
<%= f.select(:section_id, get_section_list, :prompt => "Select Section") %>
</div>
So the first drop down is to select a student. The second drop down list is to select a section. However, right now I am displaying all sections. But I want to only the select those sections that the student is eligible for. So how do I get the input of the first drop down list in order to change the second drop down list options. If they try to choose the section without selecting a student, it should show all the options.
Thanks!
Put the select box in a partial and re-render the partial when the first select box changes.
http://keithschacht.com/getting-ajax-to-work-in-rails-3-with-jquery/
I have a partial which returns results from the Amazon-ecs API (searches for books). It takes about 2.5 seconds to return values, so I want to add a spinner (and ideally hide the search button) but I've had a tough time getting it to work.
I already have javascript refreshing the partial with the results. I'd just like the button to give me a spinner (and hide the search button) until the partial finishes reloading.
Here is my main view (index.html.erb) which renders a partial of search results, each of which is added temporarily as an object in AmazonItems:
<%= form_tag amazon_items_path, :method => :get, :remote => true do %>
<p>
<%= text_field_tag :query, params[:query] %>
<span id="spinner" style="display:none">
<%= image_tag 'ajax-loader.gif' %>
</span>
<span id="search_button">
<%= submit_tag "Search" %>
</span>
</p>
<% end %>
<h1>Searching Amazon</h1>
<div id="amazon_returned">
<%= render 'amazon_returned' %>
</div>
My only JS code is in the update.js.erb file, which looks like:
$("#amazon_returned").html("<%=j render 'amazon_returned' %>");
I'm sure this is easy, but I can't get it work. Thanks!
EDIT: my partial "_amazon_returned.html.erb" looks like
<table>
<% for amazon_item in #amazon_items %>
<td> amazon_item.title </td>
...ETC...
<% end %>
</table>
You can hook into the before event to do this:
$(function() {
$("form").on("ajax:before", function() {
$("#spinner, #search_button").toggle();
});
});
Then, in your update.js.erb, add this again to toggle them back:
$("#spinner, #search_button").toggle();
Went with Dylan's answer, added the toggle to the update.js.erb and inserted the following into the view:
<script>
$(function() {
$("#search_button").click(function() {
$("#spinner, #search_button").toggle();
});
});
</script>
Very cool! Thanks again for the help.
I have the following code:
[code]
<h2>Listado General de Carreras</h2>
<% foreach (var item in Model)
{ %>
<p><span class="titulo"><%=Html.ActionLink(item.Nombre, "Details" , new { id = item.ID }) %></span> <sub> Area: <%: item.Area.Nombre%></sub></p>
<% } %>
<p>
<%: Html.ActionLink("Crear Nueva Carrera", "Create") %>
</p>
[/code]
What I want to do is display a header for every Area in my database and under each area show what Careers the Area has.
How can I efficiently do this with MVC2?
I was thinking of using Linq querys and saving them to the ViewData[] but maybe there is another way?
have you tried the .Count property on the collection?
I have this markup in an MVC app.
<div id="ingredientlistdiv">
<% Recipe recipe = (Recipe)Model; %>
<% Html.RenderPartial("IngredientsListControl", recipe.Ingredients); %>
</div>
<div id="ingrediententrydiv" align="left">
<% using (Ajax.BeginForm("Add Ingredient", "Recipes/UpdateStep2", new AjaxOptions { UpdateTargetId = "ingredientlistdiv" }))
{ %>
<p>
<label for="Units">Units:</label><br />
<%= Html.TextBox("Units", 0)%>
<%= Html.ValidationMessage("Units", "*")%>
</p>
<p>
<label for="Measure">Measure:</label><br />
<%= Html.TextBox("Measure")%>
<%= Html.ValidationMessage("Measure", "*")%>
</p>
<p>
<label for="IngredientName">Ingredient Name:</label><br />
<%= Html.TextBox("IngredientName")%>
<%= Html.ValidationMessage("IngredientName", "*")%>
</p>
<p>Save Ingredient</p>
<%= Html.Hidden("RecipeID", recipe.RecipeID.ToString())%>
<% } %>
</div>
When this runs the IngredientsListControl.ascx displayas a new page
in the browser and does not update the ingredientlistdiv.
This is my controller action
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult UpdateStep2(FormCollection form)
{
var factory = SessionFactoryCreator.Create();
using (var session = factory.OpenSession())
{
Recipe recipe = GetRecipe(session, Convert.ToInt32(form["RecipeID"]));
Ingredient ingredient = new Ingredient();
ingredient.UpdateFromForm(form);
ingredient.Validate(ViewData);
if (ViewData.ModelState.Count == 0)
{
recipe.Ingredients.Add(ingredient);
session.Save(recipe);
return PartialView("IngredientsListControl", recipe.Ingredients);
}
return Content("Error");
}
}
Am I doing the right thing on this line?
return PartialView("IngredientsListControl", recipe.Ingredients);
Is that how I render the control into the div so it does
not load new page.???
Malcolm
When you use this:
<a href="javascript:document.forms[0].submit()">
...you should be aware that it's not the same as
<input type="submit" />
It doesn't raise the onsubmit event, and MVC's AJAX eventhandler is not called.
To confirm this is the issue, add
<input type="submit" />
inside the form and try it out.
Finally, just call onsubmit() from your link
<a href="#" onclick="document.forms[0].onsubmit()">
Might be worth ensuring that you have correctly referenced the ajaxmvc and jquery scripts in your page (master page). If these are incorrect a new page will be displayed instead of the correct output in the target div.
RenderPartial takes an action name, not the name of the user control, so replace "IngredientsListControl" with "UpdateStep2", your action name.