Telerik Forums
Kendo UI for jQuery Forum
8 answers
374 views
Hi,

For drawing stacked bars chart, the labels in SeriesDefaults obeject looks mess for some data. I wanna know whether there is a way show the sum of the data of all stack data as label instead of showing data for each bar. For example, in my code, on 08/12 date, active: 24216, idle: 2030. The total of both is 26246. Can I just show this total number on top of the bar? How can I do that. Thanks.

This is my code:
http://jsfiddle.net/fAQXq/2/ 
jwize
Top achievements
Rank 1
 answered on 25 Jun 2013
0 answers
82 views
Hi there

We are using license version of KendoUI version 2012.2.913.340.
It's MVC 4 in .Net 4.5.

I have a grid on a page and it has CRUD on controller. I do get data on grid as a search result.

When I edit one of the record and try to save, I get issue on date as I see date coming to controller is : 1/01/0001 12:00:00 AM. I tried to put following code to see what the issue is and I can see issue is on line 16 where Attempted value is 6/25/2013 10:45:00 AM in place of 25/6/2013 10:45:00 AM.

FYI,
I do have web.config set to following:
<globalization culture="en-AU" uiCulture="en-AU" />
I have tried using Code first 5.0 as well as EDMX (default)
public class MyDateTimeModelBinder : DefaultModelBinder
    {
        public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {


            var displayFormat = bindingContext.ModelMetadata.DisplayFormatString;
            var value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);

            if (!string.IsNullOrEmpty(displayFormat) && value != null)
            {
                DateTime date;
                displayFormat = displayFormat.Replace("{0:", string.Empty).Replace("}", string.Empty);
                // use the format specified in the DisplayFormat attribute to parse the date

                bindingContext.ModelState.SetModelValue(bindingContext.ModelName, bindingContext.ValueProvider.GetValue(bindingContext.ModelName));

                if (DateTime.TryParseExact(value.AttemptedValue, displayFormat, CultureInfo.InvariantCulture, DateTimeStyles.None, out date))
                {
                    return date;
                }
                else
                {
                    bindingContext.ModelState.AddModelError(
                        bindingContext.ModelName,
                        string.Format("{0} is an invalid date format", value.AttemptedValue)
                    );
                }
            }

            return base.BindModel(controllerContext, bindingContext);
        }


    }

I have created controller (on a same site), as how Microsoft does by right clicking on controller right clicking on view etc.. and it has generated CRUD which works without any issue. I mean above all line 30 works with correct date format.

Can you please tell me what I am doing wrong here.

I am in Australia and like to see en-AU culture.
ankit
Top achievements
Rank 1
 asked on 25 Jun 2013
0 answers
69 views
Hi there

We are using license version of KendoUI version 2012.2.913.340.
It's MVC 4 in .Net 4.5.

I have a grid on a page and it has CRUD on controller. I do get data on grid as a search result.

When I edit one of the record and try to save, I get issue on date as I see date coming to controller is : 1/01/0001 12:00:00 AM. I tried to put following code to see what the issue is and I can see issue is on line 16 where Attempted value is 6/25/2013 10:45:00 AM in place of 25/6/2013 10:45:00 AM.

FYI,
I do have web.config set to following:
1.<globalization culture="en-AU" uiCulture="en-AU" />
I have tried using Code first 5.0 as well as EDMX (default)
01.public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
02.        {
03. 
04. 
05.            var displayFormat = bindingContext.ModelMetadata.DisplayFormatString;
06.            var value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
07. 
08.            if (!string.IsNullOrEmpty(displayFormat) && value != null)
09.            {
10.                DateTime date;
11.                displayFormat = displayFormat.Replace("{0:", string.Empty).Replace("}", string.Empty);
12.                // use the format specified in the DisplayFormat attribute to parse the date
13. 
14.                bindingContext.ModelState.SetModelValue(bindingContext.ModelName, bindingContext.ValueProvider.GetValue(bindingContext.ModelName));
15. 
16.                if (DateTime.TryParseExact(value.AttemptedValue, displayFormat, CultureInfo.InvariantCulture, DateTimeStyles.None, out date))
17.                {
18.                    return date;
19.                }
20.                else
21.                {
22.                    bindingContext.ModelState.AddModelError(
23.                        bindingContext.ModelName,
24.                        string.Format("{0} is an invalid date format", value.AttemptedValue)
25.                    );
26.                }
27.            }
28. 
29.            return base.BindModel(controllerContext, bindingContext);
30.        }
ankit
Top achievements
Rank 1
 asked on 25 Jun 2013
