Hi,

Currently working on a grid project and cannot solve this particular bug.

Steps to recreate:

1. Create a new row by clicking on the create button

2. Delete a row by clicking on the delete button

3. Click on Create to create a new row and the JS console spits out: 'kendo.all.min.js:30 Uncaught TypeError: Cannot read property 'uid' of undefined' 
- The create is blocked and the only way to create a new row after this is to refresh the browser.

The offending code block in the kendo source is:

My JS for this:

$(document).ready(function () {

var MyKendoVar = MyKendoVar || {};

var projectDataSource = new kendo.data.DataSource(
{
transport: {
read:
function (options) {
apiService.projectsGet(function (result) {
options.success(result);
});
},

create: function (options) {
closeDialogue();
insertLoading();
apiService.projectsCreate(options.data, function (result) {
console.log(result.ProjectId + ", " + result.ProjectDescriptiveId);
options.success(result);
});

},

destroy: function (options) {
apiService.projectsDelete(options.data.ProjectId, function (result) {
options.success(result)
//window.location.reload(true);
});
},

update: function (options) {
closeDialogue();
insertLoading();
apiService.projectsUpdate(options.data.ProjectId, options.data, function (result) {
options.success(result);
});
},
},

sync: function (e) {
console.log("sync complete");
},

// schema configuration....
schema: {
errors: function (response) {
return response.myError;
},
model: {
id: "ProjectId",
fields: {
ProjectId: { type: "number", editable: false, nullable: true },
ProjectDescriptiveId: { type: "string", validation: { required: true, min: 4 } },
ProjectName: { type: "string", validation: { required: true, min: 4 } },
StartDate: { type: "date", validation: { required: true } },
StreetAddress: { type: "string", validation: { required: true, min: 4 } },
Suburb: { type: "string", validation: { required: true, min: 3 } },
State: { type: "string", validation: { required: true, min: 3 } },
Postcode: { type: "string", validation: { required: true, min: 4 } },
}
}
},

pageSize: 10,
sort: { field: "ProjectId", dir: "desc" }

});

$("#grid").kendoGrid({
dataSource: projectDataSource,
toolbar: [{ name: "create", text: "Create new project" }],
pageable: {
refresh: true
},
height: 650,
editable: {
mode: "popup",
template: kendo.template($("#updateTemplate").html())
},
columns: [
{ field: 'ProjectName', title: 'Project Name' },
{
title: "Address",
template: "#= StreetAddress + ', ' + Suburb + ' ' + Postcode + ' ' + State #"
},
{
field: 'StartDate',
title: 'Start Date',
type: 'date',
format: '{0:dd-MM-yyyy}',
width: '110px'
},
{ field: 'ProjectDescriptiveId', title: 'Project Code', width: '200px' },
{
command: [{ name: "edit" }, {
name: "Delete", text: "", click: function (e) { initalizeDeleteWindow(this.dataItem($(e.target).closest("tr"))); }
}], title: " ", width: "140px"
}],

/////////
edit: function () {
var $win = $('.k-window');

// set title
if (MyKendoVar.editorType === 'add') {
$win.find('.k-window-title').html("Create new project");
$win.find('.k-grid-update').html("Create");
}
else {
$win.find('.k-window-title').html("Update project details");
$win.find('.k-grid-update').html("Update");

}
},

dataBound: function () {
// add event listener to EDIT button
$('#grid > tbody > tr > td > a.k-button.k-button-icontext.k-grid-edit').on('click', function (evt) {
MyKendoVar.editorType = "edit";
});
$('body > section.section - container.top - margin > div > div.k - header.k - grid - toolbar > a').on('click', function (evt) {
MyKendoVar.editorType = "add";
})
}
})

$('#logout').on('click', function () {
$('#logoutForm').submit()
})

$('#modalCancel').on('click', closeModalAndOverlay);


function customModalShow() {
$('#modalOverlay, #customModal').show(200);
}

function overlayHide() {
$('#modalOverlay').hide(200);
}

function closeModalAndOverlay() {
$('#customModal, #modalOverlay').hide(200);
}

function closeModal() {
$('#customModal').hide(200);
}

function closeDialogue() {
$('.k-window').hide(200);
}

function initalizeDeleteWindow(dataItem) {
$('#modalTitlebarSpan').text("Delete project");
$('#contentParagraph').text("Do you really want to delete " + dataItem.ProjectName + "?");
$('#modalConfirm').text("Delete");
$('#modalConfirm').off();
$('#modalConfirm').on('click', function () { executeDelete(dataItem); });
customModalShow(); // show delete modal
}

function executeDelete(dataItem) {
console.log("doing remove()")
projectDataSource.remove(dataItem);
console.log("finishing remove and starting sync");
projectDataSource.sync();
console.log("finished sync");
closeModal();
insertLoading();
}

function insertLoading() {
$(".k-grid").prepend("<div class='k-loading-mask' style='width:100%;height:100%'><span class='k-loading-text'>Loading...</span><div class='k-loading-image'><div class='k-loading-color'></div></div></div>");
}
});

