Telerik Forums
Kendo UI for jQuery Forum
2 answers
167 views
Is it possible to draw an arc over pie chart like in the attachment.
prasanth
Top achievements
Rank 1
 answered on 21 Aug 2017
8 answers
635 views

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

 

 

 

 

 

 

 

Stefan
Telerik team
 answered on 21 Aug 2017
1 answer
620 views

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.

Pavlina
Telerik team
 answered on 18 Aug 2017
3 answers
436 views

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.

 

Joe
Top achievements
Rank 1
 answered on 18 Aug 2017
1 answer
271 views

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

 

 

 

Dimitar
Telerik team
 answered on 18 Aug 2017
1 answer
155 views

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


Pavlina
Telerik team
 answered on 18 Aug 2017
2 answers
2.8K+ views

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

Christopher
Top achievements
Rank 1
 answered on 18 Aug 2017
1 answer
160 views

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

Boyan Dimitrov
Telerik team
 answered on 18 Aug 2017
3 answers
9.3K+ views

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>
Peraiah
Top achievements
Rank 1
 answered on 18 Aug 2017
2 answers
7.9K+ views
I everyone, I'm tryng to get datetime information on a grid. I have my model with this data:
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,
    },
My Kendo UI grid is formatted with this parameters:
@(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"))
          ))
In the attacced image there is the grid result.
Someone can tell me because the first two datetime is sown correctly, instead other datetime is shown as "/Date(********)/" ?
Peraiah
Top achievements
Rank 1
 answered on 18 Aug 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?