Batch grid, add new row, create template column elements

[Jeremy Yoder]

 

As I understand from reading various posts, when the Grid is in Batch mode, and you add a new row (via "Add new record" button or with the javascript addNewRecord function via batch manager) it only creates a new tr element, but doesn't populate it with the components that make up the columns you've defined. Instead, it appears you have to manually create those elements in code. This doesn't make sense to me, but seems it should be part of the built-in functionality when the tr element is added. The current result is the new row is basically worthless.

Still, if that's how you insist it must be done, please help me with my grid below. After a new row is added (via the javascript below which is called from a button separate from the grid) it appears I need to use OnRowCreated to populate all the columns with the necessary elements. Is that correct? If so, can you take my grid below and give me the javascript for how this is done? I can't find any concrete examples on the forum or in your help docs.

var grd = GetControlRAD("grdPODetails");
var masterTable = grd.get_masterTableView();
var batchManager = grd.get_batchEditingManager();
batchManager.addNewRecord(masterTable);

<telerik:RadGrid ID="grdPODetails" runat="server" AllowSorting="True" AutoGenerateColumns="False" Skin="Office2010Blue" GridLines="None">
    <HeaderContextMenu EnableAutoScroll="True">
    </HeaderContextMenu>
    <MasterTableView CommandItemDisplay="Top" EditMode="Batch" InsertItemDisplay="Bottom"
            ClientDataKeyNames="PurchaseOrderDetailKey"
            DataKeyNames="PurchaseOrderDetailKey">
        <BatchEditingSettings EditType="Cell" OpenEditingEvent="Click" />
        <CommandItemSettings ShowRefreshButton="False" ShowSaveChangesButton="true" ShowCancelChangesButton="true" />
        <NoRecordsTemplate>
            No detail lines to display.
        </NoRecordsTemplate>
        <Columns>
            <telerik:GridTemplateColumn DataField="PrintOnPurchaseOrder" HeaderText="Print" UniqueName="PrintOnPurchaseOrder" DataType="System.Boolean">
                <HeaderStyle Width="40px" />
                <ItemStyle Width="40px" />
                <ItemTemplate>
                    <input id="chkPrintRead" type="checkbox" checked='<%# Eval("PrintOnPurchaseOrder") %>' onclick="changeCheckbox(this);" />
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:CheckBox ID="chkPrint" runat="server" Checked='<%# Bind("PrintOnPurchaseOrder") %>' />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn DataField="ChartOfAccountNumber" UniqueName="ChartOfAccountNumber" HeaderText="Account Number" DataType="System.String" >
                <ItemTemplate>
                    <asp:Label ID="lblChartOfAccountNumber" runat="server"
                        Text='<%# Eval("ChartOfAccountNumber") %>'>
                    </asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <span style="width:100%; display:inline-block; white-space:nowrap">
                        <telerik:RadTextBox ID="txtChartOfAccountNumber" runat="server" MaxLength="36" Width="90%"
                            Text='<%# Bind("ChartOfAccountNumber") %>'>
                        <ClientEvents OnValueChanged="Grid_COANumChanged" />
                        </telerik:RadTextBox>
                        <asp:ImageButton ID="imgChartOfAccountNumber" OnClientClick="Grid_COANumSearch(this); return false;" runat="server"
                            ImageUrl="images/icons/search-16.png" TabIndex="-1" ToolTip="Search" style="vertical-align:middle" />
                    </span>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn DataField="PurchaseOrderDetailQuantity" HeaderText="Quantity" UniqueName="PurchaseOrderDetailQuantity" DataType="System.Double">
                <ItemTemplate>
                    <asp:Label ID="lblPurchaseOrderDetailQuantity" runat="server"
                        Text='<%# Eval("PurchaseOrderDetailQuantity") %>'>
                    </asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadNumericTextBox ID="txtPurchaseOrderDetailQuantity" runat="server" DataType="System.Decimal" MaxLength="23" Width="100%"
                        IncrementSettings-InterceptArrowKeys="false" Culture="English (United States)"
                        DbValue='<%# Bind("PurchaseOrderDetailQuantity") %>' Type="Number" NumberFormat-DecimalDigits="4" />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn DataField="UnitPrice" HeaderText="UnitPrice" UniqueName="UnitPrice" DataType="System.Double">
                <ItemTemplate>
                    <asp:Label ID="lblUnitPrice" runat="server"
                        Text='<%# Eval("UnitPrice") %>'>
                    </asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadNumericTextBox ID="txtUnitPrice" runat="server" DataType="System.Decimal" MaxLength="23" Width="100%"
                        IncrementSettings-InterceptArrowKeys="false" Culture="English (United States)"
                        DbValue='<%# Bind("UnitPrice") %>' Type="Number" NumberFormat-DecimalDigits="4" />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn DataField="UnitDescription" UniqueName="UnitDescription" HeaderText="Unit Desc" DataType="System.String">
                <ItemTemplate>
                    <asp:Label ID="lblUnitDescription" runat="server"
                        Text='<%# Eval("UnitDescription") %>'>
                    </asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadTextBox ID="txtUnitDescription" runat="server" MaxLength="10" Width="100%"
                    Text='<%# Bind("UnitDescription") %>' >
                    </telerik:RadTextBox>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn DataField="PurchaseOrderDetailAmount" HeaderText="Amount" UniqueName="PurchaseOrderDetailAmount" DataType="System.Double">
                <ItemTemplate>
                    <asp:Label ID="lblPurchaseOrderDetailAmount" runat="server"
                        Text='<%# Eval("PurchaseOrderDetailAmount") %>'>
                    </asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadNumericTextBox ID="txtPurchaseOrderDetailAmount" runat="server" DataType="System.Decimal" MaxLength="21" Width="100%"
                        IncrementSettings-InterceptArrowKeys="false" Culture="English (United States)"
                        DbValue='<%# Bind("PurchaseOrderDetailAmount") %>' Type="Number" NumberFormat-DecimalDigits="2" />
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridNumericColumn DataField="PurchaseOrderDetailKey" HeaderText="PurchaseOrderDetailKey"
                UniqueName="PurchaseOrderDetailKey" DataType="System.Int32" Visible="False" ReadOnly="True">
            </telerik:GridNumericColumn>
            <telerik:GridClientDeleteColumn ConfirmText="Are you sure you want to delete the selected item?"
                ButtonType="LinkButton" Text="Delete" UniqueName="DeleteColumn" >
                <HeaderStyle Width="50px" HorizontalAlign="Right" />
                <ItemStyle Width="50px" HorizontalAlign="Right" />
            </telerik:GridClientDeleteColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings AllowKeyboardNavigation="true">
        <Selecting AllowRowSelect="True" />
        <ClientEvents OnRowSelected="RowSelected" OnBatchEditCellValueChanged="BatchEditCellValueChanged" />
    </ClientSettings>
