Hello
I would ask about possibility to close last panel when expandmode is single. Multiple expand mode allows close all panels, single not.
How to close all panels in single mode.
I'm following some of the most basic kendoPDFViewer examples, and this section of code in the js file consistently crashes;
var pdfViewer = $("#documentViewer").data("kendoPDFViewer");
if (!pdfViewer) {
pdfViewer = $("#documentViewer").kendoPDFViewer({ //<------crashes here
pdfjsProcessing: {
file: ""
},
width: "100%",
height: 500
}).data("kendoPDFViewer");
}
#documentViewer is the id of the div I'm attempting to attach the viewer to. Debugging shows the problem happening when I try to declare the currently null pdfViewer as a kendoPDFViewer. I made sure to include the pdf scrips in my index.html as well.
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
<script> window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';</script>
Am I putting the scripts in the wrong location or something?
Thanks.
Hi All,
I work in one of the Big 4 firms and we have been using Kendo for a few years now but recently an issue has cropped up when virtual vertical scrolling does not work when the grid is sorted on a column. It does not matter what column. Scrolling works fine without the sorting when the grid loads. When sorted on any column the grid loads the first pagesize items but on going to the end of the page the new items does load. No call to the server also being made and no network or console activity
Here is the code
@(Html.Kendo().Grid<
IGridItem
>()<
br
> .Name(gridName)<
br
> .HtmlAttributes(new { @class = "table-response browse-table " + Model.GridType.ToString().ToLower() + "-grid-type" })<
br
> .Columns(columns =><
br
> {<
br
> columns<
br
> .Bound("Name")<
br
> .Title(MarkupMessages.Grid_NameHeader)<
br
> .Width(500)<
br
> .HeaderTemplate("<
span
" + MarkupMessages.Grid_NameHeader + "</span>")<
br
> .HtmlAttributes(new { @class = "name-column" })<
br
> .ClientTemplate(nameColumnTemplate)<
br
> .Locked(true)<
br
> .Lockable(false)<
br
> .Hidden(false)<
br
> .Sortable(true)<
br
> .Filterable(false)<
br
> .Visible(Model.GridColumnConfiguration.HasFlag(GridColumnEnum.Name));<
br
> columns<
br
> .Bound("ID")<
br
> .Title("")<
br
> .Width(30)<
br
> .HeaderTemplate("")<
br
> .HtmlAttributes(new {@class = "context-menu-column"})<
br
> .ClientTemplate(menuColumnTemplate)<
br
> .Locked(true)<
br
> .Lockable(false)<
br
> .Hidden(false)<
br
> .Sortable(false)<
br
> .Visible(Model.GridColumnConfiguration.HasFlag(GridColumnEnum.ID))<
br
> .Filterable(false);<
br
> columns<
br
> .Bound("Category")<
br
> .Title(MarkupMessages.Grid_CategoryHeader)<
br
> .Width(200)<
br
> .ClientTemplate("<
div
>#: Category #</
div
> ")<
br
> .Locked(false)<
br
> .Lockable(false)<
br
> .Hidden(false)<
br
> .Sortable(true)<
br
> .Visible(Model.GridColumnConfiguration.HasFlag(GridColumnEnum.Type))<
br
> .Filterable(filter =><
br
> {<
br
> filter.Multi(true);<
br
> filter.CheckAll(false);<
br
> filter.ItemTemplate("itemTemplate");<
br
> filter.DataSource(source =><
br
> {<
br
> source.Read(r => r.Url(Model.Url));<
br
> source.Events(e => e.RequestStart("GridHelper.filterCancelRequest"));<
br
> });<
br
> });<
br
> columns<
br
> .Bound("LastModifiedDate")<
br
> .Title(MarkupMessages.Grid_LastModifiedDateHeader)<
br
> .Width(200)<
br
> .ClientTemplate("<
div
>#: LastModifiedDate #<
div
>")<
br
> .Locked(false)<
br
> .Lockable(false)<
br
> .Hidden(false)<
br
> .Sortable(true)<
br
> .Filterable(false)<
br
> .Visible(Model.GridColumnConfiguration.HasFlag(GridColumnEnum.LastModifiedDate));<
br
> .DataSource(ds => ds<
br
> .Ajax()<
br
> .ServerOperation(Model.ServerOperation)<
br
> .Sort(sort =><
br
> {<
br
> if (Model.DefaultSortOrder == SortDirection.Descending)<
br
> {<
br
> sort.Add(Model.DefaultSort).Descending();<
br
> }<
br
> else<
br
> {<
br
> sort.Add(Model.DefaultSort).Ascending();<
br
> }<
br
> })<
br
> .PageSize(200)<
br
> .Read(read =><
br
> {<
br
> read.Url(Model.Url);<
br
> read.Data(dataSourceGetAdditionalData);<
br
> })<
br
> .Events(events => events.Error(dataSource_Error)))<
br
> .AutoBind(false)<
br
> .Sortable(sortable => sortable.SortMode(GridSortMode.SingleColumn).AllowUnsort(false))<
br
> .Scrollable(scrollable => scrollable.Virtual(true).Height(382))<
br
> .Resizable(resizable => resizable.Columns(true))<
br
> .Reorderable(reorder => reorder.Columns(true))<
br
> .Filterable(filter =><
br
> {<
br
> filter.Enabled(true);<
br
> filter.Extra(false);<
br
> })<
br
> .Events(events =><
br
> {<
br
> if (!String.IsNullOrEmpty(gridEvent_SelectionChanged))<
br
> {<
br
> events.Change(gridEvent_SelectionChanged);<
br
> }<
br
><
br
> if (!String.IsNullOrEmpty(gridEvent_DataBound))<
br
> {<
br
> events.DataBound(gridEvent_DataBound);<
br
> }<
br
><
br
> if (!String.IsNullOrEmpty(gridEvent_DataBinding))<
br
> {<
br
> events.DataBinding(gridEvent_DataBinding);<
br
> }<
br
><
br
> if (!String.IsNullOrEmpty(gridEvent_FilterInitialize))<
br
> {<
br
> events.FilterMenuInit(gridEvent_FilterInitialize);<
br
> }<
br
><
br
> if (!String.IsNullOrEmpty(gridEvent_ColumnReorder))<
br
> {<
br
> events.ColumnReorder(gridEvent_ColumnReorder);<
br
> }<
br
> }))
var battingDataSource = new kendo.data.DataSource({
schema: {
model: {
id: "PlayerId",
fields: {
PlayerId: { editable: false, nullable: true },
PlayerFullName: { validation: { required: true } },
BattingOrder: { type: "number", validation: { required: true, min: 1, max: 11 } },
RunsScored: { type: "number", validation: { required: true, min: 0 } },
BallsFaced: { type: "number", validation: { required: true, min: 0 } },
Fours: { type: "number", validation: { required: true, min: 0 } },
Sixes: { type: "number", validation: { required: true, min: 0 } },
}
}
},
batch: true,
transport: {
create: {
url: "/MatchPlayer/Create",
type: "POST"
},
update: {
url: "/MatchPlayer/Update",
type: "POST"
},
read: {
url: "/MatchPlayer/Read",
type: "POST"
},
},
parameterMap: function (data, operation) {
alert("hit");
if (operation != "read") {
// post the players so the ASP.NET DefaultModelBinder will understand them:
var result = {};
for (var i = 0; i < data.models.length; i++) {
var player = data.models[i];
for (var member in player) {
result["players[" + i + "]." + member] = player[member];
}
}
return result;
}
}
});
I have a form with a few fields. I want to take the form data and pass it to a Kendo Datasource so when I hit "Save" it will call my existing back-end JSDO class and save the data to the database. Are there examples of this anywhere?
I have found an example of a remote bound form to save to the back-end with an already existing DB record (ID). But my request is for new records with no ID.
https://demos.telerik.com/kendo-ui/mvvm/remote-binding
I am evaluating Kendo UI Grid trial version to replace a third party grid control being used in one existing web forms application.
Environment : ASP.NET Web Forms Application (NOT MVC) (.NET Framework 4.5, upgraded from .NET Framework 2.0), Oracle 11g.
Browser : IE 11.
I am trying to implement Virtual scrolling with Remote data.
But it is not working. Data is only visible up to the height of the grid. Scroll bar is not appearing.
Setting
serverPaging: true,
serverSorting: true
does not show any data.
Could anyone tell me where I am going wrong ?
The server side function GetData() invokes database stored procedure which returns all data. It will not be possible to implement paging in the store procedures as there are a very large number of different grids aka stored procedures. If this is the cause of Virtual Scrolling not working, please suggest me the work around.
Sample code is as follows:
ManageUsers.aspx
<
asp:Content
ContentPlaceHolderID
=
"mainContent"
ID
=
"conPort"
runat
=
"server"
>
<
link
href
=
"styles/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"styles/kendo.metro.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"js/jquery.min.js"
></
script
>
<
script
src
=
"js/kendo.all.min.js"
></
script
>
<
script
type
=
"text/javascript"
>
$(document).ready(function ()
{
$('#dvGrid').kendoGrid({
scrollable: { virtual: true },
sortable: true,
selectable: "row",
filterable: true,
dataSource:
{
transport:
{
read:
{
url: "ManageUsers.aspx/GetData",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json"
}
},
schema:
{
data:
function (response)
{
return $.parseJSON(response.d);
}
},
type:"json",
pageSize: 10//,
//serverPaging: true,
//serverSorting: true,
//batch: true
},
columns: [
{field: "ID", title: "USER ID"},
{field: "USER_NAME", title: "USER NAME"}
]
});
});
</
script
>
<
div
>
<
div
id
=
"dvGrid"
class
=
"k-widget k-grid"
style
=
"width:450px;height:350px"
></
div
>
</
div
>
</
asp:Content
>
////////////////////////////////////////
ManageUsers.aspx.cs
using Newtonsoft.Json;
[System.Web.Services.WebMethod]
public static string GetData()
{
TblUser objTblUser = new TblUser();
DataSet objDataSet = new DataSet();
objDataSet = objTblUser.DataSetLoad("A", 0);
DataView dvw = objDataSet.Tables[0].DefaultView;
dvw.RowFilter = " USER_NAME LIKE 'E%' ";
return JsonConvert.SerializeObject(dvw.ToTable());
}
////////////////////////////
The converted JSon data is as follows:
[{"ID":2.0,"USER_NAME":"DANIEL S"},{"ID":3.0," USER _NAME":"DANIEL Z"},{"ID":6.0," USER _NAME":"DANIELS"},{"ID":19.0," USER _NAME":"DAVID"},{"ID":42.0," USER _NAME":"DEEPAK"},{"ID":48.0," USER _NAME":"DELIA"},{"ID":56.0," USER _NAME":"DEYAN"},{"ID":57.0," USER _NAME":"DHEERAJ"},{"ID":67.0," USER _NAME":"DURIAN"},{"ID":71.0," USER _NAME":"DIMITAR"},{"ID":89.0," USER _NAME":"DIMITAR Z"},{"ID":90.0," USER _NAME":"DOBROMIR"},{"ID":96.0," USER _NAME":"DUNCAN"}]