Questions on Kendo UI for jQuery Forum

1 answer

1.1K+ views

ComboBox PlaceHolder change dynamically.

Hello,

I want to change ComboBox placeholder dynamically if there is no data return from api.

<!DOCTYPE html><html><head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /><script src="js/jquery.min.js"></script><script src="js/kendo.all.min.js"></script></head><body><div id="example"><div class="demo-section k-content"><h4>Find a product</h4><input id="products" style="width: 100%;" /><div class="demo-hint">Hint: type at least three characters. For example "che".</div></div><script> $(document).ready(function() { $("#products").kendoComboBox({ placeholder: "Select product", dataTextField: "ProductName", dataValueField: "ProductID", filter: "contains", autoBind: false, minLength: 3, dataSource: { type: "odata", serverFiltering: true, transport: { read: { url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",}}}});});</script></div></body></html>

if Above url not return any data then I want to change my Placeholder to "Try Again".

ComboBox

answered on 19 Mar 2019

6 answers

198 views

Scheduler CRUD ops all want to use 'GET' type

I'm having an issue with an instance of the kendoScheduler. What's going on is, all crud operations, in addition to read, seem to want to use the 'get' type. I'm using the code from the demo on this site. So I figured, OK, I'll just add in the type: 'put', say for for update method. Still doesn't work.

On the other side of things, I'm using web api and I have all my different actions in the controllers, say, we're dealing with the update one only here - I have the [httpPut] attribute on top of the action. And I'm getting the 405 method not allowed error.

Playing around, on the client side of things, I changed the updates type, to get, and add [httpGet] to the controller (even though this clearly isn't what I want here) - when I debug this, it finds the respective action, but the model is null.

What's going on when I have httpput on the controller and why on the front end is all crud operations trying to use a get?

Thanks.

Scheduler

answered on 19 Mar 2019

1 answer

441 views

How to display real axis point in category axis label and in tooltip

Hello,

I have a chart for which I added 2 series with a date category field. The step used for the categories are 1 hour. However my data begin on 00:45 and ended on 9:45.
I would like to be able to display 00:45 , 01:45 ,02:45 etc.. On my categories axis label. Most importantly, I would also like to be able to display the real point using a tooltip template

I have tried a couple of things but It never worked how I intended it to work.
I've noticed that using a tootltip template like :

tooltip: {

visible: true,

template: "#= '<b>' + dataItem.date + '</b>' #"

}

I was able to get the real x coordinnates (00:45, 01:45 etc..)

But When I use something like that:

tooltip: {

visible: true,

template: function(e){

return e.category;

}

I'm not getting the real axis point.

In each case I didn't find any parameter in "e" that represent the real axis date point.

Here's an example of what I'm talking about:example

I would also state that I wanted to used the same kind of template in order to display the categories labels.

So in summary What I want is to be able to get the real points using tooltip template and categoryAxis label template in the form of a javascript function.

Any help will be appreciated.

Regards

Charts

answered on 19 Mar 2019

5 answers

274 views

Tab Navigation causing a console error

Hello,

I am currently utilizing the JQuery Kendo UI Grid (v2018.3.1017) with keyboard navigation and editing. I have noticed that when utilizing the tab key navigation abilities with the if you are on the last column of a row, a console error will be thrown on the tab key press, and navigation does not continue to the next row.

After digging into the kendo grid source code, I found that the cause seems to be that the hierarchy cell is actually being selected by the navigation logic, and the editCell method is being fired on this cell. Which leads to the console error in the attached image.

I found that the cause for this seems to revolve around the _tabNext method, which is using a selector (DATA_CELL) that is incorrect. The selector (:not(.k-group-cell):not(.k-hierarchy-cell:not(:has(.k-icon.k-i-collapse,.k-icon.k-i-expand))):visible) does not properly ignore hierarchy cells.

We have fixed this issue in our logic by overwriting the selector with the following selector (td:not(.k-group-cell):not(.k-hierarchy-cell):visible).

We have not yet upgraded to the 2019 version of the Kendo UI Grid, so I'm not sure if this issue has been addressed or not, but wanted to make your team aware of it.

Grid

answered on 19 Mar 2019

8 answers

669 views

Scheduler on .NET MVC is not working

Hi, I'm implementing a Scheduler in .NET using MVC. The scheduler runs on top of Jquery. But my code is not working. I needed to try if I can use my own data, so I wrote my own controller method to retrieve data from a database and return it in JSON and not JSONP since it's all running on the same host. My view is as follows.

Index.cshtml
@{
    ViewBag.Title = "Index";
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kendo-ui-core/2014.1.416/js/kendo.timezones.min.js"></script>
<h2>Index</h2>
<div id="example">
    <div id="team-schedule">
        <div id="orders">
            <input checked type="checkbox" id="order1" aria-label="Order 1" value="200023">
            <input checked type="checkbox" id="order2" aria-label="Order 2" value="200027">
            <input type="checkbox" id="order3" aria-label="Order 3" value="200033">
        </div>
    </div>
    <div id="scheduler"></div>
</div>
@section SchedulerScripts{

        <script>
            $(document).ready(function() {
                $("#scheduler").kendoScheduler({
                    date: new Date("2013/6/13"),
                    startTime: new Date("2013/6/13 07:00 AM"),
                    height: 600,
                    views: [
                        "day",
                        { type: "workWeek", selected: true },
                        "week",
                        "month",
                        "agenda",
                        { type: "timeline", eventHeight: 50}
                    ],
                    timezone: "Etc/UTC",
                    dataSource: {
                        batch: true,
                        transport: {
                            read: {
                                url: "http://localhost:51329/Scheduler/SchedulerJSONData",               //This is the URL to retrieve my JSON data. Scheduler is the //controller where the SchedulerJSONData method is implemented.
                                dataType: "json"
                            },
                            parameterMap: function(options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {models: kendo.stringify(options.models)};
                                }
                            }
                        },
                        schema: {
                            model: {
                                id: "orderId",
                                fields: {
                                    orderNo: { from: "ORDER_NO" },
                                    releaseNo: { from: "RELEASE_NO" },
                                    operationNo: { from: "OPERATION_NO" },
                                    start: { type: "date", from: "OP_START_DATE" },
                                    end: { type: "date", from: "OP_FINISH_DATE" },
                                    description: { from: "OPERATION_DESCRIPTION" },
                                }
                            }
                        },
                        filter: {
                            logic: "or",
                            filters: [
                                { field: "orderNo", operator: "eq", value: '200023' },
                                { field: "orderNo", operator: "eq", value: '200027' },
                                { field: "orderNo", operator: "eq", value: '200033' },
                            ]
                        }
                    },
                    resources: [
                        {
                            field: "orderNo",
                            title: "Order",
                            dataSource: [
                                { text: "Order 1", value: '200023', color: "#f8a398" },
                                { text: "Order 2", value: '200027', color: "#51a0ed" },
                                { text: "Order 3", value: '200033', color: "#56ca85" }
                            ]
                        }
                    ]
                });
                $("#orders :checkbox").change(function(e) {
                    var checked = $.map($("#orders :checked"), function(checkbox) {
                        return parseInt($(checkbox).val());
                    });
                    var scheduler = $("#scheduler").data("kendoScheduler");
                    scheduler.dataSource.filter({
                        operator: function(task) {
                            return $.inArray(task.orderNo, checked) >= 0;
                        }
                    });
                });
            });
        </script>

    }

My controller method to retrieve data from the database is as follows.

public ActionResult SchedulerJSONData() {
            con.Open();                                                         //con is my database connection string.
            OleDbDataAdapter oda = new OleDbDataAdapter("SELECT ORDER_NO, RELEASE_NO, OPERATION_NO, OP_START_DATE, OP_FINISH_DATE, OPERATION_DESCRIPTION FROM SHOP_ORDER_OPERATION_TAB where ORDER_NO='200023' OR ORDER_NO='200027' OR ORDER_NO='200033'", con);
            DataTable dt = new DataTable();
            oda.Fill(dt);
            string JSONString = string.Empty;
            JSONString = JsonConvert.SerializeObject(dt);
            return Json(JSONString, JsonRequestBehavior.AllowGet);
        }

This method returns the JSON data correctly, but when I plug the URL in bold above to retrieve the JSON in the scheduler, it doesn't work. Can anyone figure out what I have done wrong?

Scheduler

answered on 19 Mar 2019

1 answer

104 views

Access filter text from template?

I'd like to highlight the text a user has typed in any matching elements from the filtered list. I don't see any arguments available to the template function that indicate this. Am I overlooking something?

MultiColumnComboBox

answered on 19 Mar 2019

1 answer

255 views

DropDownTree Select Event

Is the Select event supported with the MVVM DropDownTree? When I modify the example for the MVVM DropDownTree, it doesn't fire

<input

data-role="dropdowntree"

data-text-field="text"

data-value-field="id"

data-bind="value: selectedProduct, source: products, events: { change: onChange, select: onSelect }" />

Added to viewModel:

onSelect: function() {

kendoConsole.log("event :: Select");

},

MVVM

answered on 19 Mar 2019

3 answers

204 views

Can't perform CRUD operations

Hello,

I'm trying to use kendo grid with angularjs and webApI

From days of typing and searching I want to understand why when posting I get all field as null parameters

I'm still don't understand kendo grid very well

so, I appropriate any help..

Model:

public class EmployeesInfo
{
public EmployeesInfo() { }

//[Required]
public int ID { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public int Phone { get; set; }
public string Job { get; set; }
public string Department { get; set; }
}

View:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Try</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">

<script src="http://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.7/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.aspnetmvc.min.js"></script>

</head>
<body>
<div id="example" ng-app="KendoDemos">
<h3 style="font-style:italic;color:#F35800"> Information </h3>
<br />

<div ng-controller="MyCtrl">
<kendo-grid
k-options="mainGridOptions"
k-data-source="DS"
k-on-change="onChange(kendoEvent)"
k-on-save="onSave(kendoEvent)"
k-selectable="true">
</kendo-grid>

</div>
</div>

<script>

var app = angular.module("KendoDemos", ["kendo.directives"]);
app.controller("MyCtrl",
function($scope) {
$scope.DS = new kendo.data.DataSource({
transport: {
contentType: "application/json",
read: {
url: "/api/EmployeesInfoes",
dataType: "json",
type: "GET"
},
update: {
url: "/api/EmployeesInfoes/PutEmployeesInfo",
dataType: "json",
type: "PUT"
},
destroy: {
url: "/api/EmployeesInfoes/DeleteEmployeesInfo",
dataType: "json",
type: "DELETE"

},
create: {
url: "/api/EmployeesInfoes/PostEmployeesInfo",
dataType: "json",
type: "POST"

},
parameterMap: function(options, operation) {
if (operation !== "read") {
console.log(kendo.stringify(options.models));
console.log(JSON.stringify(options.models));
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 8,

schema: {

model: {
id: "ID",
fields: {
ID: { editable: false, nullable: false, type: "number" },
Name: { editable: true, nullable: false,type: "string", validation: { required: true } },
}

}
}

});

// $scope.onSave = function (e,) {

// Disable the editor of the "id" column when editing data items
// console.log(e);

// }

//$scope.onChange = function(e) {
// alert("on change");
//};

$scope.mainGridOptions = {
dataSource: $scope.DS,
// dataBound:function(e){
// $('.k-grid-add').unbind("click");

// $('.k-grid-add').bind("click", function() {
// console.log("Handle the add button click");

// });
//},
toolbar: ["create"],
columns: [
{ field: "ID", title: "ID", width: "180px" },
{ field: "Name", title: "Name", width: "180px" },
{ field: "Age", title: "Age", width: "180px" },
{ field: "Phone", title: "Phone", width: "180px" },
{ field: "Job", title: "Job", width: "180px" },
{ field: "Department", title: "Department", width: "180px" },
{ command: ["edit", "destroy"], title: "Actions", width: "250px" }
],
editable: "popup",
pageable: true,
filterable: { mode: "row" },

};

});

</script>
</body>
</html>

Controller:

public class EmployeesInfoesController : ApiController
{
private DetailGridContext db = new DetailGridContext();

// GET: api/EmployeesInfoes

public IQueryable<EmployeesInfo> GetEmployees() {
return db.Employees;
}

// GET: api/EmployeesInfoes/5
[ResponseType(typeof(EmployeesInfo))]
public async Task<IHttpActionResult> GetEmployeesInfo(int id)
{
EmployeesInfo employeesInfo = await db.Employees.FindAsync(id);
if (employeesInfo == null)
{
return NotFound();
}

return Ok(employeesInfo);
}

// PUT: api/EmployeesInfoes/5
[ResponseType(typeof(void))]
public async Task<IHttpActionResult> PutEmployeesInfo(int id, EmployeesInfo employeesInfo)
{
if (!ModelState.IsValid)
{

return BadRequest(ModelState);
}

if (id != employeesInfo.ID)
{
return BadRequest();
}

db.Entry(employeesInfo).State = EntityState.Modified;

try
{
await db.SaveChangesAsync();
}
catch (DbUpdateConcurrencyException)
{
if (!EmployeesInfoExists(id))
{
return NotFound();
}
else
{
throw;
}
}

return StatusCode(HttpStatusCode.NoContent);
}

// POST: api/EmployeesInfoes
[ResponseType(typeof(EmployeesInfo))]
public async Task<IHttpActionResult> PostEmployeesInfo
([FromBody]EmployeesInfo employeesInfo)
{
if (!ModelState.IsValid) {

return BadRequest(ModelState);

}

db.Employees.Add(employeesInfo);
await db.SaveChangesAsync();

return CreatedAtRoute("DefaultApi", new { id = employeesInfo.ID }, employeesInfo);
}

// DELETE: api/EmployeesInfoes/5
[ResponseType(typeof(EmployeesInfo))]
public async Task<IHttpActionResult> DeleteEmployeesInfo(int id)
{
EmployeesInfo employeesInfo = await db.Employees.FindAsync(id);
if (employeesInfo == null)
{
return NotFound();
}

db.Employees.Remove(employeesInfo);
await db.SaveChangesAsync();

return Ok(employeesInfo);
}

protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}

private bool EmployeesInfoExists(int id)
{
return db.Employees.Count(e => e.ID == id) > 0;
}
}

Grid

answered on 18 Mar 2019

6 answers

3.3K+ views

Kendo grid returning null values in my model on Web API end

Hi, I'm having an issue with my Kendo Grid where when the update event hits my web api controller, the model is showing but all the values are null or 0. I've done this months back with another company and I got it working just fine, but this time around, it's not working.

Here's the relevant snippet on the controller end (and yes, it's hitting right correct controller).

1.[HttpPut]

2.[ResponseType(typeof(spLineItemsGetAllForOrder_Result))]

3.[Route("Orders/UpdateLineItems")]

4.public int UpdateLineItems([FromBody]spLineItemsGetAllForOrder_Result models)

5.{

Even without line 2, the responseType, still doesn't change anything. A long time ago, when we were first having this problem with another company, the key factor was to place the [FromBody] attribute in there. I did that, doesn't help here.

Here's my JS for the grid.

01.$(document).ready(function () {

02. var crudServiceBaseUrl = "http://localhost:56291/",

03. dataSource = new kendo.data.DataSource({

04. transport: {

05. read: {

06. url: crudServiceBaseUrl + 'Orders/GetLineItemsForOrder/' + Cookies.get("ponum"),

07. dataType: "json",

08. type: 'GET',

09. contentType: 'application/json; charset=utf-8'

10. },

11. create: {

12. url: crudServiceBaseUrl + 'Orders/InsertLineItems/' + Cookies.get("ponum"),

13. dataType: "json",

14. type: 'POST',

15. contentType: 'application/json; charset=utf-8'

16. },

17. update: {

18. url: crudServiceBaseUrl + "Orders/UpdateLineItems",

19. dataType: "json",

20. type: "PUT",

21. contentType: 'application/json; charset=utf-8'

22. },

23. destroy: {

24. url: crudServiceBaseUrl + 'Orders/DeleteLineItem/',

25. datatype: "json",

26. type: 'DELETE',

27. contentType: 'application/json; charset=utf-8'

28. },

29. parameterMap: function (options, operation) {

30. if (operation !== "read" && options.models) {

31.

32. return { models: kendo.stringify(options.models) };

33.

34. }

35. }

36. },

37. batch: true,

38. pageSize: 20,

39. schema: {

40. model: {

41. id: "LineItemPK",

42. fields: {

43. LineItemPK: { editable: false, nullable: true },

44. Quantity: { editable: true, type: "number", format: "{0:d}" },

45. UnitPrice: { editable: true, type: "number", format: "{0:c2}" },

46. ExtPrice: { editable: false, type: "number", format: "{0:c2}" },

47. ProductFK: { editable: true },

48. ProductID: { editable: true },

49. UoM: { editable: true },

50. InvoiceNum: { editable: true },

51. DepFunction: { editable: true },

52. CostCenterFK: { editable: false },

53. AccountFK: { editable: false },

54. OrderFK: { editable: false }

55. }

56. }

57. }

58. });

59.

60. $("#gridLineItems").kendoGrid({

61. dataSource: dataSource,

62. navigatable: true,

63. pageable: true,

64. toolbar: [{ name: "create", text: "Insert Line" }, { name: "cancel" }, { name: "save" }],

65. columns: [

66. { field: "LineItemPK", title: "LineItemPK", hidden: true },

67. { field: "Quantity", title: "Qty", validation: { min: 0 } },

68. { field: "UnitPrice", title: "Unit Price", validation: { min: 0 } },

69. { field: "ExtPrice", title: "Ext. Price", editable: false, attributes: { "class": "ExtPrice" } },

70. { field: "ProductFK", title: "Product FK" },

71. { field: "ProductID", title: "Product ID" },

72. { field: "UoM", title: "UoM" },

73. { field: "InvoiceNum", title: "Invoice #" },

74. { field: "DepFunction", title: "Dep. Funct." },

75. { field: "CostCenterFK", title: "Cost Center", hidden: false },

76. { field: "AccountFK", title: "G/L" },

77. { field: "OrderFK", title: "OrderFK", editable: false, hidden: true },

78. { command: "destroy", title: " ", width: 120 }

79. ],

80. editable: true,

81. selectable: true

82. });

83.

84.});

So, this is driving me nuts. I've been playing a lot in the parametermap, such as changing the kendo.stringify to a JSON one, because that worked at my last place...doesn't work here. I then did this, in the model, just for kicks...


01.var models = {
02.    Quantity: 2,
03.    UnitPrice: 15.00,
04.    ExtPrice: 25.00,
05.    BackOrdered: 0,
06.    Received: 0, 
07.    InvoiceNum: "IT-101",
08.    AccountFK: 2,
09.    DepFunction: "test dep function",
10.    CostCenterFK: 34,
11.    ProductFK: 2,
12.    OrderFK: 65,
13.    LineItemPK: 3
14.};
15.return JSON.stringify(models);

And that actually brought that "model" over to the web api end with the correct values, however, hard coded.

In my webapiconfig.cs, my Register method is this.


01.public static void Register(HttpConfiguration config)
02.{
03.    // Web API configuration and services
04.    config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
05.    // Web API routes
06.    config.MapHttpAttributeRoutes();
07. 
08.    config.Routes.MapHttpRoute(
09.        name: "DefaultApi",
10.        routeTemplate: "api/{controller}/{id}",
11.        defaults: new { id = RouteParameter.Optional }
12.    );
13.     
14.}

On line 4, I did change that to, config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/json")); And still, no dice.

I strongly feel it's something on the front end, because when I hard coded that model, the values came over, there's communication - but when I remove it, zilch. I'm hoping someone can help because I've been pulling my hair out on this one. I'm sure it's a matter of me hitting the right combination of stuff.

Thanks in advance.

Grid

answered on 18 Mar 2019

1 answer

6.5K+ views

Kendo Grid build columns dynamically

Hi there,

I have an array with the list of column names, that needs to be displayed in the grid.

So, while initializing the grid, I need to loop through each column in the datasource - and if that column is present in the Array, then I need to display it.

For example,

var ColumnNames = ["col1","col3"];

var dataSource = [{"col1": "a", "col2": "1", "col3": "11","col4": "1111"}, {"col1": "b", "col2": "2", "col3": "22","col4": "2222"}, {"col1": "c", "col2": "3", "col3": "33","col4": "3333"}, .....]

The grid should display only with the columns present in the array. Here, as shown below:

col1 col3

---------------

a 11

b 22

c 33

.......

The ColumnNames Array and dataSource actually comes from DB, based on the user selection. So, I can not hardcode column names. I tried various options (using column templates, foreach loops for building the model, etc) , but facing one or the other issue. Can someone help me out on this please?

Thanks in advance!

Regards

Neelima

Grid

answered on 18 Mar 2019