How to only allow select in a grid for certain items, also working with the select all and deselect all for certain items.

  1. #1

    How to only allow select in a grid for certain items, also working with the select all and deselect all for certain items.

    Hi All,

    I am stuck on trying to only allow selection of certain items in a grid with a status of "Approved". I have some of it working by using this:

    						<ext:CheckboxSelectionModel runat="server" Mode="Multi">
    							<Listeners>
    								<BeforeSelect Fn="function(grid, record, index, eOpts) {
    							           if (record.get('Status') == 'Approved') {
    							                return false;
    							            }
    							        }"></BeforeSelect>
    							</Listeners>
    This works by only allowing me to select items with Approved status. However, the Header checkbox doesn't work properly and only selects all items, but doesn't deselect items, and the Header checkbox is also not showing as selected, it is always unselected. Is there a way I can get the boolean variable of true, if the header checkbox is selected and manually select it if it is checked, then when I uncheck it, deselect all the select items when the header checkbox is false?
  2. #2
    Hello @juan!

    I'm afraid a custom behavior would have to take place there. I believe you'd better take out the header select component (or make one your own) that would support this.

    Maybe a simple approach, with a topbar button with a toggle to 'select' and 'deselect' all (a toggle button maybe?).

    The problem with the header checkbox is that it will only visually and functionally "fill" when all records are selected, what effectively would not happen in your case.

    So I believe you'd better off with a toggle button (or even a header custom button or checkbox) that will show as pressed no matter how many rows been selected, and will be unchecked by a deselect event that successfully deselects any row in the view.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you for you reply @fabricio.murta !

    So, to create a custom checkbox to handle my custom select and deselect certain items. How do I add it in the columnModel to show up as a header?

    I added the ShowHeaderCheckbox="False" to hide the current headercheckBox. However, I thought it was be as simple as adding the the checkBoxControl inside the ColumnModel.Any advice or suggestions on how to go on about creating a custom checkbox or button?

    					<ColumnModel runat="server">
    						<Columns>
    							<alc:CheckBoxControl runat="server"/> 
    							<alc:IntegerColumn Header="Level" DataIndex="Level" Width="60" />
    							<ext:Column Header="Approver Status" DataIndex="ApproverStatus" Flex="1" />
    							<ext:Column Header="Approval Rules" DataIndex="ApprovalRules" Flex="2" />
    							<ext:Column Header="Reason Code" DataIndex="ReasonCode" Width="100" />
    						</Columns>
    					</ColumnModel>
    					<SelectionModel  >
    						<ext:CheckboxSelectionModel runat="server" Mode="Multi" ShowHeaderCheckbox="False" >
    							<Listeners>
    								<BeforeSelect Fn="function(grid, record, index, eOpts) {
    							           if (record.get('Status') == 'Approved') {
    							                return false;
    							            }
    							        }"></BeforeSelect>
    							</Listeners>
    						</ext:CheckboxSelectionModel>
    					</SelectionModel>
  4. #4
    Quote Originally Posted by juan
    How do I add it in the columnModel to show up as a header?
    The example showing this is in my previous post, the link in last paragraph.

    We may have some suggestions in your example, but if you just provide a code snippet there's no telling it would work or not. If you're up to the challenge, draw a simplified test case implementing the scenario (as far as you can figure out) and share here just like you share with your code snippet (and possibly single page as you see in the examples we link here).

    I believe we can go much further from that, giving you pinpoint instructions that I believe would help more.

    If in doubt, check our forum guides on simplified samples and guidelines:
    - Tips for creating simplified code samples
    - More Information Required
    - Forum Guidelines

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Before doing that, where is the logic or behavior that prevents the headerCheckBox from being selected if, not all records are selected? Is there not a way to override the onHeaderClick method to implement the logic I want or maybe do something else like beforeSelect listener; where I can only allow selection of certain records and disable records that shouldn't be selected?

Similar Threads

  1. Replies: 0
    Last Post: Oct 06, 2015, 3:56 PM
  2. Replies: 2
    Last Post: Sep 12, 2015, 11:04 AM
  3. Replies: 3
    Last Post: Sep 27, 2012, 5:59 AM
  4. Replies: 2
    Last Post: Jul 29, 2010, 6:28 PM
  5. Replies: 0
    Last Post: Feb 01, 2010, 12:42 PM

Tags for this Thread

Posting Permissions