Questions on Kendo UI for jQuery Forum

1 answer

144 views

Filters are not working in row-template with merged cell

I am working on Kendo MVVM Grid with row-template. i have applied merged cells (rowspan) inside the row-template.Everything is working fine but when i applied filters on column then that time Grid is not showing any result.

i have tried Filtering without merged cells, its working fine

<div data-role="grid"

id="ProessedReconciliationGrid"

style="height:250px;"

data-toolbar="[{'template': kendo.template($('\\#ProessedReconciliationGridTitle').html())}]"

data-animation="false"

data-filterable="true"

data-scrollable="true"

data-resizable="true"

data-bind="source: ProessedReconciliationData,visible:isProcessedDivVisible"

data-columns='[

{ "field": "SupplierInvoiceReconciliationId", hidden:"true"},

{ "field": "SI_DocumentNumber", "title": "Doc. No.",width: "80px",editable: function () { return false; }},

{ "field": "DisplaySI_TransactionDate", "title":"Doc. Dt.","width":"100px",editable: function () { return false; }},

{ "field": "SI_BookingReference","title":"Booking Ref.",editable: function () { return false; }},

{ "field": "SI_PassengerName", "title": "Passenger",editable: function () { return false; }},

{ "field": "SI_Amount", "title": "Amount",editable: function () { return false; },format:"{0:n2}",attributes:{style:"text-align:right;"}},

{ "field": "SI_Amount", "title": "Amount Payable",editable: function () { return false; },format:"{0:n2}",attributes:{style:"text-align:right;"}},

{ "field": "DOC_DocumentNo", "title": "Doc. No.",width: "80px",editable: function () { return false; }},

{ "field": "DisplayDOC_DocumentDate", "title":"Doc. Dt.","width":"100px",editable: function () { return false; }},

{ "field": "DOC_BookingReference","title":"Booking Ref.",editable: function () { return false; }},

{ "field": "DOC_PassengerName", "title": "Passenger",editable: function () { return false; }},

{ "field": "DOC_Total", "title": "Amount",editable: function () { return false; },format:"{0:n2}",attributes:{style:"text-align:right;"}},

{ "field": "DOC_Total", "title": "Amount Payable",editable: function () { return false; },format:"{0:n2}",attributes:{style:"text-align:right;"}},

{ "field": "DOC_DocumentID", "title": "Int. ID",width: "125px",editable: function () { return false; }},

{ "field": "MatchDescription", "title": "Match Criteria",editable: function () { return false; }},

{ "field": "MatchDifference", "title": "Diff",editable: function () { return false; },format:"{0:n2}",attributes:{style:"text-align:right;"}},

{ "field": "Payable", "title": "Payable",editable: function () { return false; },format:"{0:n2}",attributes:{style:"text-align:right;"}},

