Telerik Forums
Kendo UI for jQuery Forum
1 answer
140 views

Hi. There is an error in ProgressBarOptions definitions for value property:

interface ProgressBarOptions {
        name?: string;
        animation?: ProgressBarAnimation;
        chunkCount?: number;
        enable?: boolean;
        max?: number;
        min?: number;
        orientation?: string;
        reverse?: boolean;
        showStatus?: boolean;
        type?: string;
        value?: number;  //should be number | boolean!!!!
        change?(e: ProgressBarChangeEvent): void;
        complete?(e: ProgressBarCompleteEvent): void;
    }

Dimiter Madjarov
Telerik team
 answered on 01 Sep 2016
1 answer
296 views

Hi I have a treeview which is populated every time i select a row from grid which is a file name. I am currently adding the file size so I used a template - 

<script id="treeview-template" type="text/kendo-ui-template">
    <div class="layout-row">
           <div class="item-stylingsize">#: item.text #</div>
           <div class="item-stylingsize">#: item.size #</div>           
       </div>
    </script>

 

since adding this template -

              template: kendo.template($("#treeview-template").html()),
                dataTextField: "text",
                dataSource: tree,               
                select: onselect,                
                dataBound: function (e)
                {
                    try
                    {

                         // uid is just some text
                        var uid = returnUID();
                       
                        var treeview = $("#treeView").data("kendoTreeView");                        
                         var text = treeview.findByText(uid);                       
                        var itemroot1 = treeview.dataItem(text);                   

                        // expands to the correct node
                        treeview.expandTo(itemroot1);

                       // should select the correct node but does not
                        treeview.select(itemroot1);

}

 

My expandTo() function is not working because the findbytext() isnt working. 

A separate issue is the select() function does not select a node.

Any help would be appreciated

 

                        
             

Stefan
Telerik team
 answered on 01 Sep 2016
1 answer
378 views

I have a tab strip in AngularJS where I am saving the user's last viewed tab and then trying to programmatically select that tab when they return to the page using ng-class and a scoped variable. This worked in a previous version of kendo UI, but I recently upgraded to the latest version and it no longer works. Here is how it is setup:

 

 <div kendo-tab-strip="tabStrip" k-content-urls="[null, null]">
        <ul>
            <li ng-class="selectedTab == 'Surveys' ? 'k-state-active' : ''" ng-click="changeSelectedTab('Surveys')">Surveys</li>
            <li ng-class="selectedTab == 'Assigned Surveys' ? 'k-state-active' : ''" ng-click="changeSelectedTab('Assigned Surveys')" >Assigned Surveys</li>          
        </ul>

     <div>Tab1</div>

     <div>Tab2</div>

</div>

 

The tab will show that it is selected, but the div content does not display. Any suggestions on an possible workaround?

 

 

Kiril Nikolov
Telerik team
 answered on 01 Sep 2016
3 answers
234 views
I can change the template & headerTemplate after init via the setOptions but only the template will take effect. The headerTemplate does not change when calling setOptions({ headerTemplate: "something"}). Is there any way to force it to update?
Eduardo Serra
Telerik team
 answered on 31 Aug 2016
10 answers
937 views

Hi!

I have bee through a lot of threads regarding this but I'm not able to find a dependable working solution. My case is that

  • It is pure JS grid
  • The grid is bound to local JS array
  • It is not in batch mode
  • The toolbar only allows adding new record
  • Once a row is added, it is in full edit mode and the command buttons read: Update and Cancel
  • Once I press update to save the row, it leaves edit template and the commands read: Edit and Delete

Here is the basic code to create the grid.

var kendoDataSource = new kendo.data.DataSource({
    data: getDataForGrid(),
    pageSize: 5,
    schema: {
        model: {
            id: "ParkingServiceId",
            fields: {
                ParkingServiceId:      { type: 'number', editable: false },
                TerminalId:            { type: 'number', validation: { required: true } },
                ServiceId:             { type: 'number', validation: { required: true } },
                ParkingCardNumber:     { type: 'string' },
                ParkingCardIssueDate:  { type: 'date',   validation: { required: true } },
                ParkingCardExpiryDate: { type: 'date',   validation: { required: true } },
                ParkingCardGroupId:    { type: 'number' },
                ServiceFee:            { type: 'number', validation: { min: 0, required: true }, editable: false }
            }
        }
    }
});
 
var gridMain = $("#serviceDetailsGrid").kendoGrid({
    dataSource: kendoDataSource,
    pageable: false,
    sortable: false,
    toolbar: ["create"],
    columns:
    [
        { field: "TerminalId",            title: "Terminal",  width: 140, template: getTerminalTitle,     editor: terminalDropDownEditor },
        { field: "ServiceId",             title: "Service",               template: getServiceTitle,      editor: serviceDropDownEditor },
        { field: "ParkingCardIssueDate",  title: "Issued On", width: 152, template: "#= kendo.toString(kendo.parseDate(ParkingCardIssueDate,  'dd-MMM-yyyy'), 'dd-MMM-yyyy') #", format: "{0:dd-MMM-yyyy}" },
        { field: "ParkingCardExpiryDate", title: "Expiry",    width: 152, template: "#= kendo.toString(kendo.parseDate(ParkingCardExpiryDate, 'dd-MMM-yyyy'), 'dd-MMM-yyyy') #", format: "{0:dd-MMM-yyyy}" },
        { field: "ParkingCardGroupId",    title: "Area",      width: 100, template: getTerminalAreaTitle, editor: terminalAreaDropDownEditor },
        { field: "ParkingCardNumber",     title: "Card #",    width: 120 },
        { field: "ServiceFee",            title: "Fee",       width: 100 },
        { command: [{ name: "edit" }, { name: "destroy" }], title: " ", width: "100px" }
    ],
    editable: "inline",
    cancel: function () { $('#serviceDetailsGrid').data('kendoGrid').dataSource.cancelChanges(); },
    dataBound: function () {
        var innerContentU = $(".k-grid-update").html();
        if (innerContentU) {
            $(".k-grid-update").html(innerContentU.replace("Update", ""));
        }
 
        var innerContentC = $(".k-grid-cancel").html();
        if (innerContentC) {
            $(".k-grid-cancel").html(innerContentC.replace("Cancel", ""));
        }
 
        var innerContentD = $(".k-grid-delete").html();
        if (innerContentD) {
            $(".k-grid-delete").html(innerContentD.replace("Delete", ""));
        }
 
        var innerContentE = $(".k-grid-edit").html();
        if (innerContentE) {
            $(".k-grid-edit").html(innerContentE.replace("Edit", ""));
        }
    }
}).data("kendoGrid");

I still see UPDATE, CANCEL, DELETE, and EDIT text. I have tried the following:

  • http://www.telerik.com/forums/how-to-show-image-only-button-for-destroy-command-button#nZn3GJ0jUUmKUCnHtaZp5Q
  • http://www.telerik.com/forums/image-only-on-command-buttons#-HlVbGjcFUKCnJ9Elngmew
  • https://onabai.wordpress.com/2012/09/05/kendoui-grid-toolbar-button-with-icon-only/

 

Iliana Dyankova
Telerik team
 answered on 31 Aug 2016
3 answers
668 views

Using AngularJS I have a grid that I can drag the header from and place into an input field.

What I would like to do is drag and place this header in the same fashion that DataTransfer.setData() works, this will allow me to keep adding information to the input field in whichever order I would like.

Here is a plunker with an example of what I am trying to achieve though some reason the kendo header won't populate the input in plunker but it does work on my local project.

Thanks, any help on this would be great as I really want to use the kendo grid for this

Stefan
Telerik team
 answered on 31 Aug 2016
1 answer
398 views

Hi!

I have the following code:

<div id="main-section-header" class="row">
    <h2 id="team-efficiency" class="col-xs-3">Security Groupings</h2>
    <div style="clear:both;"></div>
</div>

<script type="text/javascript">
    $(document).ready(function() {

    });

    function addClick(e) {
        e.preventDefault();

        var dialog = $("#addGrouping").data("kendoWindow");
        dialog.center();
        dialog.open();
    }

    function getSelectedIndex() {
        var selectedIndex = $("#securityGroupings").data('kendoDropDownList').select();

        if (selectedIndex == -1)
            selectedIndex = 0;
        alert("blablabla")
        var expandedNode = $('#expandedNode').val();
        return { selectedGroup: selectedIndex, selectedNode : expandedNode}
    }

    function onDropDownChanged(e) {
        var treeView = $('#treeView').data('kendoTreeView');
        treeView.dataSource.read();
        alert('treeview refreshed');
    }

    function onDataBound(e) {
        var dropDown = $("#securityGroupings").data('kendoDropDownList');

        var selected = dropDown.select();
        alert('onDataBoundCalled: ' + selected);
        if (dropDown.select() == -1)
        {
            this.select(0);
            this.trigger("change");
        }
    }

    function onExpanded(e) {
        var tree = $('#treeView').data('kendoTreeView');
        var data = tree.dataItem(e.node);
        $("#expandedNode").val(data.id);
    }

</script>

<div class="panel panel-default">
    <h1> Select a security grouping</h1>
    <p>

        @(Html.Kendo().Button()
              .Name("addButton")
              .Content("<i class='fa fa-plus rd-k-med-icon'></i> Add")
              .Events(e => e.Click("addClick")))

        @(Html.Kendo().DropDownList()
              .Name("securityGroupings")
              .DataTextField("Name")
              .DataValueField("Id")
              .SelectedIndex(0)
              .Events(e => e.Change("onDropDownChanged"))
              .Events(e => e.DataBound(("onDataBound")))
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetSecurityGroupings", "SecurityGrouping");
                  });
              })
              .HtmlAttributes(new {style = "width: 50%"})

              
              )
    </p>

    @Html.Hidden("expandedNode")

    @(Html.Kendo().TreeView()
        .Name("treeView")
        .DataTextField("Name")
        .Events(e => e.Expand("onExpanded"))
        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("GetRootGrouping", "SecurityGrouping").Data("getSelectedIndex")
            )
        )
        .Checkboxes(checkboxes => checkboxes
                .Name("checkedFiles")
                .CheckChildren(false))

    )