var apiService = {

settings: {
/// <field type="String" />
projectsEndpoint: settings.apiEndpoint + "projects"
},

projectsGet: function (successCallback) {
this.callApi(this.settings.projectsEndpoint, 'GET', null, null, successCallback);
},

projectsCreate: function (data, successCallback) {
this.callApi(this.settings.projectsEndpoint, 'POST', "application/json; charset=utf-8", data, successCallback);
$(".k-grid-update").addClass("k-state-disabled").removeClass("k-grid-update");
},

projectsDelete: function (projectId, successCallback) {
this.callApi(this.settings.projectsEndpoint + '/' + projectId, 'DELETE', "application/json; charset=utf-8", null, successCallback);
},

projectsUpdate: function (projectId, data, successCallback) {
this.callApi(this.settings.projectsEndpoint + '/' + projectId, 'PUT', "application/json; charset=utf-8", data, successCallback);
$(".k-grid-update").addClass("k-state-disabled").removeClass("k-grid-update");
},

callApi: function (path, method, contentType, data, successCallback, failureCallback) {
/// <param name="path" type="String" />
/// <param name="method" type="String" />
/// <param name="contentType" type="String" />
/// <param name="successCallback" type="Function" />
/// <param name="failureCallback" type="Function" />
$.ajax({
url: path,
type: method,
contentType: contentType,
data: JSON.stringify(data),
crossDomain: true,
beforeSend: function (request) {
request.setRequestHeader('Authorization', 'Bearer ' + settings.idToken);
},
success: function (result) {
successCallback(result);
$('#modalOverlay').hide(200);
$('.k-overlay').hide(200);
$(".k-loading-mask").remove();
$(".k-state-disabled").removeClass("k-state-disabled").addClass("k-grid-update");
},
error: function (request, status, error) {
if (request.status == 400) {
alert("There was a problem with your request: " + request.responseText);
}
else if (request.status == 401) {
alert("Looks like your login expired - Press Ok to go back to the login screen.");
window.location = '/';
}
else {
alert("Error: " + request.responseText)
}
$('#modalOverlay').hide(200);
$(".k-state-disabled").removeClass("k-state-disabled").addClass("k-grid-update");
$(".k-loading-mask").remove();
$('.k-overlay').hide(200);
}
});
}
};

Any ideas would be appreciated.

I have the following code in a Practice Display Template:


I am typically going to have more than one practice displayed on the "page" as this is a display template.  The issue I am having is that the .Name("StartPracticeLinkButton") is not unique.  Therefore, only the first button gets converted into the Kendo Button while the rest of the buttons are ignored and left as simple links.

Looking through the Kendo UI documation, I can't seem to find the correct method to call in order to make the name unique.  Surely Kendo UI has a built-in way to handle this?

I am adding data to a spreadsheet using the following:

Is there a way to determine the number of rows prior to displaying the spreadsheet?  The problem is that some users will want to upload ALL of their data, which may be several thousand rows.  Others may only look at subsets.  If I set the options.rows to a large number (say, 5000), there will usually be a huge number of extra rows.  Even if I do that, there will eventually be some user with a spreadsheet that is 5001 rows, and row 5000 will be removed.  

Thanks!

I have a scenario where the grid contains a small subset of the fields in a table.  When I export to excel, I want to include the extra fields.  But there are so many extra fields, and the export is used infrequently, that I don't want the overhead of always including them as hidden columns.  What I'd like to do is construct the excel file on the server, and feed it back to the client.  I have the grid set up to use the server proxy for the excel export as follows:

@(Html.Kendo().Grid<InstID2.Models.Institution>()
    .Name("grdInstitutions")
    .ClientDetailTemplateId("client-template")
    .Pageable()
    .Sortable()
    .Filterable()
    .ToolBar(t => t.Excel())
    .Excel(excel => excel
        .FileName("Kendo UI Grid Export.xlsx")
        .Filterable(true)
        .ProxyURL(Url.Action("Excel_Export_Save", "Default"))
        .ForceProxy(true)
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Institution_Read", "Default"))
        )
    )
)

And I have the server proxy action as follows:

        public ActionResult Excel_Export_Save(string contentType, string base64, string fileName)
        {
            var fileContents = Convert.FromBase64String(base64);

            return File(fileContents, contentType, fileName);
        }

 

So I have 2 questions:

 

1.  To construct the excel file on the server, the server needs to know the current grid filters that are applied.  Is there a way to pass the current filters in as a parameter to the ProxyURL?  I've tried a few variations using a javascript function, but nothing has worked so far.

 

