Telerik Forums
Kendo UI for jQuery Forum
1 answer
154 views

When using the Kendo Window in JQuery or MVC, you can bypass the constrained area by pinning the window and then attempting to move it. Is this expected behavior?

You can see an example by going to your online demos, pin the window, then attempt to move it.

https://demos.telerik.com/kendo-ui/window/constrain-movement

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
 
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
     
 
</head>
<body>
<div id="example">
    <div id="container">
        <div id="window">
            <p>Alvar Aalto is one of the greatest names in modern architecture and design.
               Glassblowers at the iittala factory still meticulously handcraft the legendary vases
               that are variations on one theme, fluid organic shapes that let the end user decide the use.
            </p>
        </div>
    </div>
 
    <script>
        $(document).ready(function() {
            $("#window").kendoWindow({
                width: "300px",
                height: "200px",
                draggable: {
                    containment: "#container"
                },
                title: "About Alvar Aalto",
                actions: ["Minimize", "Maximize", "Pin"]
            }).data("kendoWindow").open();
        });
    </script>
 
    <style>
        #container {
            height: 400px;
            width: 600px;
            position: relative;
            border: 1px solid rgba(20,53,80,0.14);
        }
    </style>
</div>
 
 
</body>
</html>
Petar
Telerik team
 answered on 23 Jan 2020
17 answers
2.0K+ views
Hi Telerik team,

Good day to all.

I would like to ask, on how could I hide the default  Kendo generated select button, hide it, then trigger the click event in mySelectButton's click?

Thank you in advance for your immediate assitance.
Nencho
Telerik team
 answered on 23 Jan 2020
1 answer
277 views

I've been trying to get this working for a few days and no solution. I have a [delete] button on each row of my grid and when I click it, it never calls the destroy method in the data source. I have the same issue when trying to create as well, Read works fine: Am I missing something, wrong format, etc.

Datasource:

var ds = new kendo.data.DataSource({
       transport: {
            create:
               {
                    url: '@Url.Action ("CreateSales", "Sales", new { area = "sales"})',
                    datatype: "JSON",
                    type: "POST",
                    cache: false,
                    complete: function(xhr, status)
                                 {
                                      $("#sales").data.('kendoGrid').datasource.read();
                                 }
              },
             destroy:
              {
                  url: '@Url.Action("RemoveSales", "Sales", new { area = "sales"})',
                  datatype:  "JSON",
                  type: "POST",
                  complete: function(xhr, status) {
                       $("#sales").data('kendoGrid').datasource.read();
                               
                     }
              } ,
            parameterMap; function (items)
                     { return $.param(items);
          }
}
 
});
$("#sales").kendoGrid(
            {
                dataSource: ds,
                pageable: true,
                scrollable: true,
                sortable: {
                    mode: 'multiple'
                },
                height: 440,
                   toolbar: [{ name: "create", text: "Save" },
                   ],
                columns: [
                        { field: "Name", title: "Name", width: "300px" },
                        { field: "Location", title: "Location" },
                        { command: ["destroy"], title: " ", width: "100px" },
                   ]
            });

and the method in the controller: the delete/destroy never calls this

[httpPost]
public JsonResult RemoveSales(Sales items)
{
    //calls stored procedure to delete the user
 
 
}
George
Top achievements
Rank 1
 answered on 23 Jan 2020
3 answers
1.0K+ views

Hi, 

I've recently updated my KendoUI For jQuery library to the latest version, 2020.1.114. The update has introduced a bug into my code however. In the Release History, https://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r1-2020 it lists the following statement as a bug fix for the Button widget:
"Button remains highlighted when clicking and dragging"

A particular feature in my project makes use of setting the active state of a kendo button to active to create the equivalent of a "button checkbox". Except now, once I mouse-away from the button I just made active, its active state is removed.

I've created a Dojo example https://dojo.telerik.com/AKUdABat/7. Click the primary button and note that both buttons are set as active, then mouseout. The primary button's active state is removed, and Im confident its due to the button widget fix I previously mentioned.

Please advise on how i can prevent this from happening, or another way of setting the active state of a clicked button without it being reverted.

Thanks in advance,
Grant

Grant
Top achievements
Rank 3
Iron
Iron
Iron
 answered on 22 Jan 2020
3 answers
664 views

I have a scenario where I am using the popup editor and a custom template to edit items in the grid. The template has all of the fields that are part of the datasource that is bound to the grid as well as some additional fields that are not a part of the datasource. In order to submit the extra data, I am doing the following:

1. Setting data-skip=true attribute on the elements that are not bound to to the datasource to prevent binding. For example:

  <input type="radio"name="radio_test_a"id="radio_test1"value="1"data-skip="true"checked>Yes
  <input type="radio"name="radio_test_a"id="radio_test2"value="0"data-skip="true">No

2. In my update function I am getting the extra data and adding it to the ajax data parameter along with the model. For example:

