We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Grid refreshing after unsuccessful save

Thread ID:

Created:

Updated:

Platform:

Replies:

120757 Oct 12,2015 09:43 AM Oct 26,2015 12:22 AM LightSwitch HTML 16
loading
Tags: Grid
dr
Asked On October 12, 2015 09:43 AM

Hello!
I'm trying your community edition with Lightswitch html VS2013 and it seems nice at first.. However there are some issues I cannot solve..

I'd like to see an example of deleting records in grid with paging system on, like the situation where I delete one record at a time (and auto save), and also with multiple records getting deleted and then saved all in one transaction.. I did have some success with something similar but I cannot figure out how to restore deleted items from grid if save operation wasn't successful (like reference violation or user don't have rights to delete some record) and also how to return to the same page from where delete request was called (so if I'm on page 3 and I have deleted some records, I'd like to stay on page 3 after save)..

Thanks in advance!
Kivito


Gowthami V [Syncfusion]
Replied On October 13, 2015 02:23 AM

Hi Kivito,

Thanks for using Syncfusion products.

Query 1: How to restore deleted items from grid if save operation wasn't successful

We understood that you are using “batch” editing and call the “batchSave” method to save the changes after delete operation. 

We can restore the deleted items, when save operation is uncomplete using “batchCancel” method which will cancel the modified changes in Grid control when edit mode is “batch”.

Please refer to the Help document for “batchCancel” method.

http://help.syncfusion.com/js/api/ejgrid#methods:batchcancel

 

Query 2:  How to return to the same page from where delete request was called

 

We are unable to reproduce the issue and provide below details,

 

1.   Code example used for delete records and auto save it. 
 
2.   Details of editSettings used and Grid rendering code.
The provided information will help to analyze the issue and provide you the response as early as possible.

Regards,
Gowthami V.


dr
Replied On October 14, 2015 02:49 PM

Hi Gowthami!
Thanks for your response!
I didn't use batch mode, gonna try your suggestion..

Meanwhile I'm gonna prepare some sample..

Gowthami V [Syncfusion]
Replied On October 15, 2015 12:28 AM

Hi Kivito,

Try the given suggestion and prepare a sample at your end.

Please get back to us if you need further assistance.

Regards,
Gowthami V.


dr
Replied On October 19, 2015 04:17 AM

Hello!
I have tried with batch mode but I have an issue: upon returning to screen with grid I'm getting datagrid messagebox with question: Are you sure you want to save changes? (in attachment), this is not happening when normal edit mode is used.. My version is 13.0.2.29..

Here is code of the screen that I'm using:

myapp.SyncfusionPregledArtikala.Artikal_render = function (element, contentItem) {
   
    var itemTemplate = $("<div></div>").attr('id', 'Artikal');

    // Append the div element to screen 
    itemTemplate.appendTo($(element));

    //Have a global flag for add
    window.isAdd = false;

    contentItem.value.oncollectionchange = function () {

        /*Important - Used to prevent the oncollectionchange
           action on adding new record to vs collection*/
        if (window.isAdd) return;

        if (itemTemplate.hasClass('e-grid')) {
            itemTemplate.ejGrid('destroy');
        }
        var first = contentItem.children[0], fieldname = [];
        for (i = 0; i < first.children.length; i++) {
            fieldname[i] = { field: first.children[i].valueModel.name };
            if (fieldname[i].field === "Id") {
                fieldname[i] = {
                    field: "Id", isPrimaryKey: true, headerText: "Id",
                    textAlign: ej.TextAlign.Right, width: 90, visible: false
                }
            }
        }

        //Rendering the Grid Control
        itemTemplate.ejGrid(
            {
                dataSource: contentItem.value.data,
                actionBegin: function (args) {
                    if (args.requestType == "delete") {
                        contentItem.value.selectedItem = this.getSelectedRecords()[0];
                        //do something?
                    }
                },
                actionComplete: function (args) {
                    
                    if (args.requestType == "batchsave") {
                        if (window.isAdd)
                            window.isAdd = false;
                        myapp.activeDataWorkspace.ApplicationData.saveChanges().then($.proxy(function () {
                            this.refreshContent();
                        }, this));

                        myapp.applyChanges().then(
                            function (result) {
                                //save
                            },
                            function (errorResponse) {
                                msls.showMessageBox(errorResponse.message, {
                                title: errorResponse.title,
                                buttons: msls.MessageBoxButtons.ok
                            });
                        });
                    }
                },
                allowPaging: true,
                pageSettings: { pageSize: 10 }, 
                editSettings: {
                    allowEditing: true,
                    allowAdding: true,
                    allowDeleting: true,
                    allowEditOnDblClick: true,
                    editMode: ej.Grid.EditMode.Batch
                },
                toolbarSettings: {
                    showToolbar: true,
                    toolbarItems: [
                        ej.Grid.ToolBarItems.Add,
                        ej.Grid.ToolBarItems.Edit,
                        ej.Grid.ToolBarItems.Delete,
                        ej.Grid.ToolBarItems.Update,
                        ej.Grid.ToolBarItems.Cancel
                    ]
                },
                rowSelected: function (args) {
                    selectedData = args.data;
                },
                toolbarClick: function (args) {
                    switch (args.itemName) {
                        case "Add":
                            args.cancel = true;
                            myapp.showScreen("AddEditArtikli", null, {
                                beforeShown: function (addScreen) {
                                    var ord = new myapp.Artikal();
                                    addScreen.Artikal = ord;
                                }
                            });
                            break;
                        case "Edit":
                            if (!($.isEmptyObject(selectedData))) {
                                args.cancel = true;
                                myapp.showScreen("AddEditArtikli", [selectedData]);
                            }
                            break;
                        case "Delete":
                            contentItem.value.selectedItem = this.getSelectedRecords()[0];
                            if (!($.isEmptyObject(contentItem.value.selectedItem))) {
                                //args.cancel = true;
                                contentItem.value.deleteSelected(); //delete the records in grid
                            }
                            break;
                    }
                },
                //allowKeyboardNavigation: true,
                //enableAutoSaveOnSelectionChange: false,
                beforeBatchAdd: function (args) {
                    window.isAdd = true;
                },
                columns: fieldname
            });
    }
};

//refresh visual collection (for testing)
myapp.SyncfusionPregledArtikala.Osvjezi_kolekciju_execute = function (screen) {
    screen.Artikli.refresh(); 
};

//save changes
myapp.SyncfusionPregledArtikala.Spremi_promjene_execute = function (screen) {
    //myapp.applyChanges().then(
    //    function (result) {
    //        //save
    //    },
    //    function (errorResponse) {
    //        msls.showMessageBox(errorResponse.message, {
    //        title: errorResponse.title,
    //        buttons: msls.MessageBoxButtons.ok
    //    }).then(function (res) {
    //            //discarda sve promjene!
    //            screen.details.dataWorkspace.ApplicationData.details.discardChanges();
    //        //screen.Artikli.refresh();
    //        var gridObj = $("#Artikal").data("ejGrid"); //get the grid object;
    //        gridObj.batchCancel();
    //    });
    //});
    var gridObj = $("#Artikal").data("ejGrid"); //get the grid object;
    gridObj.batchSave();
};

//cancel changes
myapp.SyncfusionPregledArtikala.Ponisti_promjene_execute = function (screen) {
    screen.details.dataWorkspace.ApplicationData.details.discardChanges();
    var gridObj = $("#Artikal").data("ejGrid"); //get the grid object;
    gridObj.batchCancel();
};

bear with me that I'm novice in javascript and I switched from silverlight just recently..
When grid is in paging mode, does it load all items from collection or does it respect paging mechanism? Is it the same for batch and edit mode?
As fore delete issue: 
- try to go on ie. page 3, delete one item from the list and press save (on grid toolbar), it will save the grid but paging will jump on page 1, not stay on page 3.
I have requirement that should fit for batch edit mode - my customer wants to move around the grid with arrow/tab keys, perhaps I would need to implement save on page change and also bind that somehow to keyboard keys.. Thanks in advance..

Kivito

 


Attachment: Page_return_error_286999cd.7z

Gowthami V [Syncfusion]
Replied On October 20, 2015 02:51 AM

Hi Kivito,

Query 1: upon returning to screen with grid I'm getting datagrid messagebox with question: Are you sure you want to save changes?

While navigating the screens, the widgets are rendered without removing old widgets. It’s a light switch default behavior.
To resolve the issue we have removed the old widget (Removed grid) using below code example,

myapp.TimeDivisionsGridEditingTemplate.TimeDivision_render = function (element, contentItem) {    // Write code here.

$(document.getElementById("Artikal")).remove();

var itemTemplate = $("<div style='margin-right:15px'></div>").attr('id', 'Artikal')

. . . .

    // Append the div element to screen
    itemTemplate.appendTo($(element));
.  .  .  .
. . . .

  }
};


