Questions on Kendo UI for jQuery Forum

3 answers

177 views

Drag & Drop Animation Speed

Is there a way to slow down the speed when you drag a node around in TreeView?

TreeView

answered on 10 Jun 2015

1 answer

342 views

Freeze Columns not working for export

Columns are not locked in Export to Excel is their any possibility ?

Column A "First Name" is locked and working fine on treelist but when i export the treelist the "First Name" Column is not freeze perfectly

http://dojo.telerik.com/EgoCa

TreeList

answered on 10 Jun 2015

1 answer

82 views

Grid Virtual Scrolling with Local Data Stops Working After Adding a Row Via native "Add new record" button or dataSource.add

Reposting this to the Grid Forum (It was posted to the General Discussion by mistake):

This problem may be related to the one reported here:

http://www.telerik.com/forums/grid-virtual-scrolling-not-working-after-adding-data-using-datasource-add#48QZtko1cU2qQt68QcxCTA

Though this case is a bit different.

Building off of the virtual scrolling from local data example, if a single row is added to that grid, the scrolling stops working:

http://dojo.telerik.com/@Henry%20Kaufman/icubE

Press either button at the top of the grid to add a row and cause the scrolling to fail.

Note that both the native create ("Add new record") and the custom "copy first row to end" buttons both cause the scrolling to fail.

Is there any solution or workaround to this problem?

Thanks!

Henry Kaufman

Grid

answered on 10 Jun 2015

1 answer

95 views

Grid Virtual Scrolling Stops Working After Adding a Row Via native "Add new record" button or dataSource.add

This problem may be related to the one reported here:

http://www.telerik.com/forums/grid-virtual-scrolling-not-working-after-adding-data-using-datasource-add#48QZtko1cU2qQt68QcxCTA

Though this case is a bit different.

Building off of the virtual scrolling from local data example, if a single row is added to that grid, the scrolling stops working:

http://dojo.telerik.com/@Henry%20Kaufman/icubE

Press either button at the top of the grid to add a row and cause the scrolling to fail.

Note that both the native create ("Add new record") and the custom "copy first row" buttons both cause the scrolling to fail.

Is there any solution or workaround to this problem?

Thanks!

Henry Kaufman

General Discussions

answered on 10 Jun 2015

3 answers

271 views

Grid virtual scrolling not working after adding data using datasource.add

I'm having issues after adding rows into a dataset after the initial load of the grid, where the vertical scrollbar vanishes and the displayed data seems to revert back to the top of the dataset. My actual usage case is fairly complicated so I've created a jsbin which shows the same problem.

http://jsbin.com/vilahoji/2/

As you can see I'm populating the first grid by adding rows to the datasource, the second grid has 100 rows when the datasource is created.

General Discussions

answered on 10 Jun 2015

2 answers

160 views

Back Button issues when drilling into listview

Hi,

I'm building a mobile app where you can drill into listview items to see details.

I've set up a standard back button:
<a data-role="button" href="#:back">Back</a>

...which works fine on all my other pages, but requires 2 or 3 pushes before it'll return to the previous page from a listview details page.

As the previous page isn't always the same (I have past, present and future listview pages which all use the same function to obtain data and output to the same place) I can't work around it by just adjusting the navigation.

Can you give me suggestions on a work around/solution?

Amy

Button (Mobile)

answered on 10 Jun 2015

11 answers

707 views

KendoGrid not displaying remote data

Not sure why my remote json data is not showing up within the Grid, but I have tried different suggestions for a fix and still not been able to show the data. I have verified that the data is coming across correctly. Can someone tell me what the problem may be? Here is my code:

<!DOCTYPE html>
<html>
<head>
<title>Task Scheduler</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
</head>
<body>


<div id="main" class="k-content">
<div id="tasklist"></div>
</div>

<script>
// Displays main widget
$(document).ready(function(){
$("#main").kendoWindow({
actions: ["Maximize", "Minimize", "Close"],
title: "Tasker",
visible: true,
width: "700px",
height: "300px"
}).data("kendoWindow");

var mainWindow = $("#main").data("kendoWindow");
mainWindow.center();
});

