MVC - Select ALL checkbox - asp.net-mvc

I have a model and i have implemented in the view. The data is passed to the controller and i retrieve the values using the form collection in the controller. I have 50 records totally and display 10 per page. Problem is, when i tried to select the check all Check box,all the 50 records are selected. But when i submit, in the controller, form collection has only current page 10 record ids. rest of the records are not passed. Please help me to find a solution or provide an alternate to the problem.
--Controller code
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AssignLibrarian(FormCollection FC, string command)
{
foreach (string key in FC.AllKeys)
{
// Process Id Key values
if (key == "item.Id")
{
string IdValues = FC[key];
string[] PartIdArray = IdValues.Split(',');
foreach (string str in PartIdArray)
PartIdDictionary.Add(i++, str);
}
if (key == "item.IsSelected")
{
string SelectedIdValues = FC[key];
string[] PartSelectedIdArray = SelectedIdValues.Split(',');
for (int PartId = 0; PartId < PartSelectedIdArray.Length; PartId++)
{
if (PartSelectedIdArray[PartId] == "true")
{
PartSelectedIdDictionary.Add(j++, PartSelectedIdArray[PartId]);
PartId++;
}
else
PartSelectedIdDictionary.Add(j++, PartSelectedIdArray[PartId]);
}
}
}
}
View
#model IEnumerable<DFM.CMS.Model.PartRequest>
#foreach (var item in Model)
{
<tr>
<td style="width: 30px; word-wrap: break-word">
#Html.DisplayFor(model => item.CPN)
#Html.HiddenFor(model => item.Id)
</td>
<td style="width: 50px; word-wrap: break-word">
#Html.DisplayFor(modelItem => item.Manufacturer)
</td>
<td style="width: 50px; word-wrap: break-word">
#Html.DisplayFor(modelItem => item.MPN)
</td>
<td style="width: 70px; word-wrap: break-word">
#Html.DisplayFor(modelItem => item.VPLManufacturer)
</td>
<td style="width: 100px; word-wrap: break-word">
#* #Html.DisplayFor(modelItem => item.PartDescription)*#
#if (item.PartDescription != "" & item.PartDescription != null)
{
if (item.PartDescription.Length > 50)
{
#:#Html.LabelFor(modelItem => item.PartDescription, (item.PartDescription.Substring(0, 50) + "..."), new { title = item.PartDescription})
}
else
{
#:#Html.LabelFor(modelItem => item.PartDescription, item.PartDescription, new { title = item.PartDescription})
}
}
else
{
#:#Html.DisplayFor(modelItem => item.PartDescription, new { title = item.PartDescription})
}
</td>
<td style="width: 50px; word-wrap: break-word">
#Html.DisplayFor(modelItem => item.VPLPackage)
</td>
<td style="width: 50px; text-align: center">
#Html.DisplayFor(modelItem => item.RefDesQuantity)
</td>
<td style="width: 40px; word-wrap: break-word">
#Html.DisplayFor(modelItem => item.Librarian.Name)
</td>
<td style="width: 35px; word-wrap: break-word">
#Html.DisplayFor(modelItem => item.Status)
</td>
<td style="width: 85px">
#if (item.Status == DFM.CMS.Model.PartRequestStatus.Completed)
{
#Html.TextAreaFor(modelItem => item.Comments, new { rows = 3, cols = 1, disabled = "disabled" })
}
else
{
#Html.TextAreaFor(modelItem => item.Comments, new { rows = 3, cols = 1 })
}
</td>
<td style="width: 30px; text-align: center">
#if (item.Status == DFM.CMS.Model.PartRequestStatus.Completed)
{
#Html.CheckBoxFor(modelItem => item.IsSelected, new { disabled = "disabled" })
}
else
{
#Html.CheckBoxFor(modelItem => item.IsSelected,new {#class = "SubCheckBox" })
}
</td>
</tr>
}

Related

How display full length of details on mouse over from truncated details in MVC application?

