Telerik Forums
Kendo UI for jQuery Forum
2 answers
381 views
Renaming tree nodes isn't supported natively by kendoui yet...  I had to implement it and thought it would be good to share it.

Basically, I use jeditable and bind to the double click on a tree instance, which is pretty common way to initiate editting of a tree node.

You can see sample:
http://jsfiddle.net/65Dha/8/


Thanks,
Miguel
ICT
Top achievements
Rank 1
 answered on 23 Jan 2013
2 answers
279 views
I've hit a DataViz formatting road block. Any help would be appreciated.

I've created a stacked bar chart with the following specs:
- using ASP.NET MVC DataViz controls
- My GetAllWeeklyResultsForSpecificYear is passing back an object of type IList that contains
-- int TotalResults
-- int NorthAmericaResults
-- int ItalyResults
-- int FranceResults
-- int Year
-- int Quarter
-- int Month
-- int Week
-- DateTime FirstMondayOfWeek

Stored in this list of objects is every week number, year number, and the first Monday of that week.

For example,
Week 1 might contain   Week = 1
                                    Year = 2013
                                    FirstMondayOfWeek = Dec 31, 2012
                                    
Week 2 might contain   Week = 2
                                    Year = 2013
                                    FirstMondayOfWeek = Jan 7, 2013

I would like the X axis to display the stacked bar chart based on the Week (this is the category). This currently works using the code below:
{code}
@using System.Globalization
@using Kendo.Mvc.UI
@using Kendo.Mvc.UI.Fluent
@using My.Dashboard.Results.Domain.Entities
@model My.Dashboard.Web.Models.GraphSettingsViewModel
<div id="weeklyResultsForSpecificYearChart-wrapper" style="width:100%">
    @(Html.Kendo().Chart<WeeklyResult>()
          .Name("WeeklyResultForSpecificYearChart")
          .Theme("MetroBlack")
          .Tooltip(new Action<ChartTooltipBuilder>(t => t.Visible(true).Template("#=value# #=series['name']# Results For week number #=category#")))
          .Title("Weekly Results for " + Model.Year.ToString(CultureInfo.InvariantCulture))
          .Legend(legend => legend.Position(ChartLegendPosition.Bottom))
          .DataSource(dataSource => dataSource.Read(read => read.Action("GetAllWeeklyResultsForSpecificYear", "Result", new { year = Model.Year })))
          .Series(series =>
          {
              series.Column(model => model.FranceResults).Name("France").Stack("All");
              series.Column(model => model.NorthAmericaResults).Name("North American").Stack("All");
              series.Column(model => model.ItalyResults).Name("Italy").Stack("All");
          })
          .CategoryAxis(axis => axis
          .Categories(model => model.Week)
          .Labels(labels => labels.Rotation(-90)))
          .CategoryAxis(axis => axis
          .Labels(model => model.Format("{0:0}"))))
</div>

1. I would like to display the X axis label as a formatted DateField for example "d" to display the date as "Jan 2". In order to do this, I need to get the property "FirstMondayOfWeek" and render it.  If I changed the code to the snippet below, it works, but the text is not legible and the bars that are drawn become spaced out by 5 or 6 additional lines. Basically instead of it grouping it by the week(ie: 52 weeks), it now groups it by the FirstMondayOfWeek (365 days), even thought there are only 52 data points. This is because the week number is stored as an integer and the FirstMondayOfWeek is stored as a DateTime object. Instead of it just basing it on the data points, it bases it on the day of the week.
.CategoryAxis(axis => axis.Categories(model => model.FirstMondayOfWeek)
.Labels(labels => labels.Rotation(-90)))
          .CategoryAxis(axis => axis
          .Labels(model => model.Format("dd"))))
The above snippet currently renders this:  FirstMondayOfWeek-Category-Displays-5-Days-Between-Data-Points.PNG


