Telerik Forums
Kendo UI for jQuery Forum
7 answers
2.0K+ views
Hi,

 Is it possible that Kendo Dropdownlist opens its items on hover? I know default is to click it, but we want it to open on mouse hover.

Thanks a lot.
Kiril Nikolov
Telerik team
 answered on 12 May 2016
1 answer
637 views

hello

I´m wondering how I make the detail template button appear on the far right in each row instead of it displaying on the left

best regards from Iceland

 

Dimo
Telerik team
 answered on 12 May 2016
4 answers
61 views

When using the .NET MVC wrapper for our grids, we used to format our int columns like so:

columns.Bound(r => r.FileSize).Title("File Size")
                  .HeaderHtmlAttributes(new { @title = "File Size" })
                  .Format("{0:#,0}")
                  .Width(120);

When I upgraded from XX to XX, this no longer was working. I was able to use .Format("{0:n0}") and it worked fine. Kinda sad that this was depreciated seemingly unknowingly to developers. Did anyone else experience this break in code?

Rosen
Telerik team
 answered on 12 May 2016
1 answer
3.1K+ views

Hi I need to append single Column with multiple values in Kendo Grid. Is it possible to achieve?

Like Below

Rule Description

Test

New

 

Anyway I have attached the PPT. Please verify and if you provide some ideas it could be better.

Boyan Dimitrov
Telerik team
 answered on 12 May 2016
5 answers
137 views

Hello.

I'm having a problem with the order of columns in the grouping bar.  I have a grid with one group.  Now I drag another column to the grouping bar and the column immediately gets droped in front of the existing column instead of behind it.  How can I fix this?

Best regards,
Kalli

Dimiter Topalov
Telerik team
 answered on 12 May 2016
1 answer
187 views
Hello!
The filter in Kendo Grid works on data from the source, not the formatted data. For example in my data source I have columns with numbers between 0 and 1 like 0.5, 0.3 etc. Then I format that numbers to be percents - like 50%, 30% etc. Now if I want to filter that column and put "greater than" 20, I get no results because kendo filters by real data, not the representation.
How do I fix this? Is there a way to write some custom function for that? Please advise.
Nikolay Rusev
Telerik team
 answered on 12 May 2016
2 answers
591 views
I am attempting to repopulate the dropdownlist with new items when a user clicks on a barchart. For the sake of the demo I made it simple html links instead of the barchart. Once they click on a link/bar the dropdownlist will repopulate with items in the new area. The old items will also be removed. The included example is close to what should occur but the dropdownlist's data is not being cleared and updated after clicking on the link. Please advise.
David
Top achievements
Rank 1
 answered on 11 May 2016
1 answer
409 views

Hi -

I'm trying to figure out how to autosize shapes to fix text and also nicely connect shapes.  For the most part this works, but when there are two shapes that connect back to one another the connectors overlap.  Is there a clean way of dealing with this?

Here is an example:

 

<div id="diagram"></div>
<script>
   
  var conns = [{"from":"338338","to":"338339","Label":"Send to Compliance"},{"from":"338338","to":"338341","Label":"Close Compliant"},{"from":"338339","to":"338338","Label":"Reject to Bank"},{"from":"338339","to":"338340","Label":"Review Complete"},{"from":"338340","to":"338341","Label":"Close Complaint"}];
   
  var nodes = [{"id":"338338","Name":"New Complaint","IsFirst":true},{"id":"338339","Name":"Compliance Review","IsFirst":false},{"id":"338340","Name":"Contact Customer","IsFirst":false},{"id":"338341","Name":"Closed","IsFirst":false}]
   
 $("#diagram").kendoDiagram({
        dataSource: nodes,
        connectionsDataSource:conns,
        layout: {
            type: "tree",
            subtype: "right"
        },
        shapeDefaults: {
            type: "rectangle",
            fill: {
              gradient: {
                type: "linear",
                stops: [{
                  color: "#1696d3",
                  offset: 0,
                  opacity: 0.5
                }, {
                  color: "#1696d3",
                  offset: 1,
                  opacity: 1
                }]
              }
            },
            content: {
                color: "White",
                template: "#= Name #"
            },
            height: 70,
            hover: {
                fill: "Gray"
            }
        },
        connectionDefaults: {
            stroke: {
                color: "#979797",
                width: 1
            },
            type: "polyline",
            startCap: "FilledCircle",
            endCap: "ArrowEnd",
            content:{
                template:"#= Label#"
            }
        },
 
        autoBind: true
    });
   
   
   
   
</script>

Dimiter Topalov
Telerik team
 answered on 11 May 2016
