Telerik Forums
Kendo UI for jQuery Forum
1 answer
87 views

Hi,

 

The increase/decrease icons in the select box don't appear centered after upgrading to latest 2017.1.118.

I attached some screenshots that show the new behaviour, I used telerik.com's demos and switched the version on the edit example.

Tested with all 3 major browsers.

 

Best regards,

Gil

Orlin
Telerik team
 answered on 22 Feb 2017
2 answers
310 views
I am trying to understand how to port an existing set of code to Webpack. Here's my scenario:

I'm using jQuery with Bootstrap, KendoUI, Mockjax, some jQuery plugin-ish libraries (e.g. bootbox, jQuery BlockUI). Previously (using requireJS), I was able to specify these dependencies in an array in the 'require' of my main app js, and everything was tied together nicely. Like this:

    require(['dep1','dep2','...'],function(Dep1,Dep2,...) {do stuff});

Using Webpack I've encountered a number of problems:

- When I turn on the 'chunking' feature, my mock endpoints no longer
   work
   
- In one case, Webpack is creating a '0.js' file and I have no idea
   why, nor how to prevent it from doing so.
   
- In various cases it appears there are two (?) copies of jQuery, such
   that handlers or references to Kendo widgets don't work anymore
   
- When I tried to convert some wrapper code from an AMD style (with a
   'require' array followed by a function with formal params), I got
   numerous errors, such as Bootstrap not finding jQuery or everything
   appearing to load except none of the jQuery event listeners were
   working.

I've read a bunch of articles, and tried things like:

- using the `webpack.ProvidePlugin` in my Webpack config

- putting an 'alias' to the unminified jQuery in the `resolve` object of my Webpack config

- using the `imports-loader?jQuery=jquery,$=jquery,this=>window` approach in my `module: { loaders: {}}` Webpack config object

- using the `imports-loader` approach in my main js in the `require` 

So far, nothing has worked completely. I've gotten close, only to find (for example) that suddenly a Kendo widget doesn't seem to exist under the jQuery selection it previously was working under.

##Summary: 

I'd like to understand how to make a bulletproof setup so that one and only one instance of jQuery exists, and everything that has jQuery as a dependency/relationship uses that instance everywhere in my code. Further, I'd like to understand how such a thing can be accomplished while using the 'chunking' feature of Webpack. If I separate my Mockjax endpoints (for example) into a separate file, I want them to function for any AJAX call anywhere, be it via Kendo or jQuery. If I define a Kendo widget (say, a dropdown) somewhere, I want to be able to get a handle to it from anywhere using the `$('.some-kendo-widget').data('kendoDropDownList)` approach.

I'm happy to read more articles if someone has links; I've searched and searched, and just don't seem to have the right vocabulary to find what I need. Surely someone else has faced this though.
Travis
Top achievements
Rank 1
 answered on 22 Feb 2017
1 answer
464 views
I wanted to post this helpful tip:

If you are using Bootstrap and the Kendo Grid with a custom row template that uses Bootstrap functionality inside the row template, e.g.:

<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr><td>
    <div class="row">
        <div class="col-md-12">
            [Content]
        </div>
    </div>
    </td></tr>
</script>

You will find the bootstrap layout breaks as Kendo are using content-box, not border-box for all their widgets. A workaround that I found is to use:

.k-widget .row *
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

This ensures the styling of the Kendo grid remains correct, but applies the Bootstrap box sizing to all children of any Bootstrap rows within a Kendo grid.
Pat
Top achievements
Rank 1
 answered on 21 Feb 2017
6 answers
969 views
We need to dynamically change the selectability of the rows in the grid.  When a dropdown outside the grid has a certain value, the selectability of the grid is "row" for single-selection.  For the other value, the selectability is "multiple, row".

How do I change the selectability dynamically?  

grid.selectability( (selectedFilter().multiselect == true ? "multiple, row", "row"));
fails with an error saying it is not a function

grid.selectability = (selectedFilter().multiselect == true ? "multiple, row", "row");
has no effect.

Thanks,
Rod Early
McKesson Corp.

Jeff
Top achievements
Rank 1
 answered on 21 Feb 2017
