This is my destroy function:

destroy: function (e) {

               console.log(e.data);

                api.post("api/myservice/Remove", e.data)
                         .then(
                          function success(response) {
                                 $('#grid').data('kendoGrid').dataSource.read();
                          },
                          function error(response) {
                           });
               }

Whenever I delete a row (let's say e1), any other future action (create/update/destroy) I do will trigger the deletion of e1 AGAIN. So if I create a new row, it would create the row (call the create function) AND delete the e1 row (which doesn't exist anymore, but somehow the value of e.data still remains). The deletion chain is cumulative, so if I were to delete a row e2, and then perform an action, then I would get a deletion of e1 and e2 AGAIN.

Anyone know what the problem is??

I need a bit of guidance on Treeview. My hierarchical datasource makes an ajax call to a webservice that returns a NULL on he first node of the tree. There is a reason for this because the Parent is the node represents the name of the actual Tree. Each subsequent node is the actual tree nodes. Also the JSON object returned is a nested, Complex object.

 Here is an example: 

I've tried to use Schema.parse to make the nodes into a flat object but for some reason I lose the tree hierarchy when I try to do: 

For some reason the hasChildren disappears from the node object  so that didn't work for me. Any ideas on how to get the first node to produce some value from the object and then have the name from the subsequent JSON object return?

What w 

Hello Guys, 

I have a question about how the logic of the drawing of each step is done and why is the point rendered at the middle of the step.

I have an urgent problem that need to be implemented and i have to achieve something like this: highcharts example.

In this dojo example i used the basic step example with the points of the steps being rendered in the middle of each step. To be more precisely i want the step to point at the start of each step, or any other solution that may work.

Please help me with this one,

Thank's in advance.

Using the column filter itemTemplate, I can use this to specify the item template inline (using #=data.country# and e.field). How can I achieve the same using kendo.template?

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.filterable.itemTemplate

Thanks,

--Ed

We had some support from the Telerik team about a year ago when we wanted to split a connecting label over multiple lines. At the time, they advised us of a bug and gave us a workaround.

We've just had to update to the latest version of the Kendo UI js file to fix another bug related to a JQuery update, and it has broken our workaround. The original fix was to replace the standard text in the box, and add it into a tspan. Following the update, this now renders the tspan on the diagram following the new update. I've attached a screen of how it showed before, with the workaround, and how it shows now following the update.

The current value in the DescriptionForKendo field:

<tspan x="0" dy="0em">Class A, 50 Shares</tspan><tspan x="0" dy="1em">Class B, 100 Shares</tspan>

The binding of the field to the view:

.ConnectionDefaults(cd => cd.Editable(false).Content(o => o.Template("#= dataItem.DescriptionForKendo #"))

Any ideas if this was specifically catered for in the latest version, or how we can add a line break into a connecting label now?

I am trying to export a MVC page to a pdf file.  Following are some of the issues I am facing in order to do a PDF Export:

 Issue1:  While this works well, the first issue is that it exports to a single pdf page.  However I understand that if I move the paperSize and margin options to drawDOM then multipage export works fine but all the selected mvc radiobuttons on the page gets cleared.
Though the radiobutton selection shows the selected value in the pdf, it gets cleared off the page.  This only happens when I move the pagesize and margin options to drawDOM.  The selection is retained when those options are added to exportPDF but multipage does not work.  (I am using @Html.RadioButtonFor control in the project)
Issue2:  The content inside the MVC controls like TextBoxFor and EditorFor seems to not show up correctly in PDF.  The content moves up in the box and hence not visible in the pdf.  The below image has an example of this issue:

Here is the code for reference:

@{
    ViewBag.Title = "Export";
}

<h2>Export</h2>

<input type="button" value="Export PDF without pagebreak" id="ExportButton1" class="btn btn-default pull-right" /><br/>
<input type="button" value="Export PDF with pagebreak" id="ExportButton2" class="btn btn-default pull-left" />

<div class="form-horizontal margin-top-20" style="margin-top:70px;">
    <div class="pdf-page size-a4">

        Name:@Html.TextBox("Name", null, new { @class = "form-control" })<br />
        Desc:@Html.TextArea("Description", null, new { @class = "form-control" })<br />
        @for (int i = 0; i < 100; i++)
        {
            <text> Radio  @i</text>
            @Html.RadioButton("Radio", i, new { @class = "form-control" })<br />
        }
</div>
</div>


@section scripts {
<script type="text/javascript">
    $(document).ready(function () {
        $(document).on("click", "#ExportButton1", function () {
            kendo.drawing.drawDOM($(".pdf-page"))
            .then(function (group) {
                // Render the result as a PDF file
                return kendo.drawing.exportPDF(group, {
                    paperSize: "auto",
                    margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
                });
            })
        .done(function (data) {
            // Save the PDF file
            kendo.saveAs({
                dataURI: data,
                fileName: "Test.pdf",
            });
        })
        });
    });


    $(document).ready(function () {
        $(document).on("click", "#ExportButton2", function () {
            kendo.drawing.drawDOM($(".pdf-page"),{
                paperSize: "A4",
                margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
            })
            .then(function (group) {
                // Render the result as a PDF file
                return kendo.drawing.exportPDF(group);
            })
        .done(function (data) {
            // Save the PDF file
            kendo.saveAs({
                dataURI: data,
                fileName: "Test.pdf",
            });
        })
        });
    });

    </script>
}

The grid is setup and works perfectly and has detail rows associated.  A button is to live on the detail section and do the same thing as the little triangle that collapses the row.  Looking through the forums, I see the following code should work, but it doesn't close the record.  Any help will be greatly appreciated.


@(Html.Kendo().Grid<Elsis.Application.Model.Child.ChildListModel>()
        .Name("childGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Name).Width(120);
            columns.Bound(c => c.Age).Width(80);
            columns.Bound(c => c.Teachers).Width(200);
            columns.Bound(c => c.Schedule).Width(200);
        })
        .HtmlAttributes(new { style = "height: 550px;", @class = "lcesGrid" })
        .Scrollable()
        .Sortable()
        .ClientDetailTemplateId("childDetailTemplate")
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
                .Read(read => read.Action("ChildList_Read", "ChildList"))
            .PageSize(20)
        )
)