</telerik:RadGrid>

[Jeremy Yoder]

 

So it looks like I'm wrong in my post above... but I don't know what the issue is. I say that because after a new row is created, and I click in the ChartOfAccountNumber column, I see both the RadTextBox and the ImageButton defined in that template. So that's good. However, the javascript that referenced those controls was no longer working. But after some more digging, I found that in my OnBatchEditCellValueChanged function, I was getting the row index via args.get_row().sectionRowIndex, which worked before, but didn't for the new rows. Once I changed that to get_masterTableView().get_selectedItems()[0] it starting working again.

Is that expected behavior?

Also, the checkbox is giving me problems, and is displayed as blank. And if I try to change it by checking it, it puts the word "true" in rather than a checkbox. Why is that? And how can I initialize all the columns in the new rows to certain values?

 

[Kostadin]

Hi Jeremy,

The cause for receiving a 0 when using sectionRowIndex is because the new element are added added dynamically and the index is negative. Nevertheless, you can access them by using get_dataItems property. The newly rows are added at the beginning of the collection.
Regards your question about the the checkbox I would recommend you to use GridCheckBoxColumn as demonstrated in the following live example.

Regards,
Kostadin
Telerik

[Jeremy Yoder]

 

Turns out get_selectedItems()[0] doesn't seem to always work, nor does get_dataItems. I'm now trying $find(args.get_row().id) which so far seems to work. Any drawback to that one?

Also, when adding a new row, what's the recommended way to initialize values in new rows? Using OnRowCreated? I finally found this somewhere a couple of days ago, but can't remember where...

 

function RowCreated(sender, args) {
    if (args.get_id().indexOf("-") != -1) {
        var newItem = args.get_gridDataItem();
        // modify via batchManager's changeCellValue...

 

[Kostadin]

Hello Jeremy,

I am not sure why you are unable to get the newly added rows form the get_dataItems() collection. Nevertheless, you can use $find to access the row object.
Regards your question about setting a value to the new rows I would recommend you ti use the batch editing client side API and use changeCellValue method. More information could be found in the following help article.

Regards,
Kostadin
Telerik