Develop Reference

How to make a number with commas as thousands separator in table, javascript

I want to print an integer with a comma as a separator, for example 10,234,234
in the price column.
I have made the function, but I am a little confused how to make it in the table. Below is my code
<table class="table">
<tr>
<th> Item</th>
<th>Price</th>
</tr>
#foreach (SHOP.ViewModels.ItemViewModel item in Model.Itemss)
{
<tr>
<td> #Html.DisplayFor(modelitem => item.itemName) </td>
<td> #Html.DisplayFor(modelitem => item.itemPrice)</td>
</tr>
}
<tr>
<td></td>
<td> #Html.EditorFor(model => model.TotalPrice, new { htmlAttributes = new { #class = "form-control", #onchange = "validationCheck();", #readonly = "readonly" } }) </td>
</tr>
</table>
<script>
function numberSeparator(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
</script>

You need to get all second td elements in the table and then update the content using the code.
<table class="table" id="table">
<!-- set id to get table^^^^^^^^---->
<tr>
<th> Item</th>
<th>Price</th>
</tr>
#foreach (SHOP.ViewModels.ItemViewModel item in Model.Itemss)
{
<tr>
<td> #Html.DisplayFor(modelitem => item.itemName) </td>
<td> #Html.DisplayFor(modelitem => item.itemPrice)</td>
</tr>
}
</table>
<script>
function numberSeparator(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
// get all second tds
[...document.querySelectorAll('#table tr > td:nth-child(2)')].forEach(e => {
// get text content and update
e.textContent = numberSeparator(e.textContent.trim());
})
</script>
FYI : It's always better to do it from the backend side if possible. There may be some functions available in your backend framework/programming language.
UPDATE : In your updated code you are creating an input so get input element update it's value.
<table class="table">
<tr>
<th> Item</th>
<th>Price</th>
</tr>
#foreach (SHOP.ViewModels.ItemViewModel item in Model.Itemss)
{
<tr>
<td> #Html.DisplayFor(modelitem => item.itemName) </td>
<td> #Html.DisplayFor(modelitem => item.itemPrice)</td>
</tr>
}
<tr>
<td></td>
<td> #Html.EditorFor(model => model.TotalPrice, new { htmlAttributes = new { #class = "form-control", #onchange = "validationCheck();", #readonly = "readonly" } }) </td>
</tr>
</table>
<script>
function numberSeparator(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
// get all second tds
[...document.querySelectorAll('#table tr > td:nth-child(2) input')].forEach(e => {
// get text content and update
e.value = numberSeparator(e.value.trim());
})
</script>

You can use toLocaleString to display a number with comma separators
let num = 1000000
let display = num.toLocaleString('us-US')
console.log(display) // 1,000,000
I suspect your code could work like this
#foreach (SHOP.ViewModels.ItemViewModel item in Model.Itemss)
{
<tr>
<td> #Html.DisplayFor(modelitem => item.itemName) </td>
<td> #Html.DisplayFor(modelitem => item.itemPrice.toLocaleString('us-US'))</td>
</tr>
}

How to filter data in html table by changing option in drop down in asp.net mvc?

It's been days since I started to study MVC programming and honestly I'm still coping up to new environment of MVC.
In my project, I started to create a data table that display the data in my database using these codes.
This is my codes in view and controller. This part runs very well.
<table id="table1" >
<thead>
<tr>
<th>id</th>
<th>title </th>
<th>
description
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.id)
</td>
<td>
#Html.DisplayFor(modelItem => item.title)
</td>
<td>
#Html.DisplayFor(modelItem => item.description)
</td>
</tr>
}
</tbody>
</table>
}
var charts = (from p in db.pmTA_ProjectCategory
select new
{
id = p.id,
title = p.title,
description = p.description,
}).ToList()
.Select(x => new pmTA_ProjectCategory()
{
id = x.id,
title = x.title,
description = x.description,
});
return View(charts.ToList());
But I noticed that I need to filter my data using dropdown so I added drop down to my View again.
This is my code in view and controller to display the dropdown and data inside the dropdown.
<div>
#Html.DropDownList("projectcat", ViewBag.proj as SelectList, "Select...", new {
#class = "form-control" })
</div>
var data1 = from p in db.pmTA_ProjectCategory
select new
{
id = p.id,
title = p.title,
description = p.description
};
SelectList list = new SelectList(data1, "id", "title");
ViewBag.proj = list;
when it comes to displaying the data inside the dropdown it runs again smoothly.
My problem is, I need to filter the data of data table using dropdown automatically. I mean, when I selected the value of dropdown the data table must show the data corresponds to the selected value in dropdown
I created codes in javascript to filter the data of datatable using dropdown.
This is the code:
<script>
$(document).ready(function () {
var table = $("#table1").DataTable();
$("#projectcat").change(function () {
table.search(this.value).draw();
});
});
</script>
But the data in my data table is not responding and not functioning, when I selected the data in dropdown the datatable can't filter.