This snippet below renders: Week-Category-Displays-52-Weeks-Looks-Nicer.PNG
.CategoryAxis(axis => axis
              .Categories(model => model.Week)
              .Labels(labels => labels.Rotation(-90)))
          .CategoryAxis(axis => axis
                  .Labels(model => model.Format("{0:0}"))))


Is it possible to show the number of data points in "Week-Category-Displays-52-Weeks-Looks-Nicer.PNG" (ie: 52 data points instead of 365), but display the FirstMondayOfWeek as the X axis label and on the tooltip template?

2. I would like to be able to display the tool tip with a value from the FirstMondayOfWeek property.  Is it possible to extract the series values? The snipped below does not do this, but perhaps someone can let me know if it's feasible to do this and how to do it.
.Tooltip(new Action<ChartTooltipBuilder>(t => t.Visible(true).Template("#=value# #=series['name']# Results For #=FirstMondayOfWeek#")))

Thanks for you help!
Phil
Top achievements
Rank 1
 answered on 23 Jan 2013
3 answers
553 views

Hi, 

Is it possible to data-bind a form submit? I know how to bind on button click but I would like to know if I can bind for form submit e.g <form data-bind='submit: handleSubmit'></form>.

Regards, 

Rick Beerendonk
Top achievements
Rank 1
 answered on 23 Jan 2013
3 answers
157 views
Is there any way on this demo - http://demos.kendoui.com/mobile/view/zoomable.html - to have the image start zoomed out? 

I tried width=100%, but then it cuts off the detail above and beyond however many pixels wide the display is.  (In other words, if I zoom in on the image, I don't get additional detail - it just blurs.)

I'd like to have the image start zoomed out with the user able to zoom in on it ... not start zoomed out with the user only seeing the upper left-hand corner of the image to start with.

Thanks.
Iliana Dyankova
Telerik team
 answered on 23 Jan 2013
1 answer
74 views
The same error is repeated in three different places in the Grid Migration documentation here
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/migration/widgets/grid

This code is given for sending custom data to the action method
dataSource => dataSource.Ajax().Data("sendData")
That is incorrect, it should be something like this
dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Products_Read", "Home")
            .Data("additionalData") // name of the client function that returns the additional data
        )
Note, that the Data method is used on the Action method, rather than on the Ajax method as given in the incorrect document.

It is better decribed here
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding
Petur Subev
Telerik team
 answered on 23 Jan 2013
1 answer
154 views

We have a datepicker on an MVC view, rendered per this snippet:

@(Html.Kendo().DatePicker()
  .Name("criteriaDate")
  .Depth(CalendarView.Year)
  .Format(Model.DateFormat)
  .Max(Model.RangeEnd.DateTime)
  .Min(Model.RangeStart.DateTime)
  .Value(Model.RangeStart.DateTime)
  .HtmlAttributes(new { style = "width:100%;" })
)

Everything works fine when the view is rendered directly, but when another site attempts to show it in an iframe we are seeing this error in the Visual Studio debugger: Unhandled exception at line 25, column 9190 in http://localhost/site/Scripts/kendo.all.min.js, which is in the toFront function on the "s=document.activeElement" line. The result is that the datepicker control doesn't render on the page.

I didn't see anything on this topic, so any help would be appreciated. Thanks in advance...

Daniel
Telerik team
 answered on 23 Jan 2013
1 answer
341 views

Hello,
if i have in razor this dropdownlist
@(Html.Kendo().DropDownList()
          .Name("category")
          .OptionLabel("Select a product...")
          .DataTextField("ProductName")
          .DataValueField("ProductID")
          .HtmlAttributes(new { style = "width:200px" })
          .DataSource(source => source.Read("ProductListData", "Controls"))
          .Events(ev => ev.Change("change"))
      
                                        
)

how can i use in the same view, the value of the dropdownlist using razor syntax?
i was looking for something like @Html.Kendo().DropDownList("category").Value()...

Regards,

Dimiter Madjarov
Telerik team
 answered on 23 Jan 2013
1 answer
266 views
Hello,

I'm trying to bind the selected item in a tree to an object in my ViewModel and I fail to do that. 

