Show or Hide Otoggle button based on Textbox or Dropdown value in Grid inline edit row

Title:

BI{code} ?

So in an inline editing grid row, I want to sometimes hide or show an otoggle based on the value of other editors in the same row. When the user has changed the value of a textbox for example the otoggle will show or hide.

Save Changes Cancel

George Baini

asked at 08 Nov 2019

Answers

• BI{code} ?

  Here's a solution based on our demo https://demo.aspnetawesome.com/GridInlineEditDemo the Organic toggle button will be enabled/visible only when Name textbox value is `"abc"` *or when BonusMeal dropdown has the first meal selected,* it enables/disables the toggle button, you can remove the `api.enable` calls and uncomment the `field.show()/hide()` to make it show/hide instead. $(function () { $('#@gridId') .on('aweinlineedit', function (e) { setState($(e.target)); }) .on('change', function (e) { var trg = $(e.target); var name = trg.attr('name'); if (name == 'Name' || name == 'BonusMealId') { setState(trg.closest('.awe-row')); } }); function setState(row) { var txt = row.find('[name=Name]'); var dd = row.find('[name=BonusMealId]'); var tgbtn = row.find('[name=Organic]'); var st = txt.val() == 'abc' || dd.val() == '@Db.Meals[0].Id'; var api = tgbtn.data('api'); var field = tgbtn.closest('.awe-field'); if (st) { api.enable(true); //field.show(); } else { tgbtn.val(false).change(); api.enable(false); //field.hide(); } } }); you can download this demo here: https://files.fm/u/t776xgxs

  Save Changes Cancel

  

  Omu

  answered at 08 Nov 2019

  • here's a video demo: https://youtu.be/V9Qr68pDzfo
    at 08 Nov 2019 Omu
  • I downloaded a fresh copy and it worked. I realised I was testing against a dropdown. Is there support for a dropdown??
    at 08 Nov 2019 George Baini
  • it's the same thing, it also triggers change, the value won't be `abc` but the selected key
    at 08 Nov 2019 Omu
  • I found that the selectlist was still awaiting response from the API to populate until the setState script finished. I was still unable to get the checkbox to disappear using the script. I managed to get it to work by doing the following, GridUtils.InlineEditFormat().Replace("class", "RID='" + GridId + ".(RecordGUID)' CTV='.(CommunicationType)' class")
    at 08 Nov 2019 George Baini
  • added click .on('aweinlineedit click', function(e) { and if (row[0].innerHTML == "Edit") { var CommunicationType = row[0].getAttribute('CTV'); var id = row[0].getAttribute('RID'); if (CommunicationType != "Email") { var SCTE = document.getElementById(id + "SendCorrespondenceToEmail").parentNode; SCTE.style = "display: none;"; } } else { //YOUR CODE
    at 08 Nov 2019 George Baini
  • that doesn't look right, was the problem that you want the same for the dropdown ?
    at 09 Nov 2019 Omu
  • I've updated my answer to include a dropdown, and added a link where you can download it
    at 09 Nov 2019 Omu

please Sign In to leave an answer