I am working on a Lightswitch HTML application. I Have a Browse screen with a button which opens an Add screen.
My Browse screen is populated by a viewwhich may have multiple records per employee. The view is being filtered at the Datasource level based on this.Application.User.Name. That filter sets it such that only records for the active user show on the Browse screen.
I want to set the default EmployeeID on my Add screen to be the EmployeeID of the active user, which will come from my view.
Here is my code for the button:
myapp.BrowseTimesheetRecords.AddNewRecord_execute = function (screen) {
myapp.showAddTimesheetRecord(null, {
beforeShown: function (addScreen) {
var newItem = new myapp.TBG_KeepInTimesheet();
newItem.EmployeeID = screen.TBG_V_KeepInTimeSheet_Detail.EmployeeID;
newItem.CreateDate = new Date;
newItem.EffectiveDate = new Date;
newItem.CreatedBy = this.Application.User.Name;
addScreen.TBG_KeepInTimesheet = newItem;
},
afterClosed: function () {
screen.TBG_V_KeepInTimeSheet_Details.load();
}
});
};
I believe the problem is that I have no selected EmployeeID so I can't use screen.
Is there a way to select and pass the Distinct EmployeeID from my DataSource within that JavaScript Execute function? There will only ever be 1 distinct EmployeeID though there may be many records
For reference here is the filter on my dataset:
partial void TBG_V_KeepInTimeSheet_Details_Filter(ref Expression<Func<TBG_V_KeepInTimeSheet_Detail, bool>> filter)
{
filter = e => e.UserLogin == this.Application.User.Name;
}
TBG_V_KeepInTimeSheet_Details is the name of my view within the Application.
TBG_KeepInTimesheet is the name of the table which my view draws from.
Thank you in advance
Related
I'm trying to retrieve the page index of a selected object of the grid that is using ServerOperation, but I don't know how would I do that without too much complication.
Currently, I'm receiving an Id from the URL (https://...?ObjectId=12) and I will select this item in the grid, but first I have to show the page it is, so I'm trying to get the page number of this row.
The problem is that I'm using ServerOperation(true). In addition, I'm retrieving the paged list without any filters.
function _displayDetailsModal(id, selectRow = true, focusSelected = true) {
$(document).ready(() => {
var url = `${urls.Details}/${id}`;
if (selectRow) {
// GET PAGE OF ITEM THEN
// CHANGE TO PAGE THEN
kendoGrid.selectById(id);
}
if (focusSelected) {
kendoGrid.focusSelected(); // Scrolls to selected row.
}
loadModal(url);
});
}
Is this the kind of thing you are after?
Dojo: https://dojo.telerik.com/iNEViDIm/2
I have provided a simple input field where you can set the page number and then a button which will change the page to the selected page for you.
All I am doing is setting the datasource's page via the page method and then it will go off and make a read to the remote datasource for you and then return that page of data.
$('#btnPage').on('click',function(e){
var page = $('#pageNumber').val();
$('#pageLabel').html('Page Selected Is: ' + page);
var ds = $('#grid').data('kendoGrid').dataSource;
ds.page(parseInt(page));
});
If you select a page higher than the last available then it will just show the last page.
More info can be seen here: https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/page
If you need any further info let me know:
I ended up doing it on the server. That is how I did it:
Controller.cs
Instead of sending just the usual ToDataSourceResult, I add two fiels (PageIndex and ObjectId), and send it to the front-end to change the page and select the row.
[HttpPost("List")]
public IActionResult List([DataSourceRequest] DataSourceRequest request, RequestActionViewModel requestAction)
{
// Getting the pageIndex of the ObjectId present in requestAction.
var objectIndex = elementList.FindIndex(el => el.Id == requestAction.ObjectId) + 1;
var objectPageIndex = Math.Ceiling((decimal)objectIndex / request.PageSize);
var dataSourceResult = elementList.ToDataSourceResult(request);
return Json(new {
Data = dataSourceResult.Data,
Total = dataSourceResult.Total,
AggregateResults = dataSourceResult.AggregateResults,
Errors = dataSourceResult.Errors,
// Extra fields
PageIndex = objectPageIndex,
ObjectId = requestAction.ObjectId
});
}
index.js
I Get from the server the page and the id of the element, select the change the page of the grid, and select the element.
function onGridRequestEnd(e) {
this.unbind("requestEnd", onGridRequestEnd);
if (e.PageIndex) {
kendoGrid.bind("dataBound", function temp() {
// Custom method.
kendoGrid.selectById(e.ObjectId, e.PageIndex);
// To avoid looping.
kendoGrid.unbind("dataBound", temp);
});
}
}
We have created a Classic UI Dialog and Touch UI Dialog with a drop down widget which displays dynamic values. We have used optionsProvider property for populating these values in classic ui and datasource in touch ui.
This works fine; However, after we select the drop down value in Classic ui and open the dialog in touch ui mode, touch ui dialog does not show the selected value in classic ui dialog. Same is the case when we try to save the value in touch ui dialog and open classic ui dialog. Moreover, irrespective of the fact selected values getting saved in page's component node, these dialogs not able to pick the value from the saved property when saved in other dialog mode.
Is this happening because of listeners since I am able to fetch the drop down value in other component with static values ?
Please help me with this issue.
Classic UI Attribute,
<productCategory
jcr:primaryType="cq:Widget"
fieldLabel="select Product Category"
name="./productCategory"
optionsProvider="function(){
var categories = [];
var tags = '/etc/tags/mecommerce/categories'
var url = CQ.HTTP.noCaching(tags+'.infinity.json');
var categoriesList = CQ.HTTP.eval(url); //DAM Url
for(var name in categoriesList){ //Looping the node structure
/*
Each image will have the meta data in it's jcr:content. This meta data consists of many values like, its
type, size, fileFormat etc., We are checking the format is image or not and adding
*/
if(categoriesList[name]['jcr:title']){
var list = {};
// each option should contain text and value
list['text'] = categoriesList[name]['jcr:title'];
list['value'] = categoriesList[name]['jcr:title'];
categories.push(list);
}
}
return categories; // returns the JSON
}"
type="select"
xtype="selection"/>
Touch UI Attribute,
<productCategory
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/select"
fieldLabel="select Product Category"
name="./productCategory">
<datasource
jcr:primaryType="nt:unstructured"
sling:resourceType="/apps/mecommerce/commerce/components/content/categoryStandardProductDetail/datasources/categories"
addNone="{Boolean}true"/>
</productCategory>
Issue is with datasource. When the value is adding to map, the key and value are not same. After Correcting the issue got resolved.
List<KeyValue> categories = new ArrayList<KeyValue>();
for (Iterator<Resource> it = categoryRes.listChildren(); it.hasNext();) {
Resource category = it.next();
ValueMap vm = ResourceUtil.getValueMap(category);
String title = vm.get("jcr:title", category.getName());
String value = vm.get("jcr:title", category.getName());
if (!title.equals("*")) {
value = value;
}
categories.add(new KeyValue(category.getName(), value));
}
Modified as,
List<KeyValue> categories = new ArrayList<KeyValue>();
if (dsCfg.get("addNone", false)) {
categories.add(new KeyValue("", ""));
}
for (Iterator<Resource> it = categoryRes.listChildren(); it.hasNext();) {
Resource category = it.next();
ValueMap vm = ResourceUtil.getValueMap(category);
String title = vm.get("jcr:title", category.getName());
String value = vm.get("jcr:title", category.getName());
if (!title.equals("*")) {
value = value;
}
categories.add(new KeyValue(value, value));
}
I'm developing an Azure portal extension that includes an editable grid blade.
The grid's blade is opened from a selector and therefore contains a parameter provider.
The grid is initialized with the edit scope of the parameter provider, which is an observable array, and enabled for row editing and inserting new rows.
When I try to update the grid, changes to existing rows are not shown and creating new line yields an empty line, like below:
I don't see any errors in the console while debugging.
Here's how I initialized the grid:
private _initialize(container: MsPortalFx.ViewModels.PartContainerContract): void {
var extensions: number = MsPortalFx.ViewModels.Controls.Lists.Grid.Extensions.EditableRow | MsPortalFx.ViewModels.Controls.Lists.Grid.Extensions.ContextMenuShortcut,
extensionsOptions: MsPortalFx.ViewModels.Controls.Lists.Grid.ExtensionsOptions<DataModels.IItem, DataModels.ISelectionItem>,
viewModel: MsPortalFx.ViewModels.Controls.Lists.Grid.ViewModel<DataModels.IItem, DataModels.ISelectionItem>;
// Set up the editable extension options.
extensionsOptions = this._createExtensionsOptions();
// Create the grid view model.
viewModel = new MsPortalFx.ViewModels.Controls.Lists.Grid.ViewModel<DataModels.IItem, DataModels.ISelectionItem>(
container,
null,
extensions,
extensionsOptions);
viewModel.showHeader = true;
viewModel.columns(this._columns);
viewModel.rowAdd = () => {
// code that extension authors need to execute when a row is added should go here.
};
this.editableGrid = viewModel;
}
private _createExtensionsOptions(): MsPortalFx.ViewModels.Controls.Lists.Grid.ExtensionsOptions<DataModels.IItem, DataModels.ISelectionItem> {
return <MsPortalFx.ViewModels.Controls.Lists.Grid.ExtensionsOptions<DataModels.IItem, DataModels.ISelectionItem>>{
editableRow: {
// Supplies editable items to the grid.
editScope: this.parameterProvider.editScope,
// put the new row at the top.
placement: MsPortalFx.ViewModels.Controls.Lists.Grid.EditableRowPlacement.Bottom,
// Create no more than 5 new rows.
maxBufferedRows: 5,
// Allow the modification of existing items.
allowEditExistingItems: true,
// Allow the creation of new items.
allowEditCreatedItems: true,
// Track the valid status
valid: ko.observable<boolean>()
}
};
}
I've reviewed several sample blades of editable grid but couldn't identify what am I doing wrong.
The problem was that I didn't set the editScopeMetadataType property of the parameter provider, which required for determining the edit scope's entity type:
this.parameterProvider = new MsPortalFx.ViewModels.ParameterProvider<DataModels.IItem[], KnockoutObservableArray<DataModels.SchemaItem>>(container, {
// This was missing.
editScopeMetadataType: wrapperTypeMetadataName,
mapIncomingDataForEditScope: (incoming) => {
return ko.observableArray(incoming);
},
mapOutgoingDataForCollector: (outgoing) => {
return outgoing();
}
});
Background: There's a table from which I can choose employees. I want to filter these employees by name.(I know name is not a good way to filter, this is just an example)
Basically I have a drop down from which I choose one of the filters.
My declaration: $scope.filters = null;.
I also have this deceleration to choose my filter $scope.chosenFilter= null;.
I use the following to retrieve the different filters I have $scope.filters = retrieveFilters(info.Names);
retrieveFilters looks like the following:
var retrieveFilters = function(rows) {
var filterWrapper = document.querySelector(".filterWrapper");
var datasetOptions = [];
$scope.predicate = 'Name';
if (rows) {
//Add Default option
datasetOptions.push({
name: $scope.data.Fnames.defaultFilterOptionLabel,
value: ''
});
$scope.chosenFilter = datasetOptions[0];
_.forEach(rows, function(ele) {
datasetOptions.push({
name: ele,
value: ele
});
});
} else {
filterWrapper.style.display = "none";
}
return datasetOptions;
};
I use the following to choose my filter:
$scope.$watch('chosenFilter', function() {
var filterSearchInput = document.querySelector(".filterWrapper input");
ng.element(filterSearchInput).triggerHandler('input');
});
Everything is fine and the display works on first load as I have set the default with
//Add Default option
datasetOptions.push({
name: $scope.data.Fnames.defaultFilterOptionLabel,
value: ''
});
From the default table whenever I click on an employees name hes details are displayed. However whenever I filter and click on the employees name, nothing is displayed. Whenever I click on a specific employees name at the default table and then filter in the same name the information also shows up, as I cache it each time.
I assume that you're displaying this data somewhere in your GUI using ng-repeat. Angular has a lot of great built-in features for this. Check out the answer here: AngularJS custom search data by writing custom filter for a way to approach this more from an Angular direction. You also might want to check out this question and answer: "Thinking in AngularJS" if I have a jQuery background?.
I have a datagrid that displays data and a user can select the "view" action column on this datagrid. When this happens, the user should view details of the selected row in a new gridpanel. I am populating a new store for this grid in the action column as follows:
Action Column handler:
//code in action column handler
var store;
console.log ('About to load the store');
var rec = view.getStore().getAt(rowIndex);
var rowid = rec.get('ID');
store = Ext.getStore('MetadataJsonPStore').load({
params:{
solution: 'DemoDocuments',
project: 'MyDemoDocuments',
process : 'RetreiveFileMetadata',
user :'admin',
password :'changethis',
waittofinish :'true' ,
FileID : rowid
},
callback: function(records, options, success) {
if(success) {
var fileMetadataPanel = Ext.getCmp('matadataPanel');
//if (records.length = 0)
console.log(records[0])
;
}
else {
Ext.Msg.alert('Request Failed','Service currently not available');
}
}//end-callback-function
});
My store is correctly populated but my grid doesn't display. When I view my console i do not have errors so i assume i am missing a step.
My datagrid is linked to a store ( the store being loaded above) but the data does not display. Any ideas of how to complete this function?
You need to refresh that Grid view.
Sencha: grid view refresh
gridView = this.getCmp('gridID');
grid.refresh();
Other solution:
Load data on the store2 before render the new grid view