Telerik Forums
Kendo UI for jQuery Forum
1 answer
646 views
Hi,
I am trying to populate tabs dynamically with Angular JS. The no. of tabs is controlled by data retrieved from database.
I am not sure what is going wrong. It works fine if I return the JSON from controller without using promise service. But I need promise service because I in the tab content, I have to populate the kendo Pie chart dynamically. I would appreciate any help. 

Following is what I am trying out in the view:

<div kendo-tab-strip>
        <ul>
            <li ng-repeat="tab in tabs" class="{{tab.headerClass}}">{{tab.title}}</li>
        </ul>
<div ng-repeat="tab in tabs">{{tab.content}}</div> 
</div>

Angular controller looks like:

myApp.controller("InterestController", ['$scope', '$state', 'dataService', function ($scope, $state, dataService) {
dataService.getTabData().then(function (data) {        
        $scope.tabs = [];
        var headerClass = '';
        for(var i = 0; i < data.length; i++){
            if(i == 0){
                headerClass = 'k-state-active'; // make the first tab auto selected
            }
            $scope.tabs.push({'title' : data[i].title, 'headerClass' : headerClass, 'content' : data[i].content});
            headerClass = '';
        }

        console.log($scope.tabs); // I see data perfectly in console
    });
}])

Angular service looks like following :
myAppp.service('dataService', ['$q', function ($q) {
this.getTabData = function(){
        var deferred = $q.defer();

        new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/some_data_provider/data.json",
                    dataType: "json"
                }
            }
        }).fetch(function(){
            deferred.resolve(this.data());
        });

        return deferred.promise;
    }
}]);

Thanks

Petyo
Telerik team
 answered on 01 Oct 2014
5 answers
1.0K+ views
I am using column filters as described here:
http://www.telerik.com/forums/column-filter-menu-with-(not-visible)-implied-operator

and using the following to show the drop down of the distinct values in the column:
http://www.telerik.com/forums/column-filter-menu-with-(not-visible)-implied-operator

This all works great until someone filters a column, at which point the values in the drop downs aren't proper for the current resultset represented by the grid.I have 2 questions:

1. How can I hook into the filter update so I can then refresh my distinct values.
2. Once I have the distinct values, how can I update the dataSources on my dropdowns?

for #1, Is there a way for me to hook into transport.read.complete so I can get the filters used to filter the grid - and I can use those same filters in my ajax call to get distinct col values? Or is there a different, preferred approach?

for #2, Apart from trying to select the dropdowns by searching through the source in DevTools, is there a way i can access that from the kendo API?
Ed
Top achievements
Rank 1
 answered on 30 Sep 2014
7 answers
322 views
I have a tabstrip which I am trying to add kendo editors for but when the editor is added to the tabstrip no content is visible. I can see it in the source but not rendered to the screen. If I move the editor out side the tabstrip it works fine.

​
@(Html.Kendo().TabStrip()
    .Name("statusReportTabs")
    .Items(ts =>
    {
        ts.Add().Text("Daily Events")
            .Selected(true)
            .Content(@<text>
                        <h5>Yesterday's Events (@(Model.ReportDate.AddDays(-1).ToLongDateString()))</h5>
                        @(Html.Kendo().EditorFor(x => x.YesterdaysEvents)
                            .Tools(t => t.FontColor().FontSize())
                            .HtmlAttributes(new {style="height:100px"})
                        )
                        <h5>Today's Events (@Model.ReportDate.ToLongDateString())</h5>
                        @(Html.Kendo().EditorFor(x => x.TodaysEvents)
                            .Tools(t => t.FontColor().FontSize())
                            .HtmlAttributes(new {style="height:100px"})
                        )
                        <h5>Tomorrow's Events (@(Model.ReportDate.AddDays(1).ToLongDateString()))</h5>
                        @(Html.Kendo().EditorFor(x => x.TomorrowsEvents)
                            .Tools(t => t.FontColor().FontSize())
                        )
                      </text>);
        ts.Add().Text("Contact Information")
            .Content("Contact Info Here");
        ts.Add().Text("Concerns")
            .Content("Concern Info Here");
    })
 
 
)
Adam
Top achievements
Rank 1
 answered on 30 Sep 2014
2 answers
239 views
I am attempting to implement the Kendo Grid with a Java Servlet on the backend.

---------------
I have set up the grid to have a Create Row button.

I can see the grid calling my java code using printlkn statements. But I get that code called multiple times.It is called when:
1) the create popup window starts
2) each time I tab to a new textbox on the create popup window
3) when I press the Update button on the create popup window.

Also, when I press the update button the create popup window is not dismissed.

Does anyone know what I an doing wrong?
StevenDom
Top achievements
Rank 1
 answered on 30 Sep 2014
3 answers
161 views
Does Pivot Grid / Pivot Grid Configurator support Analysis Server Translations (feature that is present on Enterprise/Dev editions)

At the moment i think its only showing the raw names from the cube...  (using xmla, via msmdpump method)

Can you hook into the dimensions, hierarchies, measures and implement the translations...    
This might be a useful workaround if SSAS Translations not supported... Also a good workaround as not all customers have Enterprise edition, so the ability to set the caption of dimension, hierarchy, measure etc is quite handy

Cheers

Chris
Nikolay Rusev
Telerik team
 answered on 30 Sep 2014
