I have a grid that is bound to a datasource. On the datasource if an error is returned on create my popup goes away and the new item stays in the grid (datasource). How do I either prevent the popup from going away and make the user cancel or try again, or remove the item if there is an error?


function getAntiForgeryToken() {
    return  $('input[name=__RequestVerificationToken]').val();
}

    var viewModelNotes = kendo.observable({
        notesDataSource: new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Vendor/GetVendorNotes",
                    dataType: "json",
                    data: {
                        VendorId: $("#Vendor_VendorId").val()
                    }
                },
                create: {
                    url: "/Vendor/CreateVendorNote",
                    dataType: "json",
                    type: "POST",
                    data: {
                        VendorId: $("#Vendor_VendorId").val(),
                        __RequestVerificationToken: getAntiForgeryToken()
                    }
                }
            },
            schema: {
                model: {
                    id: "VendorNoteId",
                    fields: {
                        VendorNoteId: { editable: false, nullable: true }
                    }
                },
                errors: "errorMsg"
            },
            pageSize: 20,
            error: function (e) {
                toastr.options = {
                    "positionClass": "toast-bottom-full-width"
                };
                toastr.error('Unable to save new note' + e.errors, 'Uh Oh!');
            }
        })
    });

    kendo.bind($('#VendorNoteWrapper'), viewModelNotes);

    $("#VendorNotesGrid").kendoGrid({
        dataSource: viewModelNotes.get("notesDataSource"),
        scrollable: false,
        toolbar: ["create"],
        columns: [
        { field: "ItemText", title: "Note" },
        { field: "CreateDate", title: "Create Date" },
        { field: "CreatedByDisplay", title: "Created By" },
        { field: "LastModDate", title: "Modified" }],
        editable: {
            mode: "popup",
            template: kendo.template($("#vendorNoteEditor").html())
        }
    });

Hello, 

Currently i am working with jQuery-2.1.1, angularJs-1.3.12 and Kendo UI v2014.3.1316. i used component such as grid, drop down list and date time picker from Kendo UI. but none of these components are working except kendo grid and please find below configurations.

Please advise to fix this. 

//HTML

<input type="text" name="DTEndDate"
kendo-date-picker
k-format="'MMMM yyyy'"
k-options="monthSelectorOptions">

//Js
<!--//Kendo-->
<script src="assets/libs/kendo/2014.3.1316/js/kendo.all.min.js"></script>
<script src="assets/libs/kendo/2014.3.1316/js/kendo.aspnetmvc.min.js"></script>
<script src="assets/libs/kendo/2014.3.1316/js/kendo.timezones.min.js"></script>

//CSS   

<!-- KENDO CSS-->

<link rel="stylesheet" href="assets/libs/kendo/2014.3.1316/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="assets/libs/kendo/2014.3.1316/styles/kendo.default.min.css" />
<link rel="stylesheet" href="assets/libs/kendo/2014.3.1316/styles/kendo.dataviz.min.css"/>
<link rel="stylesheet" href="assets/libs/kendo/2014.3.1316/styles/kendo.dataviz.default.min.css"/>
<link rel="stylesheet" href="assets/libs/kendo/2014.3.1316/styles/kendo.metro.min.css"/>
<link rel="stylesheet" href="assets/libs/kendo/2014.3.1316/styles/kendo.dataviz.metro.min.css"/>
<link rel="stylesheet" href="assets/libs/kendo/2014.3.1316/styles/kendo.default.mobile.min.css" />

I want to open kendo grid in window. I am not passing any values to the window. When Opening the window, I want to read data from database and populate the grid. Can I use Partial View for the Grid and Load in Kendo Window ? If so, How can I do this ?

I am trying to show the EditDetail button only if Submit Date is NULL. But editButton.hide() is not working. Below is my code. I wonder what is wrong or what other way can meet my need. Any help would be highly appreciated. Thanks,

@(Html.Kendo().Grid(Model)
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Command(command => command.Custom("EditDetails").Text("Edit Details").Click("EditDetails"));
                    columns.Bound(p => p.CompanyName);
                    columns.Bound(p => p.Qrt).Title("Quarter").Format("{0:d}");
                    columns.Bound(p => p.SubmitDate).Format("{0:d}");//.Width(375);
                    columns.Bound(p => p.CreateBy).Title("Created By");
                    columns.Bound(p => p.CreateDate).Format("{0:d}").Title("Imported By");
                    columns.Bound(p => p.ReportID).Hidden();

                })

                .Events(e=>e.DataBound("onDataBound"))
                .Pageable()
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model1 =>
                        {
                            model1.Id(p1 => p1.ReportID);
                       })
                    .ServerOperation(false)
                    .Read(read => read.Action("UnitRptGrid_Read", "Report"))
                    .PageSize(50)
                )
)

<script type="text/javascript">
    function EditDetails(e) {
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        window.location.href = "/Reports/Edit/" + dataItem.id; 
    }

    function onDataBound(e) {
        var grid = $("#grid").data("kendoGrid");
        var view = grid.dataSource.view();

        $.each(view, function (i, row) {
            var chk = row.SubmitDate;
            if (null == chk)
            { 
                //var editButton = row.find(".k-grid-edit");
                var b = $('tr[data-uid="' + row.uid + '"] td:nth-child(1)')
                var editButton = $b.find("k-button k-button-icontext k-grid-EditDetails")
                editButton.hide();
               
            }
        })
    }
</script>     

I am using a kendo-ui grid together with angular and would like to use it's edit functionality. However the update function is never called when trying to edit its contents.

This is how I set the grid:



Here is a fiddle to demonstrate it: http://jsfiddle.net/xLp6rLtj/

Even if I'm using a url instead of function in the `datasource.transport.update` parameter, no request is made (and the button can't be released).

What am I missing?

Hi,

I'm getting a strange behavior in a grid after update to the latest 2014.3.1316 version in some header elements where values of "data-field" attribute mismatched the expected value however the title and the rest of attributes are correct. As I have described it in the title this occurs when I arrange the column's configuration array for multicolumns mode but not if I use single column headers.

After a while debugging, I've found that headers are well generated and fields are synchronized before binding the view and the model. Just after returning from the bind function is when headers change incorrectly.

The grid is defined inside a template file and it is compile as follow:

(The complete text is attached)

As I mentioned. Before binding, the header elements are correctly defined:

 
However after binding, this what happens:


Of course, this cause many unexpected problems when filter or show/hide columns.

I chose to avoid the multicolumn by the moment because I has not been able to found a solution.

Thanks so much.

Q1: I need to have several custom buttons in the toolbar that will perform various actions such as "Insert Child", "Insert Sibling", "Edit", "Delete". The buttons should also be enabled/disabled based on node selection. How can I achieve this using the MVC extensions?

Q2: Also, does the TreeList support drag and drop? I want to be able to capture the drag/drop to reorder by tree nodes. If not, I would add "Move Up" and "Move Down" custom buttons.

Thanks,
--John

Suggestion:

When you have a Grid with paging (client paging) and you change the page using the navigation control requestEnd event from dataSource is raised and the e parameter return with e.status, e.type undefined. That is, return a complete different variable.

For consistence maybe is better that the e parameters e.status and e.type continues to be defined with a value that identified the operation..

Thanks

Hi,
  
      Is there any components  Histogram and Trend charts. If you have please let me know.

Regards
Raveendra

Hi,
 
   I just downloaded and gone through few of the demos. Its nice to see scattered jquery siblings at one place. I know its still under beta stages, but am wondering if you would be able to inform me the support for TreeMap and HeatMaps in near future? How long it may take?