Questions on Kendo UI for jQuery Forum

1 answer

112 views

I have a grid with popup edit, and some custom validation for one of the fields.

The validation message displays correctly, but is constrained by the borders of the popup and requires scrolling. This doesn't look very good - is there a way I can get the message to display on top, outside the popup boundary (the way a tool tip does)?

Another issue is that the 'exclamation' icon at the beginning of the message has the bottom cut off.

The following snippet illustrates the problem. Just edit a row, change the freight value to 1, and click on Update

http://dojo.telerik.com/agEKI

Grid

answered on 13 Aug 2015

1 answer

391 views

Implement Infinite Scrolling in Kendo Grid using Angularjs

I have a kendo grid populated dynamically using AngularJS. I am using web api for populating in my grid locally.
I want to implement infinite scroll in kendo grid using angularjs. There will be remote data service call actually.
Appreciate if someone finds time to guide me how to achieve infinite scrolling in kendo grid using angularjs for remote data service call.
My code for reference is as below:
---dataApp.js---------------
var app = angular.module("app", ["kendo.directives"]);
app.controller("dataController", function ($scope) {
var uri = '';
$scope.LoadLib = function () {
uri = 'api/libs'; //remote service
loadGrid();
}
$scope.LoadProd = function () {
uri = 'api/products'; //remote service
loadGrid();
}
function loadGrid() {
$scope.dataTableSource = new kendo.data.DataSource({
type: "json",
transport: {
read: uri
},

serverPaging: true,
serverFiltering: true
});
$scope.dataTableGridOptions = {
dataSource: $scope.dataTableSource,

height: 550,

pageable: true,
scrollable: true ,

endlessScroll : true
}
}
});
---index.html----------------------------------------------------------------------------------
<!DOCTYPE html>
< html xmlns="http://www.w3.org/1999/xhtml ">
< head>
< title></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/angular.min.js"></script>
< script src="js/dataApp.js" type="text/javascript"></script>
< script src="js/kendo.all.min.js"></script>
< /head>
< body>
< div>
< div ng-app="app" data-ng-controller="dataController">
< button id="loadLib" class="btn btn-primary" type="button" data-ng-click="LoadLib()">Get Lib</button>
< button id="loadProd" class="btn btn-primary" type="button" data-ng-click="LoadProd()">Get Products</button>
< div kendo-grid="dataTableGrid" k-options="dataTableGridOptions" k-rebind="dataTableGridOptions"></div>
< /div>
< /div>
< /body>
---model------
public class lib
    {
public string Name { get; set; }
public string Path { get; set; }
public string DateUpdated { get; set; }
}
--- web api controller----
public class libsController : ApiController
{
        lib[] libs = new lib[]
{
new lib{ Name = "Book1", Path="Path1", DateUpdated=System.DateTime.Now.ToString() },
new lib{ Name = "Book2", Path="Path2", DateUpdated=System.DateTime.Now.ToString() }

        };
public IEnumerable<lib> GetAllLibs()
{
return libs;
}
}
------------model-----------------
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public decimal Price { get; set; }
}
-------web api controller--------
public class ProductsController : ApiController
{
Product[] products = new Product[]
{
new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
};
public IEnumerable<Product> GetAllProducts()
{
return products;
}
}
----------------WebApiConfig.cs-----------------------
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
//To produce JSON format add this line of code
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
}
}

Grid

answered on 13 Aug 2015

1 answer

110 views

Combining grid filters

Hi,

I am trying to write a filter that produces the following :-

SELECT *

FROM [MyTable]

WHERE

(

([StartDate] >= @StartDate AND [EndDate] <= @EndDate )

OR

([EndDate] >= @StartDate AND [EndDate] <= @EndDate )

OR

([StartDate] <= @StartDate AND [EndDate] >= @EndDate )

)

AND ([Status] = @Status)

All attempts so far have failed, could anyone please help?

Data Source

answered on 13 Aug 2015

6 answers

246 views

[Solved] Expand all Button

Hi all,

I'm trying to add an expand/collapse all button in my kendo ui gridview but i couldn't find a way to do it. I've found the method to do it:

this.expandRow(this.tbody.find("tr.k-master-row"));

But I don't know how to add a button in the highlighted area in the attached photo.

Can anyone help me with this?

Thank you in advance!

Grid

answered on 13 Aug 2015

2 answers

405 views

Decimal places

At the following URL: http://demos.telerik.com/kendo-ui/numerictextbox/index

It shows 3 decimal places requested in the code

// create Curerncy NumericTextBox from input HTML element

$("#currency").kendoNumericTextBox({ format: "c", decimals: 3});

However, the display only shows 2.

Changing the decimals in the options seems to have no results in the Dojo.

My actual goal is to have no decimals, how can I do this?

NumericTextBox

answered on 12 Aug 2015

1 answer

149 views

DatePicker theme Issue

Hi All,

