Questions on Kendo UI for jQuery Forum

5 answers

597 views

Wrong binding in grid when using same property name

Hello Telerik team,

thank you for your work and support so far.

We have a blocking problem when binding our data to a grid.

The problem is that while the data is initially correctly bound when calling kendo.bind ; the wrong model field is then used when adding new data to the grid data source. This occurs because the grid data source properties name are the same of the model root property names.

I have reproduced the problem in the following dojo : http://dojo.telerik.com/OnuZA

You can see in the previous example that the data is correctly bound initially.
When you enter a new record in the grid it affects the root of the view model and not the array where the data source is bound !

Is it the desired behavior ? If not have you a way to fix this problem until it get fixed in a next release ?

Thank you !

MVVM

answered on 02 Mar 2017

10 answers

495 views

Determine if in line editing has cell open and invalid

Hi,

I have a grid with inline editing. Outside of the grid is a submit button. When clicking submit I want to check that editing is complete and valid before making the ajax call. For example, the user adds a new row, one of the fields is required, but before filling it in the user clicks Submit. How can I determine that the current edit cannot be completed as the row is invalid and hence cancel the submit allowing the user to fix the validation error?

Thanks,

Scott

Grid

answered on 02 Mar 2017

5 answers

2.1K+ views

ToDataSourceResult distinct values

How can the results from ToDataSourceResult be reduced down to distinct unique values?

An example of what we are doing is that we have a dropdownlist that lets a user choose a car make.

We then render the users who have ever owned a car of that make in a datagrid.

We accomplish this by adding a filter to the datasource for the car make that was selected. Similar to:

filter.push({ field: "CarMake", operator: "equals", value: document.getElementById("fieldCarMake").value });

The call to the controller is essentially:

public JsonResult ResourceLookupGet([DataSourceRequest] DataSourceRequest request)

{

return Json(DataContext.UserCars.Select(s => new { Id = s,Id, Name = s.Name}).ToDataSourceResult(request));

}

Where the view "UserCars" has a record with the Users Id, Name, and the Car Make and Model they have driven. Example:

10, Bob Smith, Ford, Mustang

10, Bob Smith, Chevrolet, Corvette

10, Bob Smith, Ford, Pinto

11, Fred Jones, Chevrolet, Corvette

11, Fred Jones, Chrysler, Avenger

12, Jane Doe, Ford, Mustang

12, Jane Doe, Ford, Escort

So, if someone selects "Ford", the filter ["CarMake" EQ "Ford"] is in the "request" instance, and ToDataSourceResults(request) will return:

10, Bob Smith, Ford, Mustang

10, Bob Smith, Ford, Pinto

12, Jane Doe, Ford, Mustang

12, Jane Doe, Ford, Escort

What we want to return in the Json is:

10, Bob Smith

12, Jane Doe

What is the recommended method to accomplish this?

Data Source

answered on 02 Mar 2017

6 answers

1.6K+ views

Kendo Chart Marker on Hover

We have a multi plot line chart where we have default circle markers with white background, which works fine. But when 2 plots intersect at a point hovering to find the correct tooltip is a problem.So we can with the design to stop showing the marker circles and a show a horizontal dotted line moving with the mouse. When we come upon a category axis label 3 bubbles/dots corresponding to the three plots should appear on it, not on the series plot itself (as 2 plots are coinciding). They should appear at fixed height intervals and on hover should how a bubble glow effect and the corresponding tooltip should come. Now can this be done.

As far I have seen through kendo only markers on plots can be zoomed or changed on hover (no effects), also they will stay on the plot line (meaning in our case 2 markers will coincide). Also is there a vertical hover line.

I am attaching an image made in another tool for reference.

Charts

answered on 02 Mar 2017

1 answer

971 views

TabStrip change selected index after event completion

Hello, I have a Tabstrip with the event 'Activate'. When a user clicks a tab on the tabstrip, the activate event fires. During this time I am determing whether the tabstrip will continue on its merry way to allow a user to access to the tab they clicked, or deny them and specify the tab they need to go to.

My issue is with the tabstrip.select( ) method. I can specify the tabstrip to be positioned with tabstrip.select( <int> ), but this only works the first time using the 'Activate' listener. It does not work at all with show or select.

I have modified a Kendo Dojo to give an example. What should be happening is upon Tab 1 being selected, the Tabstrip should force the user back to Tab 2. The tabstrip doesn't seem to be doing this at all.

http://dojo.telerik.com/iJolu

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>

<div id="tabStrip">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div>Content 1</div>
<div>Content 2</div>
</div>

<script>
// event handler for activate
var onActivate = function(e) {
// access the activated item via e.item (Element)
var ts = $("#tabStrip").kendoTabStrip().data('kendoTabStrip');
debugger;
switch ($(e.item).find(".k-link").text().trim()) {
case "Tab 1":
ts.select(1);
debugger;
break;
}
// detach activate event handler via unbind()
tabStrip.unbind("activate", onActivate);
};

