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
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.
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.
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
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
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
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
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
>
new
ProdottoView()
{
IdProdotto = prod.IdProdotto,
IdDitta = prod.IdDitta,
CodiceProdotto = prod.CodiceProdotto,
DataAggiunta = prod.DataAggiunta,
DataModifica = prod.DataModifica,
Produttore =
new
ProduttoreView()
{
IdProduttore = prod.IdProduttore,
IdDitta = prod.IdDitta,
IdUtente = produ.IdUtente,
Nome = produ.Nome,
Eliminato = produ.Eliminato,
DataModifica = produ.DataModifica,
DataAggiunta = produ.DataAggiunta
},
LinguaProdotto =
new
LinguaProdottoView()
{
IdLinguaProdotto = lingue.IdLinguaProdotto,
IdLingua = lingue.IdLingua,
IdProdotto = lingue.IdProdotto,
Descrizione = lingue.Descrizione,
DescrizioneBreve = lingue.DescrizioneBreve,
Nota = lingue.Nota,
DataAggiunta = lingue.DataAggiunta,
DataModifica = lingue.DataModifica,
IdUtente = lingue.IdUtente,
},
UnitaDiMisura =
new
UnitaDiMisuraView()
{
IdUnitaDiMisura = udm.IdUnitaDiMisura,
IdCategoriaMisura = udm.IdCategoriaMisura,
Nome = udm.Nome,
Fattore = udm.Fattore,
Arrotondamento = udm.Arrotondamento,
Eliminato = udm.Eliminato,
DataAggiunta = udm.DataAggiunta,
DataModifica = udm.DataModifica,
IdUtente = udm.IdUtente,
},
@(Html.Kendo().Grid<
ProdottoView
>()
.Name("gridProduct")
.Columns(columns =>
{
columns.Bound(c => c.CodiceProdotto).Width(140);
columns.Bound(c => c.LinguaProdotto.Descrizione).Width(190);
columns.Bound(c => c.DataAggiunta).Format("{0: dd/MM/yyyy HH.mm.ss}");
columns.Bound(c => c.DataModifica).Format("{0: dd/MM/yyyy HH.mm.ss}");
columns.Bound(c => c.Produttore.Nome);
columns.Bound(c => c.Produttore.DataModifica).Title("ProdMod").Format("{0:MM/dd/yyyy}");
columns.Bound(c => c.Produttore.DataAggiunta).Format("{0: dd/MM/yyyy HH.mm.ss}");
columns.Bound(c => c.LinguaProdotto.DataAggiunta).Format("{0: dd/MM/yyyy HH.mm.ss}");
columns.Bound(c => c.LinguaProdotto.DataModifica).Format("{0: dd/MM/yyyy HH.mm.ss}");
columns.Bound(c => c.UnitaDiMisura.DataAggiunta).Format("{0: dd/MM/yyyy HH.mm.ss}");
columns.Bound(c => c.UnitaDiMisura.DataModifica).Format("{0: dd/MM/yyyy HH.mm.ss}");
columns.Command(cmd => cmd.Edit());
})
.ToolBar(toolbar =>
toolbar.Create()
)
.Sortable()
.Editable(builder => builder.Mode(GridEditMode.PopUp).TemplateName("ProdottiPopup"))
.Filterable()
.ColumnMenu()
.Groupable()
.Resizable(rs=>rs.Columns(true))
.Pageable(builder => builder.PageSizes(new []{2,5,10}))
.Events(ed=>ed.Edit("onGridEditing"))
.Scrollable()
.HtmlAttributes(new { style = "height:800px; width: 95%" })
.DataSource(ds => ds
.Ajax()
.Batch(false)
.ServerOperation(false)
.Read(ra => ra.Action("ReadGrid", "Prodotti"))
.Update(ra => ra.Action("Editing_Update", "Prodotti"))
.Create(ra => ra.Action("Editing_Update", "Prodotti"))
.Model(model => model.Id(p => p.IdProdotto))
.Events(events => events.Error("error"))
))