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

Question

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

Ashok Kumar 221

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.

Lan Huang-MSFT 30,206 Reputation points Microsoft External Staff

2024-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,206 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

Hi @Lan Huang-MSFT

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.
Lan Huang-MSFT 30,206 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 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.

1 answer

Your answer

Lan Huang-MSFT 30,206 Reputation points Microsoft External Staff

2024-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,206 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

Hi @Lan Huang-MSFT

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.
Lan Huang-MSFT 30,206 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 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.

Answer 1

Bruce (SqlWork.com) 81,976 Volunteer Moderator

your approach seems wrong. you should be using javascript sourced data:

https://datatables.net/examples/data_sources/js_array.html

and column render functions:

https://datatables.net/reference/option/columns.render

Share via

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

1 answer

Your answer