I have bound kendo grid using MVVM. In model I have defined required validation for FirstName field.
I have set editable=true for kendo grid.
If user will set blank value for FirstName, validation is fired and working fine.
But when I set detail template for grid and bind data to detail template on detailInit method of kendo grid, required validation is not working.
Is there any solution for this situation.

example link with working validation : http://jsfiddle.net/yzKqV/218/
example link with validation not working : http://jsfiddle.net/yzKqV/219/

Kindly do needful

Hi everyone,

I am facing a very interesting problem. I want to create a simple Todo app with DataSource and templating engine. ( I dont want to using Grid yet. )
The ID of my model is TODOID (I am using oracle db with open access.) I want to use this id field in the template. It works properly until I want to add a new Todo Item. For example:
In that case, I get an error: "ReferenceError: TODOID is not defined". But if I include the TODOID field as well (e.g "TODOID": 100) then my create method is not being called. It is called only when I dont include the id field in new todo item AND I am not using that field in the template. But I have to use the TODOID field in the template to able to modify or delete and select an item.

So, how can i add a new todo item to the datasource without the reference error but also being able to select a single item in the UI?
Or I am doing it the wrong way and I have to use Grid?

Thank you for your answers,
Daniel

This question has been asked before:
http://www.kendoui.com/forums/kendo-ui-web/grid/editcell-method-doesnt-work-in-popup-mode.aspx

But the answer there is not acceptable because setting the grid to "InCell" requires Ajax() instead of Server() on the data source.  This breaks everything for me.  Sorting is only done on the 10 items displayed and not on the entire result set.  For 12,000 records all get passed to the client vs. the 10 records that get passed when the server handles the paging.  Templates don't work at all.

I have my grid up and running and editable in a popup window.  All is well.  I just need one drop down box for editing of one single column on the fly.  This must be possible, but I've spent two days on it, and I'm giving up.  Any ideas?

I added the ProgressBar to a page that implemented Responsive Design, and (after reading "All Kendo UI widgets have been updated to be 'responsive' out of the box")  I assumed that the progress bar would automatically resize itself as the window size decreased -- but it didn't on my particular page.

And the documentation for ProgressBar doesn't explain how to adjust the width so I can set it myself through media types.  Explicitly setting the width for the ProgressBar or the span it was contained in didn't make a difference, so I played around with trying to set some of the CSS styles associated with the ProgressBar but that didn't seem to help either.

So I was wondering if someone could help explain what one has to do to get the ProgressBar to resize appropriately as the browser window size changes.

hi

I have a sheduder within a tabstrip,
when I move to the second tab and return to the tab that contains the sheduder
the onChange event of  DropDownList that refresh  sheduler throws me the following error:

function onChange() {       
    kendo.ui.progress($("#scheduler"), true);
    var scheduler = $("#scheduler").data("kendoScheduler");
    scheduler.dataSource.read();
};  

Uncaught TypeError: Cannot read property 'dataSource' of undefined 

Please help me
Thanks.

I have some swipe events on my page but when I swipe on the scheduler it tries to scroll (even though there is nothing to scroll to but blank space), which is interfering with the swipe.  I've included a screenshot to illustrate the behavior.  How can I disable horizontal scrolling?  

Oddly enough it works fine in landscape mode, but in iPad portrait mode is when it breaks.  I 've been playing with a CSS solution and noticed that setting the width of .km-scroll-container will fix it but I have to make it so skinny that it no longer aligns with the column headers (days of the week).  In my case 505 pixels, at 510 it matches up perfectly but then it will do the scrolling even though.

nvm.

We're trying to use the KendoUI Editor in a (bootstrap modal)popup window, unfortunately this does not seem to work. The iframe required is not created in the popup window, so all we see is a normal textarea. 

Is there a special way to let the Editor work inside a popup? 

edit: a plain kendo/bootstrap version is working. It seems to be in some other javascript we include. I'll look into this a bit further