2 answers
352 views
Hi,

When I set DataSource to a grid datetime values are converted to string as /Date(1362607200000)/,
removing DataSource and command column works but I need command values so I should set DataSource for functions.

Works
Html.Kendo().Grid(Model)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.CaptureRequest.Title).HtmlAttributes(new { style = "cursor:pointer" }).Title(ContentProvider.Resources.Names.Name);
        columns.Bound(p => p.CaptureRequest.StartDate).Format("{0:dd.MM.yyyy}").Title(ContentProvider.Resources.Names.StartDate);
        columns.Bound(p => p.CaptureRequest.EndDate).Format("{0:dd.MM.yyyy}").Title(ContentProvider.Resources.Names.EndDate);
    })
Sample output
Start Time            End Time
230.01.2013                08.02.2013

Doesn't Work
Html.Kendo().Grid(Model)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.CaptureRequest.Title).HtmlAttributes(new { style = "cursor:pointer" }).Title(ContentProvider.Resources.Names.Name);
        columns.Bound(p => p.CaptureRequest.StartDate).Format("{0:dd.MM.yyyy}").Title(ContentProvider.Resources.Names.StartDate);
        columns.Bound(p => p.CaptureRequest.EndDate).Format("{0:dd.MM.yyyy}").Title(ContentProvider.Resources.Names.EndDate);
        columns.Command(command => command.Destroy()).Width(90);
    })
.DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events =>
        {
            events.Error("onGridError");
            events.RequestEnd("onGridRequestEnd");
        })
        .Model(model =>
        {
            model.Id(p => p.CaptureRequest.ID);
        })
        .Read(read => read.Action("RequestGridSource/" + @ViewBag.id, "TstvOperation"))
        .Destroy(update => update.Action("DeleteActiveCaptureRequest", "TstvOperation"))
    )
Sample output
Start Time                        End Time
/Date(1359038400000)/          /Date(1359044400000)/

What should be done to keep datetime values with formatting?

Thanks
Evan
Top achievements
Rank 1
 answered on 24 Jun 2013
3 answers
156 views
Hi,

I am trying to listen to a swipe event across my entire Kendo mobile application. My best attempt is as follows:

$(document.body).kendoTouch({
    enableSwipe: true,
    minXDelta: 20,
    swipe: function(e) {
        console.log("swipe " + e.direction);
        alert("swipe " + e.direction);
        if(e.direction == "right") {
            if(app.pane.history.length > 1){
                app.navigate("#:back");
            }
        }
    }
});

This works in the graphite simulator and on android devices. However, on an iPhone the event is only fired on the initial view before navigating anywhere. After navigating to another view it no longer fires, even when returning to the initial view. I figure the event handler is dropped after the DOM is modified but it's hard to debug on the iPhone.

I did get this working by rebinding this event handler to the body every time the application viewShow event fired, but this didn't seem right and I think I noticed a hit to performance.

Is this a bug with Kendo mobile or is there a better way to go about this? I want to avoid having to wire up each of my views individually if possible.

Regards
Dean
Kiril Nikolov
Telerik team
 answered on 24 Jun 2013
5 answers
114 views
can i check what is new data on sync?i have this:
$('#order_it').click(function(){
    gridNewData.sync(); // this will send data to server
});

gridNewData complete:
complete: function(xhr, textStatus) {
    if (textStatus == 'success') {
        orders.read(); // this will refresh orders, and grid too, a
        gridNewData.data([]); // empty that temp datasource
    }
}

and:
var orders = new kendo.data.DataSource({
    autoSync: false,
    transport: {
        read: {
            contentType: 'application/json',
            url: '/dokument/orders/',
            dataType: 'json',
            complete: function(xhr, textStatus) {
 
                // i think that here i need to get new synced items(or uids)
 
            }
        }
    },
    schema: {
        model: {
            id: 'id'
        }
    }
});

I need to make that rows in grid with another color, but can't find way to check what is new data.

Thanks.
Daniel
Telerik team
 answered on 24 Jun 2013
4 answers
90 views
I'd like for five buttons to fill the entire screen of my apps first view, like in the attached sketch.

Using the css vh tag works great on iOs 6.x, but not in Safari on iOs 5.x. 

Tried setting height of body and html to 100%, and then the button height to 20%, but this doesn't work inside the view.