$(document).ready(function() {
var datasource = new kendo.data.DataSource({
transport: {
type: "odata",
read: {
url: "http://localhost:8282/tasker/retrieve",
dataType: "jsonp"
}
}
});

//alert(datasource);

$("#tasklist").kendoGrid({
dataSource: datasource,
schema: {
data: "results",
total: "Total",
aggregates: "AggregateResults",
errors: "Errors",
data: function(result) {
return result.results || results
},
total: function(data) {
data = data.results || data;
return data.length;
},
model: {
fields: {
id: { type: "number" },
name: { type: "string" },
description: { type: "string" },
schedule: {
id: { type: "number" },
startDateTime: { type: "number" },
endDateTime: { type: "number" },
interval: { type: "string" },
event: { type: "string" },
status: { type: "string" }
}
}
}
},
height: 200,
sortable: false,
scrollable: false,
resizable: false,
selectable: "row",
navigatable: false,
columns: [
{
field: "id",
title: "ID",
width: 50
},
{
field: "name",
title: "Name",
width: 120
},
{
field: "description",
title: "Description",
width: 200
}
]
});
});

</script>

</body>
</html>

Grid

answered on 10 Jun 2015

1 answer

98 views

Display Destroy Command conditionally - Kendo Grid

Hi,

Can anyone please let me know how to display Destroy Command Delete option in Kendo grid based on other column status in Javascript?

Thanks,

Edwin

General Discussions

answered on 10 Jun 2015

2 answers

343 views

Checkbox tick outside of the box

Hi

Would you have an idea why the tick is outside the box.

I use <p>..

See it here: http://prntscr.com/7dxgui

The checkbox is for JOINT_APPLICANT

The view is:

@using PartnerLink.Models

@using Telerik.OpenAccess.SPI

@model TBL_ASSIGNMENT

@section Head

{

<link href="@Url.Content("~/Content/css/AddCase.min.css")" re rel="stylesheet" type="text/css" />

<link href="https://da7xgjtj801h2.cloudfront.net/2015.1.408/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="https://da7xgjtj801h2.cloudfront.net/2015.1.408/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

<link href="https://da7xgjtj801h2.cloudfront.net/2015.1.408/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<script src="https://da7xgjtj801h2.cloudfront.net/2015.1.408/js/jquery.min.js"></script>

<script src="https://da7xgjtj801h2.cloudfront.net/2015.1.408/js/jszip.min.js"></script>

<script src="https://da7xgjtj801h2.cloudfront.net/2015.1.408/js/kendo.all.min.js"></script>

<script src="https://da7xgjtj801h2.cloudfront.net/2015.1.408/js/kendo.aspnetmvc.min.js"></script>

<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

<script src="//cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js" type="text/javascript"></script>

}

@{

Layout = "~/Views/Shared/_EmptyLayout.cshtml";

ViewBag.Title = "Add case";

EntitiesModel entities = new EntitiesModel();

var currentUser = entities.TBL_USERs.FirstOrDefault(u => u.USER_ID == Model.USER_CREATED);

var usersSource = entities.TBL_USERs

.Where(u => u.LEAD_PROVIDER_ID == currentUser.LEAD_PROVIDER_ID)

.Select(u => new UserDropBoxItem

{

UserId = u.USER_ID,

FullName = u.FIRST_NAME + " " + u.SURNAME

})

.ToList();

//usersSource.Add(new UserDropBoxItem() { UserId = "", FullName = "" });

usersSource = usersSource.OrderBy(u => u.UserId).ToList();

var salutations = entities.TBL_SALUTATIONs

.Where(s => !s.OUT_OF_USE)

.Select(s => new SalutationDropboxItem

{

Id = s.SALUTATION_ID,

Salutation = s.SALUTATION

})

.ToList();

salutations.Add(new SalutationDropboxItem() { Id = 0, Salutation = "" });

salutations = salutations.OrderBy(s => s.Id).ToList();

var country = entities.TBL_COUNTRies.Where(w => !w.OUT_OF_USE)

.Select(s => new { ID =s.COUNTRY_ID,

Name=s.COUNTRY}

);

var sourceCodes = entities.TBL_SOURCE_CODEs.Where(w=>!w.OUT_OF_USE)

.Select(s => new TBL_SOURCE_CODE

{

SOURCE_CODE_ID = s.SOURCE_CODE_ID,

SOURCE_CODE = s.SOURCE_CODE

})

.ToList();

}

