Hi All,

I have a page with grid and command button that popup a kendoWindow (partial view) and parent viewModel is passed to the partial view.  Inside the kendoWindow, there is another grid which the user can select and delete the row.  The partial view and script below always give me this error  'TypeError: Cannot read property 'value' of undefined' and I can't figure out why.  Is there a way to solve this issue?  and applying kendo.bind in the partial view(the javascript below) cause more problems.

HTML

<div id="notes-dialog" title="Notes" style="display: none">
    <div id="grid"></div>
</div>

Javascript

  function display() {
        ds = new kendo.data.DataSource({
            pageSize: 20,
            data: viewModel.CurrentlyDisplayedNotes,
            autoSync: true,
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id:{editable: false},
                        Notes: { editable: true, type:"string" }
                    }
                }
            }
        });

        var gridNotes = $("#grid").kendoGrid({
            dataSource: ds,
            pageable: true,
            resizable: true,
            height: 365,
            toolbar: [{ text: "Add", click: addNote }],
            columns: [
              {
                field: "Notes", title: "Notes"                 
            },
            { command: { text: "Delete", click: removeNote }, title: " ", width: "180px" }],
            editable: true    

          }).data("kendoGrid");

    function removeNote() {
            var grid = $("#grid").data("kendoGrid");
            var sel = grid.select();     // Error here: TypeError: Cannot read property 'value' of undefined
            var item = grid.dataItem(sel);

            // other code goes here

      };

   function addNote() {
        var grid = $("#grid").data("kendoGrid");
        var item = grid.dataItem( grid.select());  // Error here: TypeError: Cannot read property 'value' of undefined

      //more code below 

}

TIA

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>