Telerik Forums
Kendo UI for jQuery Forum
2 answers
178 views
With a default Editor instance, if you have a paragraph, then press the Enter key twice to create blank space between a later paragraph, the middle "spacer" paragraph does not render in the browser, since it is totally empty.

<p>Test 1</p>
<p></p>
<p>Test 2</p>

But other WYSIWYG HTML editors generate "blank" paragraphs like this:

<p>Test 1</p>
<p>&nbsp;</p>
<p>Test 2</p>

That way, the browser will still render a blank paragraph.  Why does the Kendo Editor not do this?  Thanks.
JohnVS
Top achievements
Rank 1
 answered on 17 Feb 2014
1 answer
348 views
I enjoy being able to use jsfiddle.net to test out concepts and it works well for sharing concepts with Kendo UI as well.
I have set up a Kendo UI starter template that includes the basic Kendo CSS and JS files, but I thought it would be great if Kendo could be included in the list of built-in frameworks (jsbin already does this).

A few questions:
  1. Are there any licensing issues with this?
  2. JSFiddle states that they currently only support 1 JS file and 1 CSS file.  From my experience, it seems like you need 2 CSS files: default and common.  Is there a way to get a CDN link that combines necessary CSS files for cases like this?

I created a jsfiddle issue here to request Kendo UI to be added as a framework:
https://github.com/jsfiddle/jsfiddle-issues/issues/481

Atanas Korchev
Telerik team
 answered on 17 Feb 2014
1 answer
351 views
Greetings,

I have been trying for hours to use a custom editor (kendoDropDownList) with a grid in a situation when the only way to uniquely identify a record is by using a primary key. I have created a simplified working example. I know (based on the example in this web page http://demos.telerik.com/kendo-ui/web/grid/editing-custom.html) that it can be done if you want to store the DayOfWeekName value in the field. What I would like to do in this case is to use the kendoDropDownList in the grid to show the DayOfWeekName (when active), to display the selected DayOfWeekName on the grid when inactive (not undefined as it is doing now) and store the DayOfWeekID on the field named DayOfWeekID. Is this possible? Thank you very much.

Example:

<div id="example" class="k-content">
            <div id="grid"></div>
 
            <script type="text/javascript">
                var exampleData = [
                                     { 'RecordID' : 1, 'DayOfWeekID': 2, 'Description': 'Record 1' },
                                     { 'RecordID' : 2, 'DayOfWeekID': 3, 'Description': 'Record 2' },
                                     { 'RecordID' : 3, 'DayOfWeekID': 6, 'Description': 'Record 3' }
                                 ];
 
                $(document).ready(function () {
                    var dataSource = new kendo.data.DataSource({
                        pageSize: 20,
                        data: exampleData,
                        autoSync: true,
                        schema: {
                            model: {
                                id: "RecordID",
                                fields: {
                                    RecordID: { editable: false, type: "number" },
                                    DayOfWeekID: { defaultValue: { DayOfWeekID: 1, DayOfWeekName: "Sunday"} },
                                    Description: { type: "string" }
                                }
                            }
                        }
                    });
 
                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 430,
                        toolbar: ["create"],
                        columns: [
                            { field: "DayOfWeekID", title: "Day of week", width: "160px", editor: categoryDropDownEditor, template: "#=DayOfWeekID.DayOfWeekName#" },
                            { field: "Description", title: "Description", width: "120px" },
                            { command: "destroy", title: " ", width: "90px"}],
                        editable: true
                    });
                });
 
                function categoryDropDownEditor(container, options) {
                    $('<input required data-text-field="DayOfWeekName" data-value-field="DayOfWeekID" data-bind="value:' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                                           dataSource: [
                                               { 'DayOfWeekName': 'Sunday', 'DayOfWeekID': 1 },
                                               { 'DayOfWeekName': 'Monday', 'DayOfWeekID': 2 },
                                               { 'DayOfWeekName': 'Tuesday', 'DayOfWeekID': 3 },
                                               { 'DayOfWeekName': 'Wednesday', 'DayOfWeekID': 4 },
                                               { 'DayOfWeekName': 'Thursday', 'DayOfWeekID': 5 },
                                               { 'DayOfWeekName': 'Friday', 'DayOfWeekID': 6 },
                                               { 'DayOfWeekName': 'Saturday', 'DayOfWeekID': 7 }
                                           ],
                                           dataTextField: "DayOfWeekName",
                                           dataValueField: "DayOfWeekID"
                                       });
                }
 
            </script>
        </div>

Petur Subev
Telerik team
 answered on 17 Feb 2014
2 answers
365 views
I am using Kendo Upload but without the MVC wrappers. I am unable to get the files at the controller to save. 

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit([Bind(Include = "fileID,galleryItemID,width,height")] GalleryItemFile galleryFile, IEnumerable<HttpPostedFileBase> uplFile)
        {
 
            if (ModelState.IsValid)
            {
                GalleryItemFile thisGalleryFile = db.GalleryItemFiles.Find(galleryFile.fileID);
                if (uplFile != null)
                {
                    foreach (var inputFile in uplFile)
                    {
                        //HttpPostedFileBase uploadedFile = Request.Files[inputFile];
 
                        if (inputFile != null && inputFile.ContentLength > 0)
                        {
                            string filename = galleryFile.galleryItem.imageName + DateTime.Now.ToString("yyyyMMdd-HHmm-ss");
 
                            filename = filename.Replace(" ", "-") + "." + Path.GetExtension(inputFile.FileName);
                            string filepath = Path.Combine(Server.MapPath("~/Areas/Gallery/Content/GalleryFiles"), filename);
                            inputFile.SaveAs(filepath);
 
                            galleryFile.filename = filename;
                            galleryFile.filepath = Path.Combine("~/Areas/Gallery/Content/GalleryFiles", filename);
                        }
                    }
                }

@model Marketing.Areas.Gallery.Models.GalleryItemFile
 
@using (Ajax.BeginForm("Edit", new { id = Model.fileID }, new AjaxOptions { UpdateTargetId = "slideoutmenu", InsertionMode = InsertionMode.Replace, HttpMethod = "Post" }, new { enctype = "multipart/form-data" }))
    {
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.galleryItem.galleryItemID)
    @Html.HiddenFor(model => model.fileID)
 
 
        <table class="formtable">
            <tr><td colspan="2" class="tableheader">Edit Gallery File Item</td></tr>
             
            <tr>
                <td>Upload File:</td>
                <td><input type="file" name="uplFile" id="uplFile" /></td>
            </tr>
            <tr>
                <td>Item Name:</td>
                <td>@Html.EditorFor(model => model.width)</td>
            </tr>
            <tr>
                <td>Description:</td>
                <td>@Html.EditorFor(model => model.height)</td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="Save" class="btn btn-default" /> <input type="submit" value="Cancel" class="btn btn-cancel" onclick="slideOutMenuClose(); $('#slideoutmenu').html('');" /></td>
            </tr>
        </table>
        <script>
            $("#uplFile").kendoUpload();
        </script>
}

What am I doing wrong. I've tried this multiple ways and nothing seems to get the file. 
Petur Subev
Telerik team
 answered on 17 Feb 2014
4 answers
475 views
I'm having problems getting the current/new value from a Kendo dropdownlist in a change event in kendo viewmodel.

Html code:
    <div id="dropdownExample">
      <select id="nameDropDown" data-bind="value: name, events: {change: nameChanged}">
        <option>James</option>
        <option>Bond</option>
      </select>
      <div id="outputExample"></div>
    </div>


Javascript code:
  var vModel = kendo.observable({
    name: "James",
    nameChanged: function(param)
    {
        var paramDataName = param.data.name;
        var vModelGet = this.get("name");

        var outPut = "param.data.name = " + paramDataName;
        outPut += "<br/>vModelGet = " + vModelGet;
        
        $("#outputExample").html(outPut); 
        }
  });

This code works as expected. Param.data.name give me the new value, the same does viewmodel.get("name"). 

However if I try to turn that dropdown into a KendoDropDownList with $("#nameDropDown").kendoDropDownList({ }) param.data.name and viewModel.get("name") give me the old value. 

Any ideas?

We are currently using Kendo 2012.2.507.


Regards,
Jan Erik
Ladislav
Top achievements
Rank 1
 answered on 17 Feb 2014
1 answer
253 views
Hi.

Suppose I have following hierarchy

project1:
     -- entity1
     -- entity2
     -- entity3

project2:
     -- entity1
     -- entity2
     -- entity3

...

Project and  "entities" are basically different and I use different url to get them, say /serv/prj  for project and /serv/entities for entities.
When page is loaded there are only projects. When I expand project items should be loaded (refreshed) from server. Items for selected project
should be refreshed each time I expand the project.

Now it working ok in a static manner,  I have following:


var nodeZ = kendo.data.Node.define({
           hasChildren: "Entities",
           id: "EntityNamespaceID",
           children: "Entities"
 
       });
 
 var dataSource = new kendo.data.HierarchicalDataSource(
           {
               transport: {
                   read: {
                       url: "ns",
                       dataType: "json"
                   }
               },
               schema: { model: nodeZ},
               filter: {
                   logic: "or",
                   filters: [
                       { field: "EntityName", operator: "neq", value: "null" },
                       { field: "Namespace", operator: "neq", value: "null" }
                   ]
               }
 
           });

and have

dataTextField: ['Namespace', 'EntityName']   for tv.

But it is static. It loads everything one time and if I need to refresh data I have to reload page...

Is it possible to accomplish for within a single HierarchicalDataSource? As I mentioned project and entities are different, and to get
them I use two different urls, because in documentation it is stated for homogeneous data that it supply parent node id for request.
In my case data are heterogeneous.

What I'm currently unsuccessfully tried to do is to  load separately projects, and on expansion refrehs items:
expand: function(e)
 {

      var entityNodeZ = kendo.data.Node.define({
            hasChildren: "Children",
            id: "EntityId",
            children: "Children"

        });
              
    var nodeData = this.dataItem(e.node); //project node
             
     var entityDataSource = new kendo.data.HierarchicalDataSource(
       {
         transport: {
               read: {
                     url: "entity",
                     dataType: "json"
                      },
                      parameterMap: function ()
                       {
                           return { ns: nodeData.PrjId};
                       }
 
                   },
                   schema: { model: entityNodeZ},
                   filter: { field: "EntityName", operator: "neq", value: "null" }
 
               });
 
               entityDataSource.fetch();
              
               var tv= $('#userprjtreeview').data('kendoTreeView');
               tv.append(entityDataSource.view().slice(0), nodeData);
  
           }


But on tv.append  I get following exception:

Uncaught TypeError: Property 'children' of object [object Object] is not a function.

So please help with any approach.

Thanks in advance.


Jose Mejia
Top achievements
Rank 1
 answered on 17 Feb 2014
5 answers
256 views
While using the scheduler without a web service (so with an array/empty datasource) and setting recurrence rules, the component displays the recurrence icon only for the first event in the series and does not ask if we want to edit the occurrence or the series when trying to edit the other entries. Editing such an entry and clicking save then throws that error: Uncaught TypeError: Cannot read property 'dirty' of undefined.

To verify if my code was the culprit I just took one of the samples and removed the dataSource and it did the same thing.
Georgi Krustev
Telerik team
 answered on 17 Feb 2014
3 answers
218 views
Hello,

I would like appointments that occurred in the past to not be movable, resizable or destroyable. But i am not able to find "DragStart" event in this control.

Can you please add this event in this control?

Thanks,
Jayesh Goyani
Atanas Korchev
Telerik team
 answered on 17 Feb 2014
4 answers
757 views
I believe this does not happen only in ListView.

I tried your demo http://demos.telerik.com/kendo-ui/mobile/listview/editing.html. The original effect is: 
- swipe then Delete button appear
- click the item other then Delete button will hide it but will not trigger the Tap event because it has e.event.stopPropagaton() in touchStart event.

Okay, due to some reason I need to use Hold instead of Tap (i.e. Hold only, no Tap, so I am not talking about Tap triggered after Hold event problem)
- swipe then Delete button appear
- click the item other than Delete button. The Delete button goes away, but Hold event triggered!!
You can reproduce it just change Tap to Hold.

This means  e.event.stopPropagaton() cannot stop Hold timeout counting. Is there a way I can prevent this pending Hold event??
Petyo
Telerik team
 answered on 17 Feb 2014
1 answer
128 views
Hi, I am a beginner with Kendo generally and I'm trying to implement the scheduler control to show live calculation of material usage on daily bases (in a week by week view). 

I am unable to have the Usage data displayed in the cells although I managed to have to Materials displayed on the left hand side. I wonder if any one could help or give me some hints on what I am doing wrong. Here is my code so far:

I can be sure that data is being return to the view but the view is not showing the usage data, which is simply numeric values corresponding to a material on a specific day of the week. I have also attached a screenshot of how it looks like:

the Controller method to read the data: 

        public JsonResult Read([DataSourceRequest] DataSourceRequest request)
        {
            try
            {
                var usageList = new List<ReportUsageViewModel>();

                var imports = _importRespository.GetImports();

                foreach (var usageReportStoredProcedure in imports)
                {
                    var usageViewModel = new ReportUsageViewModel();

                    usageViewModel.MaterialID = usageReportStoredProcedure.MaterialID;
                    usageViewModel.Start = usageReportStoredProcedure.ScanDate;
                    usageViewModel.End = usageReportStoredProcedure.ScanDate;
                    usageViewModel.DailyUsage = usageReportStoredProcedure.UsageQuantity;
                    usageViewModel.Title = usageReportStoredProcedure.UsageQuantity.ToString();

                    usageList.Add(usageViewModel);
                }


                return Json(usageList.ToDataSourceResult(request));

            }
            catch (Exception exc)
            {
                ErrorHelper.WriteToEventLog(exc);
                return null;
               
            }
            
            
        }


The actual control

<div id="StockViewer">
    @(Html.Kendo().Scheduler<WorcesterMarble.ViewModels.ReportUsageViewModel>()
    .Name("StockViewer")
    .Timezone("Europe/London")
    .Resources(resource => resource.Add(m => m.MaterialID)
        .Title("Materials")
        .Name("Materials")
        .DataTextField("Name")
        .DataValueField("MaterialID")
        .BindTo(Model.MaertiaList))
    .MajorTick(270)
    .MinorTickCount(1)

    .StartTime(DateTime.Now.Date.AddHours(8))
    .EndTime(DateTime.Now.Date.AddHours(17))
    .AllDaySlot(false)
    .Date(DateTime.Now.Date)
    .Editable(false)
    .Views(x => x.WeekView(v =>
    {
        v.Footer(false);
        v.Selected(true);
        v.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'ddd dd/M')#</span>");
    }))
    .Group(group => group.Resources("Materials").Orientation(SchedulerGroupOrientation.Vertical))
        .DataSource(d => d
        .Model(m => {
            m.Id(f => f.MaterialID);
            m.Field(f => f.Title).DefaultValue("No title"); 
        })
        .Read("Read", "ReportUsage")
    )
    )
















Vladimir Iliev
Telerik team
 answered on 17 Feb 2014
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
Drag and Drop
Application
Map
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
DropDownTree
ListBox
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
LLM Kit
+? more
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Simon
Top achievements
Rank 2
Iron
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Grant
Top achievements
Rank 3
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?