1) Your view should be of strongly type of IEnumerable<ProjectCategory>
2) Add drop down to your view
<div class="dropdown">
#Html.DropDownList("id", (List<SelectListItem>)ViewBag.proj, "--Select id--", new { #onchange = "CallChangefunc(this.value)" })
</div>
3) Add partial view of IEnumerable<ProjectCategory> in your view. When you adding partial view then check it as Create as a partial view.
The name of your partial view is _GetItem.cshtml
The content of partial view
<table id="table1" >
<thead>
<tr>
<th>id</th>
<th>title </th>
<th>
description
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.id)
</td>
<td>
#Html.DisplayFor(modelItem => item.title)
</td>
<td>
#Html.DisplayFor(modelItem => item.description)
</td>
</tr>
}
</tbody>
</table>
And call this partial view in your view just below to your drop down that you added earlier.
<div id="myPartialView">
#{Html.RenderPartial("_GetItem", Model);}
</div>
4) You action method in controller would be
public ActionResult Index()
{
var charts = db.ProjectCategories.ToList();
List<SelectListItem> dropDownItems = charts.Select(c => new SelectListItem { Text = c.title, Value = c.id.ToString() }).ToList();
ViewBag.proj = dropDownItems;
return View(charts);
}
5) Add ajax call to your view that called when you change any option in your drop down
<script>
function CallChangefunc(id) {
$.ajax({
url: "#Url.Action("GetItem", "Default")",
data: { id: id },
type: "Get",
dataType: "html",
success: function (data) {
console.log(data);
//Whatever result you have got from your controller with html partial view replace with a specific html.
$("#myPartialView").html( data ); // HTML DOM replace
}
});
}
</script>
6) And finally your ajax call hit below action method that can render only partial view
public PartialViewResult GetItem(int id)
{
var charts = db.ProjectCategories.ToList();
var model = charts.Where(x => x.id == id).ToList();
return PartialView("_GetItem", model);
}

