Questions on Kendo UI for jQuery Forum

1 answer

377 views

Below find my code. I am using MVVM to initate a range-slider. It appears that when the page loads, both knobs are to the left most side, instead of one at the min and one at the max.

Please note: sometimes when the page loads, the knobs are positioned correctly.

Please advise.

<script type="text/x-kendo-template" id="filterAgeTemplate">

<div class="item--agerange">

<div class="agerange-wrap">

<div

data-role="rangeslider"

data-small-step="1"

data-large-step="10"

data-min="1"

data-max="100"

data-bind="value: ageRange, events: { change: vm_onAgeSelectorChange }" id="panel-filter__agerange" style="width:160px">

<input />

</div>

<div class="agerange-title">Age Range</div>

</div>

<div class="agerange-btns ">

<button class="button button__gray-outline"><span>Reset</span></button>

</div>

</script>

Slider

answered on 22 Aug 2017

8 answers

1.3K+ views

Kendo PanelBar default SELECT/CLICK behavior

Hi
I have a certain requirement to work with Kendo Panelbar.
I have a panelbar with around 7 items in it and the default behavior of panelbar is to click on panel to open the section. I want to block this functionality and would like to open panels with the click of my own PREV/NEXT buttons inside each panel. It is like a wizard and user should follow NEXT button clicks to keep on going to next panels instead of clicking on any panel to open it. SO I would like to restrict user to just get to the next panel following a wizard sequence.
Any idea how to do it because I dont find any way to block the user from opening up a panel by clicking on it.
I'd appreciate your help
Thanks
Rizwan

PanelBar

answered on 22 Aug 2017

3 answers

405 views

Kendo UI for Angular - grid data preview from a second dataService

Hello,
I have the same issue like THIS. Edsel Garcia helped me last time. This time I have to implement it in Kendo UI for Angular.
I saw a question in stackoverflow, but there is no activity.
The idea is that a have a grid with some data from dataService1. It has a column "Contract_id". There is a second dataService2 where the "Name" of this "Contract_id" is and I want to preview the Name in the browser. The only way to attach another [data] to the kendo-grid I found was with kendo-dropdownlist, but currently I dont need a dropdownlins.

Can you show me some example or give me some documents to read.

Grid

answered on 22 Aug 2017

2 answers

555 views

Grid in Angular 2, how to use methods?

How do I, for example, programatically call the method addRow listed here?

http://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-methods

I can't find it explained anywhere for any of the components...

Grid

answered on 22 Aug 2017

1 answer

143 views

Dot(.) not as a decimal placeholder

I need to have a mask in the following format: 0000.00.00 where the dot(.) should not act like a decimal placeholder, even with the clearPromptChar

setted to true and promptChar with " " value, after the field lose his focus the decimal placeholder is shown.

What I need:

If user types: 1234 - Expected: 1234 - Actual: 1234. .

If user types: 12345 - Expected: 1234.5 - Actual: 1234.5 .

Is this feature available in mask option? it exposes any function where i should format by myself?

MaskedTextBox

answered on 22 Aug 2017

2 answers

291 views

data.inverseColor in event template

I have custom event templates in my kendo scheduler, and noticed that in the template, the data variable gives you access to the event and all its fields, and one of them is inverseColor, which lets you know if the color was inversed because the background color of the event was too light/dark.

My issue is, when users base colors on a multi-select, where they can have multiple options selected, I manually change the event background color to the first selected option, otherwise the scheduler doesn't know what to do with multiple colors for one event.

