1,066 questions
your approach seems wrong. you should be using javascript sourced data:
https://datatables.net/examples/data_sources/js_array.html
and column render functions:
DataTable values are getting the default values(Initially loaded values) when we click on the dropdown icon of DataTable in asp.net C# using jQuery
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(102.4, 40%, 19%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EAK%3C/text%3E%3C/svg%3E)
Ashok Kumar
221
Reputation points
I'm very new to this DataTable logic implementation concept and I have append the data to the DataTable and append successfully and in that DataTable controls I have written some event logic (ex:- dropdown onchange and textbox oninput events) and those events are firing successfully and values are changing on other controls as well
HTML Logic:-
<asp:Button ID="sb_add" runat="server" OnClientClick="SB_Add_Legs(event); return false;" Text="+ ADD"CssClass="btn btn-primary w-100 w-md-auto text-center px-4 spinbutton" />
<table class="table table-borderless rowSpace table-round-row dtr-inline SB_table dataTable "
id="strastrategy_builder_datatable" style="width: 100%;">
<thead>
<tr>
<th>Action</th>
<th>Instrument</th>
<th>Expiry</th>
<th>Strike</th>
<th>Qty</th>
<th>Future Price</th>
<th>Price</th>
<th>Delta</th>
<th>Gamma</th>
<th>Theta</th>
<th>Vega</th>
<th>IV</th>
<th data-dt-order="disable"></th>
</tr>
</thead>
<tbody>
</tbody></table>
jQuery Add button entire logic:-
function SB_Add_Legs(e) {
e.preventDefault();
var d_stg = '';
var s_leg_data = "";
var b_selected = '';
var s_selected = '';
var ddl_expdate = "";
var ddl_strike = "";
var ddl_inst = "";
var lnt = $("#strastrategy_builder_datatable .aliceBlueRow").length;
if (lnt > 0 && $("#hdn_sb_refresh_sh").val() === '1')
$("#blurid").addClass("blur5"), $("#sb_refresh").show();
if (lnt < 10) {
var s = 'nifty;
var s_bs = 'buy';
var s_inst = 'ce';
var s_stk = '12345';
var s_ex = '30-07-1995';
var s_q = '25;
var drpInstrumentValue = 'ce';
var d_exp = '02-07-1990';
var d_stk = s_stk;
var ddl_bs = `<option value="Buy" ${s_bs.toLowerCase() === 'buy' ? "selected" : ""}>BUY</option>
<option value="Sell" ${s_bs.toLowerCase() === 'sell' ? "selected" : ""}>SELL</option>`;
ddl_inst = `<option value="CE" ${drpInstrumentValue === "CE" ? "selected" : ""}>CE</option>
<option value="PE" ${drpInstrumentValue === "PE" ? "selected" : ""}>PE</option>
<option value="FUT" ${drpInstrumentValue === "FUT" ? "selected" : ""}>FUT</option>`;
ddl_expdate = `<option value="2024-07-25">2024-07-25</options>
<option value="2024-07-26">2024-07-26</options>
<option value="2024-07-27">2024-07-27</options>`;
ddl_strike = `<option value="24550">24550</options>
<option value="24560">24560</options>
<option value="24570">24570</options>`;
var FuturePrice = '24534';
var Price = '224.50';
var Delta = '0.4938';
var Gamma = '0.0007';
var Theta = '-19.3594';
var Vega = '12.5474';
var IV = '18.51';
SB_Generate_Legs_Added_HTML(ddl_bs, ddl_inst, ddl_expdate,
ddl_strike, s_q, FuturePrice, Price, Delta, Gamma,
Theta, Vega, IV);
}
else {
$("#perrormsg").html('');
$("#perrormsg").html('You can add only a maximum of 10 rows');
$("#modelpopupmsg").modal("show");
}
return false;
}
function SB_Generate_Legs_Added_HTML(ddl_bs, inst, ddl_expdate, ddl_strike, Qty, FuturePrice, Price, Delta, Gamma, Theta, Vega, IV) {
var d_qty = $("#hdn_sb_lotsize").val();
var s_inst = $("#sb_instrument").val();
$("#strastrategy_builder_datatable").DataTable().destroy();
var table = $('#strastrategy_builder_datatable').DataTable({});
var action = ` <div class="d-inline-block ">
<select class="form-select border-0 analyserfields whiteBG" style="min-width: 80px;" name="sbaction" onchange="SB_Legs_Added_table_val_change('ddl',this);">
${ddl_bs}
</select>
</div>`;
var ddl_i = ` <select class="form-select border-0 analyserfields whiteBG" style="min-width: 80px;" name="sbinst" onchange="SB_Legs_Added_table_val_change('ddl',this);">
${inst}
</select>`;
var ddl_e = ` <select class="form-select border-0 analyserfields whiteBG ${s_inst === 'EQ' ? 'textDisable' : ''}" style="min-width: 130px;" ${s_inst === 'EQ' ? 'disabled' : ''} name="sbexp" onchange="SB_Legs_Added_table_val_change('ddl',this);">
${ddl_expdate}
</select>`;
var ddl_s = ` <select class="form-select border-0 analyserfields whiteBG ${s_inst === 'FUT' || s_inst === 'EQ' ? 'textDisable' : ''}" style="min-width: 100px;" ${s_inst === 'FUT' || s_inst === 'EQ' ? 'disabled' : ''} name="sbstrike" onchange="SB_Legs_Added_table_val_change('ddl',this);">
${ddl_strike}
</select>`;
var q = ` <div class="input-group flex-nowrap v-line pe-2">
<span class="input-group-text border-0 px-1"><i class="bi bi-dash textDanger pointer" onclick="SB_Legs_Added_table_minqty(${d_qty},this);"></i></span>
<input type="text" class="form-control text-center border-0 analyserfields whiteBG" name="sbqty" value=${Qty} autocomplete="off"
style="min-width: 70px;" maxlength='6' onblur="SB_Add_Leg_QtyValue(this);" oninput="SB_calculateqtylivenetprem('qty',this);"/>
<span class="input-group-text border-0 px-1"><i class="bi bi-plus textSuccess pointer" onclick="SB_Legs_Added_table_maxqty(${d_qty},this);"></i></span>
</div>`;
var f = ` <input type="text" class="form-control border-0 analyserfields whiteBG" name="sbfprice" maxlength="9" style="min-width: 90px;" value=${FuturePrice}
autocomplete="off" oninput="SB_Legs_Added_table_val_change('futprice',this);"/>`;
var p = `<input type="text" class="form-control border-0 analyserfields whiteBG" name="sbprice" style="min-width: 90px;" maxlength="9" value=${Price}
autocomplete="off" oninput="SB_Legs_Added_table_val_change('price',this);"/>`;
var d = ` <input type="text" class="form-control border-0 dull-pastel-greenBG analyserfields whiteBG" style="min-width: 90px;" maxlength="7" name="sbdelta"
value=${Delta} oninput="this.value = this.value.replace(/[^0-9]/g, '')" disabled/>`;
var g = ` <input type="text" class="form-control border-0 dull-pastel-greenBG analyserfields whiteBG" style="min-width: 90px;" maxlength="7" name="sbgamma"
value=${Gamma} oninput="this.value = this.value.replace(/[^0-9]/g, '')" disabled/>`;
var t = ` <input type="text" class="form-control border-0 dull-pastel-greenBG analyserfields whiteBG" style="min-width: 100px;" maxlength="7" name="sbtheta"
value=${Theta} oninput="this.value = this.value.replace(/[^0-9]/g, '')" disabled/>`;
var v = ` <input type="text" class="form-control border-0 dull-pastel-greenBG analyserfields whiteBG" style="min-width: 100px;" maxlength="7" name="sbvega"
value=${Vega} oninput="this.value = this.value.replace(/[^0-9]/g, '')" disabled/>`;
var iv = ` <input type="text" class="form-control border-0 analyserfields whiteBG" name="sbiv" style="min-width: 100px;" maxlength="6" autocomplete="off"
value=${IV} oninput="SB_Legs_Added_table_val_change('iv',this);" />`;
var dlt = `<a href="javascript://" class="px-2 py-1 fs-6 analyserfields " name="sbdelete" onclick="SB_DeleteLegs(event,this)">
<i class="bx bxs-trash-alt text-danger"></i>
</a>`;
table.row
.add([
action,
ddl_i,
ddl_e,
ddl_s,
q,
f,
p,
d,
g,
t,
v,
iv,
dlt,
])
.draw(false);
$("#strastrategy_builder_datatable").DataTable().destroy();
$("#strastrategy_builder_datatable").DataTable({
ordering: false,
info: false,
paging: false,
searching: false,
responsive: true,
language: {
emptyTable: " ",
},
columnDefs: [
{
responsivePriority: 1, //column view
targets: 0 //column name
},
{
responsivePriority: 2,
targets: 1
},
{
responsivePriority: 4,
targets: 2
},
{
responsivePriority: 5,
targets: 3
},
{
responsivePriority: 7,
targets: 4
},
{
responsivePriority: 6,
targets: 11
},
{
className: 'dt-center', // delete icon response column position 3
width: '50px',
responsivePriority: 3,
targets: -1
},
],
createdRow: function (row, data, dataIndex) {
$(row).addClass('aliceBlueRow');
}
});
}
Here is my Img examples are :-
Initially if I click on the Add button row is appending to the DataTable
And I clicked on the DataTable dropdown icon
The Theta and Vega values are showing like -19.3594 and 12.5474
And I enter some value on the IV column 845 and dependent columns values will change ex:- Theta and Vega columns values are changed
And if I click on the same dropdown of DataTable icon the previous values are coming instead on new values on the Theta and Vega
In this img the IV values845 didn't change but the Theta and Vega values are changed
EDITED
function SB_Legs_Added_table_val_change(type, tt) {
console.log("type :- " + type);
var s, e, st, i, bs, t, fp, p = "";
var sb_l = '';
t = $(tt).closest(".aliceBlueRow");
s = $("#sb_smbl_srch").val();
if (type === 'iv' || type === 'futprice' || type === 'price') {
var value = tt.value;
console.log("value :- " + value);
//alert(value);
value = value.replace(/[^0-9.]/g, '');
//alert(value);
var parts = value.split('.');
//alert(parts);
if (parts.length > 1) {
value = parts[0] + '.' + parts[1].slice(0, 2);
}
tt.value = value;
//alert($.isNumeric(value));
if (!$.isNumeric(value))
return false;
//return;
console.log("nmbr ?");
console.log("value :-" + value);
//parent row logic
let parentRow = $(tt).closest('tr.dt-hasChild');
let childRow = parentRow.nextAll('tr.child').first();
console.log(childRow.length + " parent : value enter row " + parentRow.length);
//child row logic
let childRow_1 = $(tt).closest('tr.child');
let parentRow_1 = childRow_1.prevAll('tr.dt-hasChild').first();
console.log(childRow_1.length + "child : value enter row " + parentRow_1.length);
//let sbinstValue = '';
//let sbfpriceValue = '';
//let sbvegaValue = '';
if (parentRow.length && childRow.length && (type === 'iv' || type === 'futprice' || type === 'price')) {
console.log("Parent row found.");
if (childRow.find('.analyserfields[name="sbexp"]').length > 0)
e = childRow.find('.analyserfields[name="sbexp"]').val();
else
e = parentRow.find('.analyserfields[name="sbexp"]').val();
if (childRow.find('.analyserfields[name="sbstrike"]').length > 0)
st = childRow.find('.analyserfields[name="sbstrike"]').val();
else
st = parentRow.find('.analyserfields[name="sbstrike"]').val();
if (childRow.find('.analyserfields[name="sbinst"]').length > 0)
i = childRow.find('.analyserfields[name="sbinst"]').val();
else
i = parentRow.find('.analyserfields[name="sbinst"]').val();
if (childRow.find('.analyserfields[name="sbaction"]').length > 0)
bs = childRow.find('.analyserfields[name="sbaction"]').val();
else
bs = parentRow.find('.analyserfields[name="sbaction"]').val();
if (type === 'iv') {
if (childRow.find('.analyserfields[name="sbfprice"]').length > 0)
fp = childRow.find('.analyserfields[name="sbfprice"]').val();
else
fp = parentRow.find('.analyserfields[name="sbfprice"]').val();
//fp = $(t).find(".analyserfields[name=sbfprice]").val();
console.log("iv data :-" + s + " : " + e + " : " + st + " : " + i + " : " + bs + " : " + value + " : " + fp);
sb_l = LTPFromIV_AJAXCall(s, e, st, i, bs, value, fp);
}
else if (type === 'futprice') {
if (childRow.find('.analyserfields[name="sbprice"]').length > 0)
p = childRow.find('.analyserfields[name="sbprice"]').val();
else
p = parentRow.find('.analyserfields[name="sbprice"]').val();
//p = $(t).find(".analyserfields[name=sbprice]").val(); //fp = $(t).find(".analyserfields[name=sbfprice]").val();
console.log("fprice data :-" + s + " : " + e + " : " + st + " : " + i + " : " + bs + " : " + p + " : " + value);
sb_l = LTPFromPrice_FuturePrice_AJAXCall(s, e, st, i, bs, p, value);
}
else if (type === 'price') {
if (childRow.find('.analyserfields[name="sbfprice"]').length > 0)
fp = childRow.find('.analyserfields[name="sbfprice"]').val();
else
fp = parentRow.find('.analyserfields[name="sbfprice"]').val();
//fp = $(t).find(".analyserfields[name=sbfprice]").val();
console.log("price data :-" + s + " : " + e + " : " + st + " : " + i + " : " + bs + " : " + value + " : " + fp);
sb_l = LTPFromPrice_FuturePrice_AJAXCall(s, e, st, i, bs, value, fp);
}
console.log("type type paresnt :-" + type);
console.log("sb_l :- " + sb_l);
console.log(sb_l);
if (sb_l && sb_l.length > 0) {
if (type != 'futprice') {
//t.find(".analyserfields[name=sbfprice]").val(sb_l[0].FuturePrice);
if (childRow.find('.analyserfields[name="sbfprice"]').length > 0)
childRow.find('.analyserfields[name="sbfprice"]').val(sb_l[0].FuturePrice);
else
parentRow.find('.analyserfields[name="sbfprice"]').val(sb_l[0].FuturePrice);
}
if (type != 'price') {
//t.find(".analyserfields[name=sbprice]").val(sb_l[0].Price);
if (childRow.find('.analyserfields[name="sbprice"]').length > 0)
childRow.find('.analyserfields[name="sbprice"]').val(sb_l[0].Price);
else
parentRow.find('.analyserfields[name="sbprice"]').val(sb_l[0].Price);
}
//t.find(".analyserfields[name=sbdelta]").val(sb_l[0].Delta);
if (childRow.find('.analyserfields[name="sbdelta"]').length > 0)
childRow.find('.analyserfields[name="sbdelta"]').val(sb_l[0].Delta);
else
parentRow.find('.analyserfields[name="sbdelta"]').val(sb_l[0].Delta);
//t.find(".analyserfields[name=sbgamma]").val(sb_l[0].Gamma);
if (childRow.find('.analyserfields[name="sbgamma"]').length > 0)
childRow.find('.analyserfields[name="sbgamma"]').val(sb_l[0].Gamma);
else
parentRow.find('.analyserfields[name="sbgamma"]').val(sb_l[0].Gamma);
//t.find(".analyserfields[name=sbtheta]").val(sb_l[0].Theta);
if (childRow.find('.analyserfields[name="sbtheta"]').length > 0)
childRow.find('.analyserfields[name="sbtheta"]').val(sb_l[0].Theta);
else
parentRow.find('.analyserfields[name="sbtheta"]').val(sb_l[0].Theta);
//t.find(".analyserfields[name=sbvega]").val(sb_l[0].Vega);
if (childRow.find('.analyserfields[name="sbvega"]').length > 0)
childRow.find('.analyserfields[name="sbvega"]').val(sb_l[0].Vega);
else
parentRow.find('.analyserfields[name="sbvega"]').val(sb_l[0].Vega);
if (type != 'iv') {
//t.find(".analyserfields[name=sbiv]").val(sb_l[0].IV);
if (childRow.find('.analyserfields[name="sbiv"]').length > 0)
childRow.find('.analyserfields[name="sbiv"]').val(sb_l[0].IV);
else
parentRow.find('.analyserfields[name="sbiv"]').val(sb_l[0].IV);
}
SB_CalculateNetPremium();
if ($("#hdn_sb_refresh_sh").val() === '1')
$("#blurid").addClass("blur5"), $("#sb_refresh").show();
}
}
}
}
Suggest me how to achieve this and why those values are changing and values should not change until any event should fire.
I'm not sure I explained correctly hope you understood my problem.
Can you please suggest me DataTable is recommended or not in this scenario (logic implementation).
Sorry for my bad English.
Microsoft 365 and Office Development Office JavaScript API
Developer technologies ASP.NET Other
3,598 questions
{count} votes
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(262.40000000000003, 36%, 35%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ELH%3C/text%3E%3C/svg%3E)
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff2024-07-22T08:58:25.7566667+00:00 Hi @Ashok Kumar,
This is an ASP.NET forum. You need jQuery DataTable support.
https://datatables.net/forums/discussions
I tested your code and did not get your image content. The page I tested is:
-
Ashok Kumar 221 Reputation points
2024-07-22T10:01:34.0533333+00:00 Hi @Lan Huang-MSFT Thanks for your comment
I tested your code and did not get your image content.Based on the screen size (or port) the DataTable is auto adjusting the columns like below img
(you can decrees the screen zoom size and check DataTable)Can you suggest me how to fix my issue.
Should I contact to
jQuery DataTable support? -
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff
2024-07-23T06:09:51.5666667+00:00 Hi @Ashok Kumar,
According to your description, Theta and Vega fields are editable, but the code you provided shows that Theta and Vega fields are disabled.
Do you have other codes for Theta and Vega fields?
Should I contact to
jQuery DataTable support?You can ask jQuery DataTable support as they are more professional, but we will do our best to help you.
-
Ashok Kumar 221 Reputation points
2024-07-23T07:49:50.26+00:00 According to your description, Theta and Vega fields are editable, but the code you provided shows that Theta and Vega fields are disabled.No
not editableyou can check my img example above mentioned onlyfuture price , price , ivfields editable anddelta, gamma, theta, vegashould be disable mode alwaysI clearly mention above that is if I enter any value on the editable fields that related fields
delta, gamma, theta, vegavalues should change and persist to the table even if I expand and collapse that DataTable dropdown iconMy scenario values are not persist to the table properly I mentioned above example clearly .
Hope you understood my issue clearly.
-
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff
2024-07-23T08:40:33.61+00:00 Hi @Ashok Kumar,
OK, I understand the logic of your work. But I can't reproduce the problem with the code you provided so far, maybe you can provide a minimal reproducible example.
But I guessed the cause of the problem, I think you can check it yourself.
From your figure, you can see that the
PriceandIVvalues are successfully changed, but theThetaandVegavalues are not changed. I compared your code, you usedSB_Legs_Added_table_val_change()when addingPriceandIVvalues, but not when addingThetaandVegavalues, maybe this is the reason.I think you can compare the difference of the code when adding
IVvalue andThetaandVegavalues, and then check the problem.
Sign in to comment
1 answer
Sort by: Most helpful
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(211.20000000000002, 61%, 30%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EBS%3C/text%3E%3C/svg%3E)
Bruce (SqlWork.com) 77,686 Reputation points Volunteer Moderator2024-07-22T18:14:32.9233333+00:00