2 answers
1.1K+ views
I am successfully done cascading drop-down. But my requirement is to bind dropdown depend on the value of textbox.
Can you please help me.

My code snipe

<td class="EditlableTD">
                                        @Html.LabelFor(model => model.ReferredBy)
                                    </td>
                                    <td class="EditTextBoxTD">
                                        <input type="text" id="R_Ranks" name="ReferredBy" class="k-textbox" />
                                       
                                    </td>
                                </tr>
                                <tr>
                                    <td class="EditlableTD">
                                        Rank
                                    </td>
                                    <td class="EditTextBoxTD">
                                    <script>

                       function filterRank() {
                           return {
                               R_Ranks: $("#R_Ranks").val()
                              };
                       }
                    
                    </script>  
                      @(Html.Kendo().DropDownList()
                                      .Name("Rank")
                                      .OptionLabel("Select Rank...")
                                      .DataTextField("Rk_Name")
                                      .DataValueField("Rk_InternalCode")
                                      .DataSource(source =>
                                      {
                                          source.Read(read =>
                                          {
                                              read.Action("ShowSelectedRank", "Home")
                                                 .Data("filterRank");
                                          })
                                          .ServerFiltering(true);
                                      })
                                        .Enable(true)
                                        
                                        .AutoBind(false)
                                        //.CascadeFrom("BranchCode")
                                        .HtmlAttributes(new {style="width:200px;" })
                                        

                       )
</td>
</tr>

It bind value first time depend on R_Ranks text box value. But 2nd time text change does not effect the dropdown bind.
Doug
Top achievements
Rank 1
 answered on 11 May 2016
3 answers
834 views

In a nutshell, I can not get the Kendo datasource to work with a dropdown list.

I can use $.ajax to call my web service and populate the dropdown list in the success callback. The same transport mechanism does not work with the datasource.

Here's the complete code for the page:

<!DOCTYPE html>
<html>
    <head>
        <title>Kendo Test</title>
        <link rel="stylesheet" type="text/css" href="../CSS/Kendo/kendo.common.min.css" />
        <link rel="stylesheet" type="text/css" href="../CSS/Kendo/kendo.default.min.css" />
        <script type="text/javascript" src="../js/jQuery/jquery-1.7.js"></script>
        <script type="text/javascript" src="../js/Kendo/kendo.web.min.js"></script>
    </head>
    <body>
        <div>
            <input id="dropdownlist" /> <input id="lstfromajax" />
        </div>
        <div id="ajaxresult"></div>
    </body>
    <script type="text/javascript">
        $(function()
        {   // Make an AJAX call and bind on success - This works!
            $.ajax(
            {   url: "../WebServices/Resources.asmx/JSONLookupGetSurgeons2",
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: "{}",
                success: function(msg)
                {   // Display returned JSON in result div
                    $('#ajaxresult').html(JSON.stringify(msg.d));
 
                    // Try to use directly in drop down list. This Works!
                    $('#lstfromajax').kendoDropDownList(
                    {   dataTextField: "Name",       
                        dataValueField: "Id",       
                        dataSource:
                        {   data: msg.d,
                            schema:
                            {   model:  kendo.data.Model.define(
                                {   id: "Id"
                                })
                            },
                        },
                    });
                },
                error: function(e)
                {   console.log('Ajax error: ' + JSON.stringify(e));
                }
 
            });
         
        // Now, try to use the web service as a direct data source - This doesn't work!
        $('#dropdownlist').kendoDropDownList(
        {   dataTextField: "Name",       
            dataValueField: "Id",
            dataSource: 
            {   transport:
                {   read:
                    {   url: "../WebServices/Resources.asmx/JSONLookupGetSurgeons2",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        data: "{}"
                    },
                    schema:
                    {   data: "d",
                        model:  kendo.data.Model.define(
                        {   id: "Id"
                        })
                    },
                    error: function(e)
                    {   console.log('Datasource error: ' + JSON.stringify(e));
                    }
                }
            }
        });
        });
</script>          
</html>



I've included a screen snapshot to show the list on the left not working and the list on the right that does work.

I coded a console.log message in the parseJSON method. As expected, this routine is called twice - once for $.ajax and once for the Kendo datasource. They both display the same result - since they are hitting the same web service.

If I click the first dropdown list box (the one that's not populated), the browser ultimately complains of a long-running script and/or aborts!

Please tell me I'm missing something easy. I need to use the CRUD capabilities of the datasource but can't even get the simplest aspect going.

Rama
Top achievements
Rank 1
 answered on 11 May 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?