Questions on Kendo UI for jQuery Forum

1 answer

202 views

After update to Q1 2015 we face a problem where loading partial with kendo components into kendo window kills is as well as access to components like grid on parent page. Workaround: enable iframe, which is not an option since window should return a result

How to reproduce:
1. Grid with button to call the window(only calling column provided):

col.Bound(b => b.FieldMapId).ClientTemplate("# if (DataType.toLowerCase() ==\"csv\"){ # <button id='FiledMapBtn_#=FieldMapId#' class='k-button' data-fieldMapId='#=FieldMapId#' data-feedId='#=Id#' data-feedtype='#=FeedType#' onClick='ShowFieldMapWindow(this)'>Edit Maps</button> # } #")
.Template(t => t.DataType.ToLower() == "csv" ? "<button style='display:none' id='FiledMapBtn_'" + t.FieldMapId + "' class='k-button' data-fieldMapId='" + t.FieldMapId + "' data-feedId='" + t.Id + "' data-feedtype='" + t.FeedType + "' >Edit Maps</button>" : "").Title("Csv Mapping").Filterable(false);

2. Window set as invisible:
  @(Html.Kendo().Window().Name("FieldMapWindow")
   .Title("Create/Edit new csv map")
   .Actions(a => a.Close())
   .Draggable()
   .Modal(true)
   .Visible(false)
   .Resizable()
   .Events(e => e.Close("FieldMapWindow_OnClose")))

3. JS To Open window and request content:
function ShowFieldMapWindow(sender) {
var csvImportWindow = $("#FieldMapWindow").data("kendoWindow");
csvImportWindow.refresh({
url: url goes here,
type: "GET"
});
csvImportWindow.open().maximize();
}

4. it loads partial content with layout set to partial view with kendo elements. Below is a layout for window partial
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title>@ViewBag.Title</title>

@*@Styles.Render("~/Content/Themes/main/jquery.tagit.css")*@
@Styles.Render("~/Content/Themes/main/AdminStyles")

<link href="@Styles.Url("~/Content/Kendo/KendoDefault")" rel="stylesheet" async />
@*<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/ui-lightness/jquery-ui.css" />*@
@Scripts.Render("~/bundles/Scripts/")
</head>
<body>
@RenderBody()
</body>
</html>

5. We use bundles: heres whats in scripts bundle:
  bundles.Add(new ScriptBundle("~/bundles/Scripts/").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-{version}.min.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/jquery-ui-{version}.min.js",

   //"~/Scripts/jquery-migrate-{version}.min.js",
"~/Scripts/jquery.validate.min.js",
"~/Scripts/jquery.unobtrusive-ajax.min.js",
"~/Scripts/jquery.validate.unobtrusive.min.js",
"~/Scripts/jquery-scroller.js",
"~/Scripts/kendo/kendo.all.min.js", // or kendo.all.* if you want to use Kendo UI Web and Kendo UI DataViz
"~/Scripts/kendo.modernizr.custom.js",
"~/Scripts/kendo/kendo.aspnetmvc.min.js",
"~/Scripts/bootstrap.js",
"~/Scripts/TagIt/tag-it.js",
"~/Scripts/MainTheme/mpqLog.js",
"~/Scripts/MainTheme/views.js",
"~/Scripts/MainTheme/imgSlider.js",
"~/Scripts/MainTheme/services.js",
"~/Scripts/MainTheme/userResults.js",
"~/Scripts/MainTheme/leftMenu.js",
"~/Scripts/MainTheme/blur.js"
));

Please note that everything was working before update. !!! Please advice !

Window

answered on 27 Mar 2015

6 answers

783 views

Kendo UI Grid server paging with scroll virtual

I'm working on a mvc project which retrieve data from server and present to client via Kendo UI Grid & OData & Web API. I would like to use virtual scrolling to implement server paging, and I followed the demo virtualization-remote-data, but it did not work for me, here is my client code:

<script>
$(document).ready(function () {
var webApiUrl = gms.App.getApiBaseUrl() + "odata/Containers";

$("#grid").kendoGrid({
dataSource: {
type: "odata",
serverPaging: true,
serverSorting: true,
pageSize: 50,
schema: {
data: function (data) {
if (data.value) {
return data.value;
}
delete data["odata.metadata"];
return [data];
},
total: function (data) {
return data["odata.count"];
}
},
transport: {
read: { url: webApiUrl, dataType: "json" },
parameterMap: function (options, type) {
// this is optional - if we need to remove any
// parameters (due to partial OData support in WebAPI
var parameterMap = kendo.data.transports.odata.parameterMap(options);

delete parameterMap.$inlinecount; // remove inlinecount parameter
delete parameterMap.$format; // remove format parameter

return parameterMap;
}
}
},
//filterable: {mode:"row"},
//columnMenu: true,
selectable: "single",
//reorderable: true,
sortable: true,
height: 640,
scrollable: { virtual: true },
sortable: true,
columns: [
{ field: "ContainerId", title: "Container Id" },
{ field: "UtcDt", title: "Utc Date" },
{ field: "TempSetpoint", title: "Temperature °C" },
{ field: "SupplyTemp", title: "Supply °C" },
{ field: "Usda1", title: "Usda1 °C" },
{ field: "Usda2", title: "Usda2 °C" }
],
});
});
</script>

There was no scrolling bar display when I set the configuration of grid as the code present.

Grid

answered on 27 Mar 2015

4 answers

434 views

Enabled data-bind attribute in MVVM accepts only a function

With other widgets, the data-bind="enabled: false" attribute normally works, and disables that particular widget in MVVM, but it seems like this parameter only works with a function name.

