Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
40
WebDataGrid - Adding new row and column
posted

Hi all!

I'm a beginner of infragistic. I have encountered several problems and here are my questions:

The image below is the result of the web data grid.

1. What should I consider if I want to add a column and a row?

I'm not sure if my question is suitable to post here. If not, sorry for inconvenience!

Thank you for your help.

  • 6365
    Verified Answer
    Offline posted

    Hello Steve,

    Thank you for the screenshot you have provided.

    1. In order to add a new row to the WebDataGrid, I can suggest you use either the built-in add new row interface or by doing it client-side through JavaScript.

    a) Add new row with built-in interface will require the following behaviors for the WebDataGrid:

    <Behaviors>
        <ig:EditingCore BatchUpdating="true" AutoCRUD="false">
            <Behaviors>
                <ig:RowAdding Alignment="Bottom"></ig:RowAdding>                            
            </Behaviors>
        </ig:EditingCore>
        <ig:Activation></ig:Activation> // This will commit the new row when it gets unfocused.
    </Behaviors>

    b) Add new row client-side through JavaScript:

    <script>
        function addRowFunc() {  
            var grid = $find("dataGrid");
            var rows = grid.get_rows();
            var row = new Array("NEW ITEM", "1000", "1430.5", "01/05/2018");
    
            rows.add(row);
        }
    </script>
    <button id="addRow" type="button" onclick="addRowFunc()">Add Row</button>
    

    2. In order to add a new column to the WebDataGrid, you can simply create a new UnboundField (or BoundDataField for existing underlying properties of the DataItems) instance and add it to the Columns collection of the WebDataGrid.

    Form:

    <asp:Button ID="addColumn" runat="server" OnClick="addColumn_Click" UseSubmitBehavior="false" Text="Add Column" />

    C#:

    protected void addColumn_Click(object sender, EventArgs e)
    {
        AddColumn("NEW COLUMN", "NEW COLUMN HEADER");
    }
    private void AddColumn(string fieldName, string headerText)
    {
        UnboundField field = new UnboundField();
        field.Key = fieldName;
        field.Header.Text = headerText;
        field.DataType = "System.String";
        field.Width = Unit.Pixel(150);
    
        dataGrid.Columns.Add(field);
    }
    

    For more details on adding rows and columns to the WebDataGrid, I can suggest you take a look at the following samples and topics:
    Row Adding
    Column Adding
    UnboundColumn sample

    I have attached a sample application that demonstrates the approaches from above. (Please note that in order to run it, you may need to modify the build version of the registered assemblies.)
    If you have any questions, please let me know.

    7357.WebDataGrid_sample.zip

    Sincerely,
    Tacho
    Entry-Level Software Developer