Telerik Forums
Kendo UI for jQuery Forum
3 answers
887 views
I have a Kendo grid on one view that has a column that needs to be a dropdownlist when inline editing.  I've set the editor template name on the column to a partial view that I created, and that all seems to be working.

The part that is not working is when you change the value of the dropdownlist and click the Update button in the command button column.  The selected value is not being applied to the model.
@(Html.Kendo().DropDownList()
            .Name("divisionCombobox")
            .BindTo("#=UserViewModel.DivisionId")
            .HtmlAttributes(new { style = "width:250px" })
            .DataTextField("DisplayName")
            .DataValueField("Id")
            .AutoBind(true)
            .DataSource(source => source
                .Read(read => read.Action("ListDivisions", "Security"))
                .ServerFiltering(true))
)

Is the BindTo property not the right one to use?
Tamas
Top achievements
Rank 1
 answered on 16 Feb 2016
1 answer
172 views
Router option in typescript definition has only functions and not properties.
Hristo Valyavicharski
Telerik team
 answered on 16 Feb 2016
1 answer
387 views

I have a couple of pie charts on a screen. I have some angular code that populates them.

$scope.SetPieChart = function (data, container) {
        var dataSource = new kendo.data.DataSource({
            data: data,
            //create group and aggregates
            group: {
                field: "type",
                aggregates: [
                    { field: "size", aggregate: "sum" }
                ]
            }
        });
        //read dataSourcePeers to load the data
        dataSource.read();
 
        var series = [],
            items = dataSource.view(),
            length = items.length,
            item;
        //create the chart series 
        for (var i = 0; i < length; i++) {
            item = items[i];
            series.push({ category: item.value, value: item.aggregates.size.sum })
        }
 
        container.kendoChart({
            theme: "metro",
            legend: {
                position: "custom",
                offsetX: 10,
                offsetY: 260
            },
            chartArea: { background: "transparent" },
            title: { text: " ", margin: { bottom: -240 } },           
            dataSource: dataSource,
            seriesDefaults: {
                labels: {
                    visible: false,
                    background: "transparent",
                    template: "#= category #: \n #= value#%"
                },
                type: "pie"
            },
            chartArea: {
                margin: 1,
                height: 450 /* add this option */
            },
            series: [{ data: series }],
            tooltip: {
                visible: true, format: "{0:N1}%"
            }
        });
 
    }
 

 The post event that gets the data returns the data in the order I want to display in the chart but for some reason when it gets displayed on the screen it is alpha order.  Is there something that is forcing the alpha sort? Is there a way to keep the order which is in the returned json

 

Iliana Dyankova
Telerik team
 answered on 16 Feb 2016
5 answers
814 views

Hi Guys,

I've been going over a lot of posts in regards to conditional formatting of the Grid Control's cells.  I've now ended up with the below code. However this does not want to change anything on the intended cell... Everything stays the same.

Based on the code I was expecting the cell in the column "WO Type" to change it's background color if the value of the cell containing ERR_CAUSE had a 403 value in it. What am I missing out on here?

@(Html.Kendo().Grid(Model)
              .Name("Shiftreport")
              .Events(events => events.Change("Grid_OnRowSelect"))
              .Columns(columns =>
              {
                  columns.Bound(o => o.WORK_TYPE_ID).Title("WO Type");
                  columns.Bound(o => o.TOP_EQUIPMENT_ID).Title("Equipment"); 
                  columns.Bound(o => o.ERR_DESCR_LO).Title("Work Order");
                  columns.Bound(o => o.ERR_CAUSE).Title("Cause");
                  columns.Bound(o => o.MAX_EQUIP_DOWN_TIME_START).Format("{0:dd/MM HH:mm}").Title("DT Start");
                  columns.Bound(o => o.MAX_EQUIP_DOWN_TIME_END).Format("{0:dd/MM HH:mm}").Title("DT Stop");

              })
              .CellAction(cell =>
              {
                  if (cell.Column.Title == "WO Type")
                  {
                      if (cell.DataItem.ERR_CAUSE == "403")
                      {
                          //Set the background of this cell only
                          cell.HtmlAttributes["style"] = "background:red;";
                      }
                  }
              })
              .Pageable(pageable => pageable
                  .PageSizes(true)
              )
              .Sortable()
              .Selectable()
              .Navigatable()
              .Filterable()
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .PageSize(10)
                  .ServerOperation(false)
                  .Model(model => { model.Id(p => p.WO_NO); })
                  .Sort(sort => sort.Add(o => o.MAX_EQUIP_DOWN_TIME_START).Descending())
              ))

 

 

