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
695
Add new row in WebDataGrid client/server side
posted

Hi

I am trying to add new row in WebDataGrid by clicking button. I am using Infragistics 2012.1 version. But it is not creating. Is there any sample or suggessions?

I appreciate if you have sample code for server-side as well.

.aspx

function AddRow() {
var grid = $find("WebDataGrid1");
row = new Array(grid.get_columns().get_length()); // create a new empty row
grid.get_rows().add(row);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ig:WebScriptManager ID="WebScriptManager1" runat="server">
</ig:WebScriptManager>
<ig:WebDialogWindow ID="WebDialogWindow1" runat="server" Width="50%" Height="50%"
WindowState="Hidden" />
<div>
<ig:WebDataGrid ID="WebDataGrid1" runat="server" Visible="true" Height="350px" Width="400px"
AutoGenerateColumns="false">
<Columns>
<ig:BoundDataField DataFieldName="Name" Key="Name">
<Header Text="Name" />
</ig:BoundDataField>
<ig:BoundDataField DataFieldName="Type" Key="Type">
<Header Text="Type" />
</ig:BoundDataField>
<ig:UnboundField Key="Id" Hidden="true">
<Header Text="Id" />
</ig:UnboundField>
</Columns>
<Behaviors>
<ig:EditingCore AutoCRUD="false">
<Behaviors>
<ig:RowAdding Enabled="false"/>
</Behaviors>
</ig:EditingCore>
</Behaviors>
</ig:WebDataGrid>
</div>
<input type="button" value="Add" onclick="AddRow()" />

</form>
</body>

Code-Behind


protected void Page_Load(object sender, EventArgs e)
{
List<Employee> Details = new List<Employee>();
for (int i = 0; i < 2; i++)
{
Employee obj = new Employee();
obj.Name = "David";
obj.Type = "Employee";
obj.Id = i;
Details.Add(obj);
}
WebDataGrid1.DataSource = Details;
WebDataGrid1.DataBind();

}
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string Type { get; set; }

}

Parents
No Data
Reply
  • 570
    Verified Answer
    posted

    Hello InfraOracle,

    You are missing two important things. First in order for the WebDataGrid to propery add fields, you must make id bound and assign the DataKeyFields to Id, and secondly you will want to use ClientIDMode="Static".  So your web data grid should look like this:

    <ig:WebDataGrid ID="WebDataGrid1" ClientIDMode="Static" runat="server" Visible="true" Height="350px" Width="400px" AutoGenerateColumns="false" DataKeyFields="Id" onrowadding="WebDataGrid1_RowAdding">
       
    <Columns>
           
    <ig:BoundDataField DataFieldName="Id" Key="Id" Hidden="true">
            </ig:BoundDataField>
            <ig:BoundDataField DataFieldName="Name" Key="Name">
               
    <Header Text="Name" />
           
    </ig:BoundDataField>
           
    <ig:BoundDataField DataFieldName="Type" Key="Type">
               
    <Header Text="Type" />
           
    </ig:BoundDataField>
       
    </Columns>
        <Behaviors>
           
    <ig:EditingCore AutoCRUD="false">
               
    <Behaviors>
               
    </Behaviors>
            </ig:EditingCore>
        </Behaviors>
    </ig:WebDataGrid>

     

    Next you will want to change your javascript row add to actually have data; as all fields must be populated for the row add to work.

    <script type="text/javascript">
    function AddRow() {
        var grid = $find("WebDataGrid1");
        var row = new Array(grid.get_rows().length, "Name", "Employee"); // create a new empty row
            grid.get_rows().add(row);
        }
    </script>

    Finally you will need to wireup the rowAdding event to handling adding the new row, as well as storing the list in the session to handle keeping the data managed:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
       
    {
                 List<Employee> Details = new List<Employee>();
          for (int i = 0; i < 2; i++)
                {
             Employee obj = new Employee();
                       obj.Name = "David";
                       obj.Type =  "Employee";
                       obj.Id = i;
                       Details.Add(obj);
                }
            Session.Add("MyList", Details);
          }

         WebDataGrid1.DataSource = Session["MyList"];
         WebDataGrid1.DataBind();
    }


    protected void WebDataGrid1_RowAdding(object sender, Infragistics.Web.UI.GridControls.RowAddingEventArgs e)

    {
            var MyList = (List<Employee>)Session["MyList"];
        
    MyList.Add(new Employee() { Name = (string)e.Values["Name"], Type = (string)e.Values["Type"] });

    }

     

    With the above code, your list will get initialized on pageload, and then on postback it will load the current list from the session. When you add a row, the RowAdding event will trigger first and you will add the new item to the list, then it will get loaded with the session.

    Hope that helps you on your way.

    Sincerely,
    Jon
    Infragistics, Inc.
    http://es.infragistics.com/help/

Children