2.  Since the server will be executing a query and constructing the excel file, the export data passed from the client (the "base64" parameter above) is not needed.  Is there a way to make the client skip creating and sending the export data to the server?  This is a minor issue as the parameter can simply be ignored.  But it would improve performance if the client could skip that step since it is not needed.

 

Thanks,

 

Ray

Hi - I want to add counts on a grid, and am copying code I've used on another grid with no problems.

Here is my column definition for the field in question, it gives me an error that "count" is not defined.

{ field: "SchoolYear", title: "Assessment Year", aggregates: ["count"], footerTemplate: "Count: #=count#", groupFooterTemplate: "Count: #=count#", groupHeaderTemplate: " #=value# - Count: #=count#"},

If I remove the "#=count#", and have this it renders fine, just no count of course

{ field: "SchoolYear", title: "Assessment Year", aggregates: ["count"], footerTemplate: "Count: ", groupFooterTemplate: "Count: #=count#", groupHeaderTemplate: " #=value# - Count: #=count#"},

What I don't understand is why I can use "#=count#" in the groupFooter and groupHeader templates and it's fine.

Any ideas?

Thanks

Lisa

 

 

I want to ask the question about template for command button in TreeList. It seems it it ignored in case of TreeList, although it work fine in Grid (see attached picture).

What I want to achieve by that template is just use another icon from bootstrap styles. Currently to achieve this (as workaround) I have to manipulate with DOM via jQuery, what of course not nice. 
Does it not supported by design, or there is mistake in my code?

Hi

I'm just starting out integrating a few Kendo controls in my ASP.NET application.  AT the moment I am just using the combobox and multiselect controls (and relevant datasource controls) with the Material theme.  I have used the tool to create a custom minified js file and that works great.  I had been hoping that there was a similar online tool to create the relevant CSS files.  Please could you let me know if one exist, otherwise do I need to compile the less files myself?

Regards

Jon

I've been trying to add a Context Menu to a TreeView using this example.

The tree displays fine but the menu code generates an error: $(....).kendoContextMenu is not a function.

JS files included: 

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/kendo/kendo.all.min.js"></script>
<script src="/Scripts/kendo/kendo.aspnetmvc.min.js"></script>

TreeView and menu:

<ul id='tree'>
            <li id="11">Item1
                <ul>
                    <li id="1">Item1.1</li>
                    <li id="2">Item1.2 </li>
                    <li id="3">Item1.3 </li>
                </ul>
            </li>
            <li id="4">Item2</li>
            <li id="5">Item3</li>
</ul>

<ul id="menu">
        <li>CREATE</li>
        <li>DELETE</li>
</ul>

JS code:

 $("#tree").kendoTreeView(
{
      select: function(event) {
            var $item = $(event.node);
            var id = $item.attr('id');
      }
});

$("#menu").kendoContextMenu({
                        // listen to right-clicks on treeview container
                        target: "#tree",

                        // show when node text is clicked
                        filter: ".k-in",

                        // handle item clicks
                        select: function(e) {
                            var button = $(e.item);
                            var node = $(e.target);
                            alert(kendo.format("'{0}' button clicked on '{1}' node", button.text(), node.text()));
                        }
                    });

Thanks,

Bill

Hi, 

First off, new to a lot of this though I've made a lot of progress on my own. Unfortunately I'm maxed out with my limitations/lack of knowledge around several things. GREATLY appreciate some assistance.

Looking to create a Hierarchical Grid with CRUD functions (for both the parent and the child grid). Have not seen a demo/example anywhere or from anyone with a Hierarchy that has CRUD. That's the 1st half of the issue. 2nd half, I've been working on getting the CRUD functions (popup editing) to work in just a regular Grid but having trouble. Main trouble is I need to use not one, but two different Sharepoint lists (via REST) as the data source (one for the parent, one for the child). But even trying to just use one list for a standard grid, I cannot get the CRUD functions to work. Doing this all strictly through HTML/JS/CSS. No ASP.NET or C#. It's an internal sharepoint subsite. 

The grid will populate from the list but the "Add New", "Edit", and "Delete" functions will not work correctly/save. Upon clicking "Add New Record" the popup opens and fill it out, but when I click "update" it does nothing and the window just remains opens. Screen shot is attached and posted code below. Greatly appreciate any assistance!

 

    <title></title>
   <link rel="stylesheet" href="https://home.hitachiconsulting.net/learning/PublishingImages/Dashboard/Kendo/kendo.common.min.css" />
    <link rel="stylesheet" href="https://home.hitachiconsulting.net/learning/PublishingImages/Dashboard/Kendo/kendo.default.min.css" />

    <script src="https://home.hitachiconsulting.net/learning/PublishingImages/Dashboard/Kendo/jquery.js"></script>
    <script src="https://home.hitachiconsulting.net/learning/PublishingImages/Dashboard/Kendo/kendo.all.min.js"></script>

        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "https://home.hitachiconsulting.net/learning/curriculumdevelopers/_vti_bin/listdata.svc/EventsCourses",
                        dataSource = new kendo.data.DataSource({
                            type: "odata",
                            transport: {
                                read: {
                                    url: crudServiceBaseUrl,
                                    type: "GET",
                                    dataType: "json",
                                    contentType: "application/json;odata=verbose",
                                    headers: {
                                        "accept": "application/json;odata=verbose"
                                    }
                                },
                                create: {
                                    url: crudServiceBaseUrl,
                                    type: "POST",
                                    dataType: "json",
                                    contentType: "application/json;odata=verbose",
                                    headers: {
                                        "accept": "application/json;odata=verbose",
                                        "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                                    }
                                },
                                update: {
                                    url: function (data) {
                                        return crudServiceBaseUrl + "(" + data.ID + ")";
                                    },
                                    beforeSend: function (jqXhr, options) {

                                        var data = JSON.parse(options.data);

                                        jqXhr.setRequestHeader("If-Match", data.__metadata.etag);

                                    },
                                    type: "POST",
                                    dataType: "json",
                                    contentType: "application/json;odata=verbose",
                                    headers: {
                                        "accept": "application/json;odata=verbose",
                                        "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                                        "X-HTTP-Method": "MERGE"
                                    },
                                },
                                destroy: {
                                    url: function (data) {
                                        return crudServiceBaseUrl + "(" + data.ID + ")";
                                    },
                                    type: "POST",
                                    dataType: "json",
                                    contentType: "application/json;odata=verbose",
                                    headers: {
                                        "accept": "application/json;odata=verbose",
                                        "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                                        "X-HTTP-Method": "MERGE",
                                        "If-Match": "*"
                                    }
                                },
                                parameterMap: function(data, type){
                                    if (type === "update" && data["__deferred"]){
                                        delete data["__deferred"];
                                    }
                                    return kendo.stringify(data);
                                }
                            },
                            batch: true,
                            pageSize: 10,
                            schema: {
                                data: "d.results",
                                model: {
                                    id: "ID",
                                    fields: {
                                        ID: {editable: false, nullable: false },
                                        Event: { type: "string", validation: { required: true } },
                                        GlobalID: { type: "string" },
                                        TrainingHours: { type: "number", validation: { required: true } },
                                        Description: { type: "string", validation: {required: true } },
                                        Objectives: { type: "string", validation: {required: true } }, 
                                        DeliveryMethod: { type: "string", validation: { required: true } },
                                        PrimarySubject: { type: "string", validation: { required: true } },
                                        SecondarySubject: { type: "string", validation: { required: true } },
                                        KeyWords: { type: "string", validation: { required: true } },
                                        Curriculums: { type: "string", validation: { required: true } },
                                        CourseDeveloper: { type: "string", validation: { required: true } },
                                        SME: { type: "string", validation: { required: true } },
                                        AddedToSensei: { type: "string", validation: { required: true } },
                                        DateLastUpdated: { type: "string", validation: { required: true } },
                                        Staus: { type: "string", validation: { required: true } },
                                        SourceFiles: { type: "string", validation: { required: true } },
                                        Notes: { type: "string", validation: {required: true } }
                                    }
                                }
                            },
                        });

                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 550,
                        toolbar: ["create" ],
                        columns: [
                            { field: "Event", title: "Event Name" },
                            { field: "GlobalID", title:"Event No./Global ID", width: "120px" },
                            { field: "TrainingHours", title:"Training Hours", width: "120px" },
                            { field: "Description", width: "120px" },
                            { field: "Objectives" },
                            { field: "DeliveryMethod", title: "Delivery Method" },
                            { field: "PrimarySubject", title: "Primary Subject" },
                            { field: "SecondarySubject", title: "Secondary Subject" },
                            { field: "KeyWords", title: "Key Words" },
                            { field: "CurriculumLibrary" },
                            { field: "CourseDeveloper", title: "Curriculum Developer" },
                            { field: "SME" },
                            { field: "AddedToSensei", title: "Added to Sensei" },
                            { field: "DateLastUpdated", title: "Date Last Updated" },
                            { field: "Status" },
                            { field: "SourceFiles", title: "Source Files" },
                            { field: "Notes" },
                            { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
                        editable: {
                            mode:"popup",
                            update: true
                        }
                    });
                });
                
                dataSource.add( { Event: "New Event" });
                datasource.sync() ;
            </script>
        </div>

 

I'm using the setOptions method to restore the state previously obtained from grid.getOptions().  My data is small enough that I load it completely client side.  When I call set options, the grid reloads the data from the server.  It works fine, but it's unnecessary.

Is there an option to avoid reloading the data from the server after setOptions is called?