I am trying to make sure that my drawer always closes after a click.  Right now I have my drawer items set with data-link's to change to different views.  My issue is say I am on a view called "Preview" and I open the drawer and click the button for "Preview".  Since it is already on the "Preview" page the drawer stays open, which could lead some users to not be sure if it is responding (they may not realize they are already looking at the view they want to navigate too).

I've tried added onclick events to call the drawer.hide() method, which screws up all navigation.  If I am on a "Preview" view and want to go to "Contacts" view, the hide method on click screws the views up and cannot open the drawer again unless I refresh the page.

Is there any way to ensure hide is always called when the drawer is clicked? (even if the view doesn't change).

Thanks

Hello


I am trying to find a way to set the Grid data-uid to the primary key in my datasource so that i can find the row programmatically.

I do not require users to select rows in the grid, it needs to be done via script.

I have looked though the grid datasource documentation and there seems to be no way to set it.


Thanks

I am getting Modelvalidation , ErrorMessage = "The value 'Wed Dec 25 2013 00:00:00 GMT-0600 (Central Standard Time)' is not valid for EffectiveDate."
1) How to handle dates, so that i can avoid such errors. Even though i like how you are able to send timezone along with Date,
    what changes will i have to make to the models datatype to make it work.
 
The response from the WebAPI is 
{"$id":"1","Message":"Therequestisinvalid.","ModelState":{"$id":"2","orgschool.EffectiveDate":["Thevalue'WedDec25201300:00:00GMT-0600(CentralStandardTime)'isnotvalidforEffectiveDate."],"orgschool.TerminationDate":["Thevalue'MonDec30201300:00:00GMT-0600(CentralStandardTime)'isnotvalidforTerminationDate."]}}

2) Also i would like to know how can i display the errors in their respective fields, in the grid

======================================================================================================================
WebApiConfig has the following settings
           config.EnableQuerySupport();
           var json = config.Formatters.JsonFormatter;
            json.SerializerSettings.PreserveReferencesHandling = Newtonsoft.Json.PreserveReferencesHandling.Objects;
            json.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
            config.Formatters.Remove(config.Formatters.XmlFormatter);
            // Web API routes
            config.MapHttpAttributeRoutes();
            config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
======================================================================================================================
The header post is as follow

Request URL:http://localhost:3103/api/OrgSchool/PostOrgSchool
Request Method:POST
Status Code:400 Bad Request
Request Headersview source
Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:2927
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Host:localhost:3103
Origin:http://localhost:1205
Referer:http://localhost:1205/KendoOrgSchools.html
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
Form Dataview sourceview URL encoded
$id:2
OrgSchoolsID_PK:3
OrgID_FK:15
SchoolCode:PBS-KHN
SchoolName:modified
Description:hkjlhkj
MailAttentionOfName:hjkh
Address1:hjhjk
Address2:jhjk
CountryID_FK:3
StateID_FK:1
CityID_FK:1
PinZipCode:3dgg
EffectiveDate:Wed Dec 25 2013 00:00:00 GMT-0600 (Central Standard Time)
TerminationDate:Mon Dec 30 2013 00:00:00 GMT-0600 (Central Standard Time)
CreatedByUserID_FK:1
DateCreated:0001-01-01T00:00:00
UpdatedByUserID_FK:1
DateUpdated:0001-01-01T00:00:00
RowStatusID_FK:1
City[$id]:3
City[CityID_PK]:1
City[StateID_FK]:1
City[Code]:KH
City[Name]:KhN
City[Description]:
City[EffectiveDate]:
City[TerminationDate]:
City[CreatedByUserID_FK]:1
City[DateCreated]:2013-12-07T00:00:00
City[UpdatedByUserID_FK]:1
City[DateUpdated]:2013-12-07T00:00:00
City[RowStatusID_FK]:1
City[User]:
City[RowStatu]:
City[State][$id]:4
City[State][StateID_PK]:1
City[State][CountryID_FK]:3
City[State][Code]:PB
City[State][Name]:PNJB
City[State][Description]:
City[State][EffectiveDate]:
City[State][TerminationDate]:
City[State][CreatedByUserID_FK]:1
City[State][DateCreated]:2013-12-07T00:00:00
City[State][UpdatedByUserID_FK]:1
City[State][RowStatusID_FK]:1
City[State][Cities][0][$ref]:3
City[State][Country][$id]:5
City[State][Country][CountryID_PK]:3
City[State][Country][Code]:IN
City[State][Country][Name]:India
City[State][Country][Desription]:India
City[State][Country][EffectiveDate]:
City[State][Country][TerminationDate]:
City[State][Country][CreatedByUserID_FK]:1
City[State][Country][DateCreated]:2013-12-07T00:00:00
City[State][Country][UpdatedByUserID_FK]:1
City[State][Country][RowsStatusID_FK]:1
City[State][Country][User]:
City[State][Country][RowStatu]:
City[State][Country][User1]:
City[State][Country][OrgSchools][0][$ref]:2
City[State][Country][States][0][$ref]:4
City[State][OrgSchools][0][$ref]:2
City[State][RowStatu]:
City[State][User]:
City[State][User1]:
City[User1]:
City[OrgSchools][0][$ref]:2
Country[$ref]:5
Org[$id]:6
Org[OrgID_PK]:15
Org[OrgCode]:PBS updated
Org[OrgName]:PNJB Education Board
Org[OrgDescription]:
Org[EffectiveDate]:
Org[TerminationDate]:
Org[CreatedByUserID_FK]:1
Org[DateCreated]:0001-01-01T00:00:00
Org[UpdatedByUserID_FK]:1
Org[DateUpdated]:0001-01-01T00:00:00
Org[RowStatusID_FK]:1
Org[User]:
Org[RowStatu]:
Org[User1]:
Org[OrgSchools][0][$ref]:2
User:
RowStatu:
State[$ref]:4
User1:
Date:Invalid Date
Response Headersview source
Access-Control-Allow-Origin:*
Cache-Control:no-cache
Content-Length:340
Content-Type:application/json; charset=utf-8
Date:Fri, 27 Dec 2013 16:44:24 GMT
Expires:-1
Pragma:no-cache
Server:Microsoft-IIS/8.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcVXNlcnNcbnNzaWRfMDAwXERvY3VtZW50c1xWaXN1YWwgU3R1ZGlvIDIwMTNcUHJvamVjdHNcU2Nob29sTWFuYWdlbWVudFxTY2hvb2xNYW5hZ2VtZW50LkhUTUw1XGFwaVxPcmdTY2hvb2xcUG9zdE9yZ1NjaG9vbA==?=

I am using VS2013 + ASP.NET MVC4 + Razor + Kendo Grid 2013.1.219

I am using sample from link
(Custom popup to foreign key)

After lot of work and fixes, its finally working except datetime column is not working. Its passing null dates in create. I have tried setting up below:
[DataType(DataType.DateTime)]
or custom template.
columns.Bound(p => p.Begin_dm).Title("Begin Date").Width(250).Format("{0:MM-dd-yyyy H:mm:ss}").EditorTemplateName("DateTime");
columns.Bound(p => p.End_dm).Title("End Date").Width(250).Format("{0:MM-dd-yyyy H:mm:ss}").EditorTemplateName("DateTime");

Here is my modal:
public class ProviderMaintenanceSMS    
    {
        [ScaffoldColumn(false)]
        public int? PMID { get; set; }
        //[ScaffoldColumn(false)]
        [Required]
        [UIHint("GridForeignKey")]
        public int ProviderID { get; set; }
        [Required]
        //[DataType(DataType.DateTime)]
        public DateTime? Begin_dm { get; set; }
        [Required]
        //[DataType(DataType.DateTime)]
        public DateTime? End_dm { get; set; }
        //[ScaffoldColumn(false)]
        //public DateTime Create_dm { get; set; }
    }

View:
@using SystemDashboard;
@using Kendo.Mvc.UI;

@*model IEnumerable<SystemDashboard.ProviderMaintenanceSMS>*@


@(Html.Kendo().Grid<SystemDashboard.ProviderMaintenanceSMS>()
    .Name("grid1")
    .Columns(columns =>
    {
        columns.Bound(p => p.PMID).Hidden();
        columns.ForeignKey(p => p.ProviderID, (List<ProviderLookup>)ViewData["providers"], "ProviderID", "ProviderName").Title("Provider").Width(150);
        columns.Bound(p => p.Begin_dm).Title("Begin Date").Width(250).Format("{0:MM-dd-yyyy H:mm:ss}").EditorTemplateName("DateTime");
        columns.Bound(p => p.End_dm).Title("End Date").Width(250).Format("{0:MM-dd-yyyy H:mm:ss}").EditorTemplateName("DateTime");
        columns.Command(command => { command.Edit(); command.Destroy(); });
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.PopUp))
    .DataSource(dataSource => dataSource
        .Ajax()
         .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
            .Model(model =>
            {
                model.Id(p => p.PMID);
                model.Field(p => p.PMID).Editable(false);
                model.Field(p => p.ProviderID).DefaultValue(1);
            })
        .Create(update => update.Action("EditingSMS_Create", "PM"))
                .Read(read => read.Action("EditingSMS_Read", "PM"))
                .Update(update => update.Action("EditingSMS_Update", "PM"))
                .Destroy(update => update.Action("EditingSMS_Destroy", "PM"))
    )
)
Controller Create Method: (dates are always null here)
   [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult EditingSMS_Create([DataSourceRequest] DataSourceRequest request, ProviderMaintenanceSMS pm)
        {
            ProviderMaintenanceBusinessLayer BL = new ProviderMaintenanceBusinessLayer();
            BL.CreateOrUpdatePMSMS(pm);                        
            return Json(new[] { pm }.ToDataSourceResult(request, ModelState));
        }

Thank you in advance. Looking forward to your reply.

Manish

I've a trivial problem with calendar. Once the value is set, the user can't set any other value on the same view. The problem disappear if the user go to the future/past and come back.

Here my implementation, it's quite simple

I've a div with id calendar, on document ready:
                <div id="calendar" style="display: none; width: 600px;"></div>

<script>

    $(document).ready(function () {
        var d = DateStringISO2date($("#string_value").val());
        if (d == '') d = new Date();
//d is a valid date, always

        $("#calendar").kendoCalendar({
            value: d,
            depth: "month"
        });

...

//next

        function calendarSetValue(e)
        {
            var d = DateStringISO2date($("#string_value").val());
           if (d == '') d = new Date();

            var calendar = $("#calendar").data("kendoCalendar");
            calendar.value(d);
            //calendar.navigateDown(calendar.value()); I've tried to navigate to va
        }
        
    }

Best regards,
Davide

Hi
Is it possible to increase the width of a kendo grid's vertical scrollbar? I am not using the browser scrollbar to scroll the grid.

Thanks in advance
Mohammed

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);
            }

        }

}