Could anyone explain why the right datepicker shows up differently from the left although same scripts were applied? How do I fix it so the right looks like the left?

var today = kendo.toString(kendo.parseDate(new Date()), "MM-dd-yyyy");

$("#dateFrom").kendoDatePicker({
value: today
}
});

TIA,

Steve

DatePicker

answered on 12 Aug 2015

1 answer

140 views

Same Tab Strip Showing Top and Bottom

Hi,

Is it possible to have the Tab Strip displayed both at the top of the page and at the bottom. That way when their is a lot of content in the tab the user doesn;t have to scroll all the way back to the top to change tabs or if the user is at the top they don't have to scroll all the way to the bottom to change tabs.

Thanks.

TabStrip

answered on 12 Aug 2015

5 answers

2.0K+ views

[Solved] Number formatting with variable decimals

Kendo version 2015.2.805

IE10 or Chrome 44

I have a Grid with edit set to Popup, and a template for editing.

The template includes a NumericTextBox

I need to set a format that will show the number of decimals entered, but no more.

So for a value 1.23 it would show 1.23, or a value 1.2345678 would show 1.2345678. But I can't get it to work.

A format of #######0.00000000 is showing 1.23000000 and 1.2345678

A format of #######0.0####### was showing 1.23 and 1.23

A format of ########.######## is showing 1 and 1

A format of #.# is failing to display the page (which normally means a script error).

My code:

<input name="currentExchangeRate" data-role="numerictextbox" data-bind="value:currentExchangeRate" data-decimals="8" data-format="{0:#######0.0#######}" data-min="0" data-spinners="false" />

NumericTextBox

answered on 12 Aug 2015

1 answer

274 views

Kendo functions stops working after event.stopImmediatePropagation

I want to send a HttpPostedFileBase to my controller using Ajax.BeginForm together with the rest of my form.

Because I'm using Ajax I need to tweak my request in order for it to work, (file is otherwise null).

The problem I'm facing is that the kendo functions (multi-selects, file-inputs etc), in my form, doesn't reload/stops working after the content is reloaded with ajax. The script that cause this problem is using

e.stopImmediatePropagation();

which stops all kendo functions for some reason, (no javascript expert here).

MVC VIEW

@(Html.Kendo().MultiSelectFor(x => x.DefaultCategoryModel.CategoryId)

.DataTextField("CategoryName")

.DataValueField("CategoryId")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetCategories", "Shop");

});

})

)

note: It doesn't matter which kendo functions I use, they all stop working.

Script

window.addEventListener("submit", function (e) {

var form = e.target;

if (form.getAttribute("enctype") === "multipart/form-data") {

if (form.dataset.ajax && $(form).valid()) {

e.preventDefault();

e.stopImmediatePropagation();

$('.admin-shop-settings-message-container').remove();

AjaxLoadUp();

var xhr = new XMLHttpRequest();

xhr.open(form.method, form.action);

xhr.onreadystatechange = function () {

if (xhr.readyState == 4 && xhr.status == 200) {

if (form.dataset.ajaxUpdate) {

var updateTarget = document.querySelector(form.dataset.ajaxUpdate);

if (updateTarget) {

updateTarget.innerHTML = xhr.responseText;

}

};

xhr.send(new FormData(form));

}

}, true);

I have tried reloading Kendo script using:

$.getScript("myscript");

inside the if (updateTarget) but that doesn't solve my problem.

Any suggestions? Thank you

General Discussions

answered on 12 Aug 2015

7 answers

806 views

AngularJs k-auto-bind not working properly

I am having a few issues when attempting to bind dropdownlist items on click rather than on init. I am using the AngularJS directives and notice that k-auto-bind="false" is not working as expected. For one, it is ignored unless I manually add a "null" option within the select. Without this option it will bind on init and seemingly ignore the autobind attribute. More importantly, even when adding the option when autobind=false is working, it will not bind the ng-model on init. It will only bind when clicked. Is there no way to bind the model object's value without binding the drop down values??? I can't see any valid use case where somebody would not want the model to bind until clicked:

<select class="kendo-form-control"
ng-model="ngModel"
data-kendo-drop-down-list
data-k-data-text-field="textField"
data-k-data-value-field="valueField"
data-k-data-source="datasource"
data-k-auto-bind="false">
    <option value=null>Select an option...</option>
</select>

$scope.datasource = {
transport: {
read: {
url: myUrl,
type: 'GET',
dataType: 'json'
},
},
schema: {
data: function (data) {
var results = [];
if (data.instances) {
data.instances.forEach(function (instance) {
var newInstance = angular.copy(instance);
delete newInstance.properties;
for (var prop in instance.properties) {
newInstance[prop] = instance.properties[prop];
}
results.push(newInstance);
});
}
else {
results = data;
}
return results;
}
}
};
}
Thanks!

DropDownList

answered on 12 Aug 2015