Using Kendo 2014.3.1119. Checked the update logs, and didn't see this particular issue addressed.

Button

answered on 27 Mar 2015

1 answer

155 views

MVVM binding a date field assigns today's date

Hi,
I noticed that when binding a datepicker to a field of type "date" on the model, by default the datepicker holds today's date. Here is a dojo for that:
http://dojo.telerik.com/@bhaidar/ALayI

Is this the default behavior? What if I want to keep the value empty?

Regards
Bilal

DatePicker

answered on 27 Mar 2015

3 answers

196 views

MVVM support\demo

http://demos.telerik.com/kendo-ui/notification/mvvm

I'm struggling to understand this MVVM demo...a direct query to the object from the model kindof defeats the purpose does it not? Just being able to initalize the widget with the data-role does not MVVM support make.

I was assuming I could bind it to a property in the model to show a message(s) or something

?

Notification

answered on 27 Mar 2015

6 answers

3.8K+ views

Kendo Grid - MVC and client-side add/edit/delete

Please see my two questions below.

I'm using Kendo UI with MVC and Razor.

I have a page with header fields, and a grid.

The goal: When page is saved to database, one row is inserted for header data, and multiple rows are inserted into another table for each grid row (each row has foreign key to header row). Obviously, if I add a new header, the grid will be empty, and when I add rows to the grid, I don't have a foreign key yet, because the header data hasn't been saved yet.

What seems to be the best approach: The grid data will to be maintained client-side. In the initial page load, the grid will get data from the server (if there is data); then adding and deleting rows will be done on the client without any communication with the server. When user clicks "save" to save header and grid data, the view should post post the all the data, including the grid data, to a controller on the server.

Question 1: Can someone please provide me with some direction on how to do this, perhaps point me to some online examples?

I've started looking into how to do this, and ran into the following issue:

1) I have the grid defined in cshtml view:

<div class="row">

@(Html.Kendo().Grid<CapEdit2.Models.Matrix>()
.Editable(e => e.Mode(GridEditMode.InLine))
.Name("NewGrid")
.DataSource(d => d
.Ajax()
.ServerOperation(false)
.Model(mod => mod.Id(m => m.Id))
.Read(r => r
.Action("MatrixRead", "Report")
.Data("matrixReadData")
)
)
.Columns(c =>
{
c.Bound(m => m.Id);
c.Bound(m => m.IncludeRecordDate).Title("Include Record Date");
c.Bound(m => m.IncludeExDate).Title("Include Ex Date");
c.Bound(m => m.IncludeTransDate).Title("Include Trans Date");
c.Bound(m => m.Ddf).Title("DDF");
c.Bound(m => m.IssueDescription).Title("Issue Description");
c.Bound(m => m.Cusip).Title("Cusip");
c.Bound(m => m.Amount).Title("Amount");
c.Bound(m => m.UsMarketValue).Title("Market Value");
c.Bound(m => m.CchBasisFactor).Title("CCH Basis Factor");
c.Bound(m => m.LocalMarketValue).Title("Local Market Value");
c.Bound(m => m.FractionalRate).Title("Fractional Rate");
}
)
)

2. I have an "Add row" button, that calls this code:

var grid = $('#MyGrid').data('kendoGrid');
grid.addRow();

3. The issue: First time I click the button, a row is added. Second, and all subsequent times I click the button, a new row replaces the existing row, and the grid apparently has one row, and never has more than one row, no matter how many times I click "add row".

Question 2: Can someone tell me why I'm seeing this issue?

Thank you for your help!
Mike

Grid

answered on 27 Mar 2015

2 answers

205 views

Pivot Grid PDF export

I am displaying data on a pivot grid with horizontal scroll. When i export this to a PDF, its trying to fit everything in a single page, and hence the exported PDF is not readable.

I could reproduce this on the pivot grid demo page http://demos.telerik.com/kendo-ui/pivotgrid/pdf-export
I am attaching the exported PDF.

PivotGrid

answered on 27 Mar 2015

2 answers

417 views

Validator not firing for custom popup editor

I have a grid that is bound to a dataSource, and the dataSource has the required field validator set for several fields. This works fine if I use the grid's built-in popup editor; if I leave a required field blank then I will get notified when I click "Update" in the popup editor. However, if I use a custom popup editor (via kendo template) then the required field validation does not fire and I am able to save a blank value.

I have created a sample that exhibits this behavior:

http://dojo.telerik.com/oyuRe

If I modify my dataSource to include customValidation, that will fire in the custom popup editor but I don't think I should have to go down the path of defining a custom validation since the field is already marked as required in the dataSource (and it works when using the default popup editor).

This seems like a bug. Is there any workaround?

Grid

answered on 27 Mar 2015

1 answer

998 views

Grid Scroll to Last Row

Hi,

I have a kendo grid which fetches data using the .READ method to fetch the data from database and show it on the grid. The grid has a scroll bar. I want to scroll down to the end of the grid, so that the last record is visible on screen.

thanks

Sanjay

Grid

answered on 27 Mar 2015

1 answer

136 views

how to get newly added lines in kendo editor using jquery

Hi

I am creating a custom email editor using kendo editor to implement the forward email functionality like outlook so if user click on forward
button then some text should be added automatically like below

From: nameXXXX [mailto:xxxxxx@abc.com]

Sent: Monday, March 23, 2015 5:00 PM

To: demouser@gmail.com

Subject: test

and user can add new text line as a forward message.

So please suggest me how to find the newly added text from
Kendo Editor using jquery.

Please see the snap.

Editor

answered on 27 Mar 2015