When I manually change the background-color, it breaks whatever is determining inverseColor in the template... So really light colors will have white font (because default color if the scheduler can't find anything to color it is gray, which I set up).

Is there a way to trigger inverse color on event templates so that even if I manually change the background color, it will recalculate that and change the font color accordingly?

Scheduler

answered on 21 Aug 2017

7 answers

3.1K+ views

How to pass string value to javascript function on grid using ClientTemplate? (MVC)

I am attempting to use the code below to call a javascript function for each grid element, but i am having trouble rendering the required quotes to deal with the function parameters:

This code:

columns.Bound(p => p.OrderName).ClientTemplate(

"<a onclick='showOrderDetail('#= OrderName #')' href='\\#'>#= OrderName #</a>"

).Title("Order Name").Width(150);

renders incorrectly as shown below with a mix of a double quote and single quote on the parameter

<a onclick="showOrderDetail(" OrderXYZ')'="" href="#">OrderXYZ</a>

Any ideas on how to get the proper single quotes around this variable?

Grid

answered on 21 Aug 2017

3 answers

2.0K+ views

How to lock/disable/readonly spreadsheet cells?

Spreadsheet is a nice addition to the Kendo UI framework.

After running the samples and reading the documentation, I could not find a way to lock cells and prevent user changes especially to protect formulas. Frozen rows and columns do not seem to achieve the same. Take the demos and consider the invoice, would you implement it as a spreadsheet if you could not lock the tax rate and total?

If there is a way to lock cells, please advise, otherwise please implement before RTM.

Spreadsheet

answered on 21 Aug 2017

3 answers

2.3K+ views

How can I listen to the click event of kendo filter grid

Hi,

I have a grid and it has filter with different filterable operators. Now when I click the filter and apply a condition, there is a server side filtering happening and results are shown.

Now when I do a second level filter on a column , I need to restrict the operator of that filterable column. To achieve this ,I need to have a event that is listening the moment I click filter,Since I am on Kendo UI v2016.1.412 , I am unable to use the callback function "filter" or "filterMenuOpen". Can someone help me as how can I register the click event of filter so that i can then add my custom filter operators.

$scope.xx = {
editable : false,
sortable : true,
pageable : {
pageSizes : 1

},
filterable : {
extra : false,
operators : {
string : {
eq : 'Equals to'
}
}
},
scrollable : false,
selectable : true,
columnMenu: true,
columns : [{
field : "xx",
title : translate("xx"),
filterable : true
filterMenuOpen:function(e){
console.log("not triggered");
},
filterMenuInit:function(e){
console.log("not triggered");
},
filter:function(e){
console.log("not triggered ");
}
}, {
field : "xx",
title : 'xx'
filterable : <My custom filter>
}

}

Grid

answered on 21 Aug 2017

3 answers

3.3K+ views

Prevent DataBound and DataBinding from being fired more than once

Due to the requirements, I had to implement the grid cells so that some of them are always in edit mode (input) and that the grid will fire an ajax call to the API server whenever user finishes updating cell value.

Here's what I have:

Grid DataSource and event handlers

.Events(e => e

    .DataBound("onDataBound")

    .DataBinding("onDataBinding")

)

.DataSource(dataSource => dataSource

.Ajax()

.Events(e => e.Change("onDataChange"))

.Read(read => read.Action("action", "controller").Data("GetParams"))

.Model(mod => mod.Id(m => m.id))

.PageSize(100)

)

Click handler (get new data based on currently selected options)

$("#btn").click(function () {

$("#Grid").data("kendoGrid").dataSource.read(GetParams());

}); // end click

onDataChange, onDataBinding and onDataBound

function onDataChange(e) {

if (e.items.length == 1) {

var updatedCell = e.items[0];

var queryString = "?id="+updatedCell.id+"&field="+e.field+"&val="+updatedCell[e.field];

$.ajax({

type: "put",

url: "@Url.Content("~/controller/action")" + queryString,

headers: { 'RequestVerificationToken': '@Html.TokenHeaderValue()' },

success: function (response) {

var resObj = response.toString();

if (resObj == "success") popupNotification.show("Auto Save Success!", "error");

else popupNotification.show("Auto Save Error", "error");

},

fail: function (response) {

popupNotification.show("Auto Save Error", "error");

}

});// end ajax

}

function onDataBinding(arg) {

var rows = this.tbody.children();

var dataItems = this.dataSource.view();

for (var i = 0; i < rows.length; i++) {

kendo.unbind(rows[i]);

}

function onDataBound(arg) {

var rows = this.tbody.children();

var dataItems = this.dataSource.view();

for (var i = 0; i < dataItems.length; i++) {

var temp = dataItems[i];

if (temp["RecordTypeID"] == 1 || temp["RecordTypeID"] == 3)

{

kendo.bind(rows[i], dataItems[i]);

}

generateChart(PopulateSummaryTable());

}

What happens right now is whenever the dataSource.read(GetParams()) gets called for the first time, the following things happen in this particular order:

onDataBinding

onDataBound

onDataChange

which is fine. But if the button is not clicked (which calls dataSource.read(GetParams())), and the user simply edits currently displayed cells, I'm hoping only onDataChange gets called, but it turns out that onDataBinding and onDataBound get called again, and then onDataChange.

Is it possible to prevent onDataBinding and onDataBound from being called more than once?

Please see attached for the UI

Grid

answered on 21 Aug 2017