Telerik Forums
Kendo UI for jQuery Forum
2 answers
688 views
I currently have a two step process for my kendo charts. The first process is allowing the user to select the datasets (series) they want on the chart. They then choose a template. A template is the graph settings ex (color theme, chart type line, bar, circle ect.).

Currently if a user selects the datasets they want i return the series information to the graph and the graph is then populated with the template settings.

I also allow the user to change the template settings on the fly. For example a Bar chart to Line, Area, Circle ect. They can also change the theme. The issue becomes when the first load is set, the series information that i pass is:{
[name: "string", data: []],
[name: "string", data: []]
}
when i inspect the series object after the change on the template I see the following added to the object:{
[name: "string",
data: [],
type: "area",
color: "ff6800",
ect...
],
[name: "string",
data: [],
type: "area",
color: "ff6800",
ect...
],
}

The issue becomes that I can modify my object type to the correct selected type. I can even change the color value to a differen color for each series. However, because I am using the Kendo Themes, the chart background will change but then the series colors wont match. I could come up with a function to choose the background color for the chart and then choose what colors you want for your series. But I would rather use the kendo methods if possible.

I also think if i clear out that object and just use the settings and data I am passing it could work. However, I dont want to have to go to the database each time a page level changes is made and I also noticed that my object even if i create a temp object is given all of the chart properties.

Thank you in advance!
don
Top achievements
Rank 1
 answered on 29 Mar 2013
4 answers
331 views
A grid being 'editable' can be set during initialization. Can this be set at runtime as well? I have a 'edit' mode that I would like to use to enable/disable editing of the Grid contents. I see in the documentation that Grid.editable can be set at initialization, but I don't see how it can be changed at runtime (after initialization to use the documentation's terms.)
Ross Micheals
Top achievements
Rank 1
 answered on 29 Mar 2013
2 answers
838 views
When creating a DataSource from an array, I can iterate the strings.
var arr = ["one", "two", "three"];
var datasource = new kendo.data.DataSource({
   data: arr
});
datasource.read();
 
var data1 = datasource.data();
for (var i = 0; i < data1.length; i++) {
   alert(data1[i]);
}
Then I add a new string to the datasource.
datasource.add("four");
var data2 = datasource.data();
for (var i = 0; i < data2.length; i++) {
   alert(data2[i]);
}
As a result, three strings and one object are returned from the datasource.

What should be added, so that the loop returns four strings?

Michael G. Schneider
mgs
Top achievements
Rank 1
 answered on 29 Mar 2013
3 answers
161 views
We have a kendo grid, which has a date field in it.  That date field is sometimes empty.  When kendo sorts ascending (future dates are at the end), the empty fields appear in the front.  Is it possible to change the sort mechanism to make empty dates appear lower in the sort order (near the bottom) rather than higher?
Alexander Valchev
Telerik team
 answered on 29 Mar 2013
1 answer
86 views
I'm trying to accomplish a simple task where upon validation result (failed or passed) I want to perform some action, for example set CSS style to a corresponding text element.  I want to do this per form element. Is there a way to do this? Is there as event that one can subscribe to ,like onValidationComplete(validation_result) ?

Rosen
Telerik team
 answered on 29 Mar 2013
3 answers
80 views
Is it possible to override the code that generates a row in the kendo grid?
I'd like to add more features to the row model's json, without necessarily putting the field in to the model object.

Currently, I'm using a backbone datasource and model to drive my grid.  I'd ideally like to have a callback per model to add this reference.  Is it possible to do?
Alexander Valchev
Telerik team
 answered on 29 Mar 2013
1 answer
185 views
A remote hierarchical data source delivers JSON that looks like the following:  Note the .data property which contains additional information.
jQuery182041788989288830735_1364362919255([
{"id":"6a488457-5b85-48fc-be24-b469219564c4"
,"sprite":"custom3"
,"text":"Silk"
,"hasChildren":true
,"data"
  :{"nodetype":"Fabric"
   ,"level":3
   ,"activity":0
   ,"maintenance":NaN
   ,"status":3
   }
}
,
{"id":"8a9e479a-4448-462e-9151-b1913cc1660e"
,"sprite":"custom3"
,"text":"Wool"
,"hasChildren":true
,"data"
  :{"nodetype":"Fabric"
   ,"level":3
   ,"activity":0
   ,"maintenance":NaN
   ,"status":3
   }
 }
,
{"id":"da373cd1-4264-4096-9955-5527e6c49dd9"
,"sprite":"custom3"
,"text":"Canvas"
,"hasChildren":true
,"data"
  :{"nodetype":"Fabric"
   ,"level":3
   ,"activity":0
   ,"maintenance":NaN
   ,"status":4
   }
}
])

The template in the .kendoTreeView constructor is thus and will display additional status information when the treeview is rendering a 'level 3' node:
window.reportUrl = '/reporter';
window.statusCode = [ 'bla', 'bla', 'bla' ];
 
template:
"<span class='name'>#: item.text #</span>"
+ "# if (item.data.level == 3) {#"
  + "# if (item.hasChildren) {#"
    + " | <a href='#= window.reportURL #?id=#= item.id #' title='View Report' target='_blank'>"
      + "<img alt='View Report' class='cm-icon' src='/images/report.png'>"
    + "</a>"
  + "#}#"
  + "# if (('status' in item.data) && !isNaN(item.data.status)) {#"
    + " | <span class='cs-status'>Status: #= window.statusCode[item.data.status] #</span>"
  + "#}#"
+ "#}#"
My problem is that when a some property .data changes, the tree node is not redrawn.
User does some activity runs a getJSON that returns an updated status for an id.

