Hi guys, I'm new to Kendo UI and I'm current trying to implement a cascading dropdown with children not binding to specific parent. Below is the datastructure I have. I would like to update all children dropdowns when parent change. However, I can't find any api within current kendo UI that support the requirement since all the cascadefromfield requires me to put the parent id within each child item in order to match. I also having difficulty to find any events that will be triggered on child indicating that parent value has changed so that I can perform manual updates since I don't want to perform direct UI element manipulation through JQuery within my angular controller. I wonder if there's any other ways for me to achieve what I am looking for? Thanks. 

Hello

I would like to get rid of DatePicker placeholders like day/month/year when dateInput is set to true.

I'm setting null value to date picker and then it renders placeholders.

I would live with that but it has unpredictable behaviours:

• JQuery Validation data-val-required is no longer working.
• $("form").serialize() is serializing these values as text, when it should be null. So my ajax are failing.

I have datasource for geoJson data collection
var remoteDataSourse = new kendo.data.DataSource({
                type: "odata-v4",
                transport: {
                    read: {
                        url: "/_api/web/lists/getByTitle('Status_Of_Progress')/items?$filter=Enabled eq 1&$top=10000",
                    }
                },
                schema: {
                     data: function (data) {
                        return data;
                     },
                    parse: function(data){
                        
                        let items = data && data.value ? data.value : [data];
                        items = items.map(function(item){
                            if (item.geojson !== null){
                                let el = JSON.parse(item.geojson);                                
                                if(el.type === "FeatureCollection") {
                                    el = el.features[0];
                                } 
                                el.properties.data = item;
                                return el;
                            } else {

                            }
                        });
                        return items;
                    }
                },
                pageSize: 10000
            });

also i have child lists with additional data
/_api/web/getFolderByServerRelativeUrl('/clng/Status_Of_Progress_Images/ITEMS_CODE')/files?$orderby=TimeLastModified desc
/_api/web/lists/getByTitle('Status_Of_Progress_PIR')/items?$filter=CodeId eq 'ITEMS_ID'&$orderby=Planned asc
/_api/web/lists/getByTitle('Status_Of_Progress_CIW')/items?$filter=CodeId eq 'ITEMS_ID'&$orderby=Planned asc
/_api/web/lists/getByTitle('Status_Of_Progress_Procurement')/items?$filter=CodeId eq 'ITEMS_ID'&$orderby=Planned asc

How i can create Hierarchical Data Source for this?

Hi,

I have a grid that is bound to an external datasource. One of the colums on edit is a dropdown list with possible value. When I select a new value and save, the data-value field is shown instead of the data-text. How can I fix this? Please find my grid code below.

 

And the template for the dropdown

Hi,

I encounter problems in a spreadsheet kendo when I want to download an excel file. The file has been successfully downloaded but when I open, the file is corrupt (the version I use is 2017.3.1026).

Thank You

The documentation at the URL http://docs.kendoui.com/api/framework/model describes four data types namely: "string", "date", "number" and "boolean". 

But how do you define a model for an object which has as one of its properties an array or list of objects? For example you might have orders with order items. 

In this case the kendo model would look as follows: 
What would the type be for OrderItems? 

In other scenarios this might be where you want to make this field editable so that the user can select a different product, or a category or whatever the field would be. 

Thanks.

Hi,

I have inline editor in a grid.The validation from the server is working great, but I have 2 dates that one needs to be before the other.

so I use GreaterDateAttribute and it's working good  on another window with regular form, but in the grid this specific validation doesn't appear in the client side like the others.

someone can help?

here is my grid:

@(Html.Kendo().Grid<ProjectViewModel>()
            .Name("GridProjects")
            .Columns(columns =>
            {
                columns.Bound(c => c.ProductID).Title("Product Id").Hidden();
                columns.Bound(c => c.ProductName).Title("Product Name").Hidden();
                columns.Bound(c => c.Name).Title("Name").Width(120);
                columns.Bound(c => c.Leader.Name).EditorTemplateName("LeaderEditor").Title("Leader").Width(150)
                    .Filterable(f => f.UI("developersFilter")
                    .Mode(GridFilterMode.Row)
                    .Extra(false)
                    .Operators(operators => operators
                                    .ForString(str => str.Clear()
                                    .IsEqualTo("Is equal to"))));
                columns.Bound(c => c.CodeReviewer.Name).EditorTemplateName("CodeReviewerEditor").Title("Code Reviewer").Width(150)
                    .Filterable(f => f.UI("developersFilter")
                        .Mode(GridFilterMode.Row)
                        .Extra(false)
                        .Operators(operators => operators
                            .ForString(str => str.Clear()
                                .IsEqualTo("Is equal to"))));
                columns.Bound(c => c.ActualStartDate).Title("Actual Start Date").EditorTemplateName("ActualStartDateEditor").Format("{0: MM/dd/yyyy}").Width(150);
                columns.Bound(c => c.ActualEndDate).Title("Actual End Date").EditorTemplateName("ActualEndDateEditor").Format("{0: MM/dd/yyyy}").Width(150);
                columns.Bound(c => c.EstimatedStartDate).Title("Estimated Start Date").Format("{0: MM/dd/yyyy}");
                columns.Bound(c => c.EstimatedEndDate).Title("Estimated End Date").Format("{0: MM/dd/yyyy}");
                columns.Bound(c => c.PercentCompleted).Title("Percent Completed").Width(130).ClientTemplate("<canvas id='chart_#=ID #' width='94' height='94' style='display: block; width: 94px; height: 94px;'></canvas>")/*ClientTemplate("#=kendo.format('{0:p2}', PercentCompleted / 100)#")*/;
                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);
                columns.Command(command => command.Custom("ADDTASK").Text("Add Task").Click("addTask")).Title("Add Task").Width(150).HtmlAttributes(new { id = "addTaskButton" });
            })
             .Groupable(g => g.Enabled(false))
              .Filterable()
              .ToolBar(toolbar =>
              {
                  toolbar.Template(@<text>
        <div class="toolbar" style="float:left">
            <a class="k-button k-button-icontext" onclick='addProjectAjax()' href="#">
                <span class="k-icon k-i-add"></span> ADD PROJECT
            </a>
            <a class="k-button k-grid-excel k-button-icontext" href="#">
                <span class="k-icon k-i-excel"></span>Export to Excel
            </a>
        </div>
                </text>);
              })
             .Resizable(resize => resize.Columns(true))
             .Editable(editable => editable.Mode(GridEditMode.InLine))
             .Excel(excel => excel
                            .AllPages(true)
                            .FileName("Projects.xlsx")
                            .Filterable(true)
                            .ForceProxy(true)
                            .ProxyURL(Url.Action("FileExportSave", "Home")))
            .Pageable(pager => pager
                              .Refresh(true)
                              .PageSizes(true)
                              .PageSizes(new int[] { 6, 15, 20 })
                              .ButtonCount(5))
            .Sortable(sortable =>
            {
                sortable.SortMode(GridSortMode.MultipleColumn)
               .Enabled(true);
            })
            .Scrollable()
            .Events(events => events.DataBound("onDataBoundSavedProjects").Cancel("createPieAfterCancellation"))
            .DataSource(dataSource => dataSource
                                     .Ajax()
                                     .Group(group => group.Add(p => p.ProductName))
                                     .PageSize(20)
                                     .Events(events => events.Error("errorHandlerProject"))
                                     .Read(read => read.Action("GetSavedProjects", "Project"))
                                     .Model(model =>
                                     {
                                         model.Id(item => item.ID);
                                         model.Field(a => a.EstimatedStartDate).Editable(false);
                                         model.Field(a => a.EstimatedEndDate).Editable(false);
                                         model.Field(a => a.PercentCompleted).Editable(false);
                                     })
                                     .Update(update => update.Action("UpdateProject", "Project"))
                                     .Destroy(update => update.Action("DeleteProject", "Project"))))

here is my model:

  

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using TaskManagement.Contract;

namespace TaskManagementUI.Models
{
    public class ProjectViewModel
    {
     
        public int ID { get; set; }
        public int ProductID { get; set; }

        [Display(Name = "Product Name")]
        public string ProductName { get; set; }

        [Display(Name = "Name")]
        [Required(ErrorMessage = "Please enter name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Please select leader")]
        [Display(Name = "Leader")]
        public Developer Leader { get; set; }


        [Required(ErrorMessage = "Please select code reviewer")]
        [Display(Name = "Code Reviewer")]
        public Developer CodeReviewer { get; set; }

        public DateTime? EstimatedStartDate { get; set; }

        public DateTime? EstimatedEndDate { get; set; }

        [Required(ErrorMessage = "Please select a date")]
        [UIHint("DatePickerEditor")]
        [Display(Name = "Actual Start Date")]
        [DataType(DataType.Date)]
        public DateTime? ActualStartDate { get; set; }

        [Required(ErrorMessage = "Please select a date")]
        [UIHint("DatePickerEditor")]
        [Display(Name = "Actual End Date")]
        [GreaterDate(EarlierDateField = "ActualStartDate", ErrorMessage = "End date should be after Start date")]
        [DataType(DataType.Date)]
        public DateTime? ActualEndDate { get; set; }