</div>

@(Html.Kendo().Window()
    .Name("addGrouping")
    .Title("Security Grouping")
    .Actions(a => a.Clear())
    .LoadContentFrom("OpenNewGrouping"))

 

I am populating the contents of a TreeView with the contents of a DropDownList. The function onDropdownChanged works as expected if the TreeView is at the root level but if a node is expanded then it just returns the children of the old root and ignores the newly selected root.

 

 

Any help is appreciated :)

 

Mark
Top achievements
Rank 1
 answered on 31 Aug 2016
2 answers
149 views

If you use the below - r is not passing the valid state

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    sheet.range("A1").value("r");
    sheet.range("A1").validation({
        from: "r",
        comparerType: "equalTo",
        dataType: "text",
        messageTemplate: "Not Valid."
    });

Veselin Tsvetanov
Telerik team
 answered on 31 Aug 2016
1 answer
176 views

I have just started integrating kendoui components with my angular js app. Here I am having hard times figuring out the angularjs compatible attributes for the grid. 

It would have been much relief if there was/is any link which could highlight all the necessary attributes and their usage. By attribute I mean : k-options, k-placeholder, k-filter etc.

 

 

 

Rumen
Telerik team
 answered on 31 Aug 2016
4 answers
1.5K+ views

I have the following grid:

$("#mygrid").kendoGrid({
    dataSource: gridDataSource,
    filterable: {
        extra: false,
        operators: {
            string: {
                startswith: "Starts with",
                eq: "Is equal to"
            },
            date: {
                eq: "Is equal to"
            }
        }
    },
    columns: [
        { 'field': 'RateType', 'title': 'Rate', editor: brDropDownEditor, template: "#=RateType.Name#" },
        ...
    ]
});

There are other fields but "RateType" is the one I have a question about. The field is an object and I'm using the template so the Name property is displayed in the grid.

When I attempt to filter by that column I get the following javascript error:

Uncaught TypeError: (d.RateType || "").toLowerCase is not a function

My question is, how do I get it to filter by the Name property instead of the object? I tried searching the forums and found this post: http://www.telerik.com/forums/inline-grid-filtering---column-bound-to-property-object

In that post, Plamen provided a sample (http://dojo.telerik.com/@zdravkov/ApiJU/2) which has the Category column setup the same way my RateType column is setup. In that sample, when I try to apply a filter on the Category column, I get the same javascript error:

Uncaught TypeError: (d.Category || "").toLowerCase is not a function

Is this a bug? How can I get the filter to compare against the Name property that I'm using in the template?

Mathew
Top achievements
Rank 1
 answered on 31 Aug 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
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?