$.getJSON ( .... )
.done (function (info) {
  // info looks like {result:{id:<some-id>,status:<some-status>}}
 
  var tv = $('#treeview').data('kendoTreeView');
  var dsData = tv.dataSource.get(info.result.id);
   
  dsData.data.set('status', info.result.status); // does not cause node to be redrawn
  dsData.set('data.status', info.result.status); // does not cause node to be redrawn
 
  dsData.set('text', 'BLA BLA BLA'); // DOES cause node to be redrawn
});
What would need to be done to have the treeview observe the 'additional information' in dsData.data (or dsData.data itself) and rerender when something gets set ?

I would prefer to _not_ have to do something like this (untested):
dsData.set('data.status', info.result.status);
dsData.set('text', dsData.text');

Thanks,
Richard
Vladimir Iliev
Telerik team
 answered on 29 Mar 2013
5 answers
839 views
Hi,

I've created a chart in ASP.NET MVC using the following code:
@(Html.Kendo().Chart(Model)
    .Name("Regions")
    .Title("Regions")
        .DataSource(ds =>
            {
                ds.Read(read => read.Action("GetClientRecordsCountByRegion", "Home"));
                ds.Sort(sort => sort.Add(model => model.Region).Ascending());
            }
        )
    .Series(series =>
    {
        series.Pie("TrademarkCount", "Region")
            .Labels(lbl => lbl.Visible(true).Template("#= category #: #= value #")
                .Align(ChartPieLabelsAlign.Circle)
                .Position(ChartPieLabelsPosition.OutsideEnd));
    })
)
On a button click, I would like to refresh the chart with new data by either calling another Action or passing parameters into the current action.  How do I do that?

I tried setDataSource and then redraw as shown below but its not working.  Please help. Thanks!
function refreshsource()
        {
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        type: "GET",
                        url: "/Home/GetClientRecordsCountByRegionNew",
                        dataType: "json"
                    }
                }
            });
 
            var chart = $("#Regions").data("kendoChart");
            chart.setDataSource(dataSource);
            chart.redraw();
        }
Hristo Germanov
Telerik team
 answered on 29 Mar 2013
3 answers
378 views
Subject says it all. In my GridForeignKey.cshtml I've placed a combo box rather than the dropdownlist. For editing values in my grid it works fantastically. When adding a new row inline however, the default value displayed is 0. This is a non-nullable field with no default. How can I get my own "Select..." text in there initially or nothing at all?

Thank you!
Michael
Petur Subev
Telerik team
 answered on 29 Mar 2013
3 answers
656 views

I am using the Grid with remote data, but client side paging/filtering/sorting. The data source is pre-filtered, and setup as follows:


var
dataSource = new kendo.data.DataSource({
            error: function (e) {
                alert(e.errors);
            },
            filter: {
                field: "CreatorADGuid",
                operator: "eq",
                value: '@ViewBag.UserId'
            },
            pageSize: 40,
            batch: true,
            transport: {
                read: {
                    url: "/api/project/",
                    dataType: "json"
                },
                update: {
                    url: "/api/project/",
                    type: "POST",
                    dataType: "json"
                },
                create: {
                    url: "/api/project/",
                    type: "PUT",
                    dataType: "json"
                }
            },
            schema: {
                data: "Body",
                total: function (response) {
                    return response.Body.length;
                },
                model: {
                    id: "Id",
                    fields: {
                        Id: {
                            type: "string",
                            defaultValue: Constants.emptyGUID
                        },
                        Title: {
                            type: "string",
                            validation: {
                                required: true
                            },
                            editable: true
                        },
                        ScheduAllId: {
                            type: "string",
                            editable: true
                        },
                        CreatorDisplayName: {
                            type: "string",
                            editable: false
                        },
                        CurrentStatusDate: {
                            type: "string",
                            defaultValue: '@DateTime.Now.ToShortDateString()',
                             editable: false
                         }
                     }
                 },
                 errors: "MessageDetails"
             }
        });
The grid is using a custom templated toolbar that contains a button which allows a user to add a new record. This all works as expected if I do not sort or filter the grid. If the grid is sorted/filtered, clicking the button does not display the popup to add a new record. If I then unfilter/unsort the grid after clicking the button, an empty row is added to the beginning of the grid. The following is my grid:

$("#project-grid").kendoGrid({
            dataSource: dataSource,
            toolbar: kendo.template($("#project-toolbar-template").html()),
            pageable: true,
            height: $('body').height(),
            sortable: {
                mode: "multiple",
                allowUnsort: true
            },
            filterable: true,
            columns: [
                {
                    field: "Title",
                    title: "Title",
                    template: kendo.template($("#project-title-template").html())
                },
                {
                    field: "ScheduAllId",
                    title: "ScheduAllId",
                    width: "20%"
                },
                {
                    field: "CreatorADGuid",
                    title: "Creator",
                    template : '#= CreatorDisplayName #',
                    width: "20%"
                },
                {
                    field: "CurrentStatusDate",
                    title: "Created Date",
                    width: "20%",
                    format: "{0:dd/MM/yy}"
                },
                {
                    command: ["edit"],
                    title: " ",
                }],
            editable: {
                mode: 'popup',
                template: kendo.template($("#project-edit-template").html()),
            },
            edit: function (e) {
                var editWindow = e.container.data("kendoWindow");
 
                if (e.model.isNew()) {
                    e.container.data("kendoWindow").title('Add New Project');
                }
                else {
                    e.container.data("kendoWindow").title('Edit Project');
                }
            }
        });
Please advise if this is a known defect, and possibly a work-around as our requirement is to have the grid pre-sorted for users, but also give them the ability to add a new record while the grid is sorted. I've tried this in the latest 2013 Q1 build and it still behaves as described above. Thank You.
Vladimir Iliev
Telerik team
 answered on 29 Mar 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
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
MultiColumnComboBox
Dialog
Chat
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
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
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?