Hello,
Problem : select dropdown record on return key insted of space key.
I am using
angularJs and
MVC for binding and creating dropdown. the important thing is
i am binding dropdown in sysncfusing grid using Jsrender template. prefer below code for more clarification.
Grid :<div ma-target-grid-sorting id="targetsGrid" ej-grid e-datasource="data"
e-columns="columns"
class="gridStyle"
e-allowresizing="true"
e-allowkeyboardnavigation="true"
e-allowscrolling="true"
e-allowsorting="true"
e-minwidth="550"
e-isresponsive="true"
e-scrollsettings-height="320"
e-allowgrouping="true"
e-groupsettings-groupedcolumns="targetGroupColumn"
e-allowfiltering="true"
e-filtersettings-filtertype="excel"
e-actioncomplete="complete"
e-create="complete"
e-enabletouch="false">
</div>
JSRender Template :
<script type="text/x-jsrender" id="accessGroupTemplate">
<input type="text" class="drpAccessGroup" ej-dropdownlist e-fields-id="{{:targetName}}" e-popupwidth="218" e-datasource=accessGroupData e-fields-text="markingString" e-fields-value="markingString" e-width="218" e-enableincrementalsearch="true" e-value="{{:accessGroupMarking}}" />
</script>
Javascript :
$scope.columns = [
{ field: "targetNumber", headerText: administrationSecurityResources.targetNumber, width: 100 },
{ field: "targetType", headerText: administrationSecurityResources.targetType, width: 100 },
{ field: "targetName", headerText: administrationSecurityResources.targetName, width: 100 },
{ field: "targetDescription", headerText: administrationSecurityResources.description, width: 100 },
{ field: "accessGroupMarking", headerText: administrationSecurityResources.accessGroup, template: "true", templateID: "#accessGroupTemplate", width: 120 },
];
$scope.targetGroupColumn = ["targetType"];
$scope.compile = function (el) {
$compile(el)($scope);
}
$scope.complete = function (args) {
if (!this.initialRender) {
$scope.compile($(".drpAccessGroup"))
}
};
You can see i am using js render template and compile it. this dropdown is creating in grid so it have same cssclass and id so when i am trying to apply some keypress event with angular it applied to all dropdown and get confused in all dropdown.
at the end i am using alt+J for focus on grid then i can focus on dropdown using tab key then i can open dropdown popup using alt+down errow and i can select record using space key but i am not able to select record by return key.
so i need to select dropdown record on return key and main problem is dropdown is inside to the grid.
Regards,
Rakesh
