Telerik Forums
Kendo UI for jQuery Forum
1 answer
107 views

I'm trying to place a Kendo Grid inside of an EditorTemplate. I'll be using this as a select list, so to speak. 

 However, nothing I do seems to get my grid to display. Any examples on how to do something like this?  All the examples I see are basically simple control types.

 So given: 

 

<script type="text/x-kendo-template" id="schedulerTemplate">
    <!-- What do I put here. -->
</script>

I thought the following would work inside of a $(function() {} block

// Workout Grid
 $("#workoutgrid").kendoGrid({
     dataSource: {
 
         transport: {
             read: {
                 url: "/Workout/GetWorkoutList/",
                 dataType: "json"
             },
             create: {
                 url: "/Workout/Create/",
                 type: "POST",
                 dataType: "json"
             }
         },
         batch: true,
         pageSize: 20,
         schema: {
             model: {
                 id: "Id",
                 fields: {
                     Id: { editable: false, nullable: true },
                     Name: { type: "string" },
                     Description: { type: "string" }
                 }
             }
         }
     },
     pageable: true,
     sortable: true,
     silectable: true,
     selectable: true,
     reorderable: true,
     resizable: true,
     pageable: true,
     filterable: {
         mode: "row"
     },
     toolbar: [{
         template:
             '<a class="k-button k-grid-custom-command" href="/Admin/Movement/Edit/#=0#">Add New</a>'
     }],
     columns: [
         { hidden: true, field: "Id" },
         {
             field: "Name", title: "Workout", filterable: {
                 cell: {
                     operator: "contains"
                 }
             }
         },
         {
             field: "Description", title: "Description", filterable: {
                 cell: {
                     operator: "contains"
                 }
             }
         },
         {
             field: "WorkoutTypeId", title: "WorkoutType", filterable: {
                 cell: {
                     operator: "contains"
                 }
             }
         }]
     //{ title: "Action", width: 80, template: '<a href="/Admin/Movement/Edit/#=Id#">Edit</a>' }]
 });

No dice, however.  Any suggestions? 

 

Vladimir Iliev
Telerik team
 answered on 26 Nov 2015
1 answer
381 views

Hi, 

 I'm having a few issue with the following piece of code:

<div kendo-chart
     k-transitions="true"
     k-theme="'flat'"
     k-legend="{ position: 'bottom',
                 labels: { template: '#= series.name #: #= value #' }}"
     k-series-defaults="{ type: 'donut',
                          holeSize: 45,
                          labels: { position: 'center', visible: true, background: 'transparent', color: 'white' }}"
     k-series-colours="[ '#309B46', '#E61E26' ]"
     k-chart-area="{ height: 170 }"
     k-series="[{ name: 'Normal', field: 'value', color: '#65c178' },
                { name: 'Offline', field: 100 - 'value', color: '#E61E26' }]"
     k-data-source="donutData"
     k-tooltip="{ visible: true,
                  template: '#= series.name #: #= value #' }"
    >

 My controller defines 'value' field, and the chart shows up, but I'm still having a few problems.

1) How can I call this directive with different a field variable without defining almost the same directive again? 
Say I have 'value' and 'value2', and I want to generate chart for each one of them, and call the same directive without explicitly defining it for each of the values.

2) How can I get "field: 100 - 'value'" to resolve in a directive? I don't want to have view logic in my controller 

3) How do I set colours for this chart? Colour parameter in k-series doesn't work even if I pass it from my controller, and neither does k-series-colours

 Thanks in advance for your help.

 Kind Regards,
Dima

T. Tsonev
Telerik team
 answered on 26 Nov 2015
9 answers
734 views
Hello

in my charts i show up the loading animation via
kendo.ui.progress($("#chart"), true);
which works fine.

Problem is, that the animation stops (progress gif is still shown but does not move)  as soon as data is delivered from server via JSON to the client and data processing starts at the browser, which takes a few seconds.
Is there a way to show an animation, which does not stop while the browser renders charts?

I guess this behavior is browser-related and not kendo ui specific.


TIA
Dirk

Dirk
Top achievements
Rank 1
 answered on 26 Nov 2015
1 answer
302 views

View

@(Html.Kendo().Grid(Model)
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(e => e.AssessmentID).Width(110);
                    columns.Bound(e => e.AssessmentName).Width(110);
                })
                .Sortable()
                .Pageable()
                .Scrollable()
                .ClientDetailTemplateId("scorelist")
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .ServerOperation(false)
                )
                .Events(e => e.DetailInit("detailInit"))
)

