Questions on Kendo UI for jQuery Forum

3 answers

3.4K+ views

[Solved] 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

2 answers

200 views

Pie chart custom rendering

Is it possible to draw an arc over pie chart like in the attachment.

Charts

answered on 21 Aug 2017

8 answers

728 views

Preselect item in multiselect mvvm

I am trying to preload item in Multiselect using the are not getting preloaded. I get from as shown below:

[{"Code":"MAA","City_code":"MAA","City_Name":"Chennai"}]

HTML for kendo in is :

<select class="request-via-multiselect" data-role="multiselect" data-max-selected-items="2" data-value-primitive="true" data-item-Template="AirportTemplate" data-text-field="Code" data-value-field="Code" data-bind="value: ArriveDepartDetails.via, source: ViaSource"></select>

via (array) structure:
via : ["xyc"]

structure:

ViaSource: new kendo.data.DataSource({

transport: {

read: {

url: rootUrl("GetData/GetCountry"),

//dataType: "json",

data: function() {

return {

additionaldata: JSON.stringify(AirRequestViewModel.AirItem.AirVMList.SegmentInfo[0].ArriveDepartDetails.via)

};

}

},

serverFiltering: true

})

The contains that needs to be preselected on load.

After getting the loading symbol go and filter also If remove the data section from kendo it

MultiSelect

answered on 21 Aug 2017

1 answer

661 views

Removing Whitespace on Right of Grid Column

How can the whitespace be removed in the columns shown in the attached .jpg.

The html for 2 columns is:

<kendo-grid-column field="product" title="Product">
<ng-template kendoGridEditTemplate let-formGroup>
<kendo-dropdownlist [data]="products" [formControl]="formGroup.get('product')"></kendo-dropdownlist>
</ng-template>
<ng-template kendoGridFilterCellTemplate let-filter="filter" let-column="column">
<kendo-grid-string-filter-cell [column]="column" [filter]="filter">
<kendo-filter-contains-operator></kendo-filter-contains-operator>
<kendo-filter-not-contains-operator></kendo-filter-not-contains-operator>
<kendo-filter-eq-operator></kendo-filter-eq-operator>
<kendo-filter-neq-operator></kendo-filter-neq-operator>
<kendo-filter-startswith-operator></kendo-filter-startswith-operator>
<kendo-filter-endswith-operator></kendo-filter-endswith-operator>
</kendo-grid-string-filter-cell>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="priceType" title="PriceType" width="125">
<ng-template kendoGridEditTemplate let-formGroup>
<kendo-dropdownlist [data]="priceTypes" [formControl]="formGroup.get('priceType')"></kendo-dropdownlist>
</ng-template>
<ng-template kendoGridFilterCellTemplate let-filter="filter" let-column="column">
<kendo-grid-string-filter-cell [column]="column" [filter]="filter">
<kendo-filter-contains-operator></kendo-filter-contains-operator>
<kendo-filter-not-contains-operator></kendo-filter-not-contains-operator>
<kendo-filter-eq-operator></kendo-filter-eq-operator>
<kendo-filter-neq-operator></kendo-filter-neq-operator>
<kendo-filter-startswith-operator></kendo-filter-startswith-operator>
<kendo-filter-endswith-operator></kendo-filter-endswith-operator>
</kendo-grid-string-filter-cell>
</ng-template>
</kendo-grid-column>

Thank you.

Grid

answered on 18 Aug 2017

3 answers

495 views

[Solved] Checkboxes with MVVM, IE vs Chrome

I have a series of checkboxes on a page, and the checked attribute of each is bound to a different property of a kendo observable viewModel. I also have the click event bound to a javascript function. Part of that event calls a separate function which retrieves the value of the viewmodel property that the checkbox is bound to.

What happens in Chrome is after my page loads, if the user clicks one of the checkboxes, the property of the viewmodel doesn't seem to get updated. Upon subsequent clicks it does, only that first one seems to fail. It doesn't seem to do this in IE.

So what is the difference in how the viewModel gets automagically updated with the checked value in Chrome vs IE? I've been able to code around it, in my event code, I check if it's Chrome, and if it is I programmatically set the viewModel property to the opposite value (boolean) before continuing, and if it's IE I do not. But it seems kinda wonky to me.

What I think is happening is in Chrome it runs the event first before updating the value, whereas in IE it updates the value first, then runs the event. At least that's what it seems like.

MVVM

answered on 18 Aug 2017

1 answer

316 views

Can you use AutoComplete in the Spreadsheet

Hi,

Does the SpreadSheet support AutoComplete per cell?

This would be hints to the user as they type, which come from a predefined list.

Similar to this: http://demos.telerik.com/kendo-ui/autocomplete/template

The field validations are similar, but instead of a dropdown list, I would like the suggestions to show as the user types.

Thanks

Spreadsheet

answered on 18 Aug 2017

1 answer

177 views

Kendo UI Angular and commercial packaging

Hi

my apology if it was answered previously, please point me to right direction then

Kendo UI for Angular per readme only available via Git
is there plan to have it included as part of general Commercial distro available as standalone download?
Serge

General Discussions

answered on 18 Aug 2017

2 answers

2.9K+ views

Date format does not show AM/PM

Hey guys,

my grid doesn't work well with formatting date times. Our customers do have the option to choose between 12 and 24 hour format. But in my grid, the AM/PM isn't shown.

$column = new \Kendo\UI\GridColumn();

$column->format('dd.MM.yyyy hh:mm:ss tt');

Date and time are completely correct, but I am missing the 'tt' at the end. What am I doing wrong?

Thanks and regards,

Chris

Grid

answered on 18 Aug 2017

1 answer

196 views

Kendo Grid for MVC

Deat staff,

in my solution, I have a bound grid with the following code:

@(Html.Kendo().Grid<FITiN.Web.Areas.Manufacturers.Models.ManufacturerViewModel>()
.Name("manufacturerGrid")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Manufacturers_Read", "Manufacturers"))
)
.Columns(columns =>
{
columns.Bound(manufacturer => manufacturer.Name).Filterable(false);
columns.Bound(manufacturer => manufacturer.LegalFormID).Width("200px").ClientTemplate("#=LegalFormName#").Filterable(false);
columns.Bound(manufacturer => manufacturer.ManufacturerTradeID).Width("200px").ClientTemplate("#=ManufacturerTradeName#").Filterable(filterable => filterable.UI("manufacturerTradeNameFilter"));
columns.Bound(manufacturer => manufacturer.Id).Title(Language.Administration.LegalFormManagement.Column_Options).Template(@<text></text>)
.ClientTemplate(string.Format("{0} | {1} | {2}",
@Html.ActionLink(Language.Buttons.Common.Edit, "Edit", new { id = "manufacturerId" }).ToHtmlString().Replace("manufacturerId", "#=Id#"),
@Html.ActionLink(Language.Buttons.Common.Details, "Details", new { id = "manufacturerId" }).ToHtmlString().Replace("manufacturerId", "#=Id#"),
@Html.ActionLink(Language.Buttons.Common.Delete, "Delete", new { id = "manufacturerId" }).ToHtmlString().Replace("manufacturerId", "#=Id#")
));
})
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
))
)
)

