Telerik Forums
Kendo UI for jQuery Forum
4 answers
494 views

Hello,

I have a dropdownlist where I am using the .Select() and .Close() events.  What I'm doing is changing the background colors of the dropdownlists when there is something in the list selected.  This is so there's a visual indication for the user.  If the user clicks off the box, it will remain colorized if there's a selection made.  If there isn't, then it will return to the default color.  Attached image (ex-01)

For some reason, this doesn't work if I have a different .DataTextField vs. .DataValueField.  I have done this because I need to have the list display only a pre-formatted first name for the user.  (e.g. John, instead of John Smith or JOHN SMITH).  So in the cases where I have pre-formatting, it will colorize the dropdown correctly, but it does not remove it when I return to selectedIndex = 0 like the rest of the dropdowns. Attached image (ex-02).

The only difference in the code is that the .DataTextField("SomeFieldDisplay") and .DataValueField("SomeField") for the items that DO NOT.  For the ones that work, it's .DataTextField("SomeField") and .DataValueField("SomeField").  I'm pretty puzzled by this one.  My code is below.  Thanks!

<script type="text/javascript">
function onSelect(e) {
        e.sender.wrapper.children(0).addClass("custom-dropdown");
}
 
function onClose(e) {
    if (e.sender.selectedIndex < 1) {
        e.sender.wrapper.children(0).removeClass("custom-dropdown");
    }
}
</script>
<style>
html .k-widget .custom-dropdown {
    background-color: #00B312;
}
</style>
@( Html.Kendo().DropDownList()
    .Name("ddlTopics")
    .DataTextField("TopicTitle")
    .DataValueField("TopicTitle")
    .DataSource(ds =>
       {
       ds.Read(read =>
           {
               read.Action("GetAllTopicsByTitle", "Hierarchy");
           });
        })
    .Events(e =>
        {
            e.Select("onSelect").Close("onClose");
        })
    .OptionLabel("--Select Topic--")
)
 
@(Html.Kendo().DropDownList()
    .Name("ddlTopicOwner")
    .DataTextField("TopicOwnerDisplay")
    .DataValueField("TopicOwner")
    .DataSource(ds =>
        {
        ds.Read(read =>
            {
                read.Action("GetAllTopicsByOwner", "Hierarchy");
            });
        })
    .Events(e =>
        {
            e.Select("onSelect").Close("onClose");
        })
    .OptionLabel("--Select Topic Owner--")
)

Georgi Krustev
Telerik team
 answered on 07 Jul 2016
1 answer
1.0K+ views

Hi,

I need to disable node-checkbox (only the checkbox) and not the whole node.

this should be work by the prop "available".

attached example of my code:

http://dojo.telerik.com/@idoglik6/usIro

Thanks,

Ran

Stefan
Telerik team
 answered on 07 Jul 2016
1 answer
215 views

Background: I'm using external templates as described here for different pages in my SPA. Those pages consist of script tags with type "text/x-kendo/template". I load those templates into my index.html file and create Kendo views for each of the pages.

 

For some reason, I am not able to use the Kendo angular directives (e.g., "<input kendo-date-time-picker/>") inside my template scripts - they don't load properly. Using the same directives in my index.html file works perfectly though, so there shouldn't be a problem with dependencies. I suspect that the problem is either that there's some incompatibility with having the angular directives inside a View or that I'm not calling the right functions on the View. Right now, I'm just doing "layoutName.showIn("#content", viewName);" for the latter.

 

If anyone knows a fix, that would be super helpful. Otherwise, pointing me to an example of an SPA using external templates and the Kendo Angular directives would be helpful as well.

 

Julia
Top achievements
Rank 1
 answered on 06 Jul 2016
1 answer
150 views

We are currently experiencing a bug in the kendo grid control on IE version 11.420.10586.0 and 11.0.9600.18349, have not test all IE versions only these 2. The column resizing handles do not appear when attempting to resize the column. It has been tested in modern versions of Firefox, Chrome, Safari, Opera and IE and IE is the only one experiencing this issue. Is this a known issue and can you recommend a work around? I am experiencing this but on your samples so I have not enclose sample code. Please see http://demos.telerik.com/kendo-ui/grid/column-resizing, I am experiencing the problem in your samples as well as in my own project.

Thanks

Pavlina
Telerik team
 answered on 06 Jul 2016
1 answer
119 views

Hi Team,

We are not able to resize the column headers in Kendo grid on IE. Please use following link to reproduce the issue. 

http://demos.telerik.com/kendo-ui/grid/column-resizing 

The example works as expected when we open the link in Chrome. 

 

 

 

Pavlina
Telerik team
 answered on 06 Jul 2016
4 answers
837 views

I'm getting this error when I try to export to PDF (Scheduler). What I'm missing ?

Thank you

 

Dimo
Telerik team
 answered on 06 Jul 2016
10 answers
432 views

Hello,

We'd like only show whole numbers in the valueAxis - see example: http://dojo.telerik.com/ElobA/16

So, to solve this we added 'majorUnit: 1', which works fine.

