How to bind clickable data in grid?

[Rakesh Advani]

Hello,

I am using grid with javascript(AngularJS) and MVC 5.

I have data with back-end links so i want to bind that data in grid with that link so user can click that data.

So the issue is i can't find this kind of any demo in angularjs and MVC. if you can give me demo that show bind clickable data in grid using angularJS it will much helpfull for me.

Is there any way to access that data using keyborard also?

So finally i want demo that contains clickable data with keyboard navigation using angularjs and mvc.

Many Thanks

[Isuriya Rajan]

Hi Rakesh,

 Thanks for using Syncfusion products.

Query  #1: I have data with back-end links so i want to bind that data in grid with that link so user can click that data.
So the issue is i can't find this kind of any demo in angularjs and MVC. if you can give me demo that show bind clickable data in grid using angularJS it will much helpfull for me.

The requirement “provide the template for particular column “can be achieved by using the Template property.

<script type="text/x-jsrender" id="urlTemplate">

        {{if URL != ""}}// Template for url column

        <a rel='nofollow' href="{{:DataUrl}}">Url</a>

        {{/if}}
    </script>

Query #2: Is there any way to access that data using keyborard also?
So finally i want demo that contains clickable data with keyboard navigation using angularjs and mvc.
In the following code, we have used URL data to ”DataUrl” column. By default, we can achieve the keyboard navigation by enabling the “allowkeyboardnavigation”property as true/ false. And also in the below code, the urlpage will navigate while pressing the Enter key.

<div id="grid" ej-grid e-datasource="data" e-columns="col" e-allowpaging="true" e-toolbarsettings-showtoolbar='true'allowkeyboardnavigation="true" e-recorddoubleclick="recordDblClick" e-toolbarclick="toolbarHandler" e-toolbarsettings-toolbaritems='toolbar' e-editsettings-allowdeleting=' true' e-editsettings-allowediting='true' e-editsettings-allowadding='true'></div>

<script type="text/javascript">

        angular.module('listCtrl', ['ejangular'])

          .controller('PhoneListCtrl', function ($scope) {

                          var obj = [{ "OrderID": 1,"TestColumn": "Davolio", "DataUrl":"http://www.syncfusion.com/", },// URL data

}]

              $scope.data = obj;

              $(document).on("keydown", function (e) {

                   if ( e.keyCode === 13) { // j- key code for enter key.

                       var obj = $("#grid").ejGrid('instance')

                       var column = obj.getSelectedRecords()[0]['DataUrl'];

                       window.location.replace(column); // navigate to url page

                    

                  }

              });

              

              $scope.toolbar = ["add", "edit", "delete","update", "cancel"]

              $scope.col = [

                . . . . . . . .

 { "field": "DataUrl", "headerText": "CustomerID", "template":"true", "templateID": "#urlTemplate", "textAlign": "right","width": 90 }]

                . . . . . . .           

]

              });
    </script>

 In this query, you have mentioned the Keyboard action. Do you want any action while doing the key press? Please provide the more details regarding this requirement if we misunderstood. 

We have created a sample and the same can be downloaded from the following location: 

Sample  Link:http://www.syncfusion.com/downloads/support/forum/120002/ze/Grid-2069108657


Please let us know if you require further assistance on this.

Regards,
Isuriya R     

[Rakesh Advani]

Hi,

JS Render template is working fine. but i have some problem with keyboard navigation code. refer below code for understand.

in cshtml file : 

<script type="text/x-jsrender" id="nameUrlTemplate">

    {{if name != ""}}

    <a rel='nofollow' href="@Url.Action("Edit", "Home")?agenttypeid={{:agentTypeId}}&templateversion={{:templateVersion}}&dataSourceType={{:dataSourceType}}">{{:name}}</a>

    {{/if}}

</script>

in JS file : 

$scope.columns = [

                        { field: "name", headerText: integratorResources.templateName, template: "true", templateID: "#nameUrlTemplate", width:300 },

                        { field: "description", headerText: integratorResources.description, template: "true", templateID: "#descriptionUrlTemplate", width: 400 },

                        { field: "dataSourceType", headerText: integratorResources.templateType, template: "true", templateID: "#templateTypeTemplate", width: 80, textAlign: ej.TextAlign.Center },

                        { field: "isMetronDefined", headerText: integratorResources.metronDefined, template: "true", templateID: "#isMetronDefinedTemplate", width: 80,textWrapping:"Wrap"  },

                        { field: "status", headerText: integratorResources.status, width: 80 },

                        { headerText: integratorResources.action, template: "true", templateID: "#actionTemplate", width: 60, width: 80, textAlign: ej.TextAlign.Center }

        ];

        $(document).on("keydown", function (e) {

            if (e.keyCode === 13) { // j- key code for enter key.

                var obj = $("#integratorTemplateGrid").ejGrid('instance')

                var column = obj.getSelectedRecords()[0]['name'];

                window.location.replace(column); // navigate to url page

            }

        });