Query 2: When grid is in paging mode, does it load all items from collection or does it respect paging mechanism? Is it the same for batch and edit mode?

While rendering grid with paging, the data are loaded for corresponding page based on the pageSize when changing the page dynamically. It same for both normal and batch edit mode.

Refer to the below link for more clarification about paging,

http://help.syncfusion.com/js/api/ejgrid#members:allowpaging

The grid will render with the screen data initially loaded from visual collection(contentItem.value.data) and paging will be applied to that data.

 
Query 3:  try to go on ie. page 3, delete one item from the list and press save (on grid toolbar), it will save the grid but paging will jump on page 1, not stay on page 3.

As in your code example we have tried and for deleting you have used user defined method “deleteSelected” and could not find the definition for that method.

Please provide code example that you have used for delete the records (deleteSelected method) and the provided information will help to analyze the issue and provide you the response as early as possible.

Query 4: I have requirement that should fit for batch edit mode 

We can achieve your requirement “need to implement save on page change” by calling the “batchSave” method in “actionComplete” event of the grid as follows,

. . . .

. . . .


itemTemplate.ejGrid(
            {
  actionComplete: function (args) {
. . . .

if (args.requestType == "paging")

                        this.batchSave();
                },
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode: "batch", showConfirmDialog: false },
. . . .
. . . .

  });

    }
};