{ "field": "Action", "title": "Action",editable: function () { return false; }

<script id="ProessedRowTemplate" type="text/x-kendo-template" class="KendoExtTemplate">

<table class="table">

#if(data != null){#

#if(data.length == 1 ){#

<tr>

<td>#=data[0].SI_DocumentNumber#</td>

<td>#=data[0].DisplaySI_TransactionDate#</td>

<td>#=data[0].SI_BookingReference#</td>

<td>#=data[0].SI_PassengerName#</td>

<td style="text-align:right;">#=kendo.toString(data[0].SI_Amount,'n2') #</td>

<td style="text-align:right;">#=kendo.toString(data[0].SI_Total,'n2')#</td>

<td>#=data[0].DOC_DocumentNo#</td>

<td>#=data[0].DisplayDOC_DocumentDate#</td>

<td>#=data[0].DOC_BookingReference#</td>

<td>#=data[0].DOC_PassengerName#</td>

<td style="text-align:right;">#=kendo.toString(data[0].DOC_Total,'n2')#</td>

<td><a href="../Document/GetDossierDocument/#: data[0].DOC_DocumentID #" target="_blank" title="#: data[0].DOC_DocumentID #" style="white-space: nowrap;">#: data[0].DOC_DocumentID #</a></td>

<td>#=data[0].MatchDescription#</td>

<td style="text-align:right;">#=kendo.toString(data[0].MatchDifference,'n2')#</td>

<td style="text-align:right;">#=kendo.toString(data[0].Payable,'n2')#</td>

<td><i class="fas fa-unlink text-danger" onclick="DeleteProcessedRow('#=data[0].SupplierInvoiceReconciliationId #')" title="Break/Remove" aria-hidden="true"></i></td>

</tr>

#}else {#

#for(var x=0; x < data.length; x++){#

<tr>

# var rowspanVal = data.length #

<td>#=data[x].SI_DocumentNumber#</td>

<td>#=data[x].DisplaySI_TransactionDate#</td>

<td>#=data[x].SI_BookingReference#</td>

<td>#=data[x].SI_PassengerName#</td>

<td style="text-align:right;">#=kendo.toString(data[x].SI_Amount,'n2')#</td>

<td style="text-align:right;">#=kendo.toString(data[x].SI_Total,'n2')#</td>

<td>#=data[x].DOC_DocumentNo#</td>

<td>#=data[x].DisplayDOC_DocumentDate#</td>

<td>#=data[x].DOC_BookingReference#</td>

<td>#=data[x].DOC_PassengerName#</td>

<td style="text-align:right;">#=kendo.toString(data[x].DOC_Total,'n2')#</td>

<td><a href="../Document/GetDossierDocument/#: data[x].DOC_DocumentID #" target="_blank" title="#: data[x].DOC_DocumentID #" style="white-space: nowrap;">#: data[x].DOC_DocumentID #</a></td>

#if(x == 0){#

<td rowspan="#: rowspanVal #">#=data[x].MatchDescription#</td>

<td rowspan="#: rowspanVal #" style="text-align:right;">#=kendo.toString(getMatchDifference(data),'n2')#</td>

<td rowspan="#: rowspanVal #" style="text-align:right;">#=kendo.toString(getPayableAmount(data),'n2')#</td>

<td rowspan="#: rowspanVal #"><i class="fas fa-unlink text-danger" onclick="DeleteProcessedRow('#=data[0].SupplierInvoiceReconciliationId #')" title="Break/Remove" aria-hidden="true"></i></td>

#}#

</tr>

#}#

</table>

</script>

},

]'

data-row-template="ProessedRowTemplate" data-groupable="false" data-selectable="row"

data-editable="false">

</div>

MVVM

answered on 25 Nov 2020

1 answer

608 views

Filter Grid By Datepicker

I'm trying to filter the grid by using the datepicker but I'm using an external filter outside of the grid and its not working. Here is some of my code below open to any suggestions to make this work. Thanks!

</div>

JS:

$("#text3").kendoDatePicker({

change: function () {

var value = this.value();

if (value) {

grid.dataSource.filter({

field: "Opened_at",

operator: operator,

value: value

});

} else {

grid.dataSource.filter({}); } } });

Grid

answered on 25 Nov 2020

1 answer

517 views

Scheduler Zoom in/out effect

I have a slider where one can increase the zoom in/out with the help of the slider. whenever the user increases the zoom as of now now I am changing the width of this table("k-scheduler-table") dynamically in the scheduler view. In total there are 4 tables with such class but I am changing only the two tables width dynamically. When I do this I am refreshing my timeline through code and it works without any problem. but the data which is there inside the timeline with a specific time. for instance consider a task from 6am to 6:30am. Now after increasing the zoom task remains at some other timeline rather than at 6am-6:30am. and if I use scheduler.refresh() then my width which I have setted dynamically for the table classes is no longer and zoom effect is gone. I need an idea what can i do.

1-)Help me by refreshing the task to the current time-zone(only task-time-zone not the entire scheduler so that the zoom remains same)
2-)Or else refresh the scheduler and somehow I should pass the two table classes width dynamically

You can find the problem in the attached image

Scheduler

answered on 25 Nov 2020

1 answer

117 views

Trigger Pivot grid element externally