Current status :
You have created a drop down list id='projectcat'
Datatable $("#table1") is not responding on change event
Solution :
Your code looks correct there is nothing wrong with it.
Running same kind of example below is working correctly
Make sure there is no other javascript error blocking this code
Apply debugger inside $("#projectcat").change(function () { debugger; }); to debug code in developer toolbar
Check below example, changing drop down value its also filtering datatable:
$(document).ready(function () {
var table = $("#table1").DataTable();
$("#projectcat").change(function () {
console.log('Groing for folter : ' + this.value);
table.search(this.value).draw();
});
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<p>Change datatable filter value : </p>
<select id="projectcat">
<option>Rhona</option>
<option>Colleen</option>
<option>Jena</option>
<option>Tiger</option>
</select>
<hr />
<table id="table1" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>$320,800</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>$103,600</td>
</tr>
<tr>
<td>Tiger Kennedy</td>
<td>$313,500</td>
</tr>
<tr>
<td>Rhona Kennedy</td>
<td>$12,900</td>
</tr>
</tbody>
</table>

Get value of each cell from dynamic table

I have dynamic table which is create like this
<table id="sort" class="table">
<thead>
<tr>
<th>Nazwa kolumny z BD*</th>
<th>Długość rekordu*</th>
<th>Nazwa kolumny wyświetlana</th>
<th>Format*</th>
</tr>
</thead>
<tbody id="tblsort">
#for (var i = 0; i < Model.listOfFormats(Model.field.TemplateName).ColumnNamesDB.Count; i++)
{
<tr>
<td>#Html.TextBoxFor(m => Model.listOfFormats(Model.field.TemplateName).ColumnNamesDB[i], new { #class = "form-control", })</td>
<td>#Html.TextBoxFor(m => Model.listOfFormats(Model.field.TemplateName).LengthColumns[i], new { #class = "form-control" })</td>
<td>#Html.TextBoxFor(m => Model.listOfFormats(Model.field.TemplateName).ColumnNamesUser[i], new { #class = "form-control" })</td>
<td>#Html.DropDownListFor(m => Model.listOfFormats(Model.field.TemplateName).Formats[i], new SelectList(Model.formatFieldValues, "Value", "Text"), Model.listOfFormats(Model.field.TemplateName).Formats[i], new { #class = "form-control" })</td>
</tr>
}
</tbody>
</table>
How can I get value from each cel in this table? Thanks for help !
edit:
Ok I mean every cell data.
I tried your's solutions but nothing works
here is mine .html which is generate by browser
<tbody id="tblsort">
<tr>
<td name="cos"><input class="form-control" id="ColumnNamesDB_0_" name="ColumnNamesDB[0]" type="text" value="zzzz" /></td>
<td><input class="form-control" id="LengthColumns_0_" name="LengthColumns[0]" type="text" value="111" /></td>
<td><input class="form-control" id="ColumnNamesUser_0_" name="ColumnNamesUser[0]" type="text" value="zzzzz" /></td>
<td><select class="form-control" id="Formats_0_" name="Formats[0]"><option value=""></option>
<option value="DD-MM-YYY">DD-MM-YYY</option>
<option value="DDMMYYY">DDMMYYY</option>
<option value="NRB">NRB</option>
</select></td>
</tr>
</tbody>
When I run this code:
var value = $("#ColumnNamesDB[0]").attr('value');
var bla = $('.ColumnNamesDB_0_').val();
alert(bla);
alert(value);
I'm getting "undefined". Whats wrong?

I dont know what you mean by "value", but you can iterate over each <td> using jQuery each()
$(function() {
var myArray = [];
$('#tblsort td input').each(function() {
var input = $(this),
value = input.attr('value');
myArray.push(value);
});
console.log(myArray);
});

If what you mean is you want to grab ALL the cell's data. So you have to give the "name" attribute to each cell, and grab ALL the data using the name..
<td name="example[]"></td>
And you can grab it using the language you wanted (Jquery or PHP)..

Make a DIV show with jQuery in nested accordion structure

I have an accordion that is loaded from a model list, so it is repeated with new IDs assigned according to the ID of the model. In this structure I have a DIV is display:none and upon clicking a radio button I want it to slide down and show. This is some of my HTML:
<tr style="height:35px">
<td style="text-align:left" >
<label id="lblOtherAvery+#Model[i].UserId" style="font-size:x-small">Other:</label>
</td>
<td>
#Html.RadioButtonFor(x=>Model[i].AverySize, "Other", new { #id = "chkOtherAvery" + #Model[i].UserId, #style = "width:30px;", #class = "radLabel radLabelOther", #disabled = "disabled"})
</td>
</tr>
<tr>
<td style="text-align:center" colspan="2" >
<div id="divAvery_#Model[i].UserId" style="display:none;vertical-align:top;text-align:center" class="divAvery">
<table style="width:100%;text-align:center">
<tr style="height:20px;">
<td style="font-size:x-small">Rows:</td>
<td>#Html.TextBoxFor(x=>Model[i].LabelRows, new {#id = "txtRows" + #Model[i].Userd, style = "width:50px;font-size:x-small;height:20px"})<span style="font-size:x-small"><i>(MAX 16)</i></span></td>
<td style="font-size:x-small">Columns:</td>
<td>#Html.TextBoxFor(x=>Model[i].LabelColumns, new {#id = "txtColumns" + #Model[i].UserId, style = "width:50px;font-size:x-small;height:20px"})<span style="font-size:x-small"><i>(MAX 3)</i></span></td>
</tr>
</table>
</div>
</td>
</tr>
Then in the JS for when the radio is clicked:
$('.radLabelOther').on('click', function () {
var divId = $(this).closest('tr').next().children().find('.divAvery');
$(divid).slideDown().show();
});
But this doesn't work. I am able to get the DIV element OK, but I cannot get it to show. What am I doing wrong?
I have even tried to get the ID of the DIV with this:
var divId = $(this).closest('tr').next().children().find('.divAvery').attr('id');
But that doesn't work either.
I can get it to work now by doing this:
var $divId = $(this).closest('tr').next().children().find('.divAvery');
$divId.slideDown();
Why does that $ make it work?

Send dynamic textbox element id to child window when clicking a link

I have a textbox called "Branch Code" which ties a branch to a corporate card transaction. Sometimes there is a need to split a transaction among several branches. I have a table being built dynamically in MVC containing the form that needs filled out. In the branch code table cell, I'm adding a href that will fire off the splitTransaction javascript function that opens a new window allowing a value to be built. This new value needs to be written back to the parent window into the textbox that was right next to the hyperlink that opened the child window. My problem is, how do I send the name of the textbox to the child window? I'm not sure how to get it.
Here is my view:
#model List<intranetMVC.Models.sp_CorpCardEmpGetTrans_Result>
#{
ViewBag.Title = "Index";
}
<h2>Corporate Card Transactions</h2>
#using (#Html.BeginForm("Index", "CorpCardTransactions", FormMethod.Post))
{
<table cellpadding="8">
<tr>
<th class="col-md-2">Transaction Details</th>
<th class="col-md-2">Payee</th>
<th>Amount</th>
<th class="col-md-2">Description</th>
<th class="col-md-1">GL/Account</th>
<th class="col-md-1">Branch Code</th>
<th class="col-md-1">Receipt</th>
</tr>
#for (int i = 0; i < Model.Count; i++)
{
<tr>
<td valign="top">
#Html.HiddenFor(m => m[i].ID)
#*#Html.DisplayFor(m => m[i].AccountID)
#Html.HiddenFor(m => m[i].AccountID)<br />
<em>#Html.DisplayFor(m => m[i].CardHolderName)</em>
#Html.HiddenFor(m => m[i].CardHolderName)<br />*#
Posted: #Html.DisplayFor(m => m[i].PostDate)
#Html.HiddenFor(m => m[i].PostDate)<br />
TranDate: #Html.DisplayFor(m => m[i].TranDate)
#Html.HiddenFor(m => m[i].TranDate)
</td>
<td valign="top">
#Html.DisplayFor(m => m[i].Payee)
#Html.HiddenFor(m => m[i].Payee)
</td>
<td valign="top">
#Html.DisplayFor(m => m[i].Amount)
#Html.HiddenFor(m => m[i].Amount)
</td>
<td valign="top">#Html.EditorFor(m => m[i].Description)</td>
<td valign="top">#Html.EditorFor(m => m[i].GL_Account)</td>
<td valign="top">
#Html.EditorFor(m => m[i].BranchCode)<br />
Split Transaction
</td>
<td valign="top">#Html.EditorFor(m => m[i].Receipt)</td>
</tr>
}
</table>
<br />
<input type="submit" name="saveBtn" id="saveBtn" value="Save Progress" style="font-size:1.2em;font-weight:bold;width:200px;" /> <input type="submit" name="finishBtn" id="finishBtn" value="Finish and Close Statement" style="font-size:1.2em;font-weight:bold;width:250px;" /> #Html.ActionLink("Cancel", "Index", "Statements")
<p style="margin-top:1em;"><span style="color:green; font-size:14px;">#ViewBag.Message</span> <span style ="color:#b94a48; font-size:14px;font-weight:bold;">#ViewBag.Error</span></p>
<script type="text/javascript">
var popup;
function splitTransaction() {
popup = window.open("splittrans.htm", "Popup", "width=400,height=200");
popup.focus();
}
</script>
}
Here is what the page source looks like for one of the branch code table cells:
<td valign="top">
<input class="k-textbox" data-val="true" data-val-number="The field BranchCode must be a number." id="_0__BranchCode" name="[0].BranchCode" value="11" /><br />
Split Transaction
</td>
When I click on the link to "split transaction", how do I send the value of the textbox next to it to the function that opens the child window? Or how do I reference this textbox when sending the new value back to the parent window? There could be many of them on the page. It appears as if they are being named like this: _0__BranchCode, etc.

It would be better to handle the click event rather that using the onclick attribute
Split Transaction
and the script
$('.split).click(function() {
// get the adjacent (sibling) textbox value
var value = $(this).siblings().first().val();
// do something with the value
});
or you could use $(this).prev('.k-textbox').val() or $(this).closest('td').children('input').val();