How to select dropdown record on return key insted of space key?

[Rakesh Advani]

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

[Prasanna Kumar Viswanathan]

Hi Rakesh,

Thanks for contacting Syncfusion support.

We able to reproduce the mentioned issue and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

Regards,

Prasanna Kumar N.S.V