Telerik Forums
Kendo UI for jQuery Forum
2 answers
951 views

The numericTextBox control gets the old value, if one inputs a new number directly in the textbox field and then leaves the controls. It works only correctly, if the value is selected by spin buttons. I created a sample:

http://dojo.telerik.com/aTuBI

Am I doing something wrong?

co-logic
Top achievements
Rank 1
 answered on 24 Nov 2017
1 answer
130 views

I have a grid with horizontal scrollbar, when I scroll it in IE11 it has a lot of artifacts - vertical bars, see attached image. I don't see it in Chrome or FF.

Why are they there and how to fix them? I use Fiori theme.

After I scroll back and forth on the second scroll it becomes fine, no vertical lines.
Stefan
Telerik team
 answered on 24 Nov 2017
1 answer
773 views

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. 

$scope.dataOpts1 = [
                            { Name: "Parent1", Id: 1, Child0Id: 6, Child1Id: 10 },
                            { Name: "Parent2", Id: 2, Child0Id: 7, Child1Id: 11 }];
                $scope.dataOpts3 = [
                            { Name: "Child1", Child0Id: 6},
                            { Name: "Child2", Child0Id: 7},
                            { Name: "Child3", Child0Id: 8},
                            { Name: "Child4", Child0Id: 9}];
                             
                $scope.dataOpts2 = [
                            { Name: "Child11", Child1Id: 10},
                            { Name: "Child12", Child1Id: 11},
                            { Name: "Child13", Child1Id: 12},
                            { Name: "Child14", Child1Id: 13}];

 

Nencho
Telerik team
 answered on 23 Nov 2017
1 answer
406 views

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.
Georgi
Telerik team
 answered on 23 Nov 2017
4 answers
405 views

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?
Konstantin Dikov
Telerik team
 answered on 23 Nov 2017
7 answers
1.7K+ views

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.

 

     var sizes = new kendo.data.DataSource({
        data: data.ProductSize,
        schema: {
            model: {
                id:"Id",
                fields: {
                    Name: { type: "string" }
                }
            }
        }
    });
    $("#sizegrid").kendoGrid({
        dataSource: sizes,
        pageSize: 20,
        sortable: false,
        columns: [{
            field: "Name",
            title: "Size",
            editor: UnitSizeDropDownEditor
        },{
            field: "PriceExcVat",
            title: "Price Exc VAT"
        },{
            field: "PurchasePrice",
            title: "Purchase Price"
        },{
            command: ["edit", "destroy"], title: " "
        }],
        editable: "popup"
    });
    kendo.ui.progress($("#tabstrip"), false);
})

And the template for the dropdown

function UnitSizeDropDownEditor(container, options) {
        $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataSource: {
                    transport: {
                        read: {
                            url: uri,
                            dataType: "json",
                            data: {"LanguageID": 1}
                        }
                    },
                    schema: {
                        model: {
                            id:"Id",
                            fields: {
                                Name: { type: "string" }
                            }
                        }
                    }
                }
            });
    }

Stefan
Telerik team
 answered on 23 Nov 2017
4 answers
192 views

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

Dimitar
Telerik team
 answered on 22 Nov 2017
12 answers
4.1K+ views
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. 

[
{
    OrderId: 1,
    OrderName: 'order 1'
    OrderItems: [
        {
            ProductId: 1,
            ProductName: "sample name"
        },
        {
            ProductId: 2,
            ProductName: "sample name 2"
        }
},
{
    OrderId: 2,
    OrderName: 'order 2'
    OrderItems: [
        {
            ProductId: 55,
            ProductName: "sample name 55"
        },
        {
            ProductId: 18,
            ProductName: "sample name18"
        }
}
]
In this case the kendo model would look as follows: 
var model = kendo.data.Model.define({
    id: "OrderId",
    fields: {
        OrderId: {
                type: "number",
                editable: false
        },
 
        OrderName: {
                type: "string",
                editable: false
        },
 
        OrderItems: {
            ??????????????
        }
    }
});
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.
Stefan
Telerik team
 answered on 22 Nov 2017
1 answer
146 views

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

 

 

 

 

 

 

Georgi
Telerik team
 answered on 22 Nov 2017
5 answers
225 views

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.

Elvis
Top achievements
Rank 1
 answered on 21 Nov 2017
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?