When I click the detail row , it disappear , and a white background appear , I wonder what is the problem.
Note : I'm working with a custom detail with list
Like
this is my code
define("StFriendAndFamilyNumbersDetail", ["StFriendAndFamilyDetailResources", "ConfigurationGrid", "ConfigurationGridGenerator",
"ConfigurationGridUtilities", "StServiceViewModel", "css!StServiceDetailCSS"], function (resources) {
var detailData =[];
var isAddMode =false;
var isFirstTime = true;
return {
entitySchemaName: "StFriendAndFamilyDetail",
mixins: {
ConfigurationGridUtilities: "Terrasoft.ConfigurationGridUtilities"
},
attributes: {
"StNameFilter": {
"dataValueType": Terrasoft.DataValueType.TEXT
},
"IsEditable": {
"dataValueType": Terrasoft.DataValueType.BOOLEAN,
"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
"value": false
},
"PageNumber": {
"dataValueType": Terrasoft.DataValueType.INTERGER,
"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
"value": 0
},
"NumberOfRecords": {
"dataValueType": Terrasoft.DataValueType.INTERGER,
"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
"value": 15
}
},
methods: {
sortColumn: this.Terrasoft.emptyFn,
loadGridData: this.Terrasoft.emptyFn,
loadFilter: function () {
this.set("PageNumber", 0);
var gridData = this.getGridData();
if (gridData) {
gridData.clear();
this.set("IsDetailCollapsed", false);
this.loadSearchItems(
this.get("StNameFilter"),
this.get("PageNumber"),
this.get("NumberOfRecords"),
gridData
);
}
},
loadMore: function () {
var pageNumber = this.get("PageNumber");
this.set("PageNumber", ++pageNumber);
var gridData = this.getGridData();
if (gridData) {
this.loadSearchItems(
this.get("StNameFilter"),
this.get("PageNumber"),
this.get("NumberOfRecords"),
gridData
);
}
},
generateActiveRowControlsConfig: function (id, columnsConfig, rowConfig) {
debugger;
this.columnsConfig = columnsConfig;
var gridLayoutItems = [];
var currentColumnIndex = 0;
this.Terrasoft.each(columnsConfig, function (columnConfig) {
var columnName = columnConfig.key[0].name.bindTo;
var column = this.getColumnByColumnName(columnName);
var cellConfig = this.getCellControlsConfig(column);
cellConfig = this.Ext.apply({
layout: {
colSpan: columnConfig.cols,
column: currentColumnIndex,
row: 0,
rowSpan: 1
}
}, cellConfig);
/* if (cellConfig.name === "StServiceParams") {
this.set("ComboBoxCollection", new this.Terrasoft.Collection());
cellConfig.contentType = Terrasoft.ContentType.ENUM;
cellConfig = this.Ext.apply({
controlConfig: {
list: {
bindTo: "ComboBoxCollection"
},
prepareList: {
bindTo: "getComboBoxItems"
},
change: {
bindTo: "ontServiceParamsChange"
}
}
}, cellConfig);
cellConfig.enabled = true;
}
else {
cellConfig.enabled = false;
}*/
gridLayoutItems.push(cellConfig);
currentColumnIndex += columnConfig.cols;
}, this);
var gridData = this.getGridData();
var activeRow = gridData.get(id);
var options = activeRow.values;
activeRow.setOptions(options);
var viewGenerator = this.Ext.create("Terrasoft.ViewGenerator");
viewGenerator.viewModelClass = { prototype: this };
var gridLayoutConfig = viewGenerator.generateGridLayout({
name: this.name,
items: gridLayoutItems
});
console.log(gridLayoutConfig);
rowConfig.push(gridLayoutConfig);
},
/* onSubmitDetail: function () {
var selectedRows = this.get("SelectedRows");
if (selectedRows && selectedRows.length > 0) {
for (var i = 0; i < selectedRows.length; i++) {
var selectedItem = this.getGridData().collection.getByKey(selectedRows[i]);
}
debugger;
// TODO selected items processing logic
}
else {
this.showInformationDialog("There isn't any selected item");
}
},*/
init: function (callback, scope) {
this.set("PageNumber", 0);
this.callParent([
function () {
var gridData = this.getGridData();
if (gridData) {
gridData.clear();
this.set("IsDetailCollapsed", false);
this.loadSearchItems( null, this.get("PageNumber"),
this.get("NumberOfRecords"), gridData);
}
callback.call(scope);
}, this
]);
this.sandbox.subscribe("SendDetailData", function (arg) {
debugger;
detailData = arg.array;
this.UpdateRatePlanServices();
}, this, ["SendDetailDataKey"]);
this.sandbox.subscribe("GetDetailData", function (arg) {
debugger;
var gridData = this.getGridData();
var array=[];
if(isFirstTime){
isFirstTime=false;
for (var i = 0; i < gridData.collection.items.length; i++) {
var item = gridData.collection.items[i];
var obj={};
obj.Id = item.values.StId;
obj.PhoneNumber = item.values.StPhoneNumber;
obj.ContractId = item.values.StContractId;
array.push(obj);
}
return array;
}else{
return detailData;
}
}, this, ["GetDetailDataKey"]);
},
onDetailCollapsedChanged: function () {
this.callParent(arguments);
if (!this.get("IsDetailCollapsed")) {
this.set("PageNumber", 0);
var gridData = this.getGridData();
if (gridData) {
gridData.clear();
this.loadSearchItems( null, this.get("PageNumber"),
this.get("NumberOfRecords"), gridData);
}
}
},
loadSearchItems: function (nameFltr, pageNb, nbOfRecords, gridData) {
debugger;
var contractId = this.sandbox.publish("GetContractIDMessage", null, ["GetContractIDMessageKey"]);
this.set("MaskId", Terrasoft.Mask.show({ timeout: 0 }));
this.set("IsGridEmpty", true);
this.set("IsGridLoading", true);
this.set("IsGridDataLoaded", false);
if(detailData == null || detailData == "" || detailData == []){
var serviceConfig = {
serviceName: "StContractManagerService",
methodName: "GetFriendAndFamilyNumbers",
timeout: 120000,
data: {
contractId: contractId
}
};
isAddMode = false;
}else{
var serviceConfig = {
serviceName: "StContractManagerService",
methodName: "ConstructFriendAndFamilyDetail",
timeout: 120000,
data: {
array: JSON.stringify(detailData)
}
};
isAddMode = true;
}
this.callService(serviceConfig, function (responseJson) {
this.set("IsGridLoading", false);
this.set("IsGridDataLoaded", true);
if (!this.Ext.isEmpty(responseJson)) {
if(!isAddMode){
var response = this.Ext.decode(responseJson.GetFriendAndFamilyNumbersResult);
}else{
var response = this.Ext.decode(responseJson.ConstructFriendAndFamilyDetailResult);
}
if (response.success) {
console.log(response);
if (response.rowsAffected > 0) {
this.set("IsGridEmpty", false);
this.set("CanLoadMoreData", response.canShowMore);
var esq = this.Ext.create("Terrasoft.EntitySchemaQuery", {
rootSchemaName: "StFriendAndFamilyDetail",
rowViewModelClassName: "Terrasoft.StServiceViewModel"
});
esq.parseResponse(response, function (result) {
if (result.success) {
console.log(result);
var resultCollection = result.collection;
resultCollection.each(function (item) {
item.init(this);
}, this);
gridData.loadAll(result.collection);
this.prepareResponseCollection(resultCollection);
Terrasoft.Mask.hide(this.get("MaskId"));
}
else {
this.showInformationDialog(result.errorInfo);
Terrasoft.Mask.hide(this.get("MaskId"));
}
}, this);
}
else {
this.set("CanLoadMoreData", false);
Terrasoft.Mask.hide(this.get("MaskId"));
}
}
else {
this.set("CanLoadMoreData", false);
this.showInformationDialog(response.errorInfo.message);
Terrasoft.Mask.hide(this.get("MaskId"));
}
}
}, this);
},
UpdateRatePlanServices: function(){
var gridData = this.getGridData();
if (gridData) {
gridData.clear();
this.set("IsDetailCollapsed", false);
this.loadSearchItems( null, this.get("PageNumber"),
this.get("NumberOfRecords"), gridData);
}
},
onActiveRowAction: function (buttonTag,primaryColumnValue) {
debugger;
switch (buttonTag) {
case "someButton":
//this.onSomeButtonClicked(primaryColumnValue);
break;
default:
break;
}
},
},
messages: {
"SendDetailData": {
mode: Terrasoft.MessageMode.PTP,
direction: Terrasoft.MessageDirectionType.SUBSCRIBE
},
"GetDetailData":
{
mode: Terrasoft.MessageMode.PTP,
direction: Terrasoft.MessageDirectionType.SUBSCRIBE
},
"GetContractIDMessage": {
mode: Terrasoft.MessageMode.PTP,
direction: Terrasoft.MessageDirectionType.PUBLISH
},
},
diff: /**SCHEMA_DIFF*/[
{
"operation": "merge",
"name": "DataGrid",
"parentName": "Detail",
"values": {
"className": "Terrasoft.ConfigurationGrid",
// "generator": "ConfigurationGridGenerator.generatePartial",
"generateControlsConfig": { "bindTo": "generateActiveRowControlsConfig" },
/*"changeRow": { "bindTo": "changeRow" },*/
"multiSelect": true
},
"index": 0
},
{
"operation": "merge",
"name": "DataGrid",
"values": {
"activeRowAction": {"bindTo": "onActiveRowAction"},
"activeRowActions": []
}
},
{
"operation": "insert",
"name": "DataGridActiveRowSomeButton",
"parentName": "DataGrid",
"propertyName": "activeRowActions",
"values": {
"className": "Terrasoft.Button",
"style": Terrasoft.controls.ButtonEnums.style.GREEN,
"caption": "Details",
"tag": "someButton"
}
},
]
/**SCHEMA_DIFF*/
};
});
Hello Mohamad!
To resolve this problem you should debug js client code. Here you can read additional information about debugging client code:
https://academy.bpmonline.com/documents/technic-sdk/7-13/client-code-de…
If I got this right, method "generateActiveRowControlsConfig" triggers when user clicks on row, so you should pay an extra attention to it.
Best regards,
Alex