Please show me what I'm doing wrongly.
I have a Table tr/td converted to div, but I'm not getting exactly what it should look like. I must be definitely doing something wrong. Can someone please show me?
My code/script is pasted below
public class DropdownDTO
{
public string InsBranchCode { get; set; }
public string FullDescription { get; set; }
}
public class Underwriting_InsurerPolicyDistribution
{
public string InsBranchCode { get; set; }
public string PolicyRefCode{ get; set; }
public string InsurerLeadCode{ get; set; }
public string PercentageCover{ get; set; }
public string InsBranchCode { get; set; }
public bool isConfirmed{ get; set; }
}
public static IEnumerable<DropdownDTO> InsurerBranchDropDownList(this HtmlHelper htmlHelper)
{
var context = HttpContext.Current;
var itemList = new List<DropdownDTO>();
if (itemList == null)
{
var list = new List<DropdownDTO>();
list.Add(new DropdownDTO() { InsBranchCode = string.Empty, FullDescription = "Please select a Branch...." });
list.Add(new DropdownDTO() { InsBranchCode = "0001", FullDescription = "Nigeria" });
list.Add(new DropdownDTO() { InsBranchCode = "0002", FullDescription = "Zambia" });
list.Add(new DropdownDTO() { InsBranchCode = "0003", FullDescription = "South Africa" });
list.Add(new DropdownDTO() { InsBranchCode = "0004", FullDescription = "Ghana" });
list.Add(new DropdownDTO() { InsBranchCode = "0005", FullDescription = "SeriaLeone" });
list.Add(new DropdownDTO() { InsBranchCode = "0006", FullDescription = "Cotonou" });
list.Add(new DropdownDTO() { InsBranchCode = "0007", FullDescription = "Ivory Coast" });
list.Add(new DropdownDTO() { InsBranchCode = "0008", FullDescription = "Egypt" });
list.Add(new DropdownDTO() { InsBranchCode = "0009", FullDescription = "Mozambique" });
list.Add(new DropdownDTO() { InsBranchCode = "0010", FullDescription = "Maurutania" });
list.Add(new DropdownDTO() { InsBranchCode = "0011", FullDescription = "Niger" });
list.Add(new DropdownDTO() { InsBranchCode = "0012", FullDescription = "Democratic Republic of Cogo" });
list.Add(new DropdownDTO() { InsBranchCode = "0013", FullDescription = "Central African Replublic" });
list.Add(new DropdownDTO() { InsBranchCode = "0014", FullDescription = "South Africa" });
list.Add(new DropdownDTO() { InsBranchCode = "0015", FullDescription = "Tunisia" });
list.Add(new DropdownDTO() { InsBranchCode = "0016", FullDescription = "Algeria" });
list.Add(new DropdownDTO() { InsBranchCode = "0017", FullDescription = "Kenya" });
itemList = list;
}
return itemList;
}
<a href="#showDialog" class="btn btn-primary" title="Apportionment" data-toggle="modal" data-id="">Branches</a>
<div class="row">
<div class="col-md-12 col-sm-8 col-xs-12 col-xs-offset-0">
<div id="showDialog" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg" style="height: 50vh; max-height: 50vh; width: 110vh; max-width: 180vh; overflow-y: initial !important;">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h4 id="showDialogLabel" class="modal-title">Apportionment</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<div id="requestItems" class="divTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableCell">
<div class="btn btn-primary btn-sm">
<strong></strong><span class="glyphicon glyphicon-remove center-block"></span>
</div>
</div>
<div class="divTableCell">Branch Code</div>
<div class="divTableCell">Lead</div>
<div class="divTableCell">% Covered</div>
<div class="divTableCell">Confirm?</div>
</div>
</div>
<div class="divTableBody">
@{if (!string.IsNullOrEmpty(Model.Underwriting_PolicyFile.PolicyRefCode))
{
var prefx4 = "Underwriting_InsurerPolicyDistribution"; var prefx6 = prefx4 + ".index";
for (var i = 1; i <= Model.Underwriting_InsurerPolicyDistribution.Count; i++)
{
var itemIndex3 = string.Format("X{0}", i); var n7 = string.Format("{1}[X{0}].PolicyRefCode", i, prefx4);
var n8 = string.Format("{1}[X{0}].InsBranchCode", i, prefx4);
var n9 = string.Format("{1}[X{0}].InsuerLeadCode", i, prefx4);
var n10 = string.Format("{1}[X{0}].PercentageCover", i, prefx4);
var n11 = string.Format("{1}[X{0}].isConfirmed", i, prefx4);
<div class="divTableRow">
<div class="divTableCell">
<input name="@prefx6" type="hidden" value="@itemIndex3" />
@Html.Hidden(n7, Model.Underwriting_InsurerPolicyDistribution[i - 1].PolicyRefCode, new { id = n7 }) <button class="btn-primary btn-xs delbtn" style="background-color: #89006e !important; color: #fff; text-align: center;" type="button"></button>
</div>
<div class="divTableCell">
@Html.DropDownList(n8, new SelectList(Html.InsurerBranchDropDownList(), "InsBranchCode", "FullDescription", Model.Underwriting_InsurerPolicyDistribution[i - 1].InsBranchCode), new { id = n8, @class = "form-control input-sm chosen_select_L" })
@Html.ValidationMessage(n8, "", new { @class = "text-danger" })
</div>
<div class="divTableCell">
@Html.CheckBox(n9, Model.Underwriting_InsurerPolicyDistribution[i - 1].InsuerLeadCode, new { id = n9, @class = "form-control input-sm" })
@Html.ValidationMessage(n9, "", new { @class = "text-danger" })
</div>
<div class="divTableCell">
@Html.TextBox(n10, Model.Underwriting_InsurerPolicyDistribution[i - 1].PercentageCover, new { id = n10, @class = "form-control input-sm", @style = "width: 65px;" })
@Html.ValidationMessage(n10, "", new { @class = "text-danger" })
</div>
<div class="divTableCell">
<div class="form-check">
@Html.CheckBox(n11, Model.Underwriting_InsurerPolicyDistribution[i - 1].isConfirmed, new { id = n11, @class = "form-check-input" }) @Html.ValidationMessage(n11, "", new { @class = "text-danger" })
</div>
</div>
</div>
}
}
</div>
</div>
<input type="submit" class="btn btn-primary" value="Add New" onclick="addRow('requestItems'); return false;" />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" data-dismiss="modal">Next</button>
</div>
</div>
</div>
</div>
</div>
</div>
@section scripts {
<script src="~/Scripts/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".chosen_select_L").chosen({
width: "100%",
no_results_text: "Oops, nothing found!",
disable_search_threshold: 5
});
function addRow(dataTable) {
var table = document.getElementById(dataTable);
var rowCount = table.rows.length;
if(rowCount < 500){
$(".chosen_select_L").chosen('destroy');
var row = table.insertRow(rowCount);
row.id = "X" + rowCount;
var colCount = table.rows[1].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML.replace(/X1/g, row.id);
switch (newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
case "hidden":
newcell.childNodes[0].value = "";
break;
}
}
}
else{
BootstrapDialog.alert("Maximum rows are 500");
}
$(".chosen_select_L").chosen({
width: "100%",
no_results_text: "Oops, nothing found!",
disable_search_threshold: 5
});
}
});
}
Please which one will you recommend? for a Web project? tr/td Table or div Table.
Thanking you in anticipation of your quick response.
Best regards,
Abiodunajai