Telerik Forums
Kendo UI for jQuery Forum
12 answers
206 views

I have an application where the order of siblings under a node in the tree list is important and I would like to build upon the the demo at https://demos.telerik.com/kendo-ui/treelist/dragdrop whereby if I drag a node up or down within a branch, I can persist its order. 

In this example, if I drag Rinah above Akim in the list beneath Hyacinth, I would like to persist that order.  

 

I have been doing this fairly crudely by assigning an order field to each node - but figure there must be a better way.  Any suggestions?  

Roger
Top achievements
Rank 2
Veteran
 answered on 12 Feb 2021
1 answer
310 views

Hi

 

I am having two issues with Kendo Tab Strip(AnguarJS) as followings:

1) Default HTML tag 'li' is showing before Kendo Tab strip is applied

- Default HTML tag 'li' is showing for 1 second(see the screenshot '1') and then Kendo Tab strip is applied

- I tried to use ng-cloak and also k-ng-delay, it is still showing default HTML tag

- I do not want to show default HTML tag, I want to display Kendo Tab Strip once it is fully initialized

- *I am using ng-repeat for dynamic tab, not data-bound. I prefer to use ng-repeat as each tab contents are quiet large

 

2) After add a new tab(by some button), UI for a new tab is broken

- As I mentioned above, I am using ng-repeat and add a new object to existing array to add a new tab.

- I guess this would be a bug, it would be great if you can provide the example with ng-repeat scenario

 

Kind regards

Minchul

 

Ivan Danchev
Telerik team
 answered on 12 Feb 2021
1 answer
720 views

My requirement is to have multi select dropdown and foreign key in the kendo grid. It's working fine when i update records one at time, but if i want to do it with batch update, how can i do that? 

   @(Html.Kendo().Grid<Rostering.Models.ViewModels.RosterShiftAllocationViewModel>()
                .Name("rgAllocation")
                //.Events(e => e.Change("rgAllocation_Save"))
                .Editable(editable => editable.Mode(GridEditMode.Incell))
                .ToolBar(toolbar =>
                {
                    toolbar.Save().HtmlAttributes(new { @class = "no-print" });
                })
                .Columns(c =>
                {
                    c.Bound(e => e.Id).Visible(false);
                    c.Bound(e => e.StartEndDetail).Title("Start and End").EditorTemplateName("").HtmlAttributes(new { @class = "cellBorder", @style= "color: red" });
                    c.Bound(e => e.RollNumber).Title("Payroll Number").HtmlAttributes(new { @class = "cellBorder" });
                    c.Bound(e => e.StaffMember).Title("Staff Member").HtmlAttributes(new { @class = "cellBorder" });
                    c.Bound(e => e.Grade).Title("Grade").HtmlAttributes(new { @class = "cellBorder" });
                    c.Bound(e => e.ShiftBeds).ClientTemplate("#=bedsTemplate(RosterShiftBeds)#").Title("Allocation").HtmlAttributes(new { @class = "cellBorder" });
                    c.Bound(e => e.AllocationComments).Title("Comments").HtmlAttributes(new { @class = "cellBorder" });
                    c.Bound(e => e.ShiftType).Title("Shift Type").HtmlAttributes(new { @class = "cellBorder" });
                    c.ForeignKey(p => p.AllocationSpecialId, (System.Collections.IEnumerable)ViewData["AllocationSpecial"], "AllocationAlertTypeId", "Description")
                        .EditorTemplateName("AllocationSpecialEditor")
                        .ClientTemplate("#=AllocationSpecialDescription#")
                        .Title("Special")
                        .HtmlAttributes(new { @class = "cellBorder" });
                     c.Command(command => { command.Edit(); }).Width(100).HtmlAttributes(new { @class = "no-print"});
                })
                .Events(events => events.Save("on_rgAllocation_Save"))
                .DataSource(d =>
                    d.Ajax()
                    .Batch(true)
                    .Model(model =>
                    {
                        model.Id(e => e.Id);
                        model.Field(e => e.ShiftStartEndDetail).Editable(false);
                        model.Field(e => e.RollNumber).Editable(false);
                        model.Field(e => e.StaffMember).Editable(false);
                        model.Field(e => e.Grade).Editable(false);
                        model.Field(e => e.ShiftType).Editable(false);
                        model.Field(e => e.ShiftBeds).DefaultValue(new List<ShiftBedViewModel>());
                    })
                    .Read(r => r.Action("GetShiftDetailByDateId", "Home").Data("getAllocationParams"))
                    .Update(update => update.Action("UpdateShiftAllocationDetails", "Home"))
                   )
                )

 

 

 

  function on_rgAllocation_Save(e) {
            console.log("i m called _ on rg Allocation");
            if (!e.model.AllocationSpecialId) {
                //change the model value
                e.model.AllocationSpecialId = 0;
                //get the currently selected value from the DDL
                var currentlySelectedValue = $(e.container.find('[data-role=dropdownlist]')[0]).data().kendoDropDownList.value();
                //set the value to the model
                e.model.set('AllocationSpecialId', currentlySelectedValue);
                if (e.model.RosterShiftBeds.count > 0) {
                    $.each();
                }
            }
        }

 

