Load ajax into TabStrip and angularjs

[Loi]

How to call file html by ajax in Tabstrip when use with angularjs.
<div kendo-tab-strip k-content-urls="['index.html#/setting/setting-company.tpl.html', null ]">
    <ul>
        <li class="k-state-active">First tab</li>
        <li>Second tab</li>
    </ul>
</div>

I got error the file not found

[Daniel]

Hello Loi,

Loading the content via Ajax seems to be working correctly at least on my side. Could you check this example and let me know if I am missing something?

Regards,
Daniel
Telerik

 

 

[Loi]

Hi Daniel,
I still got the error.Look my screen short.If I used ng-include the file,It word very well.

Thanks,
Loi Tran

[Loi]

Daniel,
I used https://github.com/angular-ui/ui-router maybe this is problem.Do you have any advices for the error?

Thanks

[Daniel]

Hello again,

If the content is loaded when using ng-include then could you check if there are any differences in the requests? I am not sure how would the router prevent the tabstrip from making a correct request.

Regards,
Daniel
Telerik

 

 

[Rajesh]

I am trying to dynamically generate a kendo tab strip and its content via an angularjJS $resource calls. My ajax calls are authenticated and require setting a customer http header and I hence cannot rely on the contentUrl field.

<div kendo-window="viewlogWindowAlt" k-title="'View Logs'" k-width="1100" k-height="200"
                         k-visible="false"
                         k-on-open="retrieveDeviceLogs()"
                         k-position="{left:'125px'}">
<div kendo-tab-strip="deviceMetadata.viewLogTabStrip" k-data-content-field="content">
 </div>
</div>

$scope.retrieveDeviceLogs = function() {
        //Retrieve list of logs from appmgr backend
        appMgrRESTService.deviceLogsRESTService.query({deviceId: $scope.device.deviceId},
            function(result){
                $scope.deviceMetadata.viewLogTabStrip.dataSource.data([]);

                var promises = [];
                angular.forEach(result, function(log){
                    promises.push(retrieveDeviceLogByFilename(log));
                });
                $q.all(promises).then(function(response){
                    angular.forEach(result, function(log){
                        $scope.deviceMetadata.viewLogTabStrip.append({ text: log.filename, content : log.content});
                    });
                    if (result.length >= 1){
                        $scope.deviceMetadata.viewLogTabStrip.select(1);
                    }
                });

            },
            function(error){
                $log.fatal("Could not retrive caf logs for device with id: " + $scope.device.deviceId);
            });
    };

retrieveDeviceLogByFilename sets the content of the log into log.content.

What should I be doing to see my content in each of the tabs ? I only see the tab text but do not see the contents of each tab.

[Rajesh]

Just realized it was my mistake is setting the right content. http://dojo.telerik.com/@rtv/AnOju/3 in case it is of help to others.

How do I get the content display to honour line breaks in the text ? It shows it all in one line currently.

-Rajesh

[Daniel]

Hello Rajesh,

You should use HTML elements like <br> to split the text into multiple lines.

Regards,
Daniel
Telerik