Any suggestions?
Robin
Top achievements
Rank 1
 answered on 24 Jun 2013
1 answer
1.0K+ views
Hey
I'm having problems hiding the tooltip in web grid when thet value of the cell is null/empty string.
I used templates to add the content.
I'm using asp.net mvc razor.
here is the example code :
        chtml file:
        @(Html.Kendo().Tooltip()
        .For("#FlatReportGrid")
        .Position(TooltipPosition.Center)
        .Filter("td")
        .ContentTemplateId("gridtooltipTemplate")
        //.Events(events => events.Show("TooltipOnShow"))
        )

<script type="text/x-kendo-template" id="gridtooltipTemplate">   
     <div id="ErrorReportGridTooltip" class="TooltipStyle">
        #=target.text()#
     </div>  
</script>

Css file:
<style>
   .TooltipStyle {
       font-family:Arial, Helvetica, sans-serif;
       font-size:14px;
       white-space:pre-wrap;
       overflow:visible;
       max-width: 250px;
   }
</style>

I'm finding it hard to remove the tooltip whne getting empty valuse.
I tried to set a differnt css class for my tooltip ErrorReportGridTooltip div but the frame(border and background) do not disappear.
Any ideas will be much appriciated
Kiril Nikolov
Telerik team
 answered on 24 Jun 2013
4 answers
633 views
Hi there,

I'm in the process of evaluating KendoUI controls as a replacement for what we're using currently and am just now looking at the pie chart control (have a need in a current project). The problem I'm running into is I need to have 3 charts side by side and each has a different number of items in the legend, all of varying lengths. The chart diagram itself seems to center align and the legend seems to align to the bottom of the control. What I want to happen is the diagrams to all line up and the tops of the legends to line up. I've attached a screenshot to illustrate (top is what it does, bottom is what I want it to do). Is there some way to change the alignment of the different elements of the control?

My code is:
<div style="width: 250px; float: left; vertical-align: top; margin: 0 0 auto 0;">
    <div id="statuschart"></div>
</div>
<div style="width: 250px; float: left; vertical-align: top; margin: 0 0 auto 0;">
    <div id="companychart"></div>
</div>
<div style="width: 250px; float: left; vertical-align: top; margin: 0 0 auto 0;">
    <div id="divisionchart"></div>
</div>
 
<script>
    $('#statuschart').kendoChart({
        name: "StatusChart",
        chartArea: { background: "transparent" },
        title: { text: "Facility Status" },
        series: [{
            type: "pie",
            data: [
                { category: "Active", value: 25 },
                { category: "Abandoned", value: 35 },
                { category: "Done", value: 40 }
            ],
            size: 150
        }],
        legend: { position: "bottom" }
    });
    $('#companychart').kendoChart({
        name: "CompanyChart",
        chartArea: { background: "transparent" },
        title: { text: "Top Companies" },
        series: [{
            type: "pie",
            data: [
                { category: "Active111111111111", value: 25 },
                { category: "Abandoned11111111111", value: 35 },
                { category: "Done11111111", value: 40 }
            ],
            size: 150
 
        }],
        legend: { position: "bottom" }
    });
    $('#divisionchart').kendoChart({
        name: "DivisionChart",
        chartArea: { background: "transparent" },
        title: { text: "By Division" },
        series: [{
            type: "pie",
            data: [
                { category: "Active111111111111", value: 25 },
                { category: "Abandoned11111111111", value: 35 },
                { category: "Done111111111111", value: 15 },
                { category: "Another1111111111", value: 15 },
                { category: "One1111111111", value: 10 }
            ],
            size: 150
 
        }],
        legend: { position: "bottom" }
    });
</script>
The styling on the divs is just several things I've tried that I thought I'd leave in there.

Any help would be greatly appreciated,
Jason
Jason
Top achievements
Rank 1
 answered on 24 Jun 2013
1 answer
86 views
I need specific selection for kendogrid - one cell in each row and disable selection for first column.
I also need client to be able to select the cell in row without holding CTRL.

Same functionality can be achived by creating grid for each row and setting selectable:"cell" but I want it in one grid (so columns match)

Thank you

Nikolay Rusev
Telerik team
 answered on 24 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
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
SPA
Filter
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
OrgChart
TextBox
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
Popover
DockManager
FloatingActionButton
TaskBoard
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
TimePicker
DateTimePicker
RadialGauge
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
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?