Hi

I have created a scheduler in our mvc 5 application ad I dont seem to be able to pass dates around.

I have created a CalendarViewModel that implements IScheduleEvent but if I populate a new CalendarViewModel object and pass it to the view I dont get any events showing. To make things worse when I double click a time and fill in the details, the title and description gets passed back to my create event but the end and start dates are empty.

Any ideas what I am missing

My view looks like this 

 @(Html.Kendo().Scheduler<TalkBox.Mvc.ViewModels.Calendar.CalendarViewModel>()
                  .Name("scheduler")
                  .Date(DateTime.UtcNow)
                  .Editable(true)
                  .Height(700)
                  .BindTo(Model)
                  .Views(views =>
                            {
                                views.DayView();
                                views.WeekView();
                                views.MonthView(monthView => monthView.Selected(true));
                            })
                   .DataSource(d => d.Model(m => m.Id(f => f.EventId))
                        .Create("Create", "Calendar")
                        .Update("Update", "Calendar")
                        .Destroy("Delete","Calendar")
                    )
            )
   
Added to this the ModelState.IsValid is false, but I guess this is because the dates are not set.

I have included images from the create event that shows that I recieve the title and description and the network traffic from chrome's inspect element that show the dates are being passed.

I have a few problems with combobox based upon: combobox/serverfiltering.html;

First one is related to lower/higher case of characters i'm typing. While the server does return appropriate results the dropdown does not appear to trigger (so the results . If I trigger it manually in code it immediately closes back. I've tried using ignoreCase and altering it between true and false but it apparently doesn't matter :/

The second problem is that if I remove the focus from the combobox and return to it later on I cannot seem to be able to delete the input content or open the dropdown via button, especially if I've typed a character combination upon server doesn't return results.

Any help or hints would be greatly appreciated. I also provided the full source code of the problematic code.

01.var _ds = new kendo.data.DataSource({

02.    serverfiltering: true,

03.    transport: {

04.        read: {

05.            url: "ashx/Main/GetAvailableOUs.ashx",

06.            dataType: "json",

07.            data: { searchSTR: searchSTR_ }

08.        }

09.    },

10.    schema: {

11.        model: {

12.            id: "text",

13.            fields: {

14.                value: { from: "OUid", type: "number" },

15.                text: { from: "OU", type: "text" },

16.                Img: { from: "Img", type: "text" },

17.                isActive: { from: "IsActive", type: "number" }

18.            }

19.        }

20.    }

21.});

22. 

23.$("#OUSelector").kendoComboBox({

24.    dataTextField: "text",

25.    dataValueField: "value",

26.    dataSource: _ds,

27.    minLength:3,

28.    ignoreCase: false,

29.    autoBind: false,

30.    highlightFirst: false,

31.    change: function (e) {

32.        _ds.options.transport.read.data = { searchSTR: e.sender._selectedValue };

33.        _ds.read();

34.    },

35.    filter: "contains",

36.    template: '# if (Img == "") ' +

37.              '{# <span id="#: value #" style="display:block;margin:-1px -5px -2px -5px;padding:0 5px; # if (isActive == 0) {# background:red;color:white; #}#">#: text #</span> #}' +

38.              'else' +

39.              '{# <span id="#: value #" style="display:block;margin:-1px -5px -6px -5px;padding:0 5px; # if (isActive == 0) {# background:red;color:white; #}#"><img src="/img/#: Img #.png" alt="#: text #" />#: text #</span> #}#',

40.    select: function (e) {

41.        kMain.fn_logon_to_company($(e.item[0]).children("span").attr('id'));

42.    }

43.});

44. 

45.$(".OUSelectorContainer .k-input").on('keydown', function (e) {

46.    e.sender = { _selectedValue: e.currentTarget.value };

47.    var ouselect_ = $("#OUSelector").data("kendoComboBox");

48. 

49.    ouselect_.options.change(e);

50.});