// attach activate event handler during initialization
var tabStrip = $("#tabStrip").kendoTabStrip({
show: onActivate
}).data("kendoTabStrip");
</script>
</body>
</html>

TabStrip

answered on 02 Mar 2017

1 answer

204 views

Grid filter and group field datetime

Hello,

How can I filter and group by field type date, excluding time, only by day/month/year ?

Thanks

Grid

answered on 02 Mar 2017

1 answer

606 views

How to populate Dropdownlist in Grid ClientTemplate code?

I am trying to use a ClientTemplate containing a DropDownListFor in a grid. My ClientTemplate code is as follows:

@(Html.Kendo().DropDownListFor(m => m)
.DataValueField("Value")
.DataTextField("Text")
.Name("PurchaseAgreementType")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "PO Only",
Value = "PO Only"
},
new SelectListItem() {
Text = "Contract Based",
Value = "Contract Based"
}
}))

the column in the grid is shown here:

columns.Bound(l => l.PurchaseAgreementType).ClientTemplate("#=PurchaseAgreementType.Value#").Width(150);

This results in the following error: Uncaught TypeError: Cannot read property 'Value' of null

However if I copy/paste the code in the client template directly onto my form, it works perfectly.
How can I get this to work in my grid? It seems that the DDL is not populating.

Thanks.

DropDownList

answered on 02 Mar 2017

1 answer

69 views

Columns aggregates disable column title

Why setting up column's aggregates are disabling column's title?

Example in attached image.

Grid

answered on 02 Mar 2017

1 answer

171 views

Leading backslash breaks adding a new item

Using the following:
Kendo UI: 2016.3.1202
Angular: 1.5.8
Chrome: 56.0.2924.87

I added a dropdownlist as specified in https://demos.telerik.com/kendo-ui/dropdownlist/addnewitem with the exception of adding the addNew function into the kendo template.

<script id="noDataTemplate" type="text/x-kendo-tmpl">

<div>

No data found. Do you want to add new item - '#: instance.filterInput.val() #' ?

</div>

<br/>

<button class="k-button" onClick="addNew('#: instance.element[0].id #', '#: encodeURI(instance.filterInput.val()) #');">Add new item</button>

<script>

function addNew(widgetId, value) {

debugger;

var widget = $("\\#" + widgetId).getKendoDropDownList();

var dataSource = widget.dataSource;

dataSource.add({

categoryID: 0,

categoryName: value

});

dataSource.one("sync", function() {

widget.select(dataSource.view().length - 1);

});

dataSource.sync();

};

</script>

I’m having two issues:

1) When clicking the add new button, the drop down shrinks to be just the 'test' item forcing the user to manual select test. This is not how the demo works, it automatically selects the new entry and closes the dropdown. (see adding_new_item(2-3) pngs) What am I doing wrong here?

2) When a user adds a leading backslash (e.g. \test ) to the ‘add new’ input the ‘add new’ flow breaks i.e. the ‘test’ gets added to the datasource but the UI just stops running; the ‘add new‘ prompt never closes. (see adding_new_item_backslash.png)

Adding the “debugger;” directly above ‘var widget’ allows me to break within the template and step through the code. Despite breaking in this code I can’t figure out why the UI stop running as the script seems to run to completion. Also of note once I’m stepping through the code I noticed that widget.select(dataSource.view().length - 1); always equals -1

DropDownList

answered on 02 Mar 2017

1 answer

206 views

Leading backslash breaks adding a new item

Using
Kendo UI: 2016.3.1202
Chrome: 56.0.2924.87
Angular: 1.5.8
Implemented a dropdownlist as specified in https://demos.telerik.com/kendo-ui/dropdownlist/addnewitem with the exception of placing my addNew() in the Kendo template.

<script id="noDataTemplate" type="text/x-kendo-tmpl">

<div>

No data found. Do you want to add new item - '#: instance.filterInput.val() #' ?

</div>

<br />

<button class="k-button" onClick="addNew('#: instance.element[0].id #', '#: encodeURI(instance.filterInput.val()) #');">Add new item</button>

<script>

debugger

function addNew(widgetId, value) {

var widget = $("\\#" + widgetId).getKendoDropDownList();

var dataSource = widget.dataSource;

dataSource.add({

categoryID: 0,

categoryName: value

});

dataSource.one("sync", function() {

widget.select(dataSource.view().length - 1); //

});

dataSource.sync();

};

</script>

While using the new "add new item" feature, if a user types in a leading back slash (e.g. \test ) the flow of the add new functionality breaks. I can add the 'test' to the widget but the UI never sets the selected value to test, just appears blank. Adding a 'debugger;' directly above datasource.one allows me to break within this code

DropDownList

answered on 02 Mar 2017