@bobnoordam

Scaffolding for an ASPxGridView with Select button using custom callbacks

Posted on | By bobnoordam

Emulates the behaviour of the standard webforms grid, with a view where each line has a button that can be used to ‘select’ that line. This should make transition from the built in gridview to de ASPxGridView very easy.

  • The click is processed server side
  • It is not possible to select more then one line
  • The selected line will be highlighted

Note that the “KeyFieldName” propert ius used to provide the line id in the actual callback, set this to field you want to base your selection on. 

<dx:ASPxGridView ID="ASPxGridViewResultaten" runat="server" KeyFieldName="Id" Width="100%" OnCustomButtonCallback="ASPxGridViewResultaten_CustomButtonCallback" EnableCallBacks="False" AutoGenerateColumns="False">
    <SettingsPager Visible="False" Mode="ShowAllRecords"></SettingsPager>
    <Settings ShowGroupPanel="True"/>
    <SettingsText GroupPanel="Sleep een kolom hier om te groeperen, klik op een kolom om te sorteren."></SettingsText>
    <SettingsSearchPanel Visible="True"></SettingsSearchPanel>
    <SettingsText SearchPanelEditorNullText="Zoeken"></SettingsText>
    <SettingsDataSecurity AllowDelete="False" AllowEdit="False" AllowInsert="False"/>
    <Columns>
        <dx:GridViewCommandColumn ButtonRenderMode="Button">
            <CustomButtons>
                <dx:GridViewCommandColumnCustomButton Id="ButtonSelect" Text="Kies"/>
            </CustomButtons>
        </dx:GridViewCommandColumn>
        <dx:GridViewDataTextColumn Caption="" FieldName=""></dx:GridViewDataTextColumn>
    </Columns>
</dx:ASPxGridView>

Take special note of this line: 

<dx:GridViewDataTextColumn Caption="" FieldName=""></dx:GridViewDataTextColumn>

This is a placeholder line wich you need to replace with the actual data lines that you want to be displayed, so for example to display a name field from your data source this will become something like this: 

<dx:GridViewDataTextColumn Caption="First Name" FieldName="firstName"></dx:GridViewDataTextColumn>

These lines can vary depending on what data you will display, and what formatting you want to use. The GridViewDataTextColumn is a basic text field, which is the default choise for many data types.

Code behind

Add the following code behgind to process the row click on the server side. 

protected void ASPxGridViewResultaten_CustomButtonCallback(object sender, ASPxGridViewCustomButtonCallbackEventArgs e) {
    //
    // Geselecteerde sleutel
    int key = (int) ASPxGridViewResultaten.GetRowValues(e.VisibleIndex, "Id");
    DoSomeThing(key);
    //
    // Markeer als geselecteerd op grid
    ASPxGridViewResultaten.Selection.UnselectAll();
    ASPxGridViewResultaten.Selection.SelectRowByKey(key);
}

Adding a delete confirmation

If you want to use the selection button to delete a record, you will likely want a delete confirmation added, which you can implement like this: 

<!-- delete confirmation handler -->
<script type="text/javascript">
    function ASPxGridViewResultaten_OnCustomButtonClick(s, e) {
        console.log('grid button pressed: ' + e.buttonID);
        if (e.buttonID === 'ButtonDelete') {
            if (confirm('delete?')) {
                e.processOnServer = true;
            } else {
                e.processOnServer = false;
            }
            return;
        }
        e.processOnServer = true;
    }
</script>

To call that little script from your gridview and actualy activate it, add this to the grid markup: 

<ClientSideEvents CustomButtonClick="ASPxGridViewResultaten_OnCustomButtonClick" />
Category: ASP.NET Webforms