Grid refreshing after unsuccessful save
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) { 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" }); } } }); |
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: [ . . . . |
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.
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) { 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" }); } } }); |
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: [ . . . . |
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.
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.