Thanks in advance!

Joachim
Top achievements
Rank 1
 answered on 16 Feb 2016
2 answers
614 views

I'm using a treeList, I want to do an action whenever the filter is used. I'm trying to do that with the change event but this is not working.

According to the documentation ,the Change event is " Fired when the data source is populated from a JavaScript array or a remote service, a data item is inserted, updated or removed, the data items are paged, sorted, filtered or grouped." But the change event doesn't get fired in my case.

Is there a way to know when the filter is used ?

Here is my code:

 $("#treeList").kendoTreeList({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ], 
      change: function(e) {
        console.log("not fired when applying filter");
                          },
      selectable: "multiple, cell",
      filterable: true
    });
    var treeList = $("#treeList").data("kendoTreeList");

Gers
Top achievements
Rank 1
 answered on 16 Feb 2016
2 answers
343 views

I am trying to create a kendo grid with excel export. My data is shown precisely as I want it and the grid works fine. However, the saveAsExcel function triggers the excelExport event, but no file is created. Same problem with the pdf export. Here is my grid options:

grid = $("#grid").kendoGrid({
        toolbar:["excel","pdf"],
        height: 500,
        scrollable: true,
        groupable: true,
        sortable: true,
        filterable: false,
        excel: {
            allPages:true,
            filterable:true
        },
        excelExport: function(e) {
            console.log('Firing Export');
            console.log(e.workbook);
            console.log(e.data);
        },
        pdfExport: function(e){
            console.log('PDF export');
 
        },
        columns: [
            { field: "date", title: "Time", template: "#= kendo.toString(kendo.parseDate(date), 'MM/dd/yyyy') #", width: '120px'},
            { field: "customer", title: "Customer" },
            { field: "amount", title: "Total", format: "{0:c}", width: '70px', aggregates: ["sum"]},
            { field: "paid_with", title: "Payment", width: '130px'},
            { field: "source", title: "Source" },
            { field: "sale_location", title: "Sale Location" }
        ]
    }).data("kendoGrid");


This ajax is called whenever the search parameters for the data is changed. Where I refresh the datasource.

$.ajax({
           'url':'/POS/ajax/loadTransactionsDetailsForDay.php',
           'data':{
               filters
           },
           'type':'GET',
           'dataType':'json',
           'success':function(response) {
               var dataSource = new kendo.data.DataSource({
                   data: response.data.invoices,
                   pageSize: 100000,
                   schema: {
                       model: {
                           fields: {
                               date: {type: "string"},
                               customer: { type: "string" },
                               amount: { type: "number" },
                               paid_with: {type: "string"},
                               source: {type:"string"},
                               sale_location: {type:"string" }
                           }
                       }
                   }
               });
               grid.setDataSource(dataSource);
               grid.refresh();
           }
 
       });

The output from my console log is.
    Firing Export.
A worksheet object.
   and and array with these objects for every row in the grid:
0: o
   _events: Object
   _handlers: Object
   amount: 40.45
   customer: "customer 1"
   date: "2015-11-25T00:00:00-08:00"
   dirty: false
   employee: 23
   paid_with: "Check"
   parent: ()
   sale_location: "Main"
   source: "POS"
   uid: "70b2ba9c-15f7-4ac3-bea5-f1f2e3c800d3"

I have the latest version of kendo, jquery 2.14, I am loading jszip. I am running it on the latest version of chrome. I have tried all kinds of variations of this code I can think of, including removing my schema, initializing the kendo anew every time in the callback.

Anyone got any idea why this would not work?
Every example on this I can find make it look super simple, just create the grid and call export... So I have to have overlooked something.

I am grateful for any ideas about this.
Thanks.

Lich
Top achievements
Rank 1
 answered on 16 Feb 2016
4 answers
310 views
I've seen scattered throughout the Kendo docs examples of using @<text> for template methods.  For example in this SO question it's used both inside a Content call on a TabStrip and in a Template call on a Grid Column.

In VB however, this does not seem to work:

        @(Html.Kendo().Grid(Of MyModel) _
            .Columns(Sub(config)
                         config.Template(@<text>
                                             <b>Test rendering inline markup</b>
                                         </text>)
                     End Sub)
        )
Stu
Top achievements
Rank 1
 answered on 16 Feb 2016
1 answer
136 views

Hi Team,

 I want to add kendo upload control in kendo grid using asp.net web page instead of mvc page.

 Can you please help me out. I am new in kendo ui.

 How can i write code to save the files on server once file has been selected on client side. I searched lots on demo page but all contain code with controller which i dont want as my application is simple asp.net.

Thanks.

Ahmad

Dimiter Madjarov
Telerik team
 answered on 16 Feb 2016
1 answer
115 views
Hello ,
I am working on kendo UI with infinite scroll
functionality, but when I going to get updated data of kendo ui before
scroll and after scroll, its only providing me only after scroll changed
data not the before scroll edited data, So please suggest me the
solution of this issue.
Alexander Popov
Telerik team
 answered on 16 Feb 2016
2 answers
2.9K+ views

How can I specify the text to be displayed in JAWS for the icons in DatePicker and DateTimePicker?

By default, when I use JAWS to look at the elements of the screen, the following is displayed for DatePickers and DateTimePickers:

DatePicker

  Hire Date Edit MM/DD/YYYY
  select Button

DateTimePicker

  Shift Start Edit MM/DD/YYYY H:M t
  select Button
  
select Button

These "select Button" entries correspond to the calendar icon (for both) and  the clock icon (for DateTimePicker). 

When I have multiple buttons on the screen (or even when it's a DateTimePicker), there are multiple entries that say "select Button" and the user doesn't know what they are.  I'd like to set them so that they'd say something like the following:

DatePicker 

  Hire Date Edit MM/DD/YYYY
  Set Hire Date Button

DateTimePicker

  Shift Start Edit MM/DD/YYYY H:M t
  Set Shift Start Date Button
  Set Shift Start Time Button

 I can do this by manually adding the "aria-label" attribute to the appropriate span ("k-icon k-i-calendar" for the calendar, "k-icon k-i-clock" for the clock) when debugging (e.g., F12), but can't seem to figure out how to do it on the control itself in code.  Here's how I have the controls defined: 

01./* HTML Body */
02.  
03.<input id="hireDatePicker" aria-label="@UserInterface.NewHire_HireDatePicker_Text" />
04.<input id="shiftStartDateTimePicker" aria-label="@UserInterface.NewHire_ShiftStartDateTimePicker_Text" />
05.  
06./* $(document).ready(function () */
07.  
08.$('#hireDatePicker').kendoDatePicker({
09.  value:new Date(),
10.  ARIATemplate: "Date: #=kendo.toString(data.current, 'G')#"
11.});
12.  
13.$('#shiftStartDateTimePicker').kendoDateTimePicker({
14.  value:new Date(),
15.  interval:60,
16.  change: startDateTimeChange,
17.  ARIATemplate: "Date: #=kendo.toString(data.current, 'G')#"
18.});

Georgi Krustev
Telerik team
 answered on 16 Feb 2016
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
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Chester
Top achievements
Rank 1
Iron
Simon
Top achievements
Rank 1
Iron
Douglas
Top achievements
Rank 2
Iron
Iron
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?