We can save the changes directly without showing the “confirmDialog” by set the “showConfirmDialog” property of the grid as false.

We can do the paging using keys “pgUp” and “pgDn” by enable the property “allowKeyboardNavigation” as follows,

itemTemplate.ejGrid(
            {
. . . .
allowKeyboardNavigation: true,
. . . .
. . . .

});

    }
};


Please refer to the below online demo link for more clarification,

http://js.syncfusion.com/demos/web/#!/azure/grid/KeyboardInteraction

Regards,

Gowthami V.

dr
Replied On October 20, 2015 05:19 AM

Hi Gowthami! Thank you for your time!

As for: 
1) - now it works by code you provided, it is silly that I have tied something similar but didn't have success..
3) - "deleteSelected();" is Lightswitch metod on VisualCollection - like "screen.Customers.deleteSelected();" - it is provided under toolbar click action.. I'd alos like a way to provide LS messagebox to inform user if save isn't successful (getting some progress with that)..

Does the way how grid operates changes with the type of screens used? 
In example: I'm also trying something similar for master-detail screens (on add/edit screen type with integrated buttons for save/cancel so save is triggered directly from the screen) where ejGrid displays child (details) data and also have big problems with deleting records, most of times VS2013 just hangs and crashes and events in actionBegin for delete operation (toolbar click on delete) seems to not trigger at all (I can also provide code listings for that screen).. Thanks again!

Kivito


dr
Replied On October 20, 2015 05:23 AM

I would also be thankful if you can provide explanation and example how to use grid with navigation properties (orderdetails - product.name in one of columns) I have manually created columns and give it this definition: { field: "Artikal.Naziv", headerText: "Artikal", width: 120, allowEditing: false } - is this the preferred way?.. Thanks!

Kivito

Gowthami V [Syncfusion]
Replied On October 21, 2015 07:55 AM

Hi Kivito,

Query 1: "deleteSelected();" is Lightswitch metod on VisualCollection - like "screen.Customers.deleteSelected();"

We have misunderstood your requirement and provided the previous update for Query 3.

While deleting the record using “deleteSelected” method then the grid data refreshed and so the it moved to first page.

We can resolve this by passing the current page number to gotoPage method of the grid as follows,

