Questions on Kendo UI for jQuery Forum

2 answers

311 views

The title for this issue is difficult to describe. Basically here is what we are doing.

1. Using MVVM to bind two search boxes that filter data in a kendo.data.DataSource. The filtering is by setting simple filters on the data source

2. The dataSource is bound to a table (not grid)

3. Each row contains a remove button

With no filters in place the remove operation works correctly. However with any filter applied I can only remove the first item in the list. However it is actually removing the first item in the datasource regardless of the filters, any other items cause an error 'Cannot read property 'kendoBindingTarget' of undefined'. Its hard to understand but if you checkout this jsfiddle

http://jsfiddle.net/habk2b5p/7/

I have simulated a very cut down version of the trial. Basically to use try filter by one or both of the options. (Min 3 characters before filter), once filtered try and remove items. Place close attention to the 'Id' column that you remove as you will see that it actually wont remove the item you selected unless the item selected is id 1 (the first item in the data source).

Any help would be greatly appreciated.

Data Source

answered on 13 Aug 2015

1 answer

115 views

Custom validation display

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

398 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

116 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

251 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

413 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

151 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

145 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

284 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");

});