<div class="all-content-wrapper">

<div class="top-bar">

<div class="title-container">

<h1>Add case</h1>

</div>

<img class="logo" src="@Url.Content("~/Content/Images/logo_300x50.png")" alt=" autodraft" />

</div>

<form action="/CreateCase" method="POST" accept-encoding="UTF" id="AddCaseForm">

<div class="main-content" style="height: 520px; width: 1000px;">

<div class="content-column">

<dl class="listcontent">

<dt><br /><label for="CALL_AGENT_ID">Call Agent <span class="required"> *</span></label></dt>

<dd

>@Html.Kendo().DropDownListFor(m => m.CALL_AGENT_ID).Name("CALL_AGENT_ID").BindTo(usersSource).DataValueField("UserId").DataTextField("FullName").OptionLabel(" ").HtmlAttributes(new { required = "true", validationMessage = "Select Call Agent" })</

dd>

<dt><br /><label for="CALL_AGENT_MANAGER_ID">Call Agent Manager <span class="required"> *</span></label></dt>

<dd

>@Html.Kendo().DropDownListFor(m => m.CALL_AGENT_MANAGER_ID).Name("CALL_AGENT_MANAGER_ID").BindTo(usersSource).DataValueField("UserId").DataTextField("FullName").OptionLabel(" ").HtmlAttributes(new { required = "true", validationMessage = "Select Call Agent Manager" })</

dd>

<dt><br /><label for="CUSTOMER_ADVISOR_ID">Customer Advisor <span class="required"> *</span></label></dt>

<dd

>@Html.Kendo().DropDownListFor(m => m.CUSTOMER_ADVISOR_ID).Name("CUSTOMER_ADVISOR_ID").BindTo(usersSource).DataValueField("UserId").DataTextField("FullName").OptionLabel(" ").HtmlAttributes(new { required = "true", validationMessage = "Select Customer Advisor" })</

dd>

<dt><br /><label for="CUSTOMER_ADVISOR_MANAGER_ID">Customer Advisor Manager <span class="required"> *</span></label></dt>

<dd

>@Html.Kendo().DropDownListFor(m => m.CUSTOMER_ADVISOR_MANAGER_ID).Name("CUSTOMER_ADVISOR_MANAGER_ID").BindTo(usersSource).DataValueField("UserId").DataTextField("FullName").OptionLabel(" ").HtmlAttributes(new { required = "true", validationMessage = "Select Customer Advisor Manager" })</

dd>

<dt><br />@Html.LabelFor(m => m.SOURCE_CODE_ID, "Source Code")</dt>

<dd

>@Html.Kendo().DropDownListFor(m => m.SOURCE_CODE_ID).Name("SOURCE_CODE_ID").BindTo(sourceCodes).DataValueField("SOURCE_CODE_ID").DataTextField("SOURCE_CODE").OptionLabel(" ")</

dd>

<dt></dt>

<dd

>@Html.Kendo().CheckBoxFor(m => m.JOINT_APPLICANT).Name("JOINT_APPLICANT").Label("Joint Applicant").HtmlAttributes(new { style = " left: -5000px" })

@Html.Kendo().CheckBoxFor(m => m.PARTNER_UNAWARE).Name("PARTNER_UNAWARE").Label("Partner Unaware").HtmlAttributes(new { style = " left: -5000px" })

</dd>

</dl>

</div>

<div class="content-column">

<dl class="listcontent">

<dt><br /><label for="FIRST_NAME">First Name <span class="required"> *</span></label></dt>

<dd

>@Html.Kendo().TextBoxFor(m => m.FIRST_NAME).Name("FIRST_NAME").HtmlAttributes(new { required = "true", validationMessage = "Enter First Name" })</

dd>

<dt><br /><label for="SURNAME">Last Name <span class="required"> *</span></label></dt>

<dd

>@Html.Kendo().TextBoxFor(m => m.SURNAME).Name("SURNAME").HtmlAttributes(new { required = "true", validationMessage = "Enter Last Name" })</

