Want to have checkbox alongside each row of a datagrid/template grid and be able to select multiple rows at a time to delete

0
Hello, The title is pretty self explanatory. I need a checkbox beside each row of a datagrid or template grid. Whenever i click the delete button the ticked entries should all be deleted. I am aware of the multiselect/simple-multiselect option in datagrid, but i specifically need a checkbox or some kind of indicator to show which entries are selected rather than just color change of the selected rows. Thanks in advance, Anirudh
asked
1 answers
2

Hi Anirudh

Please have a look at this CSS (it works on 7, not tested on 8)

https://github.com/Andries-Smit/DataGridExtention/blob/master/test/Mx7/theme/css/checkBoxSelection.css

It add a checkbox instead of selections color Just with pure CSS. Just add the class checkboxSelection to you data grid and add the css to your theme

Edit: For mx 8 there are some others classes;

.checkboxSelection tbody tr.selected .selectColumn div:before {
    content: "\e067";
    font-family: "Glyphicons Halflings";
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 15px;
    -moz-osx-font-smoothing: grayscale;
    width: 1em;
}

.checkboxSelection tbody tr:not(.selected) .selectColumn div::before {
    content: "\e157";
    font-family: "Glyphicons Halflings";
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 15px;
    width: 1em;
}

.mx-datagrid.checkboxSelection tbody tr:nth-child(odd) > td,
.mx-datagrid.checkboxSelection tbody tr.selected:nth-child(odd) > td {
    background-color: #f9f9f9;
    color: inherit;
}

.mx-datagrid.checkboxSelection tbody tr:nth-child(even) > td,
.mx-datagrid.checkboxSelection tbody tr.selected:nth-child(even) > td {
    background-color: #ffffff;
    color: inherit;
}

.checkboxSelection th:first-child div {
    padding-left: 20px;
}

 

For the list view or template gird you might need do some rework to make it work

Cheers,

Andries

answered