Hi, I'm currently on trial and exploring the Kendo Pivot Grid feature.

I'm wondering is it possible to trigger interaction of the pivot grid element from externally element.
For example a button that when click, will expand this particular column members.

PivotGrid

answered on 25 Nov 2020

2 answers

144 views

Is it possible to split rendered jQuery kendoForm inputs into tabStrip tabs?

According to following example (https://demos.telerik.com/kendo-ui/form/index), it is great and easy to create a kendoForm with validation.

...but I would like to customize rendered form, for example, I would like to place formItems into tabstrip

...or I would like to move some items, add custom text between them and etc...

Does exists any way for this (...except using react :-D ) ...or is it possible to do this with another way => generate kendoForm from existing bootstrap html form (with all kendo form features and kendo validation)?

Thanks a lot for each idea.

Form

answered on 24 Nov 2020

3 answers

338 views

Jquery and Kendo conflicts autopopulate datepicker and database field save

Hi I have a working application with Jquery autocomplete, Jquery date picker and so on. I was asked to replace a simple textbox with richtext boxes for a few fields. Since we have a license for Telerik, I decided to go with the Kendo Jquery and the UI is perfectly working by referencing.

I am yet to hookup the database side but in the mean time, If I insert Kendo, the Jquery datepicker is throwing error. "Error: Object doesn't support property or method 'datepicker'". Also, auto populate doesnt trigger.

Are there any conflict of using Jquery and Kendo? or are there any duplicate reference causing this issue?

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="https://jqueryui.com/resources/demos/style.css" rel="stylesheet" />
<script src="scripts/jquery.numeric.js" type="text/javascript"></script>
<script src="scripts/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>

<textarea id="successful" rows="5" cols="30" style="width:100%; height:840px" aria-label="successful">

</textarea>
<script>
var successful = $("#successful").kendoEditor({
tools: [
"bold",
"italic",
"underline",
"justifyLeft",
"justifyCenter",
"justifyRight",
"insertUnorderedList",
"createLink",
"unlink",
]
});
</script>

Please advise on this conflict. Also, I have an existing mvc textbox control @Html.TextAreaFor(m => m.successful, new { @class = "form-control" }) which is saving in the database directly. How can I associate/hookup kendo textarea with the same control and database field called "successful" Please help.

Thanks in advance.

General Discussions

answered on 24 Nov 2020

1 answer

242 views

Format Decimals in the Horizontal Axis?

Hi. I need your help about formatting my KendoUI chart.I use KendoUI chart with my Delphi + Unigui code
My doubts are in the figure attached. The main doubt is how to format the horizontal axis to show the desired number of decimals. I want to change from one decimal ( one number after the comma like 2200,0 ) to two decimals (like 2200,00 ). This line of code did not work TNumericField(FieldByName('distM')).DisplayFormat := '#,0.00';
Code to try to fix the decimals
ChartSeries.Values['Fmod'] := 'serFmod';
ChartProperties.Values['valueAxis'] := '{labels: {format: "#,0.0"}}'; // vertical axis one decimal
ChartProperties.Values['tooltip'] := '{visible: true, format: "#,0.000"}'; // points 3 decimals
ChartSeriesDefaults := 'labels: {visible: true, position: "insideEnd", format: "#,0.00"}';
If needed I can send a test case using Delphi + Unigui.

General Discussions

answered on 24 Nov 2020

1 answer

74 views

^^

what

BulletChart

answered on 24 Nov 2020

1 answer

193 views

Chart animation duration speed

Hi,

Here's the example (http://jsfiddle.net/jxn2u7y9/) that I try to draw a line,

But I want to control the speed of the initial animation duration,

Is there any way or api to slow down the initial animation duration speed such as the setInterval way using in this example (https://jsfiddle.net/k9fxbmp8)?

var timer = setInterval(() => {

if(count > len){

clearInterval(timer)

}

myChart.data.datasets[0].data.push(totalData[count]);

// myChart.data.datasets[1].data.push(releaseData[count]);

myChart.update();

count++;

},800)

Thanks

Charts