2 answers
173 views
When I use the Indian culture files say en-IN, the culture file has the groupSize specified as [3,2] which is initial 3 places and then 2 places after. However, kendo.format does not seem to respect it. Dug into the source files and I see only groupSize[0] being used in number format.

For example in en-IN culture, the currency format should return 12,34,567.00 and not 1,234,567.00. Is this a known issue or am I doing something wrong.

Jayesh
Top achievements
Rank 1
 answered on 21 Feb 2017
5 answers
1.2K+ views
Hello,
I would like the Kendo grid to use the Model (local data) to initialize the data part and after that I want the grid to do the paging and sorting on the client side only and not go to server at all.

Based on other examples by Kendo I used datasource with the Ajax() call with and ServerOperation set to “false” with no Read(). What happens is interesting grid goes blank and before doing that grid appears to call [HttpGet] method on the controller as if it is a fresh page request. I was assuming that it will not go back to the server again because of ServerOperation(false) condition.

Here is my grid call. Please tell me what I am doing wrong.

Thanks for your help.

Please note: If I disable the datasource line by commenting out, grid displays collected data but paging or sorting won't work as expected as I have not implemented on the server side. 
 
                            @(Html.Kendo().Grid(Model)
                            .Name("Grid")
                            .Columns(columns =>
                            {
                                columns.Bound(model => model.Status);
                                columns.Bound(model => model.Created);
                                columns.Bound(model => model.Name);
                                columns.Bound(model => model.ID);
                                columns.Bound(model => model.ViewImage);
                            })
                            .Pageable()
                            .Sortable()
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .PageSize(3)
                                .ServerOperation(false)
                                )
                        )
 

 

Jobi
Top achievements
Rank 1
 answered on 21 Feb 2017
1 answer
131 views

Is it possible to simulate the multiselect tagTemplate in a combobox?

http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect#configuration-tagTemplate

Are you planning such a feature for the combobox?

 

Veselin Tsvetanov
Telerik team
 answered on 21 Feb 2017
4 answers
263 views

We recently updated to 2017 R1 of Kendo UI, which included the new Web Font Icons. We noticed that the printer icon is now shown correctly in any browsers. See screenshots below. 

Any advice or does Kendo UI need an update?

<button type="button" class="k-button actionButtonRight" data-bind="events:{click:onPrintClick}">
    <span class="k-i-print"></span>
    <span data-l10n-id="udv005"></span>
</button>
Steve
Top achievements
Rank 1
 answered on 21 Feb 2017
1 answer
730 views

I have a CallDate and a CallTime field and I want to display them both in the same column.

I have searched google and the documentation but I can't find an explanation of how to do this.

Please can you advise.

 

At the moment I have

 

.Columns(columns =>
        {
                  columns.Bound(u => u.CallDate);
                  columns.Bount(u => u.CallTime);
}

 

I want a column called Call Date with both of these values joined together.

Boyan Dimitrov
Telerik team
 answered on 21 Feb 2017
3 answers
164 views

I have a very simple grid that I am adding a runtime (e.g. user clicks a button to add this grid).  The OnConnected event of my hub never gets fired.  Interestingly when I move the same code to the $(document).ready(function() it works fine.  It appears the issue is with binding the client to the hub dynamically.

My code, the values of chat and hubStart are valid.

$('.controls').on('click', 'img', function (e) { 

  loadLiveEvents()

}

function loadLiveEvents() {    
    var connection = $.connection;
    var chat = connection.messageHub;
    // Start the connection.
    var hubStart = $.connection.hub.start().done(function() {});

    var dataSource = new kendo.data.DataSource({
        type: "signalr",
        autoSync: true,
        schema: {
            model: {
                id: "ID",
                fields: {
                    "ID": { type: "number" }
                }
            }
        },
        transport: {
            signalr: {
                promise: hubStart,
                hub: chat,
                server: {
                    read: "readbasic",
                    update: "sendToGrid",
                    create: "sendToGrid"
                },
                client: {
                    read: "readbasic",
                    update: "sendToGrid",
                    create: "sendToGrid"
                }
            }
        }
    });
    
    $("#myGrid").kendoGrid({
        columns: [
            { field: "ID" },
        ],
        dataSource: dataSource
    });
}

 

Stefan
Telerik team
 answered on 21 Feb 2017
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
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
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?