<script id="childDetailTemplate" type="text/kendo-tmpl">
    <div>
        <div style="float: left; width:100px;">
            <div>Picture</div>
            <div>Full Bio</div>
        </div>
        <div style="float: left;width: 800px;">
            <div style="float: left;width: 800px;">
                <div style="float: left;width: 225px;">
                    <span id="name">#= Name #</span>
                    <span id="childId">(#= ChildId #)</span>
                </div>
                <div style="float: left; width: 100px;">
                    <span id="age">#= Age #</span>
                </div>
                <div style="float: left; width: 100px;">
                    <button id="toggleDetail" class="toggleDetail">Close Button</button>
                </div>
            </div>
        </div>

    </div>

</script> 

I have a more detailed look at what I'm trying to do here (http://stackoverflow.com/questions/35158369/how-do-you-customize-kendoui-grid-column-menu-for-mobile), this is the only thing stopping me right now from using the GRID.

 After looking around for desktop mode I found how to modify the column menus.

 columnMenuInit: function (e) { console.log("menu init");var field = e.field; console.log(field);var menu = e.container.find(".k-menu").data("kendoMenu"); menu.append([{text: "Highlight", spriteCssClass: "k-i-custom", content: '<div class="colorpicker' + field + '"></div>'}]); $(".colorpicker" + field).kendoFlatColorPicker({ preview: false, value: "#000", change: select});};

However, this does not work for mobile when mobile:true is set for the grid (A.K.A adaptive rendering mode).  How would I customize the menu for the mobile version?

I am working a set of data that contains arrays as IDs. I need some help working around this as it appears unsupported and breaks some things.

Example item from the first set of data:

This data is referenced from second set of data which uses the same array IDs to refer to the first set. Example item from the second set of data:

For starters I am populating a Grid with the second set of data. I use a column.template to replace "head_port_id" and "tail_port_id" with the relevant "name" field from the first set of data. This works fine.

The problem arises when I try to use a DropDownMenu inside column.editor for the "head_port_id" and "tail_port_id" columns. Clicking the cell causes an error. 

Since I have the minified code it's difficult to debug this, even though I can see the full source code (a source map is loaded I assume). Breakpoints and scope vars aren't cooperating.

Anyway I had an idea which was to define a "parse" function for all of the array ID fields, in my Models. It simply converted the ID arrays .toString(). This works pretty well except that it has a fatal flaw in which the data I send to the relevant service is now invalid, since the service is expecting arrays and not strings.

How can I convert these IDs back to arrays, ideally without doing this in the DataSource transport functions (update, create, etc)? I have a generic DataSource wrapper that I am using to wrap our own CRUD interface.. I don't want it to have special cases in it for this once type of data.