Telerik Forums
Kendo UI for jQuery Forum
3 answers
231 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
930 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
656 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
391 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
146 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
173 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
1 answer
241 views

The cascading is not working in IE11 when filtering is enabled. The sample below is taken directly from "Edit this example" for http://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist

I have enabled the filtering on the first dropdown box. In IE11 the child dropdown is not enabled to continue the filtering once an option is selected in the first dropdown. The expected behaviour works fine in Chrome and Firefox.

 

Sample:

http://dojo.telerik.com/umAjIW/2

 

Single line added at 06 to enable filter:

01.$(document).ready(function() {
02.    var categories = $("#categories").kendoDropDownList({
03.        optionLabel: "Select category...",
04.        dataTextField: "CategoryName",
05.        dataValueField: "CategoryID",
06.        filter: "contains",
07.        dataSource: {
08.            type: "odata",
09.            serverFiltering: true,
10.            transport: {
11.                read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
12.            }
13.        }
14.    }).data("kendoDropDownList");

 

IE Version: 11.0.9600.18427

Windows 8.1 Enterprise x64

Dimiter Topalov
Telerik team
 answered on 31 Aug 2016
1 answer
278 views

There are two custom button on kendo scheduler one for show horizontal grouping and another for vertical grouping.
                                                How we write grouping method programmatically? We not implement grouping function in scheduler initialization.

 

Thanks 

Ranu Verma

 

Georgi Krustev
Telerik team
 answered on 31 Aug 2016
7 answers
625 views

Hello, 

I am very new at html and javascript so basic reponses would be better. Using this template location in a .html file 

 <ul data-role="listview" data-source="app.data" data-template="LED-template"></ul>

   <script id="LED-template" type="text/x-kendo-template">
    <a href="page/LEDlist/details.html?##id=#: LEDPartNumber #">   
            <div class="Manufacturer">#: LEDManufacturer #</div>
            <div class="Partnumber">#: LEDPartNumber #</div>
        </a>
    </script> 

gives me a list of all the data in app.data. Once any of the links are clicked this is executed 

 var location = window.location.toString();
 var partNumber = location.substring(location.lastIndexOf('?') + 4);

it is able to get the partnumber which I can use to filter the total data to find the right data and create a page based on the information. The problem I am having is that after going back once and choosing a second partnumber the above code fails to return a valid reponse. I've attached the console that is outputing 
location and the partNumber 

Thank you for any help!

Dimo
Telerik team
 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
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
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?