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

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.