Select All checkbox within each cell for an inline editing grid

riya dasgupta

asked one month ago

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

one month ago Omu
Thanks for sharing

one month ago 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 one month ago