Hi,

Over the past few days I've been struggling to get KendoUI MVVM bindings to work for the specific use case where you want to conditionally modify the class of an HTML element. At this point in time, Kendo MVVM doesn't support this use case.

I've even tried to create custom bindings, but there is a problem when they are used within templates. I've been offered an undocumented workaround by the KendoUI team, but I've also been warned that it might eventually break in future releases, so I don't feel comfortable using it.

I'd like to hear from others who might have found out of the box solutions to this problem.

P.S.: I know there is a style binding in Kendo MVVM, but this puts styling information in the code, and I don't want this. I want my style informartion to remain in css files.

Thank you

Our grid data comes as a part of a larger object returned by ajax call. Other properties of this object are used outside of the grid. Thus instead of dataSource.transport we use dataSource.data.
To let you better understand the following code snippets, I'll mention that the grid DataSource is defined inside AngularJS controller. 
When the grid originally loads, it has no rows as the ticket.Comments array is empty.
Now, the Comments data comes in the ajax response returned by "Tickets" service:
However the grid does not show any records after this. I can step through the code and verify, that $scope.ticket gets an array of Comments before the read() is called.
I found a workaround by using a different data array and then updating elements of this array. 
I had to use this extra loop to assign tmp elements because one liner "$scope.tmp = $scope.ticket.Comments;" does not work!
Is there a better way???

Thanks, 
-Pavel

Hello Kendo team!

I'm facing an issue when I try to use ES5 get/set functions within an ObservableObject. Please check this JSBin for details. I was expecting to be invoke get or set functions on my observable object. However, apparently those functions are not recognized as part of the object structure.

Any clues about this problem?

Thanks!

Hello,

I'm using a  grid,I have calculated cells startDate, endDate and Duration.

When i update the value of either one of these the calculated cell values will change.

But I always get the previous values of the cell and not the current edited value.

Is there a cellLeave function where i can access this value?

Grid is  as follows:-
 @(Html.Kendo().Grid<ROI_DataLayer.ViewModel.MilestonePhasesViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.order_id).Title("ID").Hidden(false).Width(30);
            columns.Bound(e => e.pk_milestone_phase_id).Title("Id No").Hidden(true).Width(50);
            columns.Bound(e => e.phase_name).Width(210);
            columns.Bound(e => e.plan_start_date).Title("Planned <br>Start Date").Format("{0:MM-dd-yyyy}").Width(70);
            columns.Bound(e => e.duration).Title("Duration").Width(40);
            columns.Bound(e => e.plan_end_date).Title("Planned <br>End Date").Format("{0:MM-dd-yyyy}").Width(70);
       })
            .ToolBar(toolbar =>
            {
                toolbar.Save().HtmlAttributes(new { @onclick = "savePhase()" });
            })
        .Editable(editable => { editable.Mode(GridEditMode.InCell); editable.DisplayDeleteConfirmation(false); })
        .Pageable()
        .Navigatable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(5)
        .ServerOperation(false)
        .Model(model =>
            {
                model.Id(p => p.pk_milestone_phase_id);
                model.Field(p => p.SrNo).Editable(false);
                model.Field(p => p.pk_milestone_phase_id).Editable(false);
            })
       .Events(events => { events.Error("error_handler"); })
       .Read(read => read.Action("MP", "Milestone", new { project_id = @Model.pk_project_id }))
        .Update(update => update.Action("Update_MP", "Milestone"))
        ).Selectable(s => s.Mode(GridSelectionMode.Single))
        .Events(events =>
        {
               events.Edit("onEdit");
         })
        .ClientDetailTemplateId("template")
)

function onEdit(e)
{
  var controlHtml = e.container.html();

        if (controlHtml.indexOf("plan_start_date") >= 0 || controlHtml.indexOf("duration") >= 0) {
            var startDate = new Date(e.model.plan_start_date);
            var duration = Number(e.model.duration) - 1;
            var endDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + duration);
            e.model.set("plan_end_date", endDate)
        }
        else if (controlHtml.indexOf("plan_end_date") >= 0) {
            //Get 1 day in milliseconds
            var one_day = 1000 * 60 * 60 * 24;

            // Convert both dates to milliseconds
            var date1_ms = new Date(e.model.plan_start_date).getTime();
            var date2_ms = new Date(e.model.plan_end_date).getTime();

            // Calculate the difference in milliseconds
            var difference_ms = date2_ms - date1_ms;

            // Convert back to days
            var duration = Math.round(difference_ms / one_day) - 1;

            if (duration < 0) {
                e.model.set("duration", duration);
                var grid = $("#grid").data("kendoGrid");
                var rowno = e.model.order_id - 1;
                grid.tbody.find("tr:eq(" + rowno + ") td:eq(6)").css('background-color', '#FBC1B7');
            }
            else {
                duration++;

                var grid = $("#grid").data("kendoGrid");
                var rowno = e.model.order_id - 1;
                if (rowno % 2 == 0) {

                    grid.tbody.find("tr:eq(" + rowno + ") td:eq(6)").removeAttr("style");
                }
                else {
                    grid.tbody.find("tr:eq(" + rowno + ") td:eq(6)").css('background-color', '#eaf4f9');
                }
                e.model.set("duration", duration);
            }

        }

}

Hi ,

How can we merge the custom filters with existing filters.

Thanks,
Raj Yennam

2013.3.1119 – 2013.3.1220 have an issue with handling orientation change events and the body height style is incorrectly persisted as the value of the orientation which the app was initialized in.
Uncaught TypeError: Object [object global] has no method '_resizeToScreenHeight'

Hello,

I would like to be able to display events that occur simultaneously side-by-side in the month view.  For example, if I have two events that occur from 9AM - 10 AM, they both show up in 2 columns inside of the current stacked model.  

Attached I am providing a mock-up diagram of the views to illustrate my intentions.

Thanks!

I am wondering if kendo ui mobile has some comparable to a scroll wheel?  Often in mobile apps you will see dropdown boxes take the form of a scroll wheel to scroll through choices to select.  Is there anything like this on mobile?  I swear I had seen it before, but looking through all the widgets I can't seem to find an example.

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