itemTemplate.ejGrid(
           {
. . . .
. . . .

  toolbarClick: function (args) {
                   switch (args.itemName) {
. . . .
. . . .

case "Delete":

                          contentItem.value.selectedItem = this.getSelectedRecords()[0];

                            var currentPage = this.model.pageSettings.currentPage;

                           if (!($.isEmptyObject(contentItem.value.selectedItem))) {

                               args.cancel = true;

                               contentItem.value.deleteSelected(); //delete the records in grid

                               myapp.commitChanges().then(function success() {

                                   // If success.

                                   var grid = $(".e-grid").data("ejGrid");

                                   grid.gotoPage(currentPage);

                                   msls.showMessageBox("Delete is successfull.", { title: "Delete" });
                               }, function fail(e) {
. . . .
. . . .

  }

               }

           });
    }


Query 2:  VS2013 just hangs and crashes and events in actionBegin for delete operation (toolbar click on delete) seems to not trigger at all

While setting editMode as “batch” then the actionBegin and actionComplete event will not trigger for batch editing.

Instead of “actionBegin” and “actionComplete” event while enable batch delete then it will trigger “beforeBatchDelete” and “batchDelete” events respectively.

http://help.syncfusion.com/js/api/ejgrid#events:batchdelete

Query 3: I would also be thankful if you can provide explanation and example how to use grid with navigation properties 

If you want to define the columns with navigation properties manually, then the code that you have used correct.

Also we can display related entity/foreign field value in Essential Grid by eager loading the related data. To do so, we need to modify the query of the screen data to include those relations at the initial query execution itself. Please refer the following steps to eager load the relational data.

 In the screen click the Edit Query section.

 

2. Now, from the properties window of the screen, click Manage Included Data.

 

3.
Now you can see the window as below, here the entities related to the Order table(in our case) will be listed and change the status as Included of the corresponding relation. In the below, the Customer table is included and hence Customer table data will also be requested on querying Order table using $expand.

 


With the above modifications, the request to the server will be as follows.

 


4. Now in the grid, to display the CustomerID (Naziv) field from Customer (Artikal) table, we have to provide the field name as Customer.CustomerID (Artikal.Naziv), it is the way to specify the complex data properties in grid.


itemTemplate.ejGrid({

. . . . . 

         columns: [                                                  

                       . . . .
                  { field: "Customer.CustomerID", headerText: "Customer Name"},
]
});


Also We can use the following method to auto-generate the column name for the related entities. 

contentItem.value.oncollectionchange = function () {


        if (itemTemplate.hasClass('e-grid')) {

            itemTemplate.ejGrid('destroy');

        }

        var first = contentItem.children[0], fieldname = [];


        for (i = 0; i < first.children.length; i++) {           

//Modify the field name generation code from the screen

            if (first.children[i].children.length) /*check for related entities*/

                ej.merge(fieldname, getColumnName(first.children[i]));

            else

                fieldname[i] = { field: first.children[i].valueModel.name, width: 50 };

            

        }

      

        //Rendering the Grid Control

        itemTemplate.ejGrid(

            {

                dataSource: contentItem.value.data,

                columns:fieldname

            });
}

//Util to auto-generate the columns with complex property field names.

function getColumnName(input) {

    var name = input.name, cols = [], htxt;

    for (var i = 0, n = name; i < input.children.length;n = name, i++) {

        n = [n, input.children[i].name].join(".");               

        cols[i] = { field: n, headerText: input.children[i].displayName, width: 50 };

    }

    return cols;
}


With the above steps, the field name for the related entities will be concatenated with period (.), for example, the CustomerID (Naziv) from Customer (Artikal) entity will be represented as Customer.CustomerID (“Artikal.Naziv”). So that now the grid can bind with the eager loaded related entities properly. 

Regards,
Gowthami V.

Gowthami V [Syncfusion]
Replied On October 21, 2015 08:27 AM

Hi Kivito,
Please ignore the previous update.

Query 1: "deleteSelected();" is Lightswitch metod on VisualCollection - like "screen.Customers.deleteSelected();"

We have misunderstood your requirement and provided the previous update for Query 3.

While deleting the record using “deleteSelected” method then the grid data refreshed and so the it moved to first page. 

We can resolve this by passing the current page number to gotoPage method of the grid as follows,


itemTemplate.ejGrid(
           {
. . . .
. . . .

  toolbarClick: function (args) {
                   switch (args.itemName) {
. . . .
. . . .

case "Delete":

                          contentItem.value.selectedItem = this.getSelectedRecords()[0];

                            var currentPage = this.model.pageSettings.currentPage;

                           if (!($.isEmptyObject(contentItem.value.selectedItem))) {

                               args.cancel = true;

                               contentItem.value.deleteSelected(); //delete the records in grid

                               myapp.commitChanges().then(function success() {

                                   // If success.

                                   var grid = $(".e-grid").data("ejGrid");

                                   grid.gotoPage(currentPage);

                                   msls.showMessageBox("Delete is successfull.", { title: "Delete" });
                               }, function fail(e) {
. . . .
. . . .

  }

               }

           });
    }



Query 2:  VS2013 just hangs and crashes and events in actionBegin for delete operation (toolbar click on delete) seems to not trigger at all

While setting editMode as “batch” then the actionBegin and actionComplete event will not trigger for batch editing.

Instead of “actionBegin” and “actionComplete” event while enable batch delete then it will trigger “beforeBatchDelete” and “batchDelete” events respectively.

http://help.syncfusion.com/js/api/ejgrid#events:batchdelete

Query 3: I would also be thankful if you can provide explanation and example how to use grid with navigation properties 

If you want to define the columns with navigation properties manually, then the code that you have used correct. 

Also we can display related entity/foreign field value in Essential Grid by eager loading the related data. To do so, we need to modify the query of the screen data to include those relations at the initial query execution itself. Please refer the following steps to eager load the relational data.

1. In the screen click the Edit Query section.




2. Now, from the properties window of the screen, click Manage Included Data.


  

3. 
Now you can see the window as below, here the entities related to the Order table(in our case) will be listed and change the status as Included of the corresponding relation. In the below, the Customer table is included and hence Customer table data will also be requested on querying Order table using $expand.





With the above modifications, the request to the server will be as follows.



  



4. Now in the grid, to display the CustomerID (Naziv) field from Customer (Artikal) table, we have to provide the field name as Customer.CustomerID (Artikal.Naziv), it is the way to specify the complex data properties in grid.


itemTemplate.ejGrid({

. . . . . 

         columns: [                                                  

                       . . . .
                  { field: "Customer.CustomerID", headerText: "Customer Name"},
]
});



Also We can use the following method to auto-generate the column name for the related entities. 

contentItem.value.oncollectionchange = function () {


        if (itemTemplate.hasClass('e-grid')) {

            itemTemplate.ejGrid('destroy');

        }

        var first = contentItem.children[0], fieldname = [];


        for (i = 0; i < first.children.length; i++) {           

//Modify the field name generation code from the screen

            if (first.children[i].children.length) /*check for related entities*/

                ej.merge(fieldname, getColumnName(first.children[i]));

            else

                fieldname[i] = { field: first.children[i].valueModel.name, width: 50 };

            

        }

      

        //Rendering the Grid Control

        itemTemplate.ejGrid(

            {

                dataSource: contentItem.value.data,

                columns:fieldname

            });
}

//Util to auto-generate the columns with complex property field names.

function getColumnName(input) {

    var name = input.name, cols = [], htxt;

    for (var i = 0, n = name; i < input.children.length;n = name, i++) {

        n = [n, input.children[i].name].join(".");               

        cols[i] = { field: n, headerText: input.children[i].displayName, width: 50 };

    }

    return cols;
}



With the above steps, the field name for the related entities will be concatenated with period (.), for example, the CustomerID (Naziv)from Customer (Artikal) entity will be represented as Customer.CustomerID (“Artikal.Naziv”). So that now the grid can bind with the eager loaded related entities properly. 

Regards,


Gowthami V.



Gowthami V [Syncfusion]
Replied On October 21, 2015 08:42 AM

Hi Kivito,
Please ignore the previous update.

Query 1: "deleteSelected();" is Lightswitch metod on VisualCollection - like "screen.Customers.deleteSelected();"

We have misunderstood your requirement and provided the previous update for Query 3.

While deleting the record using “deleteSelected” method then the grid data refreshed and so the it moved to first page. 

We can resolve this by passing the current page number to gotoPage method of the grid as follows,


itemTemplate.ejGrid(
           {
. . . .
. . . .

  toolbarClick: function (args) {
                   switch (args.itemName) {
. . . .
. . . .

case "Delete":

                          contentItem.value.selectedItem = this.getSelectedRecords()[0];

                            var currentPage = this.model.pageSettings.currentPage;

                           if (!($.isEmptyObject(contentItem.value.selectedItem))) {

                               args.cancel = true;

                               contentItem.value.deleteSelected(); //delete the records in grid

                               myapp.commitChanges().then(function success() {

                                   // If success.

                                   var grid = $(".e-grid").data("ejGrid");

                                   grid.gotoPage(currentPage);

                                   msls.showMessageBox("Delete is successfull.", { title: "Delete" });
                               }, function fail(e) {
. . . .
. . . .

  }

               }

           });
    }


Query 2:  VS2013 just hangs and crashes and events in actionBegin for delete operation (toolbar click on delete) seems to not trigger at all

While setting editMode as “batch” then the actionBegin and actionComplete event will not trigger for batch editing.

Instead of “actionBegin” and “actionComplete” event while enable batch delete then it will trigger “beforeBatchDelete” and “batchDelete” events respectively.

http://help.syncfusion.com/js/api/ejgrid#events:batchdelete

Query 3: I would also be thankful if you can provide explanation and example how to use grid with navigation properties 

If you want to define the columns with navigation properties manually, then the code that you have used correct. 

Also we can display related entity/foreign field value in Essential Grid by eager loading the related data. To do so, we need to modify the query of the screen data to include those relations at the initial query execution itself. Please refer the following steps to eager load the relational data.

1. In the screen click the Edit Query (screenshot 1) section.

2. Now, from the properties window (screenshot 2) of the screen, click Manage Included Data.
  

3. 
Now you can see the window as in the screenshot 3, here the entities related to the Order table(in our case) will be listed and change the status as Included of the corresponding relation. In the below, the Customer table is included and hence Customer table data will also be requested on querying Order table using $expand.


4. With the above modifications, the request to the server will be send as in the screenshot 4.


 

5. Now in the grid, to display the CustomerID (Naziv) field from Customer (Artikal) table, we have to provide the field name as Customer.CustomerID (Artikal.Naziv), it is the way to specify the complex data properties in grid.


itemTemplate.ejGrid({

. . . . . 

         columns: [                                                  

                       . . . .
                  { field: "Customer.CustomerID", headerText: "Customer Name"},
]
});


Also We can use the following method to auto-generate the column name for the related entities. 

contentItem.value.oncollectionchange = function () {


        if (itemTemplate.hasClass('e-grid')) {

            itemTemplate.ejGrid('destroy');

        }

        var first = contentItem.children[0], fieldname = [];


        for (i = 0; i < first.children.length; i++) {           

//Modify the field name generation code from the screen

            if (first.children[i].children.length) /*check for related entities*/

                ej.merge(fieldname, getColumnName(first.children[i]));

            else

                fieldname[i] = { field: first.children[i].valueModel.name, width: 50 };

            

        }

      

        //Rendering the Grid Control

        itemTemplate.ejGrid(

            {

                dataSource: contentItem.value.data,

                columns:fieldname

            });
}

//Util to auto-generate the columns with complex property field names.

function getColumnName(input) {

    var name = input.name, cols = [], htxt;

    for (var i = 0, n = name; i < input.children.length;n = name, i++) {

        n = [n, input.children[i].name].join(".");               

        cols[i] = { field: n, headerText: input.children[i].displayName, width: 50 };

    }

    return cols;
}


With the above steps, the field name for the related entities will be concatenated with period (.), for example, the CustomerID (Naziv)from Customer (Artikal) entity will be represented as Customer.CustomerID (“Artikal.Naziv”). So that now the grid can bind with the eager loaded related entities properly. 

Regards,
Gowthami V.



Gowthami V [Syncfusion]
Replied On October 21, 2015 08:45 AM

Hi Kivito,
Please ignore the previous update.

Query 1: "deleteSelected();" is Lightswitch metod on VisualCollection - like "screen.Customers.deleteSelected();"

We have misunderstood your requirement and provided the previous update for Query 3.

While deleting the record using “deleteSelected” method then the grid data refreshed and so the it moved to first page. 

We can resolve this by passing the current page number to gotoPage method of the grid as follows,


itemTemplate.ejGrid(
           {
. . . .
. . . .

  toolbarClick: function (args) {
                   switch (args.itemName) {
. . . .
. . . .

case "Delete":

                          contentItem.value.selectedItem = this.getSelectedRecords()[0];

                            var currentPage = this.model.pageSettings.currentPage;

                           if (!($.isEmptyObject(contentItem.value.selectedItem))) {

                               args.cancel = true;

                               contentItem.value.deleteSelected(); //delete the records in grid

                               myapp.commitChanges().then(function success() {

                                   // If success.

                                   var grid = $(".e-grid").data("ejGrid");

                                   grid.gotoPage(currentPage);

                                   msls.showMessageBox("Delete is successfull.", { title: "Delete" });
                               }, function fail(e) {
. . . .
. . . .

  }

               }

           });
    }


Query 2:  VS2013 just hangs and crashes and events in actionBegin for delete operation (toolbar click on delete) seems to not trigger at all

While setting editMode as “batch” then the actionBegin and actionComplete event will not trigger for batch editing.

Instead of “actionBegin” and “actionComplete” event while enable batch delete then it will trigger “beforeBatchDelete” and “batchDelete” events respectively.

http://help.syncfusion.com/js/api/ejgrid#events:batchdelete

Query 3: I would also be thankful if you can provide explanation and example how to use grid with navigation properties 

If you want to define the columns with navigation properties manually, then the code that you have used correct. 

Also we can display related entity/foreign field value in Essential Grid by eager loading the related data. To do so, we need to modify the query of the screen data to include those relations at the initial query execution itself. Please refer the following steps to eager load the relational data.

1. In the screen click the Edit Query (screenshot 1) section.

2. Now, from the properties window (screenshot 2) of the screen, click Manage Included Data.
  

3. 
Now you can see the window as in the screenshot 3, here the entities related to the Order table(in our case) will be listed and change the status as Included of the corresponding relation. In the below, the Customer table is included and hence Customer table data will also be requested on querying Order table using $expand.


4. With the above modifications, the request to the server will be send as in the screenshot 4.



5. Now in the grid, to display the CustomerID (Naziv) field from Customer (Artikal) table, we have to provide the field name as Customer.CustomerID (Artikal.Naziv), it is the way to specify the complex data properties in grid.


itemTemplate.ejGrid({

. . . . . 

         columns: [                                                  

                       . . . .
                  { field: "Customer.CustomerID", headerText: "Customer Name"},
]
});


Also We can use the following method to auto-generate the column name for the related entities. 

contentItem.value.oncollectionchange = function () {


        if (itemTemplate.hasClass('e-grid')) {

            itemTemplate.ejGrid('destroy');

        }

        var first = contentItem.children[0], fieldname = [];


        for (i = 0; i < first.children.length; i++) {           

//Modify the field name generation code from the screen

            if (first.children[i].children.length) /*check for related entities*/

                ej.merge(fieldname, getColumnName(first.children[i]));

            else

                fieldname[i] = { field: first.children[i].valueModel.name, width: 50 };

            

        }

      

        //Rendering the Grid Control

        itemTemplate.ejGrid(

            {

                dataSource: contentItem.value.data,

                columns:fieldname

            });
}

//Util to auto-generate the columns with complex property field names.

function getColumnName(input) {

    var name = input.name, cols = [], htxt;

    for (var i = 0, n = name; i < input.children.length;n = name, i++) {

        n = [n, input.children[i].name].join(".");               

        cols[i] = { field: n, headerText: input.children[i].displayName, width: 50 };

    }

    return cols;
}


With the above steps, the field name for the related entities will be concatenated with period (.), for example, the CustomerID (Naziv)from Customer (Artikal) entity will be represented as Customer.CustomerID (“Artikal.Naziv”). So that now the grid can bind with the eager loaded related entities properly. 

Regards,
Gowthami V.



Gowthami V [Syncfusion]
Replied On October 21, 2015 08:48 AM

Hi Kivito,
Please ignore the previous update.

Query 1: "deleteSelected();" is Lightswitch metod on VisualCollection - like "screen.Customers.deleteSelected();"

We have misunderstood your requirement and provided the previous update for Query 3.

While deleting the record using “deleteSelected” method then the grid data refreshed and so the it moved to first page. 

We can resolve this by passing the current page number to gotoPage method of the grid as follows,


itemTemplate.ejGrid(
           {
. . . .
. . . .

  toolbarClick: function (args) {
                   switch (args.itemName) {
. . . .
. . . .

case "Delete":

                          contentItem.value.selectedItem = this.getSelectedRecords()[0];

                            var currentPage = this.model.pageSettings.currentPage;

                           if (!($.isEmptyObject(contentItem.value.selectedItem))) {

                               args.cancel = true;

                               contentItem.value.deleteSelected(); //delete the records in grid

                               myapp.commitChanges().then(function success() {

                                   // If success.

                                   var grid = $(".e-grid").data("ejGrid");

                                   grid.gotoPage(currentPage);

                                   msls.showMessageBox("Delete is successfull.", { title: "Delete" });
                               }, function fail(e) {
. . . .
. . . .

  }

               }

           });
    }


Query 2:  VS2013 just hangs and crashes and events in actionBegin for delete operation (toolbar click on delete) seems to not trigger at all

While setting editMode as “batch” then the actionBegin and actionComplete event will not trigger for batch editing.

Instead of “actionBegin” and “actionComplete” event while enable batch delete then it will trigger “beforeBatchDelete” and “batchDelete” events respectively.

http://help.syncfusion.com/js/api/ejgrid#events:batchdelete

Query 3: I would also be thankful if you can provide explanation and example how to use grid with navigation properties 

If you want to define the columns with navigation properties manually, then the code that you have used correct. 

Also we can display related entity/foreign field value in Essential Grid by eager loading the related data. To do so, we need to modify the query of the screen data to include those relations at the initial query execution itself. Please refer the following steps to eager load the relational data.

1. In the screen click the Edit Query (screenshot 1) section.



2. Now, from the properties window (screenshot 2) of the screen, click Manage Included Data.
  

3. 
Now you can see the window as in the screenshot 3, here the entities related to the Order table(in our case) will be listed and change the status as Included of the corresponding relation. In the below, the Customer table is included and hence Customer table data will also be requested on querying Order table using $expand.


4. With the above modifications, the request to the server will be send as in the screenshot 4.

Screenshot for the above steps.

Screenshot Link: http://www.syncfusion.com/downloads/support/forum/120757/ze/screenshot-618776699


5. Now in the grid, to display the CustomerID (Naziv) field from Customer (Artikal) table, we have to provide the field name as Customer.CustomerID (Artikal.Naziv), it is the way to specify the complex data properties in grid.


itemTemplate.ejGrid({

. . . . . 

         columns: [                                                  

                       . . . .
                  { field: "Customer.CustomerID", headerText: "Customer Name"},
]
});


Also We can use the following method to auto-generate the column name for the related entities. 

contentItem.value.oncollectionchange = function () {


        if (itemTemplate.hasClass('e-grid')) {

            itemTemplate.ejGrid('destroy');

        }

        var first = contentItem.children[0], fieldname = [];


        for (i = 0; i < first.children.length; i++) {           

//Modify the field name generation code from the screen

            if (first.children[i].children.length) /*check for related entities*/

                ej.merge(fieldname, getColumnName(first.children[i]));

            else

                fieldname[i] = { field: first.children[i].valueModel.name, width: 50 };

            

        }

      

        //Rendering the Grid Control

        itemTemplate.ejGrid(

            {

                dataSource: contentItem.value.data,

                columns:fieldname

            });
}

//Util to auto-generate the columns with complex property field names.

function getColumnName(input) {

    var name = input.name, cols = [], htxt;

    for (var i = 0, n = name; i < input.children.length;n = name, i++) {

        n = [n, input.children[i].name].join(".");               

        cols[i] = { field: n, headerText: input.children[i].displayName, width: 50 };

    }

    return cols;
}


With the above steps, the field name for the related entities will be concatenated with period (.), for example, the CustomerID (Naziv)from Customer (Artikal) entity will be represented as Customer.CustomerID (“Artikal.Naziv”). So that now the grid can bind with the eager loaded related entities properly. 

Regards,
Gowthami V.



dr
Replied On October 22, 2015 06:41 AM

Hi Gowthami!

This was very informative! I did have some progress, despite it still doesn't do what I want, but this was really helpful! I have attached my sample test project to better explain what's happening, it is enough commented so I hope it will be clear to you what I want to achieve.. Just run it, there is Syncfusion grid on menu.. 
btw on how many ways is possible find grid control? :) Thanks!

Kivito



Attachment: SYF2_9525edd0.7z

Gowthami V [Syncfusion]
Replied On October 23, 2015 03:37 PM

Hi Kivito,
Query 1: I made it to work with single entity delete but what if I want to work with change set?
We have analyzed your code example and we found that you have deleted the multiple records (collection) using deleteEntity method.
But we can delete only delete the single entity at a time. So we have used foreach loop for deleting multiple entities.
Refer to the below modified code example,

itemTemplate.ejGrid(

            {

. . . .

  toolbarClick: function (args) {

. . . .

. . . .

case "Delete":

. . . .

  contentItem.value.selectedItem = dgrid.getSelectedRecords();

 . .. .

msls.showMessageBox("Delete record? This cannot be undone!", {

                                title: "Delete record?",

                                buttons: msls.MessageBoxButtons.yesNo,

                                defaultResult: msls.MessageBoxResult.no

                            }).then(function (result) {

                                if (result === msls.MessageBoxResult.yes) {

                                    if (!($.isEmptyObject(contentItem.value.selectedItem)) && !($.isPlainObject(contentItem.value.selectedItem))) {

                                        //delete the records in grid

                                   

                               contentItem.value.selectedItem.forEach(function (item) {

                                            item.deleteEntity();

                                      

                                        //calling the applyChanges after deleting each entity

                                        myapp.applyChanges().then(

                                            function () {

. . . .

. . . .

. . . .

});

                                            });

                                        });

                                    };

                                }

. . .  .

. . . .

},

            });

    }

}



Query 2: if this is not commented it seems that it works fine but it leaves change marks in grid.
In batch editing red indicator denotes the batch changes not completed the save action.
We can remove the red indicator by calling the batchSave method of the grid before calling applyChanges method as follows,

itemTemplate.ejGrid(

            {

. . . .

. . . .

toolbarClick: function (args) {

                    var dgrid = this;

. . . .

. . . .

case "Update":

. . . .

args.cancel = true;

                           

                            this.batchSave();

                            myapp.applyChanges().then(null,

                                    function (errorResponse) {

. . . .

. . . .

  });

                                    });

                            break;

},

            });

    }

}



We have modified your sample with the above changes and the same can be downloaded from the following link,
http://www.syncfusion.com/downloads/support/forum/120757/ze/SYF2-22377711
Query 3: save and cancel buttons are not enabled any more if you change page!
The actionBegin event will trigger when the action getting started. So when change the page after editing/deleting the record then the batchChanges of the previous page can be get in actionBegin event.
After moving to the next page then the previous page batchChanges will not be maintained in the next page. So that the cancel and save icon were not enabled.
The save and cancel icon, enable/disable depends on the current page changes and not depends on the total records.
We can save the batchChanges of previous page while moving to the next page using “batchSave” method. Even if you are enable/ disable the button manually then it will not handle the batchChange details.
Query 4: It would be nice to be able to also add new records directly in grid
We can add the new row to the grid by set “allowAdding” as “true” of editSettings property.
By default we have provided support adding the record in the grid directly as in the below screenshot,

Refer to the below LightSwitch online demo sample (with normal editing mode) for more clarification,
http://js.syncfusion.com/demos/LightSwitch/HTMLClient/#e7edf1155
Regards,
Gowthami V.

dr
Replied On October 24, 2015 03:56 AM

Thanks Gowthami!
I'm gonna try your solution and check back..

Kivito

Gowthami V [Syncfusion]
Replied On October 26, 2015 12:22 AM

Hi Kivito,
 
Try our solution and get back to us if you need further assistance.
 
Regards,
Gowthami V.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;