Telerik Forums
Kendo UI for jQuery Forum
2 answers
216 views

How can I populate this combobox with items from the controller onPage Load? The following is not working

 

<input id="CodeList" placeholder="Select" style="width: 100%;" />

<script>
    $(document).ready(function () {
        $("#CodeList").kendoComboBox({
            index: 0,
            dataTextField: "text",
            dataValueField: "value",
            filter: "contains",
            dataSource: {

                 transport: {

                        read: {

                            dataType: "json",

                            url: '@Url.Action("CompanyIDChanged", "Login")',

                         }

               }

            }
        });
    });
</script>

 

Controller:

Function LoanCodeCombo() As ActionResult
            Dim CodeList= New LoginModel With {.Items = {
                New SelectListItem() With {.Text = ""},
                New SelectListItem() With {.Text = "A"},
                New SelectListItem() With {.Text = "B"},
                New SelectListItem() With {.Text = "C"},
                New SelectListItem() With {.Text = "S"},
                New SelectListItem() With {.Text = "T"},
                New SelectListItem() With {.Text = "U"},
                New SelectListItem() With {.Text = "7"},
                New SelectListItem() With {.Text = "8"},
                New SelectListItem() With {.Text = "9"},
                New SelectListItem() With {.Text = "0"}
                }
            }
            Return Json(CodeList, JsonRequestBehavior.AllowGet)
        End Function

Joshua
Top achievements
Rank 1
Veteran
 answered on 14 Oct 2020
2 answers
93 views

I posted a similar question before but I'll try to be as clear as possible this time. I created a template for my "DealerAddressStreet" field.

{
    field: "DealerAddressStreet",
    title: "Address",
    sortable: false,
    width: "140px",
    editor: googleAutoComplete
},

 

This is my template which creates a text input that calls a JS function called "initAutocomplete()". 

function googleAutoComplete(container, options) {
    var input = $('<input id="Dynamic_DealerAddressStreet" type="text" class="k-textbox" name="DealerAddressStreet" data-bind="value:DealerAddressStreet" onfocus="initAutocomplete()">');
    input.appendTo(container);
}

 

The JS function gets the user's location and provides autocomplete for the address typed in. It also inserts the values into the address text inputs without the user having to type them in manually.

function initAutocomplete() {
    console.log('Function executed...');
    autocomplete = new google.maps.places.Autocomplete(
        document.getElementById("Dynamic_DealerAddressStreet"),
        { types: ["geocode"] }
    );
    autocomplete.setFields(["address_component"]);
    autocomplete.addListener("place_changed", fillInAddress);
}
 
function fillInAddress() {
    const place = autocomplete.getPlace();
 
    var tbAddress = $('#DealerAddressStreet');
    var tbCity = $('#DealerAddressCity');
    var tbState = $('#DealerAddressState');
    var tbZip = $('#DealerAddressZip');
 
    var address = place.address_components[0].short_name + ' ' + place.address_components[1].short_name;
    var city = place.address_components[2].short_name;
    var state = place.address_components[4].short_name;
    var zipcode = place.address_components[6].short_name;
    //var country = place.address_components[5].short_name
 
    // Set input values
    tbAddress.attr('value', address);
    tbCity.attr('value', city);
    tbState.attr('value', state);
    tbZip.attr('value', zipcode);
 
    tbAddress.val(address);
    tbCity.val(city);
    tbState.val(state);
    tbZip.val(zipcode);
}

 

The problem is that the new text input values are NOT being read when UPDATING or CREATING a new record if the values are inserted dynamically through my script. How can this issue be resolved?

Eric
Top achievements
Rank 1
 answered on 13 Oct 2020
2 answers
120 views
I'm trying to assign a value to 4 separate text inputs using jQuery inside of my Kendo Grid. My JS function works and the text inputs do populate with data but when I try creating a new record the data appears to not be bound when passed back to my Web API. 
Tsvetomir
Telerik team
 answered on 13 Oct 2020
11 answers
440 views
Hi,
I have a few issues right now which i cant seem to address. if anyone has any info or suggestions would be appreciated, thanks,