and this is my multiselect  editor template

 

@model IEnumerable<Rostering.Models.ViewModels.ShiftBedViewModel>
@(
    Html.Kendo().MultiSelectFor(m => m)
        .DataTextField("BedName")
        .DataValueField("BedId")
        .Placeholder("Select")
        .DataSource(d => d.Read(r => r.Action("OrgUnitBeds", "List").Data("getUnit")))
)

Neli
Telerik team
 answered on 12 Feb 2021
3 answers
1.4K+ views

There are a few different ways described to select the first row in a grid programmatically, but they all seem to rely on the markup of the grid, and not the data in the grid.

For instance, one way is this:

kendoGrid.select("tr:eq(1)");

However, that only works if there is no filtering. If filtering is enabled (Mode = "Row"), than the code needs to be

kendoGrid.select("tr:eq(2)");

Of course, we could check if filtering is enabled (this is dynamic in our case), and adjust the code accordingly. Still, it doesn't feel robust, instead it would be better to select referencing the data, something like:

kendoGrid.selectAt(0);

The selectAt method doesn't exist, but are there other ways?

 

Anton Mironov
Telerik team
 answered on 12 Feb 2021
5 answers
351 views

Hi

 

Is there a way to force poster image to be shown instead of the first video frame when autoplay is false?

 

As far as I can see Kendo generated video tag does not have poster tag and when I add it with jQuery attr() method… it does not work as video preloads first frame and just shows black rectangle.

Partial fix is adding (with jQ) preload=none attribute to video tag but then "current play time" shows actual date/time (full format) instead of 00:00:00.

I am out of ideas…

Eyup
Telerik team
 answered on 12 Feb 2021
3 answers
119 views
I've been implementing multi-column headers in grid and I've found out that I can't change type of columns that are part of
this "multi-column headers". Here is the demo that reproduces it: https://dojo.telerik.com/UbAJeYUJ.
I've taken it from https://demos.telerik.com/kendo-ui/grid/multicolumnheaders.
In this demo I've changed "Company name" column to date and it works. However I've also changed "Country"
column type to date. This column is part of "Location" column and changing "Country" type doesn't seem to work.
Is it the problem of wrong configuration?

Kendo UI v2020.3.1118
Eyup
Telerik team
 answered on 12 Feb 2021
2 answers
238 views

Hello

I'd like to make a custom editor for the Form.  I would like to have a button and a read-only textbox.  The button trigger a method that opens a dialog containing a list of items.  The item(s) are selected and the data is returned back to the form and placed i the text box.

 

Is this possible?  Any chance there are more examples of custom editors?

 

Thank you

Jeff

 

Jeffrey
Top achievements
Rank 1
Veteran
Iron
Iron
 answered on 12 Feb 2021
3 answers
359 views

Hi All,

I am new to Kendo, can you please help me with the below scenario.

In the current scenario, when I enter 3 letters, the call is going to the database, but I want to call database only when I focus out of the textbox , I don't want to call database after 3 letters. how to achieve this, below is my code block.

 

(function ($, kendo, undefined) {
var templates = {
description:
'<input data-role="autocomplete" type="text" data-text-field="description" data-filter="contains" data-min-length="3" data-bind="source: colors, value: autoCompleteValue/>'
};

var seceditor = Widget.extend(
options: {
columns: [
  { 
    template: kendo.template(templates.description)
  }
]
});
ui.plugin(seceditor );
})(jQuery, window.kendo);

 

Thanks,

Tram

tram
Top achievements
Rank 1
Veteran
 answered on 11 Feb 2021
2 answers
258 views

Hi,

I have some doubts about coordinates.

How to get pixel cordinates of a lat, lng point?

I tried locationToView and locationToLayer without success ..

Here a script example:

 

$("#map").kendoMap({
            zoom: 3,
            center: [45, 10],
            layers: [{
                type: "tile",
                urlTemplate: "http://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
                attribution: "© OpenStreetMap"
            }],
            markers: [{
                location: [45, 10],
                shape: "pinTarget"
            }],
            pan: function (e) {
                 
                console.log('What are now marker pixel coordinates?')
                 
            }
        });
Marcello
Top achievements
Rank 1
Iron
 answered on 11 Feb 2021
1 answer
97 views

Hello,

I have a graph showing values throughout a day (from midnight to midnight) in quarter-hour periods.

My question is, if there is a tool to display graph in corresponding way - to show the data like they are measured in the corresponding period, not at the ticks, that means to place columns into gaps between ticks and labels onto ticks (so column wouldn't be above label).

Example is attached.

Thanks for response in advance.

Jiri

 

Nikolay
Telerik team
 answered on 11 Feb 2021
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
Date/Time Pickers
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)
SPA
Filter
Drawing API
Drawer (Mobile)
Globalization
Gauges
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
ScrollView
PivotGridV2
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
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
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
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?