Telerik Forums
Kendo UI for jQuery Forum
1 answer
468 views

Hello there

I'm wondering if it is possible to select the last item inside a node. Example:

A +             (main node)
   A1 +        (child node of A)
   A2 +        (child node of A)
B +             (main node)

The plus sign (icon) behind each item is kinda an add item functionality inside that node. F.e. if I click on the + behind the A it would create a child item inside its node, in this case A3 + :

A +            (clicked on the +)
   A1 +
   A2 +
   A3 +      (new item created)
B +

That works fine. What I want now after creating a newitem that way is to SELECT (jump) the newly created item:

A +
   A1 +
   A2 +
   A3 +    (item is selected)
B +

I'm aware of this: treeview.select(".k-item:last");

In my case it would jump to B + (always to the end of the very last item. Can I somehow (easily) restrict the "last" so it would jump to the last element inside the node I have added a new item?

Regards

Tayger
Top achievements
Rank 1
Iron
Iron
 answered on 30 Jun 2017
1 answer
587 views

Hi,

I have found a problem when having text with ampersand in the data used for a pivot grid when expanding the row or column with that ampersand in the caption.  A JavaScript exception is caused in the browser (Chrome & IE).  The exception is "Uncaught TypeError: Cannot read property 'value' of undefined at init._buildRow" in kendo.all.js:73938.  The undefined object is dataItem.

I have encoded the ampersand using & within the string at the datasource and whilst that is displayed correctly I believe the & within the encoded & is still causing the exception.  I have tried using the rowHeaderTemplate and the row encoded property but neither seem to stop the error from occurring.  Is there another way I should be encoding this text so that it doesn't break the JavaScript code?

My original project is Kendo UI for MVC but I have created a dojo using the JavaScript version to re-create the problem.

dojo.telerik.com/@amdenley/OkEqIV/2

Alex Hajigeorgieva
Telerik team
 answered on 30 Jun 2017
1 answer
199 views

I have a grid on an MVC page, I have an error event as follows:

        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(false)                                          
            .PageSize(50)                                      
            .Events(events => events.Error("gridErrorHandler"))

My JavaScript function is something like:

function gridErrorHandler(e) {
   ... 
}

I have an MVC method (that returns ActionResult) that throws the following error when an error condition occurs:

return new HttpStatusCodeResult(System.Net.HttpStatusCode.InternalServerError, "Unexpected error");

My question is this. When my MVC method throws an exception, my JS error handler gets called. But, no matter what I try, I'm not able to get at the type of error it is. What exactly is the correct JS code that tells me a 500 error occurred, or a 401 (unauthorized) error occurred, etc.? 

Konstantin Dikov
Telerik team
 answered on 30 Jun 2017
6 answers
856 views
I have a grid with a Duration field this is not editable and configured as so in the datasource schema. I have a Start Date and End Date in this grid, when the user enters or changes these dates the Duration value gets updated (EndDate - StartDate = x minutes). I have subscribed to the change event of the datasource and have been able to calculate the duration however i am not able to update the duration field. I have tried:

grid.dataitem("tr:eq(1)").set("Duration", value)

and as well as getting item by uid and doing the same but neither work. Is this possible with a non-editable field? Looking at the html there doesn't appear to be a control name (i may be wrong) so is the method to find the column cell and just update the content (though i'm not sure how to do this)?
Alexander Popov
Telerik team
 answered on 30 Jun 2017
3 answers
218 views
I am attempting to use the Create action in ListView for MVC4 according to the Getting Started example, but the Create action does not get called. The Read, Update, and Destroy actions do get called as expected. Here is relevant code, and any help would be appreciated:
From the view:
@model VentSettings
 
<div class="k-toolbar k-grid-toolbar">
    <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>
</div>
 
<script type="text/x-kendo-tmpl" id="ventTemplate">
    <div>
       <div class="edit-buttons" style="width:98%; background:lightgray; border:1px solid lightgray; padding:10px;">#:Time#
            <a style="float:right" class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>
            <a style="float:right" class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>
        </div>
 
        <div style="width: 98%; padding:10px; border:1px solid lightgray;">
            <span style="width:10%; display: inline-block">Rate:</span><span style="width:22%; display:inline-block">#:Rate#   per min</span>
            <span style="width:10%; display: inline-block">PIP:</span><span style="width:22%; display:inline-block">#:PIP#   cm H<sub>2</sub>O</span>
            <span style="width:10%; display: inline-block">PEEP:</span><span style="width:22%; display:inline-block">#:PEEP#   cm H<sub>2</sub>O</span>
            <span style="width:10%; display: inline-block">MAP:</span><span style="width:22%; display:inline-block">#:MAP#   cm H<sub>2</sub>O</span>
            <span style="width:10%; display: inline-block">Vent:</span><span style="width:50%; display:inline-block">#:VentDescription# </span>
        </div>
    </div>
</script>
 
@(Html.Kendo().ListView<VentSetting>(Model.VentSettingsList)
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("ventTemplate")
    .Editable()
    .DataSource(datasource => datasource
        .Events(events => events.Sync("handleSync"))
        .Model(model => model.Id(m => m.VentSettingId))
        .Read(read => read.Action("ReadVentSettings", "RunDetail"))
        .Create(create => create.Action("CreateVentSetting", "RunDetail"))
        .Update(update => update.Action("UpdateVentSetting", "RunDetail"))
        .Destroy(destroy => destroy.Action("DeleteVentSetting", "RunDetail"))
    )
)
 
<script>
 
function handleSync() {
    this.read();
}
 
</script>
The relevant part of the EditorTemplate:
<div style="padding:10px">
    @Html.ValidationSummary(true)
     
    <span style="width:12%; display:inline-block">Resp Rate: </span>
     <span style="width:36%; display:inline-block"> @Html.Kendo().DropDownListFor(x => x.VentTypeId).DataValueField("VentTypeId").DataTextField("Description").BindTo((System.Collections.IEnumerable)ViewData["VentTypes"])</span>
     
 
    <div class="edit-buttons">
        <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a>
        <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>
    </div>
 
</div>
From the controller, the Create action (does not get called) and the Update action (gets called). I've tried the Create action with and without the second parameter:
[HttpPost]
public ActionResult CreateVentSetting([DataSourceRequest] DataSourceRequest request, Models.VentSetting modelVentSetting)
{
    if (modelVentSetting != null && ModelState.IsValid)
    { // Create code... }
 
    return Json(ModelState.ToDataSourceResult());
}
 
[HttpPost]
public ActionResult UpdateVentSetting([DataSourceRequest] DataSourceRequest request, Models.VentSetting modelVentSetting)
{
    // Update code...
 
    return Json(ModelState.ToDataSourceResult());
}
Thanks in advance!
Steve
Preslav
Telerik team
 answered on 30 Jun 2017
4 answers
318 views
Hey,

I'm new to KendoUI and have been using it with Angular 2. I created a custom theme (http://demos.telerik.com/kendo-ui/themebuilder/), and got a kendo.custom.css file, along with a .json and LESS style sheet.

Now, how do I apply this theme? I tried adding it similar to how I added my regular style.css; by providing the kendo.custom.css in "styles" component of angular-cli.json, but got a "failed to compile" error. Looked at some resources and they said to provide it as a <link href="">, but this gives a "Cannot get localhost:4200/path_to_the_css" error.

I realize this might be a basic question, but I'm stuck anyway. Appreciate any help. Thank you!
Dimitar
Telerik team
 answered on 30 Jun 2017
1 answer
184 views
Is there anyway to select, drag and highlight a specific area on an area/line chart?  I have a chart plotted with a series.  I want to allow the user to left-click and drag an area on that chart and just return the select categoryAxis values (i.e. from/to).  Is this possible?
Daniel
Telerik team
 answered on 30 Jun 2017
2 answers
1.5K+ views

Hi,

Does the chart have a single property where I can set the font-family for all of the text elements (title, legend, tooltip, axis label, axis title, etc) that the chart may contain?

I'd like to apply our fonts to charts but not have to set half a dozen or more properties if it can be avoided.

Thanks!

Simon
Top achievements
Rank 1
 answered on 30 Jun 2017
22 answers
1.3K+ views
I have an issue.  I found that if scrolling through the pulldownlist when the last record in the pulldownlist is arrived at the scroll jumps down to the grid that is below it and then it scrolls the grid.

Why does the scroll pulldownlist scroll the grid below (or any panel below) after it reaches the end of the list?

Best Regards,

Mark Kilroy
Przemyslaw
Top achievements
Rank 1
 answered on 29 Jun 2017
3 answers
509 views

Hey,

I'm currently trying to use batch syncing with the server using the DataSource's transport.submit handler. The documentation tells me to pass a method, and to set batch to true on the DataSource itself in order to work properly. To my surprise I'm facing an exception with the following stacktrace:

Uncaught TypeError: Cannot read property 'data' of undefined
    at init.setup (VM3012 kendo.all.min.js:27)
    at init.update (VM3012 kendo.all.min.js:27)
    at Object.<anonymous> (VM3012 kendo.all.min.js:27)
    at Function.Deferred (VM2971 jquery.min.js:2)
    at init._promise (VM3012 kendo.all.min.js:27)
    at init._send (VM3012 kendo.all.min.js:27)
    at init.sync (VM3012 kendo.all.min.js:27)
    at init.saveChanges (VM3012 kendo.all.min.js:50)
    at HTMLAnchorElement.<anonymous> (VM3012 kendo.all.min.js:50)
    at HTMLDivElement.dispatch (VM2971 jquery.min.js:3)

 

A workaround would be to set the method after grid initialization (code below), but I'm wondering what could be wrong with my initial syntax/code.

var grid = $("#grid").data("kendoGrid");
grid.dataSource.transport.submit = function(e) { alert("alternate submit"); };

 

Reproduction (DoJo): Try to (inline) edit a row, then press 'save changes', using the code below:

<!DOCTYPE html>
<html>
<head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
</head>
<body>
        <div id="example">
            <div id="grid"></div>
 
            <script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read:  {
                                    url: crudServiceBaseUrl + "/Products",
                                    dataType: "jsonp"
                                },
                                submit: function(e) {alert("submit"); }
                            },
                            batch: true,
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "ProductID",
                                    fields: {
                                        ProductID: { editable: false, nullable: true },
                                        ProductName: { validation: { required: true } },
                                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                        Discontinued: { type: "boolean" },
                                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                    }
                                }
                            }
                        });
 
                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        navigatable: true,
                        pageable: true,
                        height: 550,
                        toolbar: ["create", "save", "cancel"],
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
                            { field: "UnitsInStock", title: "Units In Stock", width: 120 },
                            { field: "Discontinued", width: 120, editor: customBoolEditor },
                            { command: "destroy", title: " ", width: 150 }],
                        editable: true
                    });
                   
                  /*
                  Workaround:
                   
                                     var grid = $("#grid").data("kendoGrid");
                             grid.dataSource.transport.submit = function(e) { alert("alternate submit"); };
                  */
                });
 
                function customBoolEditor(container, options) {
                    $('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
                    $('<label class="k-checkbox-label"></label>').appendTo(container);
                }
            </script>
        </div>
 
 
</body>
</html>

 

Kind regards

Alex Hajigeorgieva
Telerik team
 answered on 29 Jun 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
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?