Hi ,

I would like to have masked text inside combobox. For example value from my database will be A22345. This will appear as user starts typing. But I would like it to be displayed as A2-2345 in the combobox. How can I achieve this?

I can see this has been asked before, but perhaps there is something new?

It would be more than nice to be able to deselect given dates from the datepicker. For example the possibility to deselect all Saturdays, Sundays and public holidays, so the user can only select office days. Of course one can (and should) check the date server-side, but it looks unprofessional that the user can select a date in the datepicker, which then gives an error server-side.

jQueryUI offers this functionality. One just needs to write a Javascript function which returns true/false for selectable/non-selectable, and then pass this to the datepicker
through beforeShowDate. So I could use jQueryUI and restyle to resemble Kendo, but . . .

Thank you in advance for any help you can give.
Patrick

I'm developing a stacked chart in Kendo UI. The datasource provides objects which have properties and 2 nested objects. 1 of these nested objects provides the data for the chart. The other nested object provides numbers I need to show in the Tooltip. I set the Tooltip Template like this:

    .Template("#= value #% - N:#= dataItem.numbers #"))

where value references the first nested object with data (are percentages). This works fine. dataItem.numbers references the second nested object (with corresponding numbers). I would like to show the corresponding numbers. But I always get "undefined" as result.

How can I change this code so the corresponding numbers are shown in the Tooltip?

        .Series(series =>
        {
            foreach (var s in Model.StapeltrendSerie)
            {
                if (s.type.Equals("column"))
                {
                    series.Column(s.data)
                          .Name(s.name)
                          .Axis("Percentage")
                          .Stack(true)
                          .Color(s.color)
                          .Tooltip(tooltip => tooltip
                                    .Visible(true)
                                    .Template("#= value #% - N:#= dataItem.numbers #"))
                          .Labels(labels => labels.Visible(false))
                          .GroupNameTemplate("#= group.value # (#= series.name #)");
                }else if (s.type.Equals("line") && Model.TrendlijnWeergeven)
                {
                    series.Line(s.data).Markers(m => m.Type(ChartMarkerShape.Circle))
                          .Name(s.name)
                          .Axis("Score")
                          .Stack(false)
                          .Color("#"+Model.TrendlijnKleur)
                          .Tooltip(tooltip => tooltip.Visible(false))
                          .Labels(labels => labels.Visible(true))
                          .GroupNameTemplate("#= group.value # (#= series.name #)");
                }
            
            }
        })

This is the object represented by s

    public class StapeltrendSerieModel
    {
        public decimal[] data { get; set; }
        public int[] numbers { get; set; }
        public string type { get; set; }
        public bool stack { get; set; }
        public string name { get; set; }
        public string color { get; set; }
        public string axis { get; set; }
        public string category { get; set; }
        public int order { get; set; }
    }

s.data is an array of decimals. (percentages) s.numbers contains the corresponding numbers (as integers) And I was hoping dataItem.numbers would do the trick. But of course DataItem refers to an entry of the s.data array. How can I address the s.numbers value?

In my grid, I am updating it to use the Virtualization of Remote Data (and removing the discrete paging via next/previous buttons).  In the code, I am changing from scrollable: false to scrollable: { virtual: true }.

The side effect of this is that my columns, which were sized according to the content (when scrollable was false) are now all the same width.  Note that I do not have any widths set on any of the columns.