I want to display full length of details on mouse over from truncated details. Please suggest me how to do this. I tried tooltip but not showing the full length of details.
<table class="table">
<tr>
<th>#Html.DisplayNameFor(m => m.A)</th>
<th>#Html.DisplayNameFor(m => m.Details)</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.A)
</td>
<td>
#{
var Details = "";
if (item.Details.Length > 10)
{
Details = item.Details.Substring(0, 10) + "...";
}
else
{
Details = item.Details;
}
}
<button class="link" type="button" data-id="#item.Id">
#Html.DisplayFor(modelItem => Details)
</button>
</td>
</tr>
}
</table>
One option is to add a title attribute to the button
<button title="#item.Detail" ...>
Another option is to style the button to show a 'short' version by default and then toggle the 'long' version on mouseover
<button ....>
<div class="truncate">#item.Detail </div>
</button>
css
.truncate {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
jQuery
$('.truncate').hover(function(){
$(this).toggleClass('truncate');
})

CSS Selector: last-child not working when added with a FOR loop

I'm working ASP.NET MVC with Razor pages. When I add items with a ForEach loop the last-child selector works fine. When I use a For loop the last-child does not work.
This works:
#foreach (var m in Model.Playlists)
{
<tr>
<td>#m.Name</td>
<td>#m.TrackCount</td>
</tr>
}
This does not work:
#for (int i = 0; i < Model.TrackList.Count; i++)
{
<tr>
<td>#Html.CheckBoxFor(x => x.TrackList[i].IsSelected)</td>
<td>#Model.TrackList[i].Name)</td>
<td>#Model.TrackList[i].Artist</td>
<td>#Model.TrackList[i].Album</td>
</tr>
#Html.HiddenFor(x => x.TrackList[i].Artist)
#Html.HiddenFor(x => x.TrackList[i].id)
#Html.HiddenFor(x => x.TrackList[i].Album)
#Html.HiddenFor(x => x.TrackList[i].Name)
}
As a work around I can add this:
#if (i == (Model.TrackList.Count - 1))
{
<td class="lastright">#Model.TrackList[i].Album</td>
}
else
{
<td>#Model.TrackList[i].Album</td>
}
And then add my style to class. Just curious why it doesn't work as expected. The DOM explorer does not show any additional elements.
Also here is the CSS:
.tracksTable tbody tr:last-child td:first-child {
border-radius: 0 0 0 16px;
}
.tracksTable tbody tr:last-child td:last-child {
border-radius: 0 0 16px 0;
}
Pulling the #Html.HiddenFor() inside the a <td> block resolved the issue. I noticed if there is anything between the final </td> and the last </tr> it will fail to find the last <td> as a last-child.
#for (int i = 0; i < Model.TrackList.Count; i++)
{
<tr>
<td>#Html.CheckBoxFor(x => x.TrackList[i].IsSelected)</td>
<td>
#Model.TrackList[i].Name)
#Html.HiddenFor(x => x.TrackList[i].Name)
</td>
<td>
#Model.TrackList[i].Artist
#Html.HiddenFor(x => x.TrackList[i].Artist)
</td>
<td>
#Model.TrackList[i].Album
#Html.HiddenFor(x => x.TrackList[i].id)
#Html.HiddenFor(x => x.TrackList[i].Album)
</td>
</tr>
}

How to control Max Rows in KendoUI Grid based on value in another control?

Given the following form:
Is there a way I can lock the maximum row count of the grid based on the value in the CWT box above it?
This is using MVC Razor, with this code to generate the grid:
<script src="#Url.Content("~/Scripts/kendo/2013.1.319/kendo.grid.min.js")" type="text/javascript" ></script>
<script src="#Url.Content("~/Scripts/kendo/2013.1.319/kendo.pager.min.js")" type="text/javascript" ></script>
<input type="hidden" name="Species_id" value='#ViewBag.SpeciesId' />
#(Html.Kendo().Grid<SpeciesRetainedSalmonViewModel>()
.DataSource(dataSource =>
dataSource.Ajax()
.PageSize(10)
.Batch(false)
.Read(read =>
read.Action("SpeciesRetainedData_Read",
"Species",
new { speciesId = #ViewBag.SpeciesId }))
.Create(create =>
create.Action("SpeciesRetainedData_Create",
"Species",
new {
species_Id = #ViewBag.SpeciesId,
speciesId = #ViewBag.SpeciesId
}))
.Update(update =>
update.Action("SpeciesRetainedData_Update",
"Species",
new { speciesId = #ViewBag.SpeciesId }))
.Destroy(delete =>
delete.Action("SpeciesRetainedData_Delete",
"Species",
new { speciesId = #ViewBag.SpeciesId }))
.Model(model => model.Id(m => m.Id))
)
.Pageable(pager => pager
.Numeric(true)
.PreviousNext(true)
.PageSizes(new[] { 10, 25, 50, 100 })
.ButtonCount(5)
.Messages(messages => messages.ItemsPerPage("Records / Page"))
)
.Sortable()
.Scrollable()
.Columns(columns => {
columns.Command(command => command.Edit()).Width(180);
columns.Bound(m => m.MarkType).EditorTemplateName("MarkType");
columns.Bound(m => m.CWTLabels).HtmlAttributes("width: 100px;");
columns.Command(command => command.Destroy()).Width(90);
})
.HtmlAttributes(new { style = "width: 100%;" })
.ToolBar(tb =>
tb.Create()
.Text("Create")
.HtmlAttributes(new { #class = "float-right submitposition" })
.HtmlAttributes(new { #style = "margin: -43px 0px 0px 0px;" })
)
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Name("SpeciesRetained")
)
The form field for CWT exists in the parent view to this view, and looks like:
<tr>
<td style="border-top: 1px solid rgba(0, 0, 0, .1);" colspan="3">
<h4>Retained</h4>
</td>
</tr>
<tr>
<td colspan="3" style="padding-bottom: 10px;">
<table style="-moz-column-gap: 0; -webkit-column-gap: 0; border-collapse: collapse; column-gap: 0; width: 100%;">
<tr>
<th class="labelCell-smaller" style="width: 15%;"> </th>
<th class="dataCell" style="width: 8%;">Total</th>
<th class="dataCell" style="padding-left: 12px; text-align: left;">Marked</th>
<th class="dataCell" style="padding-left: 12px; text-align: left;">Unmarked</th>
<th class="dataCell" style="padding-left: 12px; text-align: left;">CWT</th>
</tr>
<tr>
<td class="labelCell-smaller"></td>
<td class="dataCell">#Html.DisplayFor(model => model.RetainedTotal)</td>
<td class="dataCell">#(Html.Kendo().IntegerTextBoxFor(model => model.RetainedMarked).Min(0))</td>
<td class="dataCell">#(Html.Kendo().IntegerTextBoxFor(model => model.RetainedUnmarked).Min(0))</td>
<td class="dataCell">#(Html.Kendo().IntegerTextBoxFor(model => model.RetainedCWT).Min(0))</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<h5>Retained - CWT</h5>
</td>
</tr>
<tr>
<td colspan="3">
#Html.Partial("SpeciesRetainedGrid", Model.SpeciesRetained)
</td>
</tr>
You might have a look at this--seems appropriate even though a little dated.
I'd attach an event handler that listens to change() for your CWT IntegerTextBox. In that I'd pass in the value as your pagesize.
$("#RetainedCWT").kendoIntegerTextBox({
change: function() {
var grid = $("#SpeciesRetained").data("kendoGrid");
grid.dataSource.pageSize(this.val());
grid.refresh();
}
});

Column-Span in ASP.NET MVC View

#foreach (var item in Model) {
#if(ViewData["dropDown_"+item.Code] != null){
if (item.Code == "1" || item.Code == "4")
{
<td>
#Html.DropDownList("dropDown_"+item.Code+"_ListName", (IEnumerable<SelectListItem>)ViewData["dropDown_"+item.Code] ,new { style = "width: 100px; column-span: 2;" })
</td>
}else{
<td>
#Html.DropDownList("dropDown_"+item.Code+"_ListName", (IEnumerable<SelectListItem>)ViewData["dropDown_"+item.Code] ,new { style = "width: 100px;" })
</td>
<td>
Owner Preference: GREEN
</td>
}
}
}
From the above code, there will be 4 rows of dropdownlist be generated. The question is how to make the first one and the last one to column span. Note that I've included column-span:2 in the style list, but it has no effect nor giving any errors. Please help.
You need to set the colspan for the TD
<td colspan="2">
#Html.DropDownList("dropDown_"+item.Code+"_ListName", (IEnumerable<SelectListItem>)ViewData["dropDown_"+item.Code] ,new { style = "width: 100px;" })
</td>

A Good Format for a Table in TD

I have an table and needed Ajax form for each row so this is new implementation:
<tbody id="AllPhones">
#foreach(var item in Model.Phones) {
<tr class="gradeA odd" id="TR#(item.Id)">
#{Html.RenderPartial("_PhoneRow", item);}
</tr>
}
_PhoneRow Partial View:
#model MyModel
<td class="TableIncluded" colspan="4">
#using(Ajax.BeginForm("EditPhone","Phone", new { id = Model.Id }, new AjaxOptions {
UpdateTargetId = "TR" + Model.Id,
OnComplete = "CompleteEditPhone"
})) {
<table class="Internal">
<thead></thead>
<tbody>
<tr>
<td>#Html.DisplayFor(modelItem => Model.PhoneNumber)</td>
<td>#Html.DisplayFor(modelItem => Model.PhoneKind)</td>
<td>#if(Model.IsDefault) {<span class="BoolRadio True">Default</span>} else { <span></span>}</td>
<td><input type="submit" value="Edit" class="CallEditPhone" id = "Edit#(Model.Id)" /></td>
</tr>
</tbody>
</table>
}
</td>
As you see I must put form inside of <td> actually the first implementation was:
<td>#Html.DisplayFor(modelItem => Model.PhoneNumber)</td>
<td>#Html.DisplayFor(modelItem => Model.PhoneKind)</td>
<td>#if(Model.IsDefault) {<span class="BoolRadio True">Default</span>} else { <span></span>}</td>
<td><input type="submit" value="Edit" class="CallEditPhone" id = "Edit#(Model.Id)" /></td>
But now all of this <td>s covered in the new table and <td> so with new implementation elements in table are some disordered and I try to fix it with some css:
td.TableIncluded, td.TableIncluded table, td.TableIncluded form {
font-size: inherit;
margin: inherit;
height: inherit;
padding: inherit;
}
td.TableIncluded {
width: 100%;
}
But yet there is some horizontal disorders, This is First Implementation Without Table inside <td>:
And this is second one with table inside <td>
So what is your suggestion to fix the second one like first one ?
The easiest way to fix is, is to give three of the four <td> elements a fixed width. Since the table is 100% wide, the fourth cell will take up the rest of the available width.
<table class="Internal">
<thead></thead>
<tbody>
<tr>
<td>#Html.DisplayFor(modelItem => Model.PhoneNumber)</td>
<td class="phonekind">#Html.DisplayFor(modelItem => Model.PhoneKind)</td>
<td class="phonedefault">#if(Model.IsDefault) {<span class="BoolRadio True">Default</span>} else { <span></span>}</td>
<td class="phoneedit"><input type="submit" value="Edit" class="CallEditPhone" id = "Edit#(Model.Id)" /></td>
</tr>
</tbody>
</table>
table.Internal { width: 100%; }
table.Internal td.phonekind { width: 90px; }
table.Internal td.phonedefault{ width: 90px; }
table.Internal td.phoneedit{ width: 90px; }
If this isn't working as it should, you can just give the four <td> elements the same fixed with as the header cells of the outer table.

Resources