i am using batch editing, and so,...

1.) Is there a way to disable sorting while editing?

and

2.) Is there a way to load the grid in edit mode? users are having a tough time figuring out which columns are editable at first. i would like to have the behavior of when you click on an editable cell it renders differently... can i have that for all columns at once?

Thanks,

Rolando

Ivan Danchev
Telerik team
 answered on 13 Oct 2020
5 answers
285 views

Hello, 

I need a little help regarding pushUpdate function on my gantt widget. When my gantt has significant number of items in dataSource (cca 700) pushUpdate takes approx. 15 seconds to update. 

I can't use option to transform dataSource.data to array, insert/replace records, and then set it back, because I have multiple users working on same project, and I receive update notifications via webSocket, so frequency and number of updates can vary. Basically I don't have the time pocket where I can be sure that someone changes won't be overwritten, and specially because my gantt is being changed "from behind" because someone else changed project I am working on.

I am currently on Kendo UI version 2019. R3 (and have no chance to update it in next 2-3 months).

 

Thanks

Veselin Tsvetanov
Telerik team
 answered on 13 Oct 2020
3 answers
150 views
<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: [{
    justified: true,
    categories: ["2012", "2013"]
  }],
  series: [
    { type: "line", data: [1, 2, 3] },
    { type: "bar", data: [1, 2, 3] }
  ]
});
</script>

 

What I'm trying to do here is I want to justify both line and bar chart so that there is no space in the beginning and also at the end. But I cannot use justify since categoryAxis.justified is only works with line chart. Is there any other option I can use to that both line and bar chart can justify.

Tsvetomir
Telerik team
 answered on 12 Oct 2020
3 answers
163 views

Hi, is there a way to remove the Update button from viewHtml? We want the user to be able to edit as they please until they select view as html. We only want them to view html as read only for information purposes. Thanks.

https://dojo.telerik.com/USEwEgis

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.3.915/js/kendo.all.min.js"></script>
</head>
<body>
  
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  tools: [
    "bold", "italic", "underline",
                    {
                        name: "viewHtml",
                        tooltip: "View Html",
                    }
  ]
});
</script>
</body>
</html>

Martin
Telerik team
 answered on 12 Oct 2020
4 answers
312 views
Hello,
is it possible to drag more than one item from one list to another? or is this feature in planing?

For selecting more than 1 here is an angularjs example:

Angular Multiple Selection

combined with

Kendo linkedlist

Regards,
Sven
Alex Hajigeorgieva
Telerik team
 answered on 09 Oct 2020
1 answer
319 views

I have tried to left-align the overflow anchor of the ToolBar, which I achieved using css, specifically by setting ".k-overflow-anchor { right: auto; }".

That works fine, but the problem is that the popup is still aligned to the right side of the overflow anchor button, see attached image.

 

Petar
Telerik team
 answered on 09 Oct 2020
1 answer
2.2K+ views

Hi, is it possible to move the column name under the group header?

 var data = [
        { name: 'test1', age: 30 },
        { name: 'test2', age: 30 },
        { name: 'test3', age: 32 },
        { name: 'test4', age: 33 },
        { name: 'test5', age: 33 },
        { name: 'test6', age: 34 },
        { name: 'test7', age: 35 },
        { name: 'test8', age: 30 },
    ];

    $("#grid").kendoGrid({
        dataBound: function (e) {
            e.sender.table.find(".k-grouping-row:contains('Stock')").each(function (ind, item) {
                e.sender.collapseGroup($(item));
            })
        },
        dataSource: {
            data: data,
            group: [
                {
                    field: 'name', aggregates: [{
                        field: "name",
                        aggregate: "count"
                    }]
                }
            ]
        },
        height: 550,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [{ field: 'name',  groupHeaderTemplate: "#=value#" }, 
            {
            field: "age",
            title: "age",
            width: 240
        }]
    });

i want to move the column header below the group header.

 

Neli
Telerik team
 answered on 09 Oct 2020
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?