Telerik Forums
Kendo UI for jQuery Forum
1 answer
284 views
Hi,
I have checked the demo of kendo redial gauge and found all the demo code for kendo redial gauage size are fixed number,  without any percentage.  I have changed the css file to percentage, but the background image and gauge never be able to fit together. Will anybody provide some sample code? Many thanks. George

  #gauge-container {
            border-style:solid;
            border-color:red; 
            background:  transparent url(@Url.Content("~/Content/images/gauge-container-partial.png"))  ;
            background-vertical-position: -500% ;
            background-size: 100% 100%;
            width: auto;
            height: 100%;
            text-align: center;
            margin: -10% auto auto auto;
        }

        #SMDRReceiverMonitorChart {
            border-style:solid;
            border-color:blue; 
            width: auto;
            height: auto;
            align: center;
            margin: auto auto auto auto;
            
            border-color: transparent;
        }

        #gauge-container .k-slider {
           margin-top: -11px;
            width: 140px;
            
        } 
  
Iliana Dyankova
Telerik team
 answered on 05 Jun 2013
1 answer
169 views
Hi,

I defined a ViewModel with an ObservableArray as "items". Then I bound "items" to the grid with data-bind="source: items".
The grid is data-editable="inline" and there are edit and destroy commands defined.

Data from ObservableArray displays ok in the grid.
Delete button works ok.
But when I edit a row, after any action ("update" or "cancel") the grid became empty and no data is shown anymore.

This is the grid configuration:

<div id="gridMediciones" data-role="grid"
    data-bind="source: items"
    data-sorteable="true"
    data-scrollable="true"
    data-groupable="true"
    data-editable="true"
    data-columns="[
        'Nombre',
        'VolumenEstandar',
        'Volumen',
        {command: ['destroy'], title:' '}
        ]"
    ></div>
and this is the viewmodel configuration:

var viewActions = function ($grid) {
 
    var data = {
        items: [
            { Id: 1, Nombre: "Medidor 1", VolumenEstandar: 100, Volumen: 200 },
            { Id: 2, Nombre: "Medidor 2", VolumenEstandar: 200, Volumen: 300 },
            { Id: 3, Nombre: "Medidor 3", VolumenEstandar: 300, Volumen: 400 },
        ]
    },
    viewModel = kendo.observable(data);
     
    return {
        viewModel: viewModel
    };
 
}($("#gridMediciones"));
 
//inicialización de la vista
$(function () {
    kendo.bind($("body"),viewActions.viewModel);
});

Is it anything wrong?

Thanks in advance
guga
Top achievements
Rank 1
 answered on 05 Jun 2013
2 answers
216 views
Hi!

I was looking at the Window component documentation. There is a request option called "template". I am assuming this template can be used to format JSON data returned from the server. So, the template I used was the following:
"#= html #"
The data returned from the server is something like:
"html": "<span>Hello world!</span>",
"instanceId": "10A",
"data": null
However, I always get a Javascript error that says "ReferenceError: html is not defined".

Any ideas why html is not defined though it comes in the response body?

Regards.
Luis
Top achievements
Rank 1
 answered on 05 Jun 2013
3 answers
117 views
I can't seem to get manual color entry to work in the flat color picker or hsv picker when using IE9. This includes the color pickers on the demo site. Is this something that is not supported in IE9? I don't see any limitations listed in the documentation.
Dimiter Madjarov
Telerik team
 answered on 05 Jun 2013
7 answers
755 views
Hello,

This may be because I am doing an Ajax post but I have the following and the kendo grid read method works fine.   I am trying to add a value to my kendo combox.  I also tried just a read call on the combobox to reload it and that also doesn't get into the controller action for the read.

<script type="text/javascript">
$(document).on('click', '.add-user', function(){
kendo.ui.progress($("#UserGrid"), true);

$("a.add-user").addClass("k-state-disabled");
$('a.add-user').on('click.disabled', false);

var koUserName = $("#UserName").data("kendoComboBox");
var koValue = $.trim(koUserName.value());

if (koValue.length) {
$.ajax({
url: '/User/CreateUser',
type: "POST",
data: { username: koValue },
success: function (data) {
$('#UserGrid').data("kendoGrid").dataSource.read();
$("a.add-user").removeClass("k-state-disabled");
kendo.ui.progress($("#UserGrid"), false);
$('a.add-user').off('click.disabled');

var ds = $('#UserName').data().kendoComboBox.dataSource;
ds.add({ text: "Test again!", value: "5" });  //doesn't work

//$('#UserName').data("kendoComboBox").dataSource.read();  also does not work and get into the read method
 },
error: function() {
alert("error");
}
});
}
});
</script>

This is my combobox:
@(Html.Kendo().ComboBox()
.Name("UserName")
.Filter(FilterType.Contains)
.DataTextField("FirstLastName")
.DataValueField("UserName")
.HtmlAttributes(new {@style = "width:300px;"})
.Placeholder("Search Active Directory")
.DataSource(dataSource => dataSource
.Read(read => read.Action("ADList_Read", "User"))
))
Dimiter Madjarov
Telerik team
 answered on 05 Jun 2013
11 answers
382 views
Hi,

