Web Apps – Add Select All button to grid

I added a new project to web apps for our team to enter company vehicle mileage. We need the odometer readings as backup for certain projects, so just entering total mileage into PCE wouldn’t work for us. The employees enter their trips into a ‘Mileage Entry’ screen and then the accounting team has a ‘Mileage Batch’ screen for processing.

The Mileage Batch screen shows all completed logs and then they are selected into a batch for processing into Project Charge Entry. It was requested that the users be able to ‘select all’ rows at once, so I’ll show you how to add this to a grid in Web Apps.

The first thing you need to do is add a checkbox to the vbhtml page that serves as our select all button. I put mine directly above the grid and enclosed it in a div to handle some styling.

<div class="MySelectAllBox">
    @Html.DSLCheck("Select All", "SelectAll", "No", "Yes", "No", BehaviorState.Enabled)
</div>

In the DSLCheck() function we are assigning some values to parameters. 

  1. Label to display (Select All)
  2. ID of the element (SelectAll) – **used later in DSLValidation
  3. Value (No – I am defaulting to unchecked) 
  4. The Checked Value (Yes)
  5. The Unchecked Value (No)
  6. Optional BehaviorState which I defined as ‘Enabled’

When this button is clicked, the DSLValidation() function will be run, so we’ll add code there to call the function we actually want to run.  What we are essentially saying is ‘if the id we are validating is equal to ‘SelectAll’, then get the value of the checkbox and run our SelectAll() function passing that value as a parameter.’ 

function DSLValidation(id) {
    if (id == "MileageBatchID" || id == "MileagePerPost") {
        value = GetFieldValue(id);
        $.ajax({
            type: 'POST',
            url: '@Url.Action("MileageBatchHeaderValidate")',
            data: {
                __RequestVerificationToken: $('[name="__RequestVerificationToken"]').val(),
                CalledBy: id,
                Value: value
            },
            success: function (data, textStatus, xhr) {
                ValidateSuccessHeader(data, textStatus, xhr);
            },
            error: function (data, textStatus, xhr) {
                ValidateError(data, textStatus, xhr);
            }
        });

    }

    if (id == "SelectAll") {
        value = GetFieldValue("SelectAll");
        SelectAll(value)
    }
}

The SelectAll() function looks like this.  We will use the Web Apps GetGrid(), GetRowCount(), and GetRow() functions to loop through the grid rows and change the value of each ‘Selected’ cell to the value we passed.  

function SelectAll(value) {

    var grid = GetGrid('MileageBatch_Grid');
    for (i = 0; i < grid.GetRowCount(); i++)
    { 
        var currentRow = grid.GetRow(i);
        currentRow.Cells['Selected'].Value(value)
    }
}

Our Select All button in action:

Feel free to share...

Leave a Reply

Close Menu