Telerik Forums
Kendo UI for jQuery Forum
1 answer
142 views

Hi, 

I am trying to add a dropdown to gantt Chart Toolbar, dropdown is being added to toolbar but it is not working.

In HTML

<div id="example">
  <div kendo-gantt k-options="ganttOptions"></div>
    <script id="template" type="text/x-kendo-template">
         <select kendo-drop-down-list
         k-data-text-field="'name'"
         k-data-value-field="'id'"
         k-data-source="projectsDataSource">
         </select>
   </script>

</div>

In by Angular Controller

$scope.ganttOptions = 
        {

            toolbar: [  
   { template: kendo.template($("#template").html())},

],
            views:  [

 

Bozhidar
Telerik team
 answered on 06 Jun 2016
1 answer
146 views

When loading up a Kendo Diagram, if no shapes are moved and the screen is not moved by panning, deleting an item with the delete key does not actually delete the item. If you move an item or pan on the screen one time at least, the shapes then can be deleted with the delete key. We confirmed this to be working on the 2016.1.112 version and not on the 2016.2.504 version when we updated.

Deleting a shape from the diagram using the X button, works in both versions.

Is this a problem in Kendo itself? Any help would be greatly appreciated.

Thanks,

 

Cornelius

Daniel
Telerik team
 answered on 06 Jun 2016
3 answers
368 views

I saw there was a latest internal build named 2016.2.523.

But I can't find its source ZIP, where is it?

Kiril Nikolov
Telerik team
 answered on 06 Jun 2016
4 answers
960 views
Hello telerik,

I am trying to use your treeView control... Three main problems for which I hope there are simple answers possible:

1. How can I activate checkboxes if I am using the MVVM way like this (in Default.htm):
01.<script id="index" type="text/x-kendo-template">
02.        <h3> Demo TreeView </h3>
03.        <div id="example" class="k-content">
04.            <div id="treeview" class="demo-section"
05.                data-role="treeview"
06.                data-text-field="label"
07.                data-checkboxes="true"
08.                data-bind=" source: filtergroups,
09.           events: { select: onSelect, expand: onExpand, change: onChange }">
10.            </div>
Using TypeScript I currently have to activate it in code like this; not nice!
(<kendo.ui.TreeView>treeview).options.checkboxes.checkChildren = true;

2. Having the checkboxes activated I want to react on a checkedChanged Event - but only to those events resulting from user input! Not the events fired by the GUI itself. Currently I am binding an event in my viewModel but that way I get too much events!!!
1.(<kendo.Observable>this).bind("change", (e) => {
2.                if (e.field == "checked") {
3.                    console.log(e);
4.                    $(document).trigger("checkedChanged", [ e.sender ] )
5.                    }
6.            });
3. And now to the most important question: How can I determine if I have a intermediate state checkbox? I can only see checked or unchecked! Where is the possibility hidden to get to know if this node is in intermediate state?

And one last question: Is there a TreeListView on the roadmap? That would be great!
Looking forward to hearing from you! Hopefully with good news! :)

Cheers and a big thanks in advance,
Tim.
Alex Gyoshev
Telerik team
 answered on 06 Jun 2016
2 answers
151 views

Hi, 

I created a hub with the CRUD method:

[Microsoft.AspNet.SignalR.Hubs.HubName("PayslipUploadHub")]
public class PayslipUploadHub : Microsoft.AspNet.SignalR.Hub
{
    public DataSourceResult ReadPayslipBatch([DataSourceRequest]DataSourceRequest request)
    {
        return DAL.GetPayslipBatchHistory(null).ToDataSourceResult(request);
    }
 
    public void UpdatePayslipBatch(PayslipGeneration payslipBatch)
    {
 
        Clients.Others.update(new DataSourceResult
        {
            Data = new[] { payslipBatch }
        });
    }
 
 
    public DataSourceResult CreatePayslipBatch(DataSourceResult payslipBatch)
    {
 
        Clients.Others.create(payslipBatch);
        return payslipBatch;
    }
 
    public void DestroyPayslipBatch(PayslipGeneration payslipBatch)
    {
 
        Clients.Others.destroy(new DataSourceResult
        {
            Data = new[] { payslipBatch }
        });
    }
 
 
}

I need to trigger the creation and the update not directly from the grid but on other actions. So to trigger Signal R this what i do:

var payslipBatch = DAL.GetPayslipBatchHistory(oResult.Result).First();
  using (var scope = _wa.CreateWorkContextScope(HttpContext))
  {
     var context = scope.Resolve<Microsoft.AspNet.SignalR.Infrastructure
                   .IConnectionManager>().GetHubContext<PayslipUploadHub>();
     context.Clients.All.createPayslipBatch(payslipBatch);
 }

 

When I debug this it actually never break into the CreatePayslipBatch Method of the Hub, and I don't understand why.

Here is the grid declaration:

@(Html.Kendo().Grid<PayslipGeneration>()
        .Name("PayslipGenerationHistory")
        .Columns(columns =>
        {
            columns.Bound(c => c.Status.Code).Width(60).ClientTemplate("<i class='#=Status.Class#'></i>").HtmlAttributes(new { style = "text-align:center" }).Title("Status");
            columns.Bound(c => c.Name).Width(250);
            columns.Bound(c => c.Period).Format("{0:MMMM yyyy}").Width(110);
            columns.Bound(c => c.StatusInfo);
            columns.Bound(c => c.Comment);
            columns.Bound(c => c.CreatedBy).Width(140);
            columns.Bound(c => c.CreatedOn).Format("{0:dd MMM yyyy}").Width(110).Title("Created On");
            columns.Bound(c => c.UpdatedBy).Width(140);
            columns.Bound(c => c.UpdatedOn).Format("{0:dd MMM yyyy}").Width(110).Title("Updated On");
            columns.Template(e => { }).ClientTemplate(
                "# if(Status.Code == 'FAILED') " +
                               "{# <a onclick = 'RegenFailed( #: data.Id # );'><i title='Regenerate Payslip' class='fa fa-undo fa-2x'></i></a> #} " +
                               "else {# <i title='Regenerate Payslip' class='fa fa-undo fa-2x'></i> #}#")
                               .Title("").Width(50).HtmlAttributes(new { style = "text-align:center" });
            //columns.Command(command => command.Custom("Delete").Click("DeleteBatchLine")).Title("").Width(80);
            //columns.Command(command => command.Custom("Check").Click("CheckBatchLine")).Title("").Width(80);
        })
        .HtmlAttributes(new { style = "height: 380px;" })
        .Scrollable()
        .Groupable()
        .Sortable()
        .ClientDetailTemplateId("template")
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(new List<string>{"10","20","50"})
            )
       .DataSource(dataSource => dataSource
        .SignalR()
        .PageSize(10)
        .Events(ev => ev.RequestEnd("onRequestEnd"))
        .AutoSync(true)
        .ServerFiltering(true)
        .ServerPaging(true)
        .Sort(s => s.Add("CreatedOn").Descending())
        .Transport(tr => tr
            .Promise("hubStart")
            .Hub("hub")
            .Client(c => c
                    .Read("readPayslipBatch")
                    .Update("updatePayslipBatch")
                    .Create("createPayslipBatch")
                    .Destroy("destroyPayslipBatch"))
            .Server(s => s
                    .Read("ReadPayslipBatch")
                    .Update("UpdatePayslipBatch")
                    .Create("CreatePayslipBatch")
                    .Destroy("DestroyPayslipBatch")))
        .Schema(schema => schema
            .Data("Data")
            .Total("Total")
            .Aggregates("Aggregates")
            .Model(model =>
            {
                model.Id("Id");
            }
            )))
        .Events(e => e.DataBound("onDataBound"))
)

 

