Telerik Forums
Kendo UI for jQuery Forum
8 answers
707 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
656 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
483 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
309 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
173 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.9K+ 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
190 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.4K+ 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
8.1K+ 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
5 answers
14.9K+ views
Hi,
I'm using kendoGrid to display my data, I am also using the regex function provided in on of the examples of the demos page.
 var dateRegExp = /^\/Date\((.*?)\)\/$/;
 
	oper.toDate = function toDate(value) {
	    var date = dateRegExp.exec(value);
	    return new Date(parseInt(date[1]));
	}

I then call the toDate function in my grid:
                {
                    field: "EndDate",
                    title: "End Date",
                    template: '#= kendo.toString(oper.toDate(EndDate), "MM/dd/yyyy" ) #'
                },

It renders fine, but it is actually displaying one day behind the correct day. For example:
it will display 2/6/2012, but the actual date is 2/7/2012.

Any suggestions??

Thanks!
Peraiah
Top achievements
Rank 1
 answered on 18 Aug 2017
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
Licensing
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
ContextMenu
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?