$(
"#HolesGrid"
).kendoGrid({
editable:
"inline"
,
scrollable:
false
,
columns: [
{
command: [
"edit"
,
"delete"
],
title:
"Actions"
,
width:
"90px"
},
{ title:
"Number"
, field:
"Number"
, type:
"number"
, width:
"80px"
, editor: numericNoDecimalEditor },
{ title:
"Male Par"
, field:
"MalePar"
, type:
"number"
, editor: numericNoDecimalEditor },
{ title:
"Female Par"
, field:
"FemalePar"
, type:
"number"
, editor: numericNoDecimalEditor },
{ title:
"Male Rank"
, field:
"MaleRank"
, type:
"number"
, editor: numericNoDecimalEditor },
{ title:
"Female Rank"
, field:
"FemaleRank"
, type:
"number"
, editor: numericNoDecimalEditor }
],
dataSource: {
schema: {
data:
"Data"
,
total:
"Count"
,
errors:
"Error"
,
model: {
id:
"id"
,
fields: {
id: { type:
"number"
},
CourseID: { type:
"number"
, defaultValue: CourseID },
Number: { type:
"number"
},
MalePar: { type:
"number"
, defaultValue: 5 },
FemalePar: { type:
"number"
, defaultValue: 5 },
MaleRank: { type:
"number"
},
FemaleRank: { type:
"number"
}
}
}
},
transport: {
read: {
url:
"/CourseEdit/GetHoles"
,
contentType:
"application/json"
,
type:
"POST"
,
data: { courseID: CourseID }
},
create: {
url:
"/CourseEdit/CreateHole"
,
contentType:
"application/json"
,
type:
"POST"
},
update: {
url:
"/CourseEdit/UpdateHole"
,
contentType:
"application/json"
,
type:
"POST"
},
destroy: {
url:
"/CourseEdit/DeleteHole"
,
contentType:
"application/json"
,
type:
"POST"
},
parameterMap:
function
(data, operation)
{
return
JSON.stringify(data);
}
},
requestEnd:
function
(e)
{
if
(e.type ==
"create"
|| e.type ==
"destroy"
)
{
// Update the Yardage list
$(
"#YardagesGrid"
).data(
"kendoGrid"
).dataSource.read();
$(
"#YardagesGrid"
).data(
"kendoGrid"
).refresh();
}
}
},
edit:
function
(e)
{
if
(e.model.isNew())
{
// Find the next hole number
var
holes =
this
.dataSource.data();
var
lastNum = 0;
for
(
var
i = 0; i < holes.length; i++)
{
var
thisNum = holes[i].Number;
if
(thisNum - lastNum > 1)
{
break
;
}
lastNum = thisNum;
}
var
nextNum = lastNum + 1;
e.container.find(
"input[name=Number]"
).data(
"kendoNumericTextBox"
).value(nextNum);
e.container.find(
"input[name=MaleRank]"
).data(
"kendoNumericTextBox"
).value(nextNum);
e.container.find(
"input[name=FemaleRank]"
).data(
"kendoNumericTextBox"
).value(nextNum);
}
}
});
function
numericNoDecimalEditor(container, options)
{
$(
'<input data-bind="value:'
+ options.field +
'" name="'
+ options.field +
'"/>'
)
.appendTo(container)
.kendoNumericTextBox({
format:
"n0"
,
decimals: 0
});
}
Would it be possible to set custom width and height using CSS calc()?
The situation is the following: I have a UI which consists of a main area and a sidebar.
When I open the window I want to be able to center the window within the main area, without covering the sidebar. And in my case, the sidebar having 400px, I would like to be able to set the Kendo Window width: calc(100% - 440px) and add a position left of 20px. In this way I would have control on various types of layouts.
Thanks,
Andy
I'm trying to generate a PDF report and I need the charts I generate for my HTML for the PDF file. I'm trying to send the image data to the server but when I try to load it into an image object it fails. Hoping you can help me.
-- Code on client side
kendo.drawing.drawDOM($("#ESChart"))
.then(function (group) {
return kendo.drawing.exportImage(group);
})
.done(function (data) {
chartData = encodeURI(data);
$.ajax({
method: "POST",
data: chartData,
url: "/Home/CreateFacilityReport" + location.search,
})
.done(function (msg) {
alert(msg);
})
.fail(function (data) {
alert("Failed to load svg");
});
});
-- Code on server side
public ActionResult CreateFacilityReport(string FacilityId, string chartData)
{
string myData = HttpUtility.UrlDecode(chartData.ESChart);
byte[] myBytes = Encoding.ASCII.GetBytes(myData);
using (var ms = new MemoryStream(myBytes))
{
Image myImage = Image.FromStream(ms, true, false); <---- Blows up here and gets a 'Parameter is not valid'
myImage.Save("/ESChart.png");
}
}
Hi,
Is it possible to render the Pager of a ScrollView in the footer of its parent View? I want to give the user a visual clue that there are more items to scroll through and on which page they are currently at. Basically I want the pager to be visible at all times and that the content of the page in the ScrollView stays scrollable vertically.
Kind Regards,
Marco
I am using Javascript and have a kendo drop down list like so:
$("#ddl).kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
filter: "contains",
dataSource: {
data: [
{id: 1, name: "apples"},
{id: 2, name: "oranges"},
{id: 3, name: "apples2"},
{id: 4, name: "oranges2"}]
}
});
As a user, I open the drop down list, type "apples" into the filter, and select "apples". Then I activate a function (though clicking a button), that attempts to programmatically change the drop down list to the "oranges" value (index 1, id 2). However, the filterInput is still active, and attempts to set the drop down list to index 1 instead sets it to index 1 of the filtered drop down list ("apples2").
I know I can access the filterInput programmatically. How can I programmatically clear the filterInput and set the drop down list value to "oranges"?
Hi
In our project, we need a footer template design in the Kendo grid. So we have used a Footertemplate property inside the columns.
columns: [{
field: "Name",
title: "Name",
headerTemplate: "Name <span class='fa fa-gbp' onclick='Showpopup(false,this,120); return false'></span>",
footerTemplate: "<div class='footer_Template'><div id='Namecount' style='display:none;'>Count = #: count #</div></div>"
}],
For the aggregate function, we have added the icon in the header template and added the aggregate options dynamically inside the popup window. During click of the icon, we display the aggregate options on a popup window.
The Footer template aggregate labels are initially set as display: none (as mentioned above). Once the aggregate option is selected from the header popup the footer template aggregate labels style will be display: block.
The above process is working fine before sorting of the column values but while clicking the sorting the footer template aggregate labels goes back to the initial stage (all the design style changes to display: None)
We need the same functionality & process to take place as on the video on our application too.
Video Link
Attached a demo project for your reference.
Demo Project (The link will be valid for 6 days).
Hello, is there a way to implement load on demand on spreadsheet? or load data while scrolling?
I'm using kendo spreadsheet to display big files, with no edit/save functionality.
Loading the entire file on json can be very difficult when the json size is 30MB+.
When I use frozen columns I have a white box below the columns. But if I change the size of the browser by at least 1 pixel, this bug disappears
I tried to fix this bug in this way
var lockedGrid = (document.getElementsByClassName("k-grid-content-locked"))[0];
lockedGrid.style.height = 'auto';
It works. But if I use pagination, filtering or sort then this white box appears again.
Kendo version in project v2016.2.607
{x: Xi, y: Yi, label: someLabel, group: groupName}
graphOpts = {
dataSource: dataSource,
xAxis: {
min: data.min,
max: data.max,
title: {text: "Values
#=data.view().min=# to #=data.view().max=#}
}
}