Hi,

I have something to build, but not sure of it's really possible with the scheduler. We have items that are planned for a calendar week and have a specified duration. Now I want to show them in a pool and drag n drop them into the different days of the week for a finer grade of planning. I attached a picture for illustration what I mean.

Best Regards

Benjamin

 

Hi,

I use the upload Control in a editor template in my telerik mvc grid - as you can see in the attached Picture. Upload works but I also want to

have an initial file if it is saved in the DB - so that I can use upload remove to delete it - but I have to set the file in the onEdit Event on client of the grid but this does'nt work (see Code)

• is it not possible to use MVC Upload Control and set a file(s) in Javascript?

 

Is it possible to install Kendo UI Professional as npm module?

I see there's a git repository with Kendo UI Professional Bower package but i can't find Kendo UI Professional npm ​package.

 Thanks.

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