What I would like is to be able to transition to virtual paging (virtual scolling or whatever it's called) and retain the auto width of the columns.

Thinking about it, it does make some sense.  You don't know the width of the data that has not yet been populated into the grid like you do with discrete pages (via next/previous buttons).  But, Kendo must have a method to autosize the columns to the content that I can, at the least, call myself to autosize in the dataBound event when the first page is done fetching data?

Thanks,
--Ed

I am using below code to populate the content of a panel bar. If I hard code source value to a json string, all works well. But, when I read the source value from a service, no luck. Please refer below for the relevant code.
Thanks for your time and help.


<script>
       $(document).ready(function() {
             var app = new kendo.mobile.Application(document.body);
            $("#viewtitle").html("Navi 4");

            var viewModel = kendo.observable({
                 invitations: new kendo.data.DataSource({
                  transport: {
                       read: {
                                  dataType: "json",
                                  url: "http://localhost:8080/NavXzy/rest/SecurityService/getNotifications?emailAddress=hd@bc.ca"
                                 }
                  }
             })
       });

           kendo.bind($("#invitationsDiv"), viewModel);
          $("#invitationsPanelBar").kendoPanelBar({});
   });
</script>

Is there a way to create a title for a chart legend.

I have a scatter chart and would like to have a legend title similar to the mockup in the attached image.

This chart is dynamically when the browser is resized so I believe it would be difficult to use a label with absolute positioning.

So say I have 2 dropdowns, and I only want 1 of them to use the above for the dropdown list.  How would I style it?
 The 2 below are kendo dropdown lists

I have a master grid which is a list of applications.  The detailrow contains a grid to allow for CRUD operations on roles for that application.  I have Create, Read, Update, and Delete working for the master grid, but not for the detail grid. 

We are using AngularJS, as well as a repository pattern for the CRUD ops, so none of the examples I've seen seem to correlate to this.  I'll just paste my code and that should make things more clear. 

First, my manageApps.html:


Next, the manageApps.js file:

I know that's a lot, and I'd like to eventually refactor all this into separate directives, but I think that would complicate things even further.  I'd like to get it working first. 

The biggest issue right now is that the "data" property inside the "readRoles" function doesn't contain any data.  I don't even know what is supposed to populate this; I copied the code from somewhere else, and it worked fine for the CRUD functions for the master grid ("readApps", "createApp", "updateApp", and "deleteApp"), but there is no data in the "data" property when "readRoles" is called.  I can only assume the "createRole", "updateRole", and "deleteRole" functions will have the same problem, but I can't test those yet. 

I have a feeling I need to use the "dataItem" parameter in the "detailGridOptions", something like "dataSource: roleListDataSource(dataItem)" but I can't figure out how to make the kendo.data.DataSource declaration take a parameter, or even if that would work here. 

Also, is it the case that the "parameterMap" properties are ignored for these DataSources, since I'm using CRUD functions?  I think I read that somewhere.  If so, I'll just delete them. 

Then, once I get this all working, how would I split these into directives without messing everything up?  Or is this something I should even do?  I'm new to AngularJS and Kendo, but learning by "trial by fire".  I understand most tutorials and examples, but they all do things the "simple" way, and our team is trying to do things by separating concerns, etc. so using repositories, etc. 

Thanks in advance for any help! 
Chris

data field looks like this
DateOfBirth=1969-09-30T00:00:00

and
         schema: {
            model: {
                fields: {
                    DateOfBirth: {
                        type: "date"
                    }
                }
            }

filterable: {
                    ui: function datetimepicker(control) {
                        control.kendoDatePicker({
                            format: "MM-dd-yyyy hh:mm tt",
                            parseFormats: ["MM-dd-yyyy", "MM/dd/yyyy", "HH:mm"]
                        });
                    }
                }


when i filter with kendoDatePicker with an entry of 9/30/1969 i get no results back

i have formatted the display to only show the date part


how can i filter by typing a date of 9/30/1969 and get results back?

I would like to have almost the same behavior as the demo on "popup data editing" except this is going into a responsive (with bootstrap) environment where we don't have any room for columns to contain the edit/delete buttons.
http://demos.telerik.com/kendo-ui/grid/editing-popup

What I would like to change is to have the grid be selectable (row) and the edit/delete buttons, which will be above the grid, will enable/disable based on the count of rows selected (edit enabled when 1 row selected; delete enabled with 1..n rows selected).  The add new record button will also need to be outside the grid (unsure whether it will be above or below the grid).

My question is: can I hook into the same functionality that is available in this example while having row selection enabled and the buttons outside the grid?

jsFiddle/jsBin would be great if you can generate one.

Thanks,
--Ed