Add new record to batch edit enabled grid via client javascript

[Jon]

Hi All,

I am using a grid with batch edit mode set.  

I need to be able to add via javascript a new row to my grid with no callbacks in the middle.  Is there a way to do this?

Regards

Jon

[Konstantin Dikov]

Hi Jon,

Detailed information on the exposed functionality of Batch Editing Manager is available in the following help article:

• RadGrid - Batch Editing

As you will find out in the article, you can add new record through the BatchEditingManager and its addNewRecord(tableView) method:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function addRecord() {
            var grid = $find("<%=RadGrid1.ClientID%>");
            var tableView = grid.get_masterTableView();
            var batchManager = grid.get_batchEditingManager();
            batchManager.addNewRecord(tableView);
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadButton runat="server" ID="RadButton1" AutoPostBack="false" Text="Add new record" OnClientClicked="addRecord"></telerik:RadButton>
<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView EditMode="Batch">
    </MasterTableView>
</telerik:RadGrid>

Hope this helps.


Best Regards,
Konstantin Dikov
Telerik

 

 

[Jon]

Thanks Konstantin,

I saw that article after the post however then ran into the issue whereby I need to set a few of the fields with default values.  I managed to do it for one field by changing the innerText as shown below however when a second column is changed I then start getting errors in the page.  I have a feeling that my method of changing the cell values is somehow flawed but cant see any other way of doing it...

var uxRadGrid_MasterTable_row = uxRadGrid_MasterTable.get_dataItems()[0];
uxRadGrid_MasterTable_row.get_cell("Category").innerText = textValue;

I think that given how useful the batch edit functionality is there should be a lot more examples of use and documentation for it.  I can think of many places within my application that I'd like to roll this out - and examples help :)

Regards

Jon

[Konstantin Dikov]

Hello Jon,

When you need to change a value of a particular cell in RadGrid with enabled Batch editing, you should use the changeCellValue(cell, value) method of the BatchEditingManager, because if you use the innerText directly, you will clear the child element in the TD element and the manager will fail to work correctly afterwords.

Using the previous example, here are few more line added, where a initial value could be set to a cell:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function addRecord() {
            var grid = $find("<%=RadGrid1.ClientID%>");
            var tableView = grid.get_masterTableView();
            var batchManager = grid.get_batchEditingManager();
            batchManager.addNewRecord(tableView);
            var newItem = tableView.get_dataItems()[0];
            var categoryCell = newItem.get_cell("Category");
            batchManager.changeCellValue(categoryCell, "InitialValue");
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadButton runat="server" ID="RadButton1" AutoPostBack="false" Text="Add new record" OnClientClicked="addRecord"></telerik:RadButton>
<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView EditMode="Batch">
    </MasterTableView>
</telerik:RadGrid>

Best Regards,
Konstantin Dikov
Telerik

 

 

[Jon]

Hi Konstantin

That is really helpful thank you.

It seems to kind of work now because the error that I was getting doesn't appear however now it doesn't display anything.  The code that I have is as follows and I can't spot anything wrong.  There is no post change update needed to get the data to show is there? 

var uxRadGrid = $find("<%=uxRadGrid.ClientID%>");
var uxRadGrid_MasterTable = uxRadGrid.get_masterTableView();
var uxRadGrid_batchEditingManager = uxRadGrid.get_batchEditingManager();
uxRadGrid_batchEditingManager.addNewRecord(uxRadGrid_MasterTable);
var uxRadGrid_MasterTable_NewRow = uxRadGrid_MasterTable.get_dataItems()[0];

uxRadGrid_batchEditingManager.changeCellValue(uxRadGrid_MasterTable_NewRow.get_cell("Category"), textValue);
uxRadGrid_batchEditingManager.changeCellValue(uxRadGrid_MasterTable_NewRow.get_cell("BudgetValue"), '£0.00');
uxRadGrid_batchEditingManager.changeCellValue(uxRadGrid_MasterTable_NewRow.get_cell("BudgetDetailId"), '');
uxRadGrid_batchEditingManager.changeCellValue(uxRadGrid_MasterTable_NewRow.get_cell("CategoryId"), idValue);

//TESTING
uxRadGrid_batchEditingManager.changeCellValue(uxRadGrid_MasterTable_NewRow.get_cell("CategoryId"), 333);
uxRadGrid_batchEditingManager.changeCellValue(uxRadGrid_MasterTable_NewRow.get_cell("Category"), 'aaaaaaaa');

[Konstantin Dikov]

Hi Jon,

I am not sure what could cause this code to fail on your end. From the provided example from one of my previous post, the initial values are correctly inserted in the new item.

Can you please provide the markup of your RadGrid, so we can examine it and see if there is something that could cause this issue. 

I am looking forward to your reply.


Regards,
Konstantin Dikov
Telerik

 

 

[Jon]

Hi Konstantin,

I've just tried reducing the page down and still get this error.  I've copied the grid code in below. Nothing happening in the server side of things...  Fingers crossed there is something obvious.  

<telerik:RadGrid ID="uxRadGrid" runat="server" AllowAutomaticInserts="False" AllowAutomaticUpdates="False"
                 AllowSorting="false" AutoGenerateColumns="False" DataSourceID="BudgetDetailSqlDataSource"
                 GridLines="None" EnableHeaderContextMenu="False" AllowPaging="False" ShowHeader="true"  width="600px"
                 ShowGroupPanel="False" EnableLinqExpressions="false">
    <MasterTableView  AllowSorting="true" DataKeyNames="CategoryId" ShowFooter="true" EditMode="Batch">
        <Columns>
            <telerik:GridBoundColumn DataField="Category" HeaderText="Category" SortExpression="Category" UniqueName="Category" CurrentFilterFunction="Contains" ShowFilterIcon="true" readonly="true"  AutoPostBackOnFilter="true">
                <HeaderStyle Width="250px" />
                <ItemStyle Width="250px" />
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings AllowExpandCollapse="true" AllowDragToGroup="False" AllowColumnsReorder="False" ReorderColumnsOnClient="False" AllowKeyboardNavigation="true" >
        <ClientEvents />
    </ClientSettings>
</telerik:RadGrid>

[Konstantin Dikov]

Hello Jon,

You are not able to set initial values to the Category column, because you are setting the ReadOnly property of the column to true. This will not only prevent the user for editing the cell, but will also prevent the BatchEditingManager to change it.

The only possible way for accomplish the desired requirement for setting an initial value after inserting a new record, but to prevent the editing of the user would be to handle the OnBatchEditOpening event and cancel it when the column name equals to one of the columns that should not be editable by the user. You should however use global variables that for allowing the OnBatchEditOpening event to execute when you are manually setting the value.

Hope this information helps with your requirement. 


Regards,
Konstantin Dikov
Telerik

 

 

[Jon]

Hi Konstantin

Ah it's so obvious now you said it!  Thanks for that.

I'll have a go at the other approach.  

Many thanks,

Jon

[Jon]

Works perfectly thanks Konstantin.