1 answer
397 views
on mobile devices when I choose a text box to enter information I can choose the microphone over typing. this works great. I speak the data
goes into the textbox. the problem is with the autocomplete. typing the search function happens, talking the event is never fired.


any ideas.

thanks Troy
Troy Clemons
Top achievements
Rank 1
 answered on 30 Sep 2014
3 answers
150 views
Hi,is there a way to set the the width of the menu popup designed from template to occupy the whole width of the menu or the whole width of the screen 
Petyo
Telerik team
 answered on 30 Sep 2014
1 answer
142 views
How can I move the navigator slider programmatically?? 
The navigator returns days and I only want months (working), but I need to 'snap' the navigator to the nearest tick.

navigator: {
    seriesDefaults: {
        missingValues: "interpolate"
    },
    series: series,
    pane: {
        height: 60
    },
    select: {
        from: sliderStartDate,
        to: endDate
    },
    categoryAxis: {
        baseUnit: 'months',
        baseUnitStep: "auto",
        autoBaseUnitSteps: {
            months: [1]
        },
        labels: {
            rotation: -30,
            step: 1,
            font: "8px sans-serif"
        }
    },
    hint: {
        format: "{0:MMM yyyy} - {1:MMM yyyy}"
    }
},
selectEnd: function () {
    var totalChart = $("#total-chart").data('kendoStockChart');
    var selectedStartDate = new Date(totalChart._navigator.options.select.from.getFullYear(), totalChart._navigator.options.select.from.getMonth(), 1);
    var selectedEndDate = new Date(totalChart._navigator.options.select.to.getFullYear(), totalChart._navigator.options.select.to.getMonth() + 1, 0);
    //TODO: figure out how to snap slider to first and last days of months.
    renderPage(selectedStartDate, selectedEndDate);
}

For the Above TODO I have tried:
totalChart._navigator.options.select.from = selectedStartDate;
totalChart._navigator.options.select.to = selectedEndDate;
totalChart.resize();

Which does not work.
Any ideas how I can re-render the chart (preferably just the navigation slider) without requesting the remote chart data again??

Thanks,
Chance

Hristo Germanov
Telerik team
 answered on 30 Sep 2014
1 answer
552 views
How can I set max for datepicker in MVVM. I am getting error:
Uncaught TypeError: Cannot read property 'getFullYear' of null kendo.all.js:21491compare kendo.all.js:21491calendar.views.compare kendo.all.js:21365Widget.extend.navigate kendo.all.js:20601Widget.extend.setOptions kendo.all.js:20480DateView._setOptions kendo.all.js:21727DateView._calendar kendo.all.js:21716DateView.open kendo.all.js:21763DateView.toggle kendo.all.js:21782Widget.extend._click kendo.all.js:22109b.extend.proxy.b.isFunction.i jquery-1.9.1.js:7223b.event.dispatch jquery-1.9.1.js:9593b.event.add.v.handle jquery-1.9.1.js:9273

Test code is here.
Holger
Top achievements
Rank 1
 answered on 30 Sep 2014
4 answers
514 views
I am attempting to set the DataSource of a Kendo grid through javascript but i am getting an error:

Unhandled exception at line 11, column 19155 in http://localhost:55135/Scripts/kendo/kendo.all.min.js

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'slice'

i have created my create as below:

<div id="grid">
            @(Html.Kendo().Grid(Model.ClientLoans)
                .Name("grdResults")
                .Columns(columns =>
                {
                    columns.Bound(loan => loan.ClientName);
                    columns.Template(@<text>@Html.ActionLink(@item.AssetNumber, "ViewDetail", new { clientLoan = @item, id = @item.AssetNumber })</text>).Title("Asset Number");
                })
                .Pageable()
                .Sortable()
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(5)
                    .Read(read => read.Action("SearchTest","ClientLoanSearch"))
                    )
             )
 
        </div>

On the click of a search button i execute some javascript to populate the grid:
$("#btnSearch").click(function () {
 
                var searchParameters = GetSearchParameters();
                var jsonData = JSON.stringify(searchParameters, null, 2);
 
                $.ajax({
                    url: '@Url.Content("~/ClientLoanSearch/SearchTest")',
                    type: 'POST',
                    data: jsonData,
                    datatype: 'json',
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
 
                        //debugger;
                        var results = data;
                        var dataSource = new kendo.data.DataSource({
                            data: results
                            //dataType: "json",
                            //columns: [
                            //    { field: "ClientHcn", title: "Client HCN" },
                            //    { field: "AssetNumber", title: "Asset Number" }]
                        });
                        var grid = $('#grdResults').data('kendoGrid');
                        grid.setDataSource(dataSource);
                        //grid.dataSource.read();
                    },
                    error: function (request, status, err) {
                        alert(status);
                        alert(err);
                    }
                });
 
                return false;
 
            });

It calls an Action on the controller:
[HttpPost]
        public ActionResult SearchTest([DataSourceRequest]DataSourceRequest request, ClientLoanSearchModel model)
        {
            Library.ClientLoanCollection loans = Library.ClientLoanCollection.GetDummyData();
            var jsonData = new {loans};
 
            DataSourceResult result = loans.ToDataSourceResult(request);
 
            return Json(result, JsonRequestBehavior.AllowGet);
        }

Any help appreciated.
Siobhan McTear
Top achievements
Rank 1
 answered on 30 Sep 2014
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Drag and Drop
Map
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?