This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](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)
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.
![](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)
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:
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?
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.
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 editable you can check my img example above mentioned only future price , price , iv fields editable and delta, gamma, theta, vega should be disable mode always
I clearly mention above that is if I enter any value on the editable fields that related fields
delta, gamma, theta, vega values should change and persist to the table even if I expand and collapse that DataTable dropdown icon
My scenario values are not persist to the table properly I mentioned above example clearly .
Hope you understood my issue clearly.
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 Price and IV values are successfully changed, but the Theta and Vega values are not changed. I compared your code, you used SB_Legs_Added_table_val_change() when adding Price and IV values, but not when adding Theta and Vega values, maybe this is the reason.
I think you can compare the difference of the code when adding IV value and Theta and Vega values, and then check the problem.
![](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)
your approach seems wrong. you should be using javascript sourced data:
https://datatables.net/examples/data_sources/js_array.html
and column render functions: