Select All checkbox within each cell for an inline editing grid

riya dasgupta

asked at 06 Aug 2024

That would involve doing it manually with js, right now there's no built-in functionality for that, what you have in the comment seems good for displaying the select all checkbox but you also need js to handle the click. There's something similar here: https://demo.aspnetawesome.com/CheckboxList#Toggle-select-all except it is using a button instead of a checkbox

at 07 Aug 2024 Omu
Thanks for sharing

at 07 Aug 2024 riya dasgupta

Answers

Here's a hacky way this could be done, using a toggle select all button. Hopefully in the next version we'll add a select all/none feature for the checkboxlist. Having a column like this: new Column { Bind = "Category.Name", Header = "Category" } .Inl( Html.Awe().CheckBoxList(new() { Name = "CategoryId", Url = Url.Action("GetCategories", "Data"), CssClass = "withSelectAll" })), add this js: <script> $(function () { $(document).on('aweload', '.withSelectAll', function () { var field = $(this); var o = field.find('.awe-val').data('o'); function addBtn() { field.find('.awe-display ul').prepend('<li><button type="button" class="selectAllChk awe-btn">toggle select all</button></li>'); } var render = o.api.render; o.api.render = function () { render(); addBtn(); } addBtn(); }) .on('click', '.selectAllChk', function (e) { var btn = $(this); var o = btn.closest('.awe-field').find('.awe-val').data('o'); var data = o.lrs; var values = JSON.parse(o.v.val() || '[]'); console.log(values, data); if (values.length == data.length) { o.v.val('').change(); } else { var allKeys = data.map(obj => obj.k); o.v.val(JSON.stringify(allKeys)).change(); } }); }); </script> You can try this code in our main demo, in GridInlineEditParent\Index.cshtml for example
Omu

answered at 08 Aug 2024