At the beginning I was not using the DataSourceResult but directly the type PayslipGeneration and I had a lot of trouble with the pagination. So i converted the read function to return a DataSourceResult and then it broke all the other CRUD method I tried to cast the other CRUD method to  work only with DataSourceResult as mention on this post, but it still not working.

Any idea?

 

 

 

Daniel
Telerik team
 answered on 06 Jun 2016
1 answer
150 views

Hi,

I am working with the treeview with angularjs template shown on the telerik treeview demo and looking for the following format.

A

   1

      1.1

   2

      2.1

            2.1.1

Is there a way to make only the '1.1' and '2.1.1' (the last child nodes on the respective parents)as anchor tags. I tried to use the k-template and define anchor tag on the template and it is causing all the nodes render as anchor tags.

-YK

     

Daniel
Telerik team
 answered on 06 Jun 2016
1 answer
231 views

In the chart configuration: is xAxis the same as categoryAxis and is yAxis the same as valueAxis or is there a difference?

 

It looks like a chart may have many y axes, each of which is an instance of a valueAxis. Each series must specify the y-axis against which it is plotted by setting the series.axis to be equal to the yAxis.name. However, what, then is the purpose of the valueAxis configuration?

 

Is the situation with xAxis and categoryAxis analogous?

rwb
Top achievements
Rank 2
 answered on 04 Jun 2016
