Insert an Emptry Row Client-Side

[Andrew]

Hi, I was browsing this topic http://www.telerik.com/help/aspnet-ajax/client-update-insert-delete.html looking for a way to insert a new item at the end of a RadGrid since I'm having a few issues. I was hoping there was a simpler way to do this. Let me briefly explain what I'm trying to do.

I'm attempting to create more of a quick data entry style grid. In order to do so every cell in every row of my grid has a RadTextBox control in which the user can enter data. If the grid initially has 3 rows of data I append a 4th row that is empty, the row designated for the next set of data to be entered. When the user types into a textBox of the last row in the grid I want to do a client-side insert of a new, empty row.

Each textBox has the following javascript function assigned to its OnKeyPress ClientEvent:

        function DetailGridKeyPressed(sender, args)
        {
            var masterTable = $find("<%= EntryGrid.ClientID %>").get_masterTableView();
            var items  = masterTable.get_dataItems();
            var i = 0;
            var j = 0;

            for(i = 0; i < items.length; i++)
            {
                if (items[i].findControl(sender.get_id()) != null)
                {
                    if (i + 1 == items.length)
                    {
                        masterTable.insertItem();
                    }
                    break;
                }
            }
        }

But when masterTable.insertItem() executes I get the following javascript error:

Sys.WebForms.PageRequestManagerServerErrorException: Insert item is available only when grid is in insert mode.

Is there a way I can put the grid item insert mode on the client?

Thanks in advance.

[Princy]

Hi Andrew

Try using the fireCommand mehod which triggers specific command for the grid when executed.

JavaScript:

<script type="text/javascript">
function addnew()
{
    var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
    masterTable.fireCommand("InitInsert","");
}
</script>

To insert the record you can call the PerformInsert command .

Refer the link for more information about fireCommand.

Thanks,
Princy

[Andrew]

This solution doesn't really help because I can't do InitInsert and PerformInsert as one atomic process. I was looking at the WebService path, specifically this javascript function:

           function updateGrid(result)
           {
               var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
               tableView.set_dataSource(result);
               tableView.dataBind();

               var grid = $find("<%= RadGrid1.ClientID %>");
               grid.repaint();
           }

Now, the set_dataSource() function takes a result object which is a list of Employee objects. I assume when the dataSource binds it matches properties in each Employee object in the list to the column names? But what if I need variable column names and counts based on data collected at runtime? Is there anyway, for example, to bind a List of string arrays to the table client-side?

[Rosen]

Hello Andrew,

I'm afraid that autogenerated columns are not supported when using client-side databinding.

As to your other question. Unfortunately creating control such as RadTextBox purely on the client is not possible thus the adding client-side a new RadGrid dataItem which contains such controls is not supported.

However I have attached a sample page which demonstrates how to achieve similar to the requested functionality using server-side code. The key part is that the RadGrid is actually bound to a local representation of the DB data to which is added a dummy data record. Please take a look and let us know if this helps.

Best regards,
Rosen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.