update: function(options) {
                    var roles_obj={};
                    $('#extra_data input[type=radio]').each(function(){
                        if($(this).is(":checked")){
                            roles_obj[$(this).attr('name')]=$(this).val();
                        }
                    });
                    $.ajax({
                        url: "api/users/update",
                        type: "POST",
                        dataType: "JSON",
                        data: {
                            id: kendo.stringify(options.data.id),
                            data: JSON.stringify({
                                model: options.data,
                                roles: roles_obj
                            })
                        },
                        success: function (result) {
                            options.success(result);
                        }
                        //remainder omitted for brevity

3. In the grid edit function, setting the model 'dirty' when the non-data bound fields are changed to ensure the update function is triggered. For example:

 $('#extra_data input[type=radio]').change(function() {
                var ds = grid.dataSource;
                var item = ds.getByUid(e.model.uid);
                item.dirty = true;
            })

My question is this: While the above works and allow me to submit the extra data that is not part of the datasource, I am asking if this solution is tenable or if there is another approach that would be recommended?

Please let me know if further information is needed if it is not clear what I am asking.

Alex Hajigeorgieva
Telerik team
 answered on 22 Jan 2020
10 answers
8.2K+ views

I have been using the trial version of DevComplete. I've been building a web app using Kendo UI MVC. Up until this point I haven't had any issues. However, a couple days ago I purchased DevComplete. I installed the production Kendo.MVC dll in my project. Now my app is not working. When I attempt to load any page with a Kendo UI Grid, I am getting a JavaScript error that says kendo.synchReady is not a function. 

The actual code that Kendo is generating, in part, looks like this:

kendo.syncReady(function(){jQuery("#grid").kendoGrid({"columns":[{"title":"Last Name","headerAttributes":{"data-field":"LastName","data-title":"Last Name"},"width":"150px","field":"LastName","encoded":true,"editor":"...

Can someone tell me what happened? The only change I've made was to install the production Kendo.Mvc.dll in place of the trial version.

Christian
Top achievements
Rank 1
 answered on 20 Jan 2020
3 answers
4.1K+ views

Is there a way to get a value of all cell 1 for every row within the grid without selecting a row on button click?

I want to grab all of the ID's without selecting a row so I can pass those Id's to another function

Grid looks like this
 
id                     Name
1                      Stewart
2                      Jones
3                      Smith
4                      Johnson
Alex Hajigeorgieva
Telerik team
 answered on 20 Jan 2020
3 answers
487 views

I have an application that needs to support QR codes and I am analysing different solutions. Since I am already using kendo in the application I though I should test it. However when I tried with an example I saw that the code generated is not the same as the other QR code generators out there on the internet. All that I tested resulted in the same image, however the telerik resulted in a different image.

What QR code does it generate?

the text I used was "ABC123456789" on

https://racoindustries.com/barcodegenerator/2d/qr-code/

https://www.qrstuff.com/

https://ro.qr-code-generator.com/

https://www.the-qrcode-generator.com/

and all generated the same image but the https://demos.telerik.com/aspnet-core/qrcode/api generated a different image.

Is there a configuration that will generate the same code like the others code generators

Alex Hajigeorgieva
Telerik team
 answered on 20 Jan 2020
2 answers
5.2K+ views

I am using a dropdown list that based on the selected item a second dropdown need to be cleared. Selecting an item from the UX fires the change event of the first dropdown and the second one will be cleared only if I trigger the change event manually. If I do that the value of the first dropdown does not get updated. I used select(-1) and value ("-1") and same behavior. Here is my code, I will appreciate any hint on this.

$("#ddl1").kendoDropDownList({
        dataSource: [
            { value: "1", text: "Option1", priority: 0 },
            { value: "2", text: "Option2", priority: 1 },
            { value: "3", text: "Option3", priority: 1 }
        ],
        dataTextField: "text",
        dataValueField: "value",
        optionLabel: { value: "", text: "-- Select one --" }       
    }).change(function (e) {
        var ddl2 = $("#ddl2").data("kendoDropDownList");
        if (this.value == "1") {
            ddl2.value("-1");
            //ddl2.select(-1);
            //ddl2.trigger('change'); //with this value of ddl2 is cleared ("-- Select one --") and value of ddl1 does not change
        }
        else {
            /**/
        }       
        validateSection(4);
        });
         
$("#ddl2").kendoDropDownList({
        dataSource: [
            { value: "Y", text: "Yes" },
            { value: "N", text: "No" },
            { value: "NA", text: "Refused to answer" }
        ],
        dataTextField: "text",
        dataValueField: "value",
        optionLabel: { value: "", text: "-- Select one --" },
    }).change(function (e) {
        validateSection(4);
    });
Petar
Telerik team
 answered on 20 Jan 2020
7 answers
2.6K+ views
Hi, is it possible to have one template within another?
I've given an example below to show what I mean.  The example has a Customer data object that has a customer name and an array of notes.  Notes are used on other objects so I have defined a template for them, but I can't work out how to render it from within the customer template:


<script type="text/x-kendo-template" id="NotesTemplate">
<div>
  # for (var i = 0; i < data.length; i++) { #
        <div>
            <em>#= data[i].CreatedBy # on  #= data[i].CreatedOn # </em>
            <p>
            #= data[i].NoteText #
            </p>
        </div>
  # } #
</div>
</script>


<script type="text/x-kendo-template" id="CustomerTemplate">
<div>
    Customer name #: data.CustomerName #
   
     <div id="CustomerNotes"></div>
     
    # $("\#CustomerNotes").html(_notesTemplate(data.Notes)); #


</div>
</script>



then...
 _notesTemplate = kendo.template($("#NotesTemplate").html(), { useWithBlock: false });
_customerTemplate = kendo.template($("#CustomerTemplate").html(), { useWithBlock: false });


 $("#CustomerDetails").html(_customerTemplate(customerData));


Any help much appreciated!
Ivan Danchev
Telerik team
 answered on 17 Jan 2020
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
Dialog
Chat
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
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
+? more
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?