[Solved] Error when trying to insert an item using javascript

[Thijs van Gestel]

Hello, I've been developing an application that has a Radgrid for a couple of months now, but I've ran into an issue I don't quite understand.

The situation is like this: I have implemented functionality that when a user is editing a row, and finishes doing so and wants to update the row, they can just press enter and the radgrid will update that row. I solved this by use of some code I found elsewhere on this forum, in javascript, like so:

function KeyPressEnter(sender, args)
    {
        if (args.get_keyCode() != 13)
                return;

            var el = Telerik.Web.UI.Grid.GetCurrentElement(args.get_domEvent());

            if (el.tagName.toLowerCase() !='input' && el.tagName.toLowerCase() !='textarea') return;
                if ($(el).parents("tr").attr("id") && $(el).parents("tr").attr("id") != "") {
                sender.get_masterTableView().updateItem($(el).parents("tr")[0]);
                }

    }

This function is added to the .aspx under the clientsettings, with the clientevent onkeypress.

Now, I have gotten the assignment to do the same for inserting items. So, I tried to use the same code as above, only then with:
sender.get_masterTableView().insertItem($(el).parents("tr")[0]);
instead of the:
sender.get_masterTableView().updateItem($(el).parents("tr")[0]);
in the above code.

This however generates an error: " Insert item is available only when grid is in insert mode."
I found this odd, as the radgrid is indeed in insert mode when this method is called. Especially seeing as the insert will succeed if I just click the commandbutton to insert the item instead. I also called the method sender.get_masterTableView().get_isItemInserted() in that code, which always returns false. I even tried to force it into insertmode using sender.get_masterTableView().showInsertItem($(el).parents("tr")[0]); ,as one of your pages on this subject suggests that this should put the grid into insert mode, but to no avail. get_isItemInserted() keeps returning false.

Would anyone have any idea how I'll be able to solve my problem?

[Veli]

Hello Thijs van Gestel,

The exception you are getting is thrown only when you call RadGrid.get_masterTableView().insertItem() to perform the insert, but the grid is not in insert mode, i.e. the insert form is not shown. So you may check this scenario.

Additionally, the showInsertItem() and insertItem() methods on the client do not take any parameters, so specifying the rows is excessive.

Greetings,
Veli
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Thijs van Gestel]

Hello Veli,

Thanks for your answer, I did not know the insertitem and showinsertitem functions didn't take any parameters.

I already did figure out the error occured because I called this method, the thing that I don't understand is why the radgrid doesn't see itself as in insert mode, or why I can't put it into insert mode myself using showinsertitem.

Maybe listing the current flow of the program might shed some light on this:

1) I open the screen with the radgrid and click on a button "new item"(this has the command initinsert and puts the radgrid in insert mode as far as I understand this)

2) The radgrid shows a new, empty row on the level I did the insert on. I fill in the fields with the desired values.

3) At this point, I press Enter, and the code goes to the javascript function. It will try to execute the insertitem function with:
sender.get_masterTableView().insertItem();
At this point, the error is generated.

What I would like to know is, am I using insertitem correctly like this? And, what would I need to do to avoid this error I'm getting?

Alternatively, if this can't be solved this way, might there be a way to dynamically call the on click method of the insert button of the new row(So that it calls the performInsert command) in javascript?

[Veli]

Hi Thijs van Gestel,

Thanks for the detailed description. Try the following event handler instead:

function KeyPressEnter(sender, args)
{
    var $ = $telerik.$;
    if (args.get_keyCode() != 13)
        return;

    var el = Telerik.Web.UI.Grid.GetCurrentElement(args.get_domEvent());

    if (el.tagName.toLowerCase() != 'input' && el.tagName.toLowerCase() != 'textarea') return;

    if (sender.get_masterTableView().get_isItemInserted())
    {
        var evt = args.get_domEvent();
        if (evt.stopPropagation) evt.stopPropagation();
        if (evt.preventDefault) evt.preventDefault();
        sender.get_masterTableView().insertItem();

        return false;
    }

    if ($(el).parents("tr").attr("id") && $(el).parents("tr").attr("id") != "")
    {
        var evt = args.get_domEvent();
        if (evt.stopPropagation) evt.stopPropagation();
        if (evt.preventDefault) evt.preventDefault();
        sender.get_masterTableView().updateItem($(el).parents("tr")[0]);

        return false;
    }
}