I tried to use this in my markup:
<div class="todo-tree" data-bind="source: todoList, value: selectedTask" ></div>

But I guess it is not the correct way, since I get the following error:
Uncaught TypeError: Object [object Object] has no method 'value'

I that matters, my data source is a simple array.

Did anyone did that before and can assist?

Thanks,
Irit
Alexander Valchev
Telerik team
 answered on 23 Jan 2013
1 answer
265 views

Is it possible to specify the text alignment property per tabstrip.
I've looked through the documentation but cannot find anything.

I can cange the alignment by doing the following but that makes it so for the whole site.

<style>
.k-tabstrip .k-tabstrip-items { padding:0.3em 0.35em 0;}
.k-reset { text-align:right;}
</style>

Any help would be greatly appreciated.
John
Top achievements
Rank 1
 answered on 23 Jan 2013
2 answers
60 views

We have recently downloaded a trial version of the Kendo UI suite with a view to making a purchase at the end of the trial. We are using the Kendo grid control in Ajax binding mode and have noticed a few problems. The main issue is that the following script error occurs when deleting the last record in the model that is bound to the grid:

Unhandled exception at line 18, column 31059 in http://**/Scripts/kendo/2012.3.1114/kendo.web.js 0x800a138f - Microsoft JScript runtime error: '_current' is null or not an object

We cannot replicate this in Chrome. We are interested in Kendo as it is marketed as being compatible with IE8. This doesn't appear to be the case.

Here is the grid in our .cshtml file:

@(Html.Kendo().Grid(Model)
    .Name("UserGrid")
    .HtmlAttributes(new { style = "height:500px" })
    .Columns(columns =>
    {
        columns.Bound(p => p.ReferenceNumber).Groupable(false);
        columns.Bound(p => p.Title).Title("Title");
        columns.Bound(p => p.AgreementDate).Title("Agreement Date");
        columns.Bound(p => p.Superseded).ClientTemplate(
        "<input type='checkbox' disabled='disabled' value='#= Superseded #' " +
            "# if (Superseded) { #" +
                "checked='checked'" +
            "# } #" +
        "/>");

        //columns.Bound(p => p.Parties.Count);
        columns.Bound(p => p.SourceDocumentLink);
        columns.Bound(p => p.RelationshipLeadDirector);
        columns.Bound(p => p.Owner);
        columns.Bound(p => p.LegalContact);
        columns.Command(command => command.Destroy()).Width(100);
        columns.Template(@<text></text>).ClientTemplate("<a class='k-button k-button-icontext k-edit-button' href='" + Url.Action("Update", "Agreement") + "/#=Id#'><span class='k-icon k-edit'></span>Edit</a>");        
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        //.Server()
        //.Events(events => events.RequestStart("requeststart_handler"))
        //.Events(events => events.Error("error_handler"))              
        .Model(model => model.Id(p => p.Id))
        .Destroy("Delete", "Agreement")
        .Update("Update","Agreement")        
        .Read(read => read.Action("ListAgreements", "Agreement")
        ))
    .Navigatable()
    .Scrollable()
    .Resizable(s=>s.Columns(true))
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
    .Sortable()
    .Pageable(builder => builder.PageSizes(true))
      )

And here is the action on our controller that takes care of a delete:

[HttpAjaxPost]
public JsonResult Delete([DataSourceRequest] DataSourceRequest request, AgreementData agreement)
{
    try
    {
        _agreementService.DeleteAgreement(agreement);
        ModelState.Clear();
    }
    catch (Exception ex)
    {
        Logger.GetLog(Logger.ServiceLog).Error(ex);
        ModelState.AddModelError("errors", "Delete failed");
    }
    return Json(ModelState.ToDataSourceResult());
}

Is this a bug with the Kendo grid or have we missed something obvious? Just to recap..the script error only occurs when deleting the last record in the grid.

Sebastian
Telerik team
 answered on 23 Jan 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
Chat
DateRangePicker
Dialog
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
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?