dd>

<dt><br />@Html.LabelFor(m => m.MAIDEN_NAME, "Maiden Name")</dt>

<dd>@Html.Kendo().TextBoxFor(m => m.MAIDEN_NAME).Name("MAIDEN_NAME")</dd>

<dt><br />@Html.LabelFor(m => m.SALUTATION_ID, "Salutation")</dt>

<dd

>@Html.Kendo().DropDownListFor(m => m.SALUTATION_ID).Name("SALUTATION_ID").BindTo(salutations).DataValueField("Id").DataTextField("Salutation")</

dd>

<dt><br /><label for="ADDRESS_COUNTRY">Country <span class="required"> *</span></label></dt>

<dd

>@Html.Kendo().DropDownListFor(m => m.ADDRESS_COUNTRY_ID).Name("ADDRESS_COUNTRY_ID").BindTo(country).DataValueField("ID").DataTextField("Name").OptionLabel(" ").HtmlAttributes(new { onchange = "countryChange(this.value);", required = "true", validationMessage = "Select Country" })</

dd>

<dt><br />@Html.LabelFor(m => m.GENDER, "Gender")</dt>

<dd>

@Html.Kendo().RadioButtonFor(m => m.GENDER).Name("GENDER").Label("M").Value('M').HtmlAttributes(new { style = " left: -5000px" })

@Html.Kendo().RadioButtonFor(m => m.GENDER).Name("GENDER").Label("F").Value('F').HtmlAttributes(new { style = " left: -5000px" })

</dd>

</dl>

</div>

<div class="bottom-bar">

<p class="close" style="margin-top: 0px; margin-top: 20px; position: fixed;">CLOSE</p>

<input class="save-and-close" style="margin-top: 20px;" type="submit" value="ADD CASE" onclick="submitClicked()" />

<input type="submit" class="creatingMessage" value="Creating Case..." disabled />

</div>

<a></a>

</form>

</div>

<script>

$(window).ready(function () {

$("p.close").click(function () {

location.pathname = "/";

});

function submitClicked() {

var validator = $("#AddCaseForm").kendoValidator().data("kendoValidator");

var isvalid = validator.validate();

if (isvalid) {

$('.save-and-close').hide();

$('.creatingMessage').show();

$('.close').hide();

}

function countryChange(selcountry) {

var enabled = true;

if (selcountry == 2) {

enabled = false;

$("#JOINT_APPLICANT").attr('checked', false);

$("#JOINT_APPLICANT").attr('disabled', true);

}

else {

$("#JOINT_APPLICANT").removeAttr('disabled');

enabled = $("#JOINT_APPLICANT").is(":checked");

}

</script>

Button

answered on 10 Jun 2015

4 answers

587 views

Selecting rows with mouse drag

I'm unable to select rows using mouse drag when the grid contains 90 or more rows of data. I've modified pre-existing demos that contained 160 rows of data to use the mouse drag select and it worked. So I'm wondering if it has something to do with the grids configuration. Are there any other events firing during the mouse drag select?

Here is how my grid is configured:

$(selector).kendoGrid({
            dataSource: self.eventGridDataSource(url, params, columns),
pageable: false,
            sortable: { mode: "multiple", allowUnsort: true },
            scrollable: true,
            selectable: "multiple row",
            resizable: true,
            columnResize: function (e) {
                var width = e.newWidth;
                var name = e.column.field;
                var colId = e.column.attributes["data-sc-id"];
                console.log('column: ' + name);
                console.log('column width: ' + width);
                EventBuilder.fn.saveColumnInfo.call(this, module, colId, width, 0);
            },
            columns: EventBuilder.fn.gridColumns(columns, true, module),
            editable: {
                mode: "popup",
                window: { title: "Edit Event" },
                template: kendo.template($("#popup-editor").html())
            },
            edit: function (e) {//put into a function
//content removed
            },
            excelExport: function (e) {
                var from = e.sender;
                var cellId = e.sender._cellId;
                var gridName = cellId.substring(0, cellId.indexOf('_'));
                var filename = gridName + ".xlsx";
                e.workbook.fileName = filename;
            }
        });

The grid only has 15 columns.

Grid

answered on 10 Jun 2015