Seems to work OK at my site. Attaching a sample project


Kind regards,
Veli
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Thijs van Gestel]

Thanks again for the reply, and for the sample code, Veli. I tried the code and your sample project, and it indeed works in this project.

However, when I tried to put the code in my project, it didn't work. This is because it doesn't get passed this if check:
 if (sender.get_masterTableView().get_isItemInserted())

It means that the page still has the issue that it doesn't recognise the grid as being in insertmode, while it actually is. But now that I have a working version, your sample, I tried out modifying your example to be like the page I'm getting this issue in. I tried a few things, like:
 - adding the page load function you have in your sample into my page.
 - add the master page that my page is using to your sample.
 - in my page, the javascript is all in a different .js file, while in your sample, it's all internal in the .aspx itself. I also tried switching this on    my page.
 - I tried putting a custom link button with the initinsert command on your sample, like it is the case on my page.

All the above resulted in your sample still working, while my page did not.

Debugging through both cases, I noticed one significant different thing. When the method get_isItemInserted() is called, the application will generate a .js file called MicrosoftAjax.js, which handles this method. The thing is, your sample generates a different MicrosoftAjax.js then my own page does! The one my page generates seems to always return false to get_isItemInserted()

With this discovery, I already tried disabling the few ajax components that are on my page, as well as setting the enableAJAX property of my radgrid to false. However, this does not change anything.

My question is: Do you have any idea why my page might be generating a different MicrosoftAjax.js file?
I know that this is the root of the problem, but finding out where exactly this is handled feels like trying to  find a needle in a haystack...

[Thijs van Gestel]

I found the problem! It was the not the generated .js file that was the problem, but rather, the place where I was trying the inserts. I was testing this function on an insert of a detailtable, and that's why it never returned that the mastertableview was in insert mode. I assumed this was done globally, but this is apparently not the case. For reference, this is what I changed my code into:

function KeyPressEnter(sender, args)
    {
        var $ = $telerik.$;
        if (args.get_keyCode() != 13)
            return;

        var el = Telerik.Web.UI.Grid.GetCurrentElement(args.get_domEvent());

        if (el.tagName.toLowerCase() != 'input' && el.tagName.toLowerCase() != 'textarea') return;

        if (sender.get_masterTableView().get_isItemInserted())
        {
            var evt = args.get_domEvent();
            //if (evt.stopPropagation) evt.stopPropagation();
            if (evt.preventDefault) evt.preventDefault();
            sender.get_masterTableView().insertItem();

            return false;
        }
        var detailtables = sender.get_detailTables();

        if (detailtables.length > 0) {
            for (var i = 0; i < detailtables.length; i++){
                if (detailtables[i].get_isItemInserted()) {
                    var evt = args.get_domEvent();
                    if (evt.preventDefault) evt.preventDefault();
                    detailtables[i].insertItem();

                    return false;
                }
            }
        }

        if ($(el).parents("tr").attr("id") && $(el).parents("tr").attr("id") != "")
        {
            var evt = args.get_domEvent();
            //if (evt.stopPropagation) evt.stopPropagation();
            if (evt.preventDefault) evt.preventDefault();
            sender.get_masterTableView().updateItem($(el).parents("tr")[0]);

            return false;
        }
    }

This way, it first checks if the mastertable is in insert mode, then checks weither any detailtables are available and if they are, check for each one if there's one in insert mode, and if is, execute the perform insert for this detailtable.

Note: I commented the line: if (evt.stopPropagation) evt.stopPropagation();
I did this because this action will instead target the item on the page that has tabindex 0. And after that, it would act like you pressed enter on the item with tabindex 0(in my case, a button, so it would execute the code behind the button, something I don't want to happen here)
What exactly does that line of code do?

In any case, thanks alot for your help in solving this, Veli. I couldn't have done it without your sample.

[Veli]

Hello Thijs van Gestel,

I am glad you managed to get thins working. Indeed, the provided code checks for the master table only. For the nested tables, you need to correctly reference the respective GridTableView object.

event.stopPropagation() is the W3C-compliant method that cancels the event from propagating in the bubbling face. For more information:

QuirksMode: javascript - event order

W3.org - document object model events

Sincerely yours,
Veli
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.