Grid in a dialog

[Tarik]

Regards, I have an issue with a grid placed in a dialog, i want to delete a record from the grid and when i click Cancel on the Delete Confirmation Dialog there is an error which says: Uncaught TypeError: Cannot read property 'classList' of undefined

    at e.addFocus (ej2.min.js:10)

    at e.focus (ej2.min.js:10)

    at e.onFocus (ej2.min.js:10)

    at t.focusContent (ej2.min.js:10)

    at e.<anonymous> (ej2.min.js:10)

    at e.notify (ej2.min.js:10)

    at t.e.trigger (ej2.min.js:10)

    at t.open (ej2.min.js:10)

    at e.notify (ej2.min.js:10)

    at t.e.trigger (ej2.min.js:10)

<div id="dialog-div"></div>

    <div id="target">

        <ejs-dialog id="alert_dialog" visible="false" animationSettings="defaultanimation" isModal="true" showCloseIcon="true" width="1000px" allowDragging="true">

            <e-content-template>

                <div>

                    <h5>Настан: <span id="trainingName"></span></h5>

                </div>

                <ejs-grid id="Grid1" actionFailure="failure" load="onLoadDialogGrid" commandClick="commandsClickDialogGrid" toolbarClick="toolbarClickDialogGrid" actionBegin="actionBeginDialogGrid" actionComplete="actionCompleteDialogGrid" toolbar=toolbarItemsDialogGrid>

                    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" showDeleteConfirmDialog="true" mode="Dialog"></e-grid-editsettings>

                    <e-grid-columns>

                        <e-grid-column field="attachment_id" headerText="ID" visible="false" isPrimaryKey="true" validationRules="@(new { required=true, number=true})" width="60"></e-grid-column>

                        <e-grid-column field="file" headerText="File Name" type="string" template="#template" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="0"></e-grid-column>

                        <e-grid-column field="fileDescription" edit="@(new {create="createTBox", read="readTBox", destroy="destroyTBox", write="writeTBox"  })" headerText="Опис на документ" width="150"></e-grid-column>

                        <e-grid-column field="fileName" headerText="Име на фајл" width="105"></e-grid-column>

                        <e-grid-column field="created" headerText="Датум" width="80"></e-grid-column>

                        <e-grid-column field="userName" headerText="Креатор" width="80"></e-grid-column>

                        <e-grid-column field="sourceTable" visible="false" headerText="Source Table" width="0"></e-grid-column>

                        <e-grid-column field="folderName" visible="false" headerText="Folder Name" width="0"></e-grid-column>

                        <e-grid-column field="sourceKey" visible="false" headerText="Source Key" width="0"></e-grid-column>

                        <e-grid-column field="user_id" visible="false" headerText="File Description" width="0"></e-grid-column>

                        <e-grid-column commands="commandsDialogGrid" width="60"></e-grid-column>

                    </e-grid-columns>

                </ejs-grid>

            </e-content-template>

        </ejs-dialog>

        </div>

function commandClick(args) {

        sourceKey = args.rowData.training_id;

        var grid = document.getElementById("Grid1").ej2_instances[0];

        grid.query = new ej.data.Query().addParams('training_id', sourceKey);

        if (args.commandColumn.buttonOption.id === "attachButton") {

            var grid = document.getElementById("Grid1").ej2_instances[0];

            var dialog = document.getElementById("alert_dialog").ej2_instances[0];

            console.log(dialog);

            dialog.element.style.maxHeight = "600px"

            dialog.height = "500px";

            dialog.element.style.maxWidth = "1200px"

            dialog.width = "1200px";

            dialog.visible = true;

            grid.dataSource = new ej.data.DataManager({

                adaptor: new ejs.data.UrlAdaptor(),

                url: '/Training/DialogGridDataSource',

                insertUrl: '/Training/InsertAttachmentRecord',

                updateUrl: '/Training/UpdateAttachmentRecord',

                removeUrl: '/Training/RemoveAttachmentRecord'

            });

        }

    }

[Thiyagu Subramani]

Hi Tarik, 

  

Thanks for contacting Syncfusion forum. 

  

Based on your shared information we suspect that you are facing “Cannot read property 'classList' of undefined” when deleting a record from the Grid and when i click Cancel on the Delete Confirmation Dialog. 

 

We checked in our sample by rendering the grid inside the dialog but we unable to reproduce thereported issues at our end. Please refer to the below code and sample link. 

  

  

List<object> commands = new List<object>(); 

        commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } }); 

        commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } }); 

        commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } }); 

        commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } }); 

    

<ejs-dialog id="alert_dialog" showCloseIcon="true" visible="true" isModal="true" created="onLoadalert" width="750px" target="#target"> 

        <e-content-template> 

            <div> 

                <h5>Настан: <span id="trainingName"></span></h5> 

            </div> 

            <ejs-grid id="Grid2" allowPaging="true" load="onLoad" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })"> 

                . . . . .  . . 

                <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true" showDeleteConfirmDialog="true" mode="Dialog"></e-grid-editsettings> 

                <e-grid-columns> 

                    . . . . . . . . . . . . 

                    <e-grid-column headerText="Manage Records" width="150" commands="commands"></e-grid-column> 

                </e-grid-columns> 

            </ejs-grid> 

        </e-content-template> 

    </ejs-dialog> 

  

Sample link:  https://www.syncfusion.com/downloads/support/forum/166047/ze/UrlAdaptor-CRUD-NormatEdit163032629 

  

If still facing the issue, please share below details then only we provide the appropriate solution as soon as possible. 

  

1.  When running our sample we are facing “cannot read property matrix of undefined” in initial stage. Are you mentioning this issue or not? If yes, please confirm us. 

  

2. Syncfusion package version 

  

3. If possible, share issue reproducing sample or reproduce the issue in above sample. 

  

Regards, 

Thiyagu S