Telerik Forums
Kendo UI for jQuery Forum
7 answers
1.2K+ views
Hi,
    I have a requirement to create a Hierarchical grid in which I should be able to add new rows and the child grid should be added as well.When adding a new row I dont want the detailinit property to be run as many times as the number of rows is present. I only want to add asingle row to the existing grid and leave it intact.
I am implementing this in HTML. So please do give a solution for the HTML based one.
Thanks in advance
Regards,
Vijay
Alexander Valchev
Telerik team
 answered on 30 Mar 2015
1 answer
455 views
Browser is chrome 41.0.2272.101 m
OS is Windows 7
jquery is 2.1.3
kendo UI is v2015.1.318


When I load the following content (in two files, in the page and in a js file), the following is the result:

# var myCustomVariable = "foo"; #
#= myCustomVariable #
Bob
Jim
Anton


This is a much simplified version of what I was trying to do, but demonstrates the issue (the original problem I was running into was getting this literal hash template output while trying to call render a function that had kendo.Template.compile($('#myTemplate').html())(data);... but this is a simpler version of the same problem).

From what I can tell from documentation (from which the hash template is lifted) it should work. As well, it seems like the template is running and connected properly (since the remainder output all seems to be executing as expected). I couldn't find any forum or other posts on this topic and no errors are being thrown... It just seems to be completely ignoring the hash template directives and rendering as literals (although I have other scenarios where hash templates do work, but this scenario seems like it should too).

Is there something I'm missing here? This seems pretty straightforward but...


PAGE CONTENT:

<div id="application"></div>

    <script type="text/x-kendo-template" id="layout-template">
        <div id = "wrapper" > 
            <div id="main-section">
                <section id="content"></section >
            </div>
        </div>
    </script>

    <script type="text/x-kendo-template" id="index-template">
        # var myCustomVariable = "foo"; #
        <p>
            #= myCustomVariable #
        </p>
        <ul data-role = "listview" data-bind = "source: items.customers" data-template = "item" id = "main"> 
        </ul>
    </script>

    <script type="text/x-kendo-template" id="item">
        <li> 
            <span data-bind = "text: customerName"> </span>
        </li>
    </script>




SCRIPT FILE:
 
var custList = kendo.observable({
    customers: [{
        customerName: "Bob",
        notes: "Wants his order by Saturday"
    }, {
        customerName: "Jim",
        notes: "Owes us $300"
    }, {
        customerName: "Anton",
        notes: "2 items outstanding on last order"
    }]
});

var layoutModel = kendo.observable({

});

var indexModel = kendo.observable({
    items: custList
});

var layout = new kendo.Layout("layout-template", {
    model: layoutModel
});

var index = new kendo.View("index-template", {
    model: indexModel
});

var poc = new kendo.Router({
    init: function () {
        console.log("router init")
        layout.render("#application");
    }
});

poc.route("/", function () {
    console.log("router root route")
    layout.showIn("#content", index);
});

$(function () {
    poc.start();
});
p



Petyo
Telerik team
 answered on 30 Mar 2015
5 answers
209 views
Our team is planning on using the Diagram control to do an Org Chart not all that different than the one in the demo.  But the lines are drawing in a way that doesn't represent the data.  

Here is a Dojo Link to the issue:
http://dojo.telerik.com/UzIWE

Any suggestions on how to get to draw cleanly?
Daniel
Telerik team
 answered on 30 Mar 2015
1 answer
89 views
Hello,

I am using a grid connected to a wcf service like this:

dataSource: {                           
            transport: {
                read: {
                    url: "http://localhost:52916/Service1.svc/getdocumentdetail/"+e.data.SaleDocId,
                    dataType: "json",
                    type: "GET"
                },
                update: {
                    url: "http://localhost:52916/Service1.svc/updateDocumentDetails",
                    dataType: "json",
                    type: "POST"
                },
                parameterMap: function(data, operation) {
                            if (operation != "read") {
                                // web service method parameters need to be send as JSON. The Create, Update and Destroy methods have a "products" parameter.
                                return JSON.stringify({ docLines: data.models })
                            } else {
                                return JSON.stringify(data);
                            }
                        }
            },
            schema: {
                data: "GetDocumentDetailResult",
                total: "GetDocumentDetailResult.length",
                model: {
                    id: "SaleDocId",
                    fields: {
                        SaleDocId: { type: "number", editable: false, nullable: true},
                        Line: { type: "number", editable: false},
                        Item: {type: "string", editable: false},
                        Location: { type: "string", editable: false},
                        Description: {type: "string", editable: false},
                        Qty: {type: "number", editable: true, validation: { min: 0}},
                        ItemWeight: { type: "number", editable: true, validation: { min: 0}},
                        GrossWeight: { type: "number", editable: false}
                    }
                }
            },


My Service looks like this:

<OperationContract>
    <WebInvoke(Method:="POST", ResponseFormat:=WebMessageFormat.Json, RequestFormat:=WebMessageFormat.Json, BodyStyle:=WebMessageBodyStyle.Wrapped, UriTemplate:="updateDocumentDetails")>
    Function UpdateDocumentDetails(ByVal docLines As IEnumerable(Of wsDocumentDetail))

The wsDocumentDetail object is this:

<DataContract()> _
Public Class wsDocumentDetail
    Inherits wsDocument
 
    Private m_Description As String = String.Empty
    Private m_Item As String = String.Empty
    Private m_Line As Integer = 0
    Private m_Qty As Integer = 0
    Private m_GrossWeight As Double = 0
    Private m_ItemWeight As Double = 0
    Private m_Location As String = String.Empty
    Private m_QtaSede As Integer = 0
    Private m_Payment As String = String.Empty
    Private m_Port As String = String.Empty
    Private m_NoOfPacks As Integer = 0
    Private m_Carrier1 As String = String.Empty
    Private m_ShipToAddress As String = String.Empty
    Private m_Transport As String = String.Empty
 
.... all the get; set;


My update function:

Public Function UpdateDocumentDetails(ByVal docLines As IEnumerable(Of wsDocumentDetail)) Implements IService1.UpdateDocumentDetails
 
'Do stuff here
 
end function

Now, when i click on Save changes i get a 400 bad request and i think this is the line causing all the problems
return JSON.stringify({ docLines: data.models })

I tried changing it but when debugging the docLines object remains empty.

Could you please tell me what am i doing wrong.

Thank you.
Rosen
Telerik team
 answered on 30 Mar 2015
1 answer
90 views
I have a scatter chart with click able points.

However is the points go behind a label, the point is no longer click able.  It looks like the labels are added after the circles to the svg canvas.

Is it possible to change this?

Here the light blue and grey are obscured by the text element for the axis label.

Iliana Dyankova
Telerik team
 answered on 30 Mar 2015
1 answer
399 views
How would I hide a Kendo NumericTextBox when doing a PDF export using the Drawing API's drawDOM method? Instead of the textbox, I'd like to display a label with the textbox's value. Here's a code snippet demonstrating what I'm doing now:

        require(["kendo.drawing"], function (KDrawing) {
            var _kendoDrawing = KDrawing.drawing;

            _kendoDrawing.drawDOM(objDomContainerElement).then(function (group) {
                return _kendoDrawing.exportPDF(group, {
                    landscape: true,
                    margin: {
                        bottom: _MARGIN_SIZE,
                        left: _MARGIN_SIZE,
                        right: _MARGIN_SIZE,
                        top: _MARGIN_SIZE
                    },
                    paperSize: "auto"
                });
            }).done(function (data) {
                kendo.saveAs({
                    dataURI: data,
                    fileName: strPdfFileName + ".pdf",
                    proxyURL: strProxyUrl
                });
            });
        });
Mihai
Telerik team
 answered on 30 Mar 2015
1 answer
109 views
Hi,

I'm using Window to display some content is popup.
And I'm trying to use expand effect.
If I use vertical direction - it appears from the top to the bottom.

Problem is that I didn't find the way to make it appear from the bottom to top.

Is there any way to do it?

Thanks,
Vlad.
Dimo
Telerik team
 answered on 30 Mar 2015
4 answers
108 views
Hi,

I want to use the touch events on a Homepage (CMS Joomla) with some divs but I haven't found any information about to use them without a view. May you be able to give me a code sample how to use it without a view and (without?) Mobile Application Object?

( http://docs.telerik.com/kendo-ui/mobile/touch )

Best,
Can

Petyo
Telerik team
 answered on 30 Mar 2015
4 answers
1.1K+ views
Hello,

I have two columns
1. column name (which has datatype property)
2. value field (it contains the value of column)

i want to change value field editor when column name changes (from dropdown).
suppose user select data column then value field editor should changed to datepicker.

find attachment to better understand the scenario.

regards,
Saad
Alexander Valchev
Telerik team
 answered on 30 Mar 2015
1 answer
529 views
I can't find any options to remove Gantt footer.
For now I'm using ability to extend Gantt plugin:

var oldGantt = kendo.ui.Gantt;
var GanttExtended = kendo.ui.Gantt.extend({
    init: function(element, options) {
        oldGantt.fn.init.call(this, element, options);
    },
    _footer: function() {
        this.footer = $([]);
    }
});
kendo.ui.plugin(GanttExtended);


But I think it would be better to have some option to disable footer.

For example:
1. Initialize Gantt
$('#gantt').kendoGantt({
  footer: false
});
2. Check in the method
var Gantt = Widget.extend({
  _footer: function() {
      if (!this.options.editable || !this.options.footer) {
          return;
      }
      ...
  },
});

Bozhidar
Telerik team
 answered on 30 Mar 2015
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
Drag and Drop
Map
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
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Marco
Top achievements
Rank 4
Iron
Iron
Iron
Hiba
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Max
Top achievements
Rank 1
Veteran
Iron
Alina
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?