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; } }
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,JonInfragistics, Inc.http://es.infragistics.com/help/
Hello Jon,
I have the similar requirement to add new row to the grid on client side and this works well by using
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); }
This adds the new row to the end of the grid ( as we are selecting the total rows and then adding it to those rows)
My requirement is to add the new row to the top of the grid. Is there any way to add it at the beginning of the grid rather than adding at end .
I am using the Version=11.2.20112.2176 version of infragistics of build version for .net framework 4.0
Thanks,
prashanth
Hi Jon,
Perfect, it is working fine. I got answer for what I asked. Thank you.
I am trying to edit cells with this code. I am getting error
Line: 4944Error: Rows must have unique DataKeys. This key appears more than once: 0
I didn't find answer in forms. can you please tell me how do I fix?
<Behaviors> <ig:EditingCore AutoCRUD="false"> <Behaviors> <ig:CellEditing Enabled="true"> </ig:CellEditing> </Behaviors> </ig:EditingCore> </Behaviors>
One more Question. How can I find control (dropdown) by row index in grid?
Thank you.