if i use this code i get error in browser console like : "Uncaught TypeError: Cannot read property 'name' of undefined"

i have one more question. in the last column of Action shown in attached screenshot. i put two buttons of download and delete. but it is not working and also not focus able with keyboard.

<script type="text/x-jsrender" id="actionTemplate">

    <a id="exportIntegratorTemplate" ng-click="export()"><i class="fa fa-download"></i></a>

    <a id="deleteIntegratorTemplate" ng-click="delete()"><i class="fa fa-trash-o"></i></a>

</script>

Attachment: integrator_3eaf30c1.7z

[Isuriya Rajan]

 Hi Rakesh, 

The cause for the issue is that the name column does not contain the JSON value. So, please check whether Name column has any value or not.

Query #2:

While using Anchor tags, please use rel='nofollow' href tag to activate rel='nofollow' href for certain element. Once enabled rel='nofollow' href, you can use Tab Button for navigation. 

<script type=" text/x-template" id="actionTemplate">

        <a rel='nofollow' href="#" id="exportIntegratorTemplate" ng-click="export()"><imgsrc="Themes/common-images/maps/Home.png" /></a>

        <a rel='nofollow' href="#" id="deleteIntegratorTemplate" ng-click="delete()"><imgsrc="Themes/common-images/maps/Navicatior.png" /></a>
    </script>

We have created a sample that you can download from following link:
http://www.syncfusion.com/downloads/support/forum/120019/ze/Grid_angular1226782953

Please try the above sample and let us know if it helps. If we misunderstood your query, please provide clear information that will help to provide a prompt solution.

Regards,

Isuriya R

[Rakesh Advani]

Hello,

for query #1 of keyboard navigation in grid data with link. i faced problem in your solution.

the problem is i make link dynamically on run time. link is not coming in json data. refer below code for better understanding. i also attached video of the issue so it will make you more clarify.

$scope.columns = [

                        { field: "name", headerText: resource.templateName, template: "true", templateID: "#nameUrlTemplate", width: 300 },

                        { field: "description", headerText: resource.description, template: "true", templateID: "#descriptionUrlTemplate", width: 400 }

               ];

In cshtml file :

<script type="text/x-jsrender" id="nameUrlTemplate">

    {{if name != ""}}

    <a rel='nofollow' href="@Url.Action("Edit", "Home")?agenttypeid={{:agentTypeId}}&templateversion={{:templateVersion}}&dataSourceType={{:dataSourceType}}">{{:name}}</a>

    {{/if}}

</script>

<script type="text/x-jsrender" id="descriptionUrlTemplate">

    {{if description != ""}}

    <a rel='nofollow' href="@Url.Action("Edit", "Home")?agenttypeid={{:agentTypeId}}&templateversion={{:templateVersion}}&dataSourceType={{:dataSourceType}}">{{:description}}</a>

    {{/if}}

</script>

now you can see in video when i click on link it will show edit page. but when i press enter it show only name in url i want rel='nofollow' href link in url instead of text.

Thanks

Rakesh

Attachment: IntegratorKeyboardIssue20150903_1716_182d8004.7z

[Rakesh Advani]

One more thing in above reply,

I make some changes in your code to describe my problem in button click.

when i click on link defined in template like below 

<script type=" text/x-template" id="actionTemplate">

        <a rel='nofollow' href="#" id="exportIntegratorTemplate" ng-click="export()"><imgsrc="Themes/common-images/maps/Home.png" /></a>

        <a rel='nofollow' href="#" id="deleteIntegratorTemplate" ng-click="delete()"><imgsrc="Themes/common-images/maps/Navicatior.png" /></a>
    </script>

there is one AngularJS function call on ng-click so i made two function as displayed in code.

$scope.export = function () {

alert("export");

}

$scope.delete = function () {

alert("delete");

}

but it is not working..

please find an attached code and look in Angular.html page as you have send me deme code.

Attachment: Grid_angular1226782953_98be0eca.7z

[Balaji Marimuthu]

Hi Rakesh,

Please find the response.

Query: #1 the problem is I make link dynamically on run time. Link is not coming in json data. When I press enter it show only name in url i want rel='nofollow' href link in url instead of text.

We have analyzed the provided video and modified sample. Please refer to the sample and code example as below,

Sample: Grid_angular

If the link generated dynamically and it’s not coming from the JSON data, we need to get the rel='nofollow' href value from the template cell by using the selected row index value as follows,

$(document).on("keydown", function (e) {

                  if (e.keyCode === 13) { // j- key code.

                      var obj = $("#grid").ejGrid('instance')

                     

                      //selectedRowsIndexes used to get the selected row Index value

                      var selectedrow = obj.getRowByIndex(obj.selectedRowsIndexes[0]); //get selected row

                      var column = selectedrow.find(".e-templatecell:first").find("a").attr("rel='nofollow' href"); //get value of rel='nofollow' href

                      window.location.replace(column);

                  }

              });

 

In above code example, we get the selected row element by using the getRowByIndex method.

Please refer to the Help document,