        [UIHint("PercentCompletedEditor")]
        public int? PercentCompleted { get; set; }
        private List<ProjectManager> m_Managers;
        public List<ProjectManager> Managers
        {
            get
            {
                if (m_Managers == null)
                {
                    m_Managers = new List<ProjectManager>();
                    if (CodeReviewer != null)
                        m_Managers.Add(new ProjectManager { ProjectID = ID, DeveloperID = (int)CodeReviewer.ID, RoleId = RoleEnum.CodeReviewer });
                    if (Leader != null)
                        m_Managers.Add(new ProjectManager { ProjectID = ID, DeveloperID = (int)Leader.ID, RoleId = RoleEnum.Leader });
                }
                return m_Managers;

            }
            set
            {
                m_Managers = new List<ProjectManager>();
                if (CodeReviewer != null)
                    m_Managers.Add(new ProjectManager { ProjectID = ID, DeveloperID = (int) CodeReviewer.ID, RoleId = RoleEnum.CodeReviewer });
                if (Leader != null)
                    m_Managers.Add(new ProjectManager { ProjectID = ID, DeveloperID = (int) Leader.ID, RoleId = RoleEnum.Leader });
            }
        }
        public List<Developer> Developers { get; set; }

    }
}

here is my class GreaterDateAttribute:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace TaskManagementUI.Models
{
    [AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
    public class GreaterDateAttribute : ValidationAttribute, IClientValidatable
    {
        public string EarlierDateField { get; set; }

        protected override ValidationResult IsValid(object value, ValidationContext validationContext)
        {
            DateTime? date = value != null ? (DateTime?) value : null;
            var earlierDateValue = validationContext.ObjectType.GetProperty(EarlierDateField)
                .GetValue(validationContext.ObjectInstance, null);
            DateTime? earlierDate = earlierDateValue != null ? (DateTime?) earlierDateValue : null;

            if (date.HasValue && earlierDate.HasValue && date <= Convert.ToDateTime(earlierDate).AddDays(-1))
            {
                return new ValidationResult(ErrorMessage);
            }

            return ValidationResult.Success;
        }

        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
        {
            var rule = new ModelClientValidationRule
            {
                ErrorMessage = ErrorMessage,
                ValidationType = "greaterdate"
            };

            rule.ValidationParameters["earlierdate"] = EarlierDateField;

            yield return rule;
        }
    }
}

 

 

 

 

 

 

Hello guys,

We found an issue, related to ios Google Chrome Browser detection. When our app runs on Google Chrome, the kendo.support.browser will return { safari: true, version: 604, webkit: true } object and add applicable classes to html: k-safari. But actually, the browser is Google Chrome and kendo.support.mobileOS returns correct information about browser: browser: "chrome". See screenshot from Developer Console for more details.

In the previous versions of the kendogrid, calling select() on a row element used to force the grid to scroll to that element. It seems this is no longer the case:

Please see the dojo example of what I am describing:  https://dojo.telerik.com/IvUBa

In that example, I expect the grid to scroll to row 80 after I programmatically selected that row. Is there a workaround for this or is there anything new I should be calling?

 

Thanks.

I have tables on my server with thousands of records and im using ember framework(ember data).  for my grid i want to pass only an array of 2500 in total and as the user scrolls server side paging happens and the response update my datasource array but i dont know how. here is what i have sofar:

 

import Ember from 'ember';


export default Ember.Component.extend({
    className: 'kendo-grid',
    kendoGrid: null,

    initGrid: function () {
        this.send('createGrid');
    }.on('didInsertElement'),

    dataSourceObserver: function () {
        this.send('recreateGrid');
    }.observes('gridObject'),

    actions: {

        recreateGrid: function () {
            //Every time we recreate the grid, we need to destroy it first and create it again
            this.get('kendoGrid').wrapper.empty();
            this.get('kendoGrid').destroy();
            this.send('createGrid');
        },

        createGrid: function () {

            var gridModelData = this.get('gridObject.source');
            var gridHeight = this.get('gridObject.height');
            var gridPageSize = this.get('gridObject.pageSize');

            var dataSource = {
                data: gridModelData,
                serverPaging: true,
                serverSorting: true,
                pageSize: 20,
            };


            var grid = Ember.$("#kendo-grid").kendoGrid({
                dataSource: dataSource,
                pageSize: gridPageSize,
                pageable: {

                    refresh: true, //if set to true, it will show refresh button,clicking on that will make the grid to refresh                  
                    numeric: false,
                    previousNext: false,
                    messages: {
                        display: "Loaded {0}-{1} from {2} data items"
                    },
                },
                height: gridHeight,
                groupable: true,
                sortable: {
                    mode: "multiple"
                },
                filterable: true,

                scrollable: {
                    virtual: true,
                },

            }).data('kendoGrid');
            this.set('kendoGrid', grid);

            var pager = grid.pager;

            var test_pagechange = function (e) {
                console.log(e);
            };
            pager.bind('change', test_pagechange);

        }
    }



});

 

i dont want to use url in my grid datasource.