<script id="listviewTemplate" type="text/kendo-tmpl">
    <div class="StudentResultItem">
        <p>#=ResultValue#</p>
    </div>
</script>
<script id="scorelist" type="text/kendo-tmpl">

    @(Html.Kendo().ListView<AssessmentScoreModel>()
                    .Name("Scores_#=AssessmentID#")
                    .TagName("div")
                    .ClientTemplateId("listviewTemplate")
                    .HtmlAttributes("class='StudentResultItems'")
                    .ToClientTemplate()
    )

</script>

 

Model:

    public class StudentResultModel
    {
        public int AssessmentID { get; set; }
        public string AssessmentName { get; set; }
        public List<AssessmentScoreModel> ResultItem { get; set; }
    }

    public class AssessmentScoreModel
    {
        public int ResultID { get; set; }
        public string ResultValue { get; set; }
    }

 

 

When I run it, it can not show listview

Boyan Dimitrov
Telerik team
 answered on 26 Nov 2015
1 answer
234 views

we have requirement to call a cross-domain exalead web service. It's working fine with the plain ajax jquery request but its not working with the kendo UI grid. Below is the code, kindly help to resolve the issue.

Ajax jquery code: 

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
  
<div id="grid"></div>
<script>
$( document ).ready(function() {
$.ajax({
    type: 'GET',
    url: 'web service URL',
    crossDomain: true,
    dataType: 'jsonp',
    success: function(responseData, textStatus, jqXHR) 
    {
        console.log(responseData);
    },
    error: function (responseData, textStatus, errorThrown) 
    {
        console.warn(responseData, textStatus, errorThrown);
        alert('CORS failed - ' + textStatus);
    }
});
});
</script>

Kendo UI grid code:

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/Style%20Library/kendo.all.min.js"></script>
  
<div id="grid"></div>
<script>
$( document ).ready(function() {
// The base remote Url
    var base_url = "web service url";
 
    // Create a reusable shared Transport object
    var productTransport = new kendo.data.RemoteTransport({
        read: {
            url: base_url,
            dataType: 'jsonp',  // jsonp is necessary here for cross domain calls, not just json
            type: 'GET'
        }
    });
    console.log(productTransport);
    // Create a reusable shared DataSource object
    var datasource = new kendo.data.DataSource({
        transport: productTransport
    });
     console.log(datasource);
    // This function is data-bound to the flat listview
    
        $("#grid").kendoGrid({
            dataSource: datasource
        });
    
});
</script>

Kiril Nikolov
Telerik team
 answered on 26 Nov 2015
1 answer
592 views

Hello Guys, 

 

We have a client request to show week number in kendo ui scheduler timeline view and month view. Please find attached screen shot to see exact requirement. Telerik advised to check out the demo which is not really relevant to my requirement as It does not explain how to change scheduler header to show week number. I can calculate week number as below but have no clue how to put it to scheduler header.

 

"Week " + kendo.recurrence.weekInYear(this.startDate(), this.calendarInfo().firstDay);

 

Please Help....!!!

 

Thanks, 

Lilan

Vladimir Iliev
Telerik team
 answered on 26 Nov 2015
1 answer
128 views

I was just curious if there is or will be released integration or adoption of reactive streams for the kendo widgets? We are looking at wiring some of the dataviz widgets to websockets but we were hoping to integrate backpressure mechanisms. 

 

Thanks...Matt

Kiril Nikolov
Telerik team
 answered on 26 Nov 2015
3 answers
1.3K+ views

I have some Grouped rows.

 

How do I go about obtaining the "children" rows of the groups?

Thank you.

 

Radoslav
Telerik team
 answered on 26 Nov 2015
1 answer
78 views

when the user type in some text in the kendo combo box  data gets filter accordingly in the combo box

now on clicking down arrow key first option is not getting highlighted instead the second option is getting highlighted. 

Plamen
Telerik team
 answered on 26 Nov 2015
7 answers
599 views

Kendo ui examples on telerik sites often include kendo.all.min.js.

Is there a list of files to include instead on all.min.js when you use only some widgets?

Kendo.all.min.js is a large file of 700kB, and it makes no sense to download it every time you display a page.

For a page using charts I tried to use kendo.dataviz.chart.min.js but I got an error KendoChart is not a function.

Any lists of the single files to include?

I see js in the framework have semantic names, but since I got errors I need explanations about how to use them.

Thanks

 

Paolo

Paolo
Top achievements
Rank 1
 answered on 25 Nov 2015
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
Map
Drag and Drop
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
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?