PDA

View Full Version : [CLOSED] Adding a new record with paging enabled issue



vmehta
Jul 08, 2014, 11:30 AM
Hello,

I have a grid with paging tool bar. I have set pagesize ="10" in store. I am not using any remote paging here. I have a add button, which will add new empty record to the grid at the end and set the focus on second column textbox.

The problem is when I have records less than 10, a new record gets added sucessfully on Add click wth focus on second column textbox.
When there are more than 10 records in the grid, then page is more than 1 and when I click add, it adds record, but the focus is not showing up on the second column textbox.

This is the code. On add click I call this Javascript function. I am adding a new record at the last.



var insertRecord = function () {
var grid = #{GridPanel1};
var count1 = grid.getStore().getTotalCount();
grid.store.insert(count1, 0);
grid.getView().focusRow(count1);
grid.getStore().update();
grid.editingPlugin.startEdit(grid.store.getAt(coun t1), grid.columns[1]);


};






An important thing to note is when I add a new record at the top as the first item, then it is working as expected with focus on textbox. Here, I want to add a record at the last.

<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" DisplayInfo="true" DisplayMsg="Displaying {0} - {1} of {2}"
EmptyMsg="No data to display" HideRefresh="true">
</ext:PagingToolbar>
</BottomBar>

Daniil
Jul 08, 2014, 12:54 PM
Hi @vmehta,

Please provide a full test case.

vmehta
Jul 08, 2014, 2:25 PM
I have totally 7 records.

First set PageSize = "7" in store and click on Add button. A new record added with focus on second column.


<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

</div>
</form>
</body>
</html>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:ResourceManager ID="rmPrelimIdeas" runat="server" />
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
List<object> gridData = new List<object>
{
new {ID=1, Name="Name1" },
new {ID=2, Name="Name2" },
new {ID=3, Name="Name3" },
new {ID=4, Name="Name4" },
new {ID=5 , Name="Name5" },
new {ID=6 , Name="Name6" },
new {ID= 7 , Name="Name7" },
};
Store1.DataSource = gridData;
Store1.DataBind();
}

}
</script>


<script language="javascript" type="text/javascript">

var insertRecord = function () {
var grid = <%= GridPanel1.ClientID %>;
var count1 = grid.getStore().getTotalCount();
grid.store.insert(count1, 0);
grid.getView().focusRow(count1);
grid.getStore().update();
grid.editingPlugin.startEdit(grid.store.getAt(coun t1), grid.columns[1]);

};
</script>

<ext:GridPanel ID="GridPanel1" runat="server" SelectionMemory="false" >
<Store>
<ext:Store ID="Store1" runat="server" PageSize="7">
<Model>
<ext:Model ID="Model2" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="String" />
<ext:ModelField Name="Name" Type="String" />

</Fields>
</ext:Model>
</Model>

</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column5" runat="server" Text="ID" DataIndex="ID">
</ext:Column>


<ext:Column ID="clmTopicName" runat="server" Text="Name" DataIndex="Name"
>
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:Column>

</Columns>
</ColumnModel>

<Plugins>
<ext:CellEditing ClicksToEdit="1">
</ext:CellEditing>

</Plugins>
<SelectionModel>

<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server">

</ext:CheckboxSelectionModel>
</SelectionModel>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="btnAdd" runat="server" Text="Add">
<Listeners>
<Click Fn="insertRecord" />
</Listeners>
</ext:Button>

</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" DisplayInfo="true" DisplayMsg="Displaying {0} - {1} of {2}"
EmptyMsg="No data to display" HideRefresh="true">

</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>

Now set PageSize = "5" and do the same. New record is added but focus is not set on second column.

But if I change the javascript function to add a record at the starting, it works on both conditions. Like below.



var insertRecord = function () {
var grid = <%= GridPanel1.ClientID %>;
grid.store.insert(0, 0);
grid.getView().focusRow(0);
grid.getStore().update();
grid.editingPlugin.startEdit(grid.store.getAt(0), grid.columns[1]);

};

Daniil
Jul 08, 2014, 5:40 PM
Well, adding records to the Store with paging is a bit quirky scenario. If you add a record to the page, the size of the page starts to exceed the page size. It causes some inconsistency.

A more or less good solution might be adding at the top.

var newRecordId = -1;

var insertRecord = function () {
var grid = App.GridPanel1;

grid.store.insert(0, { ID: newRecordId-- });
grid.getView().focusRow(0);
grid.editingPlugin.startEdit(grid.store.getAt(0), grid.columns[1]);
};

Though, the new records will go to the second page if you navigate it via the PagingToolbar. This problem has been discussed there.
http://forums.ext.net/showthread.php?25719