In the grid, I don't want so show the id of the manufacturer, but the name, so I created the ClientTemplate. Now I want to enable users to sort by the manufacturer name, so I added this code:

function manufacturerTradeNameFilter(element) {
element.kendoDropDownList({
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
transport: {
read: "@Url.Action("FilterMenuCustomization_ManufacturerTradeNames")"
}
},
optionLabel: "--Select Value--"
});
}

And in the controller:

public ActionResult FilterMenuCustomization_ManufacturerTradeNames()
{
using (DomainDb dbCtx = new DomainDb())
{
return Json(dbCtx.ManufacturerTrades.ToList(), JsonRequestBehavior.AllowGet);
}
}

In the dropdownlist inside the grid, the manufacturer names are shown correctly, but the filtering doesn't work. I guess, it is because of the mapping of "ID" and "Name".

Any ideas of how to filter a column that is bound to an ID of an item but displays the name of the item?

Many thanks,

Marco

Grid

answered on 18 Aug 2017

3 answers

9.5K+ views

How to format a date in the Grid

What is required to display a date in format mm/dd/yyyy
I have defined the grid table as shown below.

<table id="CaseProgramGrid">

<thead>

<tr>

<th data-field="clientLastName">@CaseProgramLabels.ListHeader_LastName</th>

<th data-field="clientLastName">@CaseProgramLabels.ListHeader_FirstName</th>

<th data-field="clientIdentifier">@CaseProgramLabels.ListHeader_ClientId</th>

<th data-field="clientCaseIdentifier">@CaseProgramLabels.ListHeader_ClientCaseId</th>

<th data-field="programType">@CaseProgramLabels.ListHeader_ProgramType</th>

<th data-field="clientCaseStartDate">@CaseProgramLabels.ListHeader_StartDate</th>

<th data-field="clientCaseStartDate">@CaseProgramLabels.ListHeader_EndDate</th>

<th data-field="caseProgramStatus">@CaseProgramLabels.ListHeader_CaseProgramStatus</th>

<th class="action">Actions</th>

</tr>

</thead>

<tbody>

@foreach (var item in Model.CaseProgramListItems) {

<tr>

<td>

@Html.DisplayFor(modelItem => item.ClientLastName)

</td>

<td>

@Html.DisplayFor(modelItem => item.ClientFirstName)

</td>

<td>

@Html.DisplayFor(modelItem => item.ClientIdentifier)

</td>

<td>

@Html.DisplayFor(modelItem => item.ClientCaseIndentifier)

</td>

<td>

@Html.DisplayFor(modelItem => item.ProgramType.Name)

</td>

<td>

@Html.DisplayFor(modelItem => item.ClientCaseStartDate)

</td>

<td>

@Html.DisplayFor(modelItem => item.ClientCaseEndDate)

</td>

<td>

@Html.DisplayFor(modelItem => item.CaseProgramStatus.Name)

</td>

<td class="action">

<ul>

<li

>@Html.ActionLink(@CommonLabels.ActionLink_View, "Tasks", "Client", new { area = "CasePrograms", caseProgramId = item.CaseProgramId }, null)</

li>

</ul>

</td>

</tr>

}

</tbody>

</table>

And the kendo grid initialize as below. Question1 : But receive a jscript error. 'Unable to get value of the property 'sortable': object is null or undefined' What is wrong? Question 2: Do need to specify every column in the columns: collection just to format 2 of the columns in the grid?

@section Script

{

<script

$(document).ready(function () {

$("#CaseProgramGrid").kendoGrid(

{

dataSource: {

group: {

field: "LastName",

dir: "asc"

}

},

height: 360,

groupable: true,

scrollable: true,

sortable: true,

pageable: true,

columns: [{ field: "LastName" }, { field: "FirstName" }, { field: "ClientIdentifier" }, { field: "ClientCaseIndentifier" }, { field: "ProgramType" }, { field: "ClientCaseStartDate", template: '#= kendo.toString(ClientCaseStartDate,"MM/dd/yyyy") #' }, { field: "ClientCaseEndDate", template: '#= kendo.toString(ClientCaseEndDate,"MM/dd/yyyy") #' }, { field: "CaseProgramStatus"}]

});

</script>

Grid

answered on 18 Aug 2017