However, we don't always know the data we are going to receive, and sometimes the values can be quite large.

If majorUnit is set to '1' with large values it will crash the browser.  See example (uncomment majorUnit for crash): http://dojo.telerik.com/ElobA/13.

Is there a better recommended way of handling this?  Or is it possible to set a value that determines the 'minimumMajorUnit' that won't crash the chart with large values?

Thanks for your help.

--Jeff

DVS InteleStream
Top achievements
Rank 1
 answered on 05 Jul 2016
3 answers
125 views

Here is demo code

Replication steps: run demo code in IE11
Actual result: grid rendered but it doesn't have column resizing feature (mouse hover on the border of header cell to click and drag for resize)
Expected result: grid's "column resizing" feature works

FYI:I can replicate it on IE11 only, other browsers: Edge, FireFox, Chrome have "column resizing" feature.

Pavlina
Telerik team
 answered on 05 Jul 2016
2 answers
404 views

Hello. I'm using kendo with angularJs + C# MVC. I'm trying to crate 2 related combo boxes. I have a OData dataSouce with items {Id: number, Name: string, Number: string}. I need to display in 1-st comboBox Names and in 2-nd - Numbers. Also, when i'll select some Name, the same item (with this selected item's Id) should be selected in 2-nd comboBox. And vise-versa. The DataSource contains very big amount of data. So i have to use virtualization here. My decidion is to crate 2 different ComboBoxes with different Options, but with the same DataSource (i'll avoid of handling filtering in ComboBoxes). So, my code is following:

 <select id="Name" name="Name"
                kendo-combo-box
                upper-hint
                k-ng-model="MyCtrl.item.ItemByName"
                k-options="TimesheetNewCtrl.NamesOptions"
                k-data-source="MyCtrl.dsNames"></select>

 

  <select id="Number" name="Number"
                kendo-combo-box
                upper-hint
                k-ng-model="MyCtrl.item.ItemByNumber"             
                k-options="TimesheetNewCtrl.NumberOptions"
                k-data-source="MyCtrl.dsNames"></select>

 

and in the MyCtrl i have:

var CreateDS = (url: string, _pageSize?: number, _model?: any, _sort?: any, _filter?: any, parameterMap?: any) => {
            var ps = _pageSize || 5;

            return new kendo.data.DataSource({
                type: "odata-v4",
                transport: {
                    read:
                    {
                        url: url,
                        dataType: "json"
                    },
                    parameterMap: parameterMap || Ui.GridBase.ODataParameterMap
                },
                schema: {
                    data: data => data["value"],
                    total: data => data['@odata.count'],
                    model: _model
                },
                serverPaging: true,
                serverSorting: true,
                sort: _sort,
                serverFiltering: true,
                pageSize: ps,
                filter: _filter

            });
        }

this.dsNames = CreateDS(dsBookingsNamesUrl, 0, null, null, null);

 

this.NumberOptions = {
                autoBind: false,
                placeholder: "Number...",
                dataValueField: "Id",
                dataTextField: "Number",
                filter: "contains",
                ignoreCase: true,
                change: (e) => {
                    if (e.sender.dataItem() == null) {
                        e.sender.value(null);
                        e.sender.text(null);
                        return;
                    }
                   
                    this.item.ItemByName = this.item.ItemByNumber;
                    this.dsNames.filter(null); 

                    $scope.$apply();
                },

               height: 260,
                virtual: {
                    itemHeight: 26,
                    valueMapper: (options) => {
                        options.success([]);
                    }
                }
            }

            this.NamesOptions = {
                autoBind: false,
                placeholder: "Name...",
                dataValueField: "Id",
                dataTextField: "Name",
                filter: "contains",
                ignoreCase: true,
                change: (e) => {
                    if (e.sender.dataItem() == null) {
                        e.sender.value(null);
                        e.sender.text(null);
                        return;
                    }

                    this.item.ItemByNumber = this.item.ItemByName;
                    this.dsNames.filter(null);

                    $scope.$apply();
                },

                height: 260,
                virtual: {
                    itemHeight: 26,
                    valueMapper: (options) => {
                        options.success([]);
                    }
                }
            }

It works almost fine. However, when i scroll down any of this ComboBoxes and select some value from it, this value is changing to some different value.

 

May be i'm doing something wrong? Also i've tried to change ValueMapper to return exact number of the selected element, but if i'm adding this value mapper to each of Options, it's constantly firing.

May be i heed to use 2 different dataSources? Could you provide any example of related comboBoxes (as i've described earlier)?

 

Vince
Top achievements
Rank 1
 answered on 05 Jul 2016
1 answer
265 views

Hi,

The scrollbar is always shown if we set 'scrollable' to true. We need the scrollbar only show if there are many rows.

I tried to change 'overflow-y' to 'auto' for '.k-grid-content', it works fine on tree content, but the main issue is on the header, where the scrollbar header cell is always there.

Please kindly advice any way to solve it.

Thanks,

Kelvin

 

Stefan
Telerik team
 answered on 05 Jul 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?