Dialog not working - found the issue but don't understand why.

Question

After giving up on the MVC controls (I have no idea how the hell MVC became the de-facto standard), I've gone back to good old ASP.NET Web Forms and am finally getting somewhere.

I have a grid with a button column that's supposed to open up a dialog for changing a user's passwords. However, I have very little knowledge of JavaScript and I can't figure out what's going wrong. I've commented out lines of JavaScript one at a time to figure out where the error's occurring and found the offending line but it looks fine to me. If the line is kept in, the Alert box I'm using to test the onClick function fails to appear. If it's commented out, the Alert box pops up.

My JavaScript code (borrowed primarily from your demos) is this:

The line that stops the function from working is the one that starts with "var record". There is currently a single valid record in the database, which the grid obtains and displays via a Stored Procedure. When I remove the offending line, the alert box displays "Testing0".

Deepa Loganathan · Answer

Hi David,   
  
We have tried to reproduce the reported issue with a simple sample based on your description and we were unable to reproduce it at our end.   
  
The alert box and dialog are opened properly upon clicking the grid button. Please find the below video for your reference.   
  
Video: http://www.syncfusion.com/downloads/support/forum/139952/ze/dia886686537    
  
Sample:http://www.syncfusion.com/downloads/support/forum/139952/ze/SyncfusionASPNETApplication31891959715    
  
So, please check the below details   
1.       Whether you can fetch the current index data of Grid in the below code   




    
 var grid = $("#AdminAccountsGrid").ejGrid("instance");            var index = this.element.closest("tr").index();            var record = grid.getCurrentViewData()[index];            //$("#CommandDialog").html($("#templateData").render(record))                //.ejDialog("option", { position: { X: this.element.position().left - 761, Y:    
    
2.        Whether you are getting any console errors in developer tools.   
  
Regards,   
Deepa L.

David Davies · Answer

Thanks for the vid. I have very little knowledge of JavaScript and had no idea how to debug it.

Yeah, I'm getting an error with

var record = grid.getCurrentViewData()[index];

Should Visual Studio 2017 intellisense be picking it up? It isn't. The error I'm getting is grid.getCurrentViewData is not a function. In C# I might expect something like this if I've accidentally put brackets at the end of a call to a property but I'm guessing that here it's not finding the getCurrentViewData function?

Prasanna Kumar Viswanathan · Answer

Hi David,

Thanks for the update.

Based on your update you have mentioned that you received an error “grid.getCurrentViewData” is not a function when you clicked on a button of a command column. The mentioned issue will reproduced when we have not taken the grid instance properly. So, please ensure that you have used the proper Grid id to take the Grid instance.

In a button click event we have taken the grid instance by using Grid id.

Find the code example:

<ej:Grid ID="EmployeesGrid" ClientIDMode="Static" runat="server" AllowSelection="False" EnableRowHover="False">

----------------------

</Columns>

</ej:Grid>

function onClick(args) {

var grid = $("#EmployeesGrid").ejGrid("instance");

-------------------------

alert("Testing" + index);

}

</script>

Note: In our sample we have defined the ClientIDMode as static, so the Grid control will not be generated with the Parent control ID.

Regards,

Prasanna Kumar N.S.V

David Davies · Answer

Thanks. That works.

Prasanna Kumar Viswanathan · Answer

Hi David, 
 
We are happy to hear that your issue has been solved. 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Prasanna Kumar N.S.V

David Davies · Answer

Argh! I'm still having issues.Every time I try to change something in the Dialog box, the entire page fails to render. For some reason, on the line below, it tells me that the "object doesn't support property or method 'ejGrid'". I keep having to roll back the changes to make it work again. This happens on page startup, which surprises me as I wasn't aware that JavaScript is checked for errors regardless of whether the function's been called.var grid = $("#AdminAccountsGrid").ejGrid("instance");I've checked the divs and they all seem okay. All have matching start and end tags. Like I say, it was working before I made changes to the dialog box. Those changes involved getting rid of the table layout and putting everything into DIVs, as well as adding validation.I've attached a file that contains the dialog box.Attachment: Sample_b27d7123.7z

Thavasianand Sankaranarayanan · Answer

Hi David, 
 
Query : Object doesn't support property or method 'ejGrid' 

This issue may occur if jQuery files are referred twice in the application. We already have a knowledge base documentation regarding this issue. Please refer the below link for the KB. 

KB link: https://www.syncfusion.com/kb/4038/how-to-resolve-object-does-not-support-property-or-method-ejgrid-script-error  

If you still face the issue. Please share the following details. 


Share the stacktrace of the script error that you are facing in console window.
You have mentioned that if you have make any changes in Dialog code the issue occurs. So, please share the code example of Dialog which is working and the changed code example of Dialog which causes the issue.
Share the full Grid code example.
Share exact or proper replication procedure to reproduce the issue. 
Also share whether the issue occurs when the command button is clicked or in the initial render of the page.
If possible please share video demo of the issue.
 
Regards, 
Thavasianand S.