http://docs.syncfusion.com/js/api/ejgrid#methods:getrowbyindex

Query: #2 when i click on link defined in template like below, but it is not working.

We regret for the inconvenience caused.

The templates inside the ej controls will create a new child scope and to call the parent scope function, we have to use $parent.

Please refer to the code example as below,

<script type="text/template" id="actionTemplate">

        <a rel='nofollow' href="#" id="exportIntegratorTemplate" ng-click="$parent.export()"><img src="Themes/common-images/maps/Home.png" /></a>

        <a rel='nofollow' href="#" id="deleteIntegratorTemplate" ng-click="$parent.delete()"><img src="Themes/common-images/maps/Navicatior.png" /></a>

    </script>

             $scope.export = function () {

                  alert("export");

              }

              $scope.delete = function () {

                  alert("delete");

              }

Please try using the above sample and get back to us if you have any concerns.

Regards,

Balaji Marimuthu

[Rakesh Advani]

hello,

i have some problem in solution defined by you as below.

<script type="text/template" id="actionTemplate">

        <a rel='nofollow' href="#" id="exportIntegratorTemplate" ng-click="$parent.export()"><img src="Themes/common-images/maps/Home.png" /></a>

        <a rel='nofollow' href="#" id="deleteIntegratorTemplate" ng-click="$parent.delete()"><img src="Themes/common-images/maps/Navicatior.png" /></a>

    </script>

             $scope.export = function () {

                  alert("export");

              }

              $scope.delete = function () {

                  alert("delete");

              }

in this code $parent is not working.means i am not able to call $scope.export method.

Thanks

Karan

[Isuriya Rajan]

Hi Rakesh, 
While using the angular template, we must provide the proper script type as text/ng-template else text/template .Could you please check whether you have mentioned the appropriate template type in your column templates? Also ensure to use the same versions ej.web.all.min.js and ej.widget.angular.min.js scripts in your project.

<script type="text/ng-template"id="actionTemplate">

  //use correct type

        <a rel='nofollow' href="#" id="exportIntegratorTemplate" ng-click="$parent.export()"><imgsrc="Themes/common-images/maps/Home.png" /></a>

        <a rel='nofollow' href="#" id="deleteIntegratorTemplate" ng-click="$parent.delete()"><imgsrc="Themes/common-images/maps/Navicatior.png" /></a>
    </script>

While creating the templates inside the ej Controls the templates are considered as child controllers in angular. So the $parent is used to access the parent scope.

Please verify the following video,
http://www.syncfusion.com/downloads/support/directtrac/142934/ze/Angular_video-442907224

While using the $parent angular is working fine. Still you are unable to use $parent, could you please reproduce your issue in the provided sample else provide full code snippets? It would be helpful to provide the appropriate solution.

Sample Link: jsPlayground Sample

Regards,
Isuriya R

[Rakesh Advani]

Hi,

Your JS-Playground link is working fine for initial stage but the problem is when i click data with link it redirect to that link, for example i set "www.syncfusioin.com" as rel='nofollow' href. but the problem is when i use keyboard for focus on link and press enter it will redirect to the same page of js-playground link rather than www.syncfusion.com. 

I attached video for your better understanding. see video # 2.

one more thing is after sorting ng-click="$parent.export()" is not working. you can check your code with sorting.

i made one js-playground with sorting JSPlayGround Link 

you can also see attached video for better understanding see video # 1

We are waiting for solution with keyboard navigation because keyboard navigation is our key feature of project.

Many Thanks,

Rakesh

 

Attachment: Issues_7b5030da.7z

[Isuriya Rajan]

Hi Rakesh,

 Query #1:  when i use keyboard for focus on link and press enter it will redirect to the same page of js-playground link rather than www.syncfusion.com. 

 Your requirement is achieved by using  keydown event  in Grid. We have created a sample for your requirement in jsplayground,

Sample:  Sample

$(document).on("keydown", function (e) {

                  if (e.keyCode === 13 && e.originalEvent.target.tagName == "A") { // j- key code.

                      var column = $(e.originalEvent.target).attr('rel='nofollow' href');

                      window.location.replace(column);

                  }
              });

 

 Query #2: one more thing is after sorting ng-click="$parent.export()" is not working. you can check your code with sorting.

We have achieved your requirement by using the 'actionComplete' event. This event will trigger for every Grid action after its completed.By using the refresh event we can refresh template directives. 

<div id="grid" ej-grid e-datasource="data" e-columns="col" e-actioncomplete="actionComplete" e-allowsorting=" true" e-allowpaging="true" e-toolbarsettings-showtoolbar='true' allowkeyboardnavigation="true" e-recorddoubleclick="recordDblClick" e-toolbarclick="toolbarHandler" e-toolbarsettings-toolbaritems='toolbar' e-editsettings-allowdeleting=' true' e-editsettings-allowediting='true' e-editsettings-allowadding='true'></div>
 
$scope.actionComplete = function () {
                 this._trigger("refresh");
              };

 

 Regards,

Isuriya R