Add numbers in two columns of grid on change using inline edit

Title:

BI{code} ?

I have a grid setup with two textboxes with inline editing enabled (quantity and rate). I have another textbox for total amount that I'd like to have updated once either of the other two textboxes are changed. I wasn't sure how to have the changed values of the textboxes sent to a function which would do the multiplication and then update the third textbox. The total textbox currently uses ClientFormatFunc to use a function to multiply the values in the two other boxes, but I can't seem to get it to update when the two change after the initial load. also, is there any way to use inline editing without displaying the "X" delete button for each row but still show the Cancel button when editing inline? I'm not allowing deletions in my application and I'd prefer inline editing, but want the user to be able to cancel editing.

Save Changes Cancel

Sean Davidson

asked at 20 Nov 2019

Answers

• BI{code} ?

  here's a similar example using our demo, you can try to run in the console here: https://demo.aspnetawesome.com/GridInlineEditDemo $('#DinnersInlineCrudGrid').on('change aweinlineedit', function(e){ var row = $(e.target).closest('.awe-row'); var txt1 = row.find('[name="Date"]'); var txt2 = row.find('[name="Name"]'); txt2.val(txt1.val()); // we could also call change instead, but if we do we need to check if `e.target` is not txt2 txt2.data('api').render(); }); `aweinlineedit` event occurs when you click edit on a row here's a small demo you can download: https://files.fm/u/ez3jzqyy --- for the cancel button without delete, if you look inside `Html.InlineDeleteFormatForGrid` (which is inside your project), you'll see that the string for 2 buttons are being concatenated so you can remove the first one and call `.ToString()` on the remaining `Button` helper, or better copy the method and create a new one, like this: public static string InlineCancelBtn<T>(this HtmlHelper<T> html, string text = "Cancel") { return html.Awe() .Button() .Text(text) .CssClass("o-glcanb awe-nonselect o-gl o-glbtn").ToString(); } public static string InlineDeleteFormatForGrid<T>(this HtmlHelper<T> html, string gridId, string key = "Id", bool nofocus = false, string text = "Cancel") { var popupName = html.GetPopupName("delete", gridId); return DeleteFormat(popupName, key, btnClass: "o-glh", nofocus: nofocus) + InlineCancelBtn(html, text); }

  Save Changes Cancel

  

  Omu

  answered at 20 Nov 2019

  • Using data('api').render() works perfectly! One last question - is there any way to use inline editing without displaying the "X" delete button for each row but still show the Cancel button when editing inline? I'm not allowing deletions in my application and I'd prefer inline editing, but want the user to be able to cancel editing.
    at 25 Nov 2019 Sean Davidson
  • Yes, you can, I've added the solution to my answer
    at 25 Nov 2019 Omu

please Sign In to leave an answer