My goal is to achieve a chart with, for each X values, I have 3 stacked bars.

Suppose that I want to present, for each month, my expenses in dollars for grocery, transport and mortgage.

I would create 3 series ('grocery', 'transport' and 'mortage') and set them all stacked.

Now suppose I want the exact same chart, but for each month I want 3 values for each of my series : the values for the years 2009, 2010 and 2011.

I achieved something near like this:

var chartData = [
   { X: 0, serie1: 12, serie2: 16, serie3: 11 },
   { X: 0, serie1: 32, serie2: 12, serie3: 15 },
   { X: 1, serie1: 15, serie2: 18, serie3: 9 },
   { X: 1, serie1: 8, serie2: 13, serie3: 17 }
];
 
$('#chartContainer').kendoChart({
   dataSource: {
      data: chartData
   },
   theme: 'default',
   legend: {
      position: 'bottom'
   },
   seriesDefaults: {
      type: 'column',
      stack: true
   },
   series:
      [
         { field: 'serie1', name: 'serie1' },
         { field: 'serie2', name: 'serie2' },
         { field: 'serie3', name: 'serie3' }
      ],
   categoryAxis: {
      field: 'X'
   },
   tooltip: {
      visible: true
   }
});

But I end up with a graph where categories are repeated on the x axis. Is there a way I could have them grouped? Something that would look like this:
http://peltiertech.com/Utility/pix/clusterstackchart.png

Thank you!
Iliana Dyankova
Telerik team
 answered on 05 Jun 2013
3 answers
216 views
Hello,
I was wondering if there is any trick to enable nested views within a Kendo UI Mobile application. The following code is not running as expected (all the sub-views are loaded at once). The documentation from Kendo UI is not very specific about this.

<div data-role="view" id="dashView" data-layout="mobile-view">
 
        <div data-role="view" id="dataA">
            <a data-role="button" href="#dataB">A</a>
        </div>
        <div data-role="view" id="dataB">
            <a data-role="button" href="#dataC">B</a>
        </div>
        <div data-role="view" id="dataC">
            <a data-role="button" href="#dataA">C</a>
        </div>
 
</div>
Regards,
Doru
Petyo
Telerik team
 answered on 05 Jun 2013
1 answer
196 views
I need to set the value of another column in the grid from a custom drop down editor. If a certain value is selected from the drop down, I would like to set some column values to dynamically chosen defaults. This works well with columns that don't have validation set. However, if I try to set the model data by calling options.model.set('column', newValue) from the event handler in the drop down event, the new value is not bound to the grid cell but the validation message is shown as if I tried to enter a null value.
This works well for model fields without validation rules.
How can I set a value in the data source when validation is present?
Alexander Valchev
Telerik team
 answered on 05 Jun 2013
1 answer
153 views
hi, i want to make a notification when user get a new messege like outlook mail.
do you have any Suggestion how do to it?
Duke
Top achievements
Rank 1
 answered on 05 Jun 2013
1 answer
446 views
Hello

I am running into a problem  using the data field on the transport read. The additionalData function is called  only the 1st time the datasource executes read. 
I have an event that updates the viewModel and the calls read() on the datasource. I can confirm that  it makes a call to the server every time but it only calls additionalData the 1st time.
Here are extracts of the related bits of code.

//in the datasource setup
transport: {
    read: {
    url: crudServiceBaseUrl + "/NoteSource",
    dataType: "json",
     data: App.Notes.additionalData(),
    cache: false
  },
  create: {
    url: crudServiceBaseUrl + "/Editing_Create",
    dataType: "json"
   }
 }

//in App.Notes 
where additionalData is:
additionalData: function () {
    console.log("additionalData");
    console.log(App.Notes.viewModel.linkedModel());
    return { entity: App.Notes.viewModel.linkedModel(), entityId: App.Notes.viewModel.linkedModelId() };
}
in the App.Notes namespace.

and viewModel is:
viewModel: {
                linkedModel: ko.observable(""),
                linkedModelId: ko.observable(0),
                username: ko.observable(""),
                noteType: ko.observable(""),
                createdAt: ko.observable(new Date())
            }
also in the same namespace.

The event handler contains the following that triggers the read and subsequent call to the server:
listView.dataSource.read();

Also just as a side note. This worked when i used the mvc version but I then got a stack overflow when I tried to include a partial of the cshtml page that contains this in my _Layout.
@(Html.Kendo().ListView<TimeTarget.RDM.Core.DataTransferObjects.NoteDto>()
                .Name("listView")
                .TagName("div")
                .ClientTemplateId("template")
                .Editable()
                .DataSource(dataSource => dataSource
                    .Model(model => model.Id("NoteId"))
                    .Create(create => create.Action("Editing_Create", "Note"))
                    .Read(read => read.Action("NoteSource", "Note")
                    .Data("App.Notes.additionalData")
                    ) // Specify the action method and controller name

                )
                .Pageable(paging => paging.Enabled(true))
                  )
Nikolay Rusev
Telerik team
 answered on 05 Jun 2013
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
Drag and Drop
Application
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
DropDownTree
ListBox
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
Styling
ColorPicker
Pager
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
Licensing
PivotGridV2
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
LLM Kit
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?