2 answers
374 views

Hello everyone,

I'm terribly sorry for busting in here without taking the proper time to get acquainted with these forums.
I'm currently in China for a month and during this period I'd like to test Kendo UI, but here in China it's incredibly hard to work on servers outside China.
Many sites are blocked, and the ones which aren't have a very slow connection and sometimes don't work properly (because certain resources are blocked).
That's why it's very frustrating to try to develop something in a new framework; every search for information is so hard... So please forgive me if I'm asking questions which have already been answered.

I'm trying to combine Kendo UI development with a RequireJS based site. But I don't want to use global variables and I want to put the code in a separate module (js-file) instead of the HTML-page. The sample on the Kendo UI site on requirejs didn't help me on that subject.
For some reason I can't get that to work. The Kendo-methods are not defined in the jQuery-object and if I'm trying to use the kendo-object within a define or require method it keeps saying that it's "undefined".

On top of that I'm still in the process of getting used to the use of modules nd requirejs.
Could someone help me out, please?

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Testing KendoUI</title>
    <link rel="stylesheet" href="styles/kendoui/kendo.common-material.min.css" />
    <link rel="stylesheet" href="styles/kendoui/kendo.material.min.css" />
 
    <script data-main="js/main" src="js/require.js"></script>
</head>
<body>
    <div id="example">
        <div class="demo-section k-content">
            <h4>Choose shipping countries:</h4>
            <input id="countries" style="width: 300px;" />
            <div class="demo-hint">Start typing the name of an European country</div>
        </div>
    </div>
</body>
</html>


main.js:
requirejs.config(
{
    paths: {
        kendo: "ext/kendoui"
    }
});
 
//Start the application
require(["mod/autocomp"], function(pMod)
{
    pMod.StartModule();
});
    paths: {
        kendo: "ext/kendoui"
    }
});
 
//Start the application
require(["mod/autocomp"], function(pMod)
{
    pMod.StartModule();
});


autocomp.js:
define(["jquery", "kendo/kendo.all.min"], function($, pKUI)
{
    var
    ListItems = [],
    SetItems = function(pItems)
    {
        ListItems = pItems;
    },
    GetItems = function ()
    {
        return ListItems;
    },
    SetAutoComplete = function(pFieldID)
    {
        pKUI.jquery("#" + pFieldID).kendoAutoComplete({
                dataSource: ListItems,
                filter: "startswith",
                placeholder: "Select country...",
                separator: ", "
            });
    },
     
    StartModule = function()
    {
        SetItems([
                    "Albania",
                    "Andorra",
                    "Armenia",
                    //...
                    "United Kingdom",
                    "Vatican City"]);
 
        //create AutoComplete UI component
        SetAutoComplete("countries");
    };
         
        //Reveal the required methods publicly
    return {
        StartModule: StartModule
    };
     
});

 

I tried both "$" and "pKUI.jQuery", $ is defined but doesn't contain any Kendo items, and pKUI just isn't defined at all.

Peter
Top achievements
Rank 1
 answered on 04 Jun 2016
6 answers
296 views
We are using kendo.all.min.js v2013.3.1119 

I call out my treeview like so:  <ul data-kendo-role="treeview"
         data-kendo-bind="source: dataSource, events: { select: onSelect }"
         data-kendo-load-on-demand="true"
         data-kendo-text-field="name"></ul>


self.kendoModel.dataSource = new kendo.data.HierarchicalDataSource({
                transport: {
read: {
                        type: "GET",
                        dataType: "json",
                        contentType: "application/json",
                        url: apiUrlHelper.getPath('collections') +  "/"
                    }
                },
                schema: {
                    model: {
                        id:"id",
                        children   : "items",
                        hasChildren: true
                    }
                }
            });

When I first load the page, I get the roots of all items in the tree, and when I click on the expander the class changes on the html element, but I don't see any new requests to the server for additional information. 

I've tried adding a custom transport and a parameter map, but it's not helping.

Here's a sample of the json used to populate the tree:

[{"id":192,"name":"a new collection","customerId":1,"createdBy":"admin","lastModifiedDate":null,"createdDate":"2013-12-17","isprivate":1,"managers":[],"items":[]},{"id":1986,"name":null,"customerId":1,"createdBy":"admin","lastModifiedDate":null,"createdDate":"2013-12-18","isprivate":1,"managers":[],"items":[]}]


Chris
Top achievements
Rank 2
Veteran
 answered on 04 Jun 2016
1 answer
207 views

I am trying to set up a cascading drop down list using the resources of a scheduler.

The drop down lists work fine, but when i try to declare the parent/child cascade using the 'cascadeFrom' the cascade does not work at all.

 

Here is my code:

<div id="resourcesContainer">
</div>

<script>
    jQuery(function () {
        var container = jQuery("#resourcesContainer");
        var resources = jQuery("#scheduler").data("kendoScheduler").resources;
        for (var resource = 0; resource < resources.length; resource++)
        {
            jQuery(kendo.format('<div class="k-edit-label"><label for="{0}">{1}</label></div>', resources[resource].name, resources[resource].title)).appendTo(container);
            var divID = resources[resource].name + "kdd";
            var labcont = jQuery(kendo.format('<div id="{0}" class="k-edit-field"></div>', divID)).appendTo(container);

            if (resources[resource].name !== "LocationRoom") {
                jQuery(kendo.format('<select data-bind="value: {0}">', resources[resource].field))
                        .appendTo(labcont)
                        .width(300)
                        .kendoDropDownList({
                            filter: "contains",
                            dataTextField: resources[resource].dataTextField,
                            dataValueField: resources[resource].dataValueField,
                            dataSource: resources[resource].dataSource,
                            valuePrimitive: resources[resource].valuePrimitive,
                            optionLabel: "Select...",
                            template: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField)
                        });
            }
            else if(resources[resource].name === "LocationRoom")
            {
                jQuery(kendo.format('<select data-bind="value: {0}">', resources[resource].field))
                       .appendTo(labcont)
                       .width(300)
                       .kendoDropDownList({
                           autoBind: false,
                           cascadeFrom: "Locationkdd",
                           optionLabel: "Select location first...",
                           dataTextField: resources[resource].dataTextField,
                           dataValueField: resources[resource].dataValueField,
                           dataSource: resources[resource].dataSource,
                           valuePrimitive: resources[resource].valuePrimitive,
                           template: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[resource].dataColorField, resources[resource].dataTextField)
                       });
            }
        }
    });
</script>

 

HOWEVER, if i change jQuery(kendo.format('<select data-bind="value: {0}">', resources[resource].field)).appendTo(labcont).Width(300)..... to jQuery("#" + divID).Width(300).... it works, but obviously the MVVM binding is completely lost.

Any ideas?

 

Chris
Top achievements
Rank 1
 answered on 03 Jun 2016
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
ScrollView
Switch
TextArea
BulletChart
Licensing
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
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
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
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?