Telerik Forums
UI for ASP.NET MVC Forum
1 answer
1.2K+ views
Hi there,

I have a query over the out of the box approach used to control the max and min properties of a MVC DatePicker. I am using the Q3 2014 release and Kendo validation with MVC 5.

Without applying the .Max() or .Min() attributes, here is what we have being rendered out of the box:

$(function () {
        $("#DOB").kendoDatePicker({
            "format": "d",
            "min": new Date(1900, 0, 1, 0, 0, 0, 0),
            "max": new Date(2099, 11, 31, 0, 0, 0, 0)
        });
    });

This does correctly apply the range to the picker element - it is not possible to use this to input a date outside this range. However, the effect of this on the keyboard input is altogether different.

  • If I type in a date within the range, i.e. 01/01/2000, but then add an extra digit to the year, this will be automatically truncated. So 01/01/20000 becomes 01/01/2000.
  • However, if I type in a date which falls outside the min/max range, i.e. 01/01/1800 and then add an extra digit, nothing happens.
Surely this approach is very inconsistent? Why have the autocorrect functionality at all if it is only applied within the range?

I have read other responses to similar queries (Kendo DatePicker Max and Min values not limiting text entry). The suggestion there was to make the input control read only to achieve the desired behaviour (meaning that only the picker can be used). Surely this isn't really acceptable from an accessibility point of view?

I would also have expected the date control to be able to enforce the Max and Min values which are part of its own API - for both keyboard and the picker? There is obviously some script running which recognises it is within or without the range - or else why do we observe the behaviour above?

Thanks,

Paul
Alexander Popov
Telerik team
 answered on 25 Mar 2015
2 answers
176 views
Hi,

MVC5, Inline editing:
When doing inline editing, the edit button is temporary replaced by two UPDATE/CANCEL buttons.
This is normal behavior.
If the update handling fails, then the update/cancel buttons is swapped back to the edit button, but the item itself, is still in edit mode.

I have attached the grid to the following events to be able to show messages to the user:
.Events(events => events.Sync("onSync"))
.Events(events => events.Error("onDataSourceError"))

I want the update/cancel buttons to be the visible one since it has failed and the user should still be able to correct the error and update again.
Thanks.
Jacob
Top achievements
Rank 1
 answered on 25 Mar 2015
6 answers
180 views
Hi,

This post is about a new incidence with Internet Explorer 11 and dropdownlist. The first time I click over dropdownlist the list of values are loading, but the list is closed. I should click again to get the list without close the list.


Editor Template

@model object
 
@(Html.Kendo().DropDownList()
    .HtmlAttributes(new { style = "width: 450px;" })
    .Name("ContactID")
    .DataTextField("Text")
    .DataValueField("Value")
    .Filter(FilterType.Contains)
    .OptionLabel("-please select-")
    .ValuePrimitive(true)
    .AutoBind(false)
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("MultiSearchProductors", "Productors", new { area = "Comercial" }).Data("filterSearchProductor");
        })
        .ServerFiltering(true);
    })
     
)


Method from editor template

public async Task<JsonResult> MultiSearchProductors(string text)
        {
            var user = await UserManager.FindByIdAsync(User.Identity.GetUserId());
 
            var productors = ens.Contacts.OfType<Productor>().Where(p => user.AuthorizedCenters.Contains(p.CentreID.ToString()) && p.Baixa == null).Select(p => new
            {
                Value = p.ContactID,
                Text = p.Nom + " " + p.Addresses.FirstOrDefault(a => a.TypeID == (short)addressType.General).Poblacio.Denominacio + " - " + p.ContactID
            });
 
            if (!String.IsNullOrWhiteSpace(text))
            {
                productors = productors.Where(p => p.Text.Contains(text));
            }
 
            return Json(productors, JsonRequestBehavior.AllowGet);
        }


function filterSearchProductor() {
            return {
                text: $("#ContactID").data("kendoDropDownList").filterInput.val()
                //allCenters: true
            };
        }


Grid with column ContactID and mode Popup

@(Html.Kendo().Grid<PartnerViewModel>()
        .Name("partner_"+contactID)
        .ToolBar(t =>
        {
            if (User.IsInRole("Modify"))
            {
                t.Create().Text("Nou Partner");
            }
        })
        .Columns(columns =>
        {
            columns.Bound(f => f.ContactID).Title("Codi").Width(60);


View Model

public class PartnerViewModel
    {
        [DisplayName("Productor")]
        [UIHint("ProductorMultiSearch")]
        public int ContactID { get; set; }


Can you say anything about this behavior?


Thanks.


Xavier.
Georgi Krustev
Telerik team
 answered on 25 Mar 2015
1 answer
103 views
Hi All,

I admit that I am new to all of this.   I have a Grid in an cshtml file.   I am trying to pattern off the Northwind example.   I have the following code within a <div> section:

  @(Html.Kendo().Grid<CompanyViewModel>
    ()
    .Name("companies")
    .HtmlAttributes(new { style="height: 100%; border: 0;"})
    .Scrollable()
    .Columns(columns =>
              {
                columns.Template(t => { })
                    .ClientTemplate("#=CompanyId#")
                    .Title("Company ID")
                    .Width(120);
              }
    )
    .Editable(e => e.Mode(GridEditMode.PopUp))
    .Pageable(pageable => pageable.Refresh(true))
    .Sortable()
    .Selectable()
    .Navigatable()
    .Filterable()
    .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Model(m =>
                {
                  m.Id(f => f.CompanyId);
                  m.Field(f => f.CompanyId).Editable(false);
                }
                )
               )   
    )


The trouble I am having is that I have red lines in the editing on everything from the first dataSource all the way to the end.   When I hover over the start of the error I get the pop up description:  C#: Unknown method 'DataSource(?)' of 'Kendo.Mvc.UI.Fluent.....

Attached is a screen shot.

I'm lost... any/all help would be great because I'm stuck

Thanks,
   Steve


Rosen
Telerik team
 answered on 24 Mar 2015
4 answers
246 views
I am trying to access a date field from the grid to pass to a dropdown filter read action.  However, all I get is null in the results.  If I debug, I can see the date is the long version of 1/1/2013 which is correct but the value ends up null.  What am I doing wrong?

VIEWMODEL
[Display(Name = "In Service Date")]
[DataType(DataType.Date)]
[Required]
public DateTime InServiceDate { get; set; }

VIEW  (correctly displays 01/01/2013 in the grid)
columns.Bound(p => p.InServiceDate).Format("{0:MM/dd/yyyy}").Title("Date").Width(100);
 
model.Field(p => p.InServiceDate).DefaultValue(Model.DefaultInServiceDate);

Filter for dropdown (other fields work fine but date field is always null)
function filterTaxClassBookMethods() {       
        var row = $("#TaxClassBookMethod").closest("tr");
        var grid = $("#TaxClassBookMethod").closest("[data-role=grid]").data("kendoGrid");
        var dataItem = grid.dataItem(row);
 
        var inServiceDate = dataItem.InServiceDate;
 
        return { depreciationBookID: 1002, assetClassID: dataItem.AssetTransactionCode.AssetClassID, inServiceDate: inServiceDate };
    }

Koren
Top achievements
Rank 1
 answered on 24 Mar 2015
1 answer
230 views
So for some reason with the following code my values are empty once they get to the controller. 

Anyone have any ideas why? 


Signature of controller.
Public Function UserDetail(userString As String) _

javascript code in view. 

        function openWindow() {
            var grid = $("#AjaxGrid").data("kendoGrid");
            var selectedData = grid.dataItem(grid.select());
            var stringData = JSON.stringify(selectedData);

            var window = $("#UserDetailDiv").data("kendoWindow");
            var PopUpTitle = "User Detail: ";
            
            window.setOptions({
                title: PopUpTitle,
                content: "Loading....."
            });

            $("#UserDetailDiv").data("kendoWindow").refresh({
                url: "/Inquiry/UserDetail",
                data: { userString: stringData },

                success: function (data) {
                  
                },
                error: function (xhr, textStatus, exceptionThrown) {
                    window.close();
                    alert($.parseJSON(xhr.responseText));
                }
            });
            window.open();
            window.center();
        }

Alexander Popov
Telerik team
 answered on 24 Mar 2015
1 answer
458 views
Hi, I'm trying to make a 3-level hierarchic grid. I've seen some example doing this but in my case the nested one is still dependent from the more external and I cannot access ID to populate it.
My code:

@(Html.Kendo().Grid<RateDayViewModel>()
            .Name("dayGrid")
            .Columns(columns =>
            {
              columns.Bound(o => o.Date).Format("{0:d}");
            })
               .ClientDetailTemplateId("channelTemplate")
            .DataSource(dataSource => dataSource
                .Ajax()
                .ServerOperation(false)
                .Model(model =>
                {
                  model.Id(p => p.DayID);
                })
                .PageSize(10)
                .Read(read => read.Action("ReadSummary", "Rate"))
            )
            .Pageable()
    )
<script id="channelTemplate" type="text/kendo-tmpl">
         @(Html.Kendo().Grid<RateChannelViewModel>()
            .Name("day_#=DayID#")
            .Columns(columns =>
            {
              columns.Bound(o => o.Channel.Label).Title("Channel");
            })
                        .ClientDetailTemplateId("roomTemplate")
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model =>
                {
                    model.Id(p => p.ChannelID);
                })
                            .Read(read => read.Action("ReadChannels", "Rate", new { Day = "#=DayID#" }))
            )
            .ToClientTemplate()
    )
</script>
<script id="roomTemplate" type="text/kendo-tmpl">
         @(Html.Kendo().Grid<RateRoomViewModel>()
            .Name("room_#=DayID##=ChannelID#")
            .Columns(columns =>
            {
              columns.Bound(o => o.Room.Label).Title("Room");
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model =>
                {
                    model.Id(p => p.RoomID);
                })
                .Read(read => read.Action("ReadRooms", "Rate", new { Day = "#=DayID#", Channel = "#=ChannelID#"}))
            )
            .ToClientTemplate()
    )
</script>

In the last one (Grid Room) I cannot access DayID property. How can I accomplish this?
Daniel
Telerik team
 answered on 24 Mar 2015
1 answer
150 views
I have a grid in an MVC view, and upon a button click i am sending its DataSource info to the controller via the parameterMap() and an ajax() posting.  something like this:

function sendData() {
    var grid = $("#Grid").data("kendoGrid"),
        parameterMap = grid.dataSource.transport.parameterMap;
  
    var data = parameterMap({ sort: grid.dataSource.sort(), filter: grid.dataSource.filter(), group: grid.dataSource.group() });
    $.ajax({
        url: "/Home/UpdateCreateDelete",
        data: data,
        type: "POST",

This works great, the controller gets the datasourcerequest info.  I can use the DataSourceRequest fields to send them later on back to a view with a grid and i can initialize that grid to use the DataSourceRequest fields like this:

// note grid.autobind() set to false, so we can load upon dom ready below:
 
$(function() {
   @{ var request = TempData["request"] as DataSourceRequest;  }
    var grid = $("#mygrid").data("kendoGrid");
​  
grid.dataSource.query({
           page:  @request.Page,            // WORKS PERFECTLY!
           pagesize: @request.PageSize,      // WORKS PERFECTLY!
           filter: null,                // FAILS IF I use filter: @request.Filter
           sort:  null,                 // FAILS IF I use sort: @request.Sort
           group: null,                 // FAILS IF I use group: @request.Group 
     });
}

The problem is that the loading does not support the filters, sorts, or groups fields from the DataSourceRequest object.  How do i convert those DataSourceRequest fields into something that is in proper format for the the Grid.query() function?


Bottom line is that i want to be able to initialize my grid with the filters, sorts, and groupings that were saved from a previous DataSourceRequest.
Dimo
Telerik team
 answered on 23 Mar 2015
4 answers
138 views
Please let me know when or if the PDF417 2-D barcodes plan to be supported in UI for ASP.NET MVC or Kendo UI.  Thanks!
Daniel
Telerik team
 answered on 23 Mar 2015
1 answer
425 views
I have a foreign key column in my grid.
   columns.ForeignKey(c => c.ManagerId, (SelectList)ViewData["ManagerIdSource"]);

It sorts by the default Guid and not by the name.
Any way I can achieve this ?

If not supported, is this feature expected anytime soon from Telerik ?
Vladimir Iliev
Telerik team
 answered on 23 Mar 2015
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?