Telerik Forums
Kendo UI for jQuery Forum
2 answers
195 views

I have a div configured as a kendoSpreadsheet. Using the native "Open..." button in the toolbar, I open an XLSX file that happens to contain named ranges. Importantly, formulae in the spreadsheet are expressed in terms of named ranges.

Some console logging confirms that unfortunately, the named ranges are stripped out of the JSON that is returned from the toJSON() method.

This is my testbed:
                    var kendoSpreadsheet = $("#mySpreadsheetDiv").data("kendoSpreadsheet")
                    console.log(kendoSpreadsheet);// Do we see names preserved? - yes, we can see this via "_workbook/_names"

                    var jsonObject = kendoSpreadsheet.toJSON();
                    console.log(jsonObject);// Do we see names preserved? - no, we don't

So it means that the JSON is actually useless as a representational format. Here's why: 

A typical application requires that I use that same JSON string to re-instantiate that spreadsheet on the server-side, using Telerik.Web.Spreadsheet.Workbook.Load() followed by ToDocument() to convert it to a Telerik.Windows.Documents.Spreadsheet.Model.Workbook.

But a spreadsheet instantiated in this way can't be touched - as soon as I set the value of a cell (specifically, a cell that used to be a Named Range) using Worksheet.Cells[row, column].SetValue(somevalue), the spreadsheet breaks. All the formulae involving named ranges now come up as #NAME? (naturally enough, because the named ranges have been stripped out)

It's a pretty big issue - I haven't seen a serious spreadsheet that does NOT use named ranges. I'm tempted to think I'm missing something. If not, are there any plans for a fix?

MikeWiese
Top achievements
Rank 1
 answered on 18 Aug 2016
2 answers
338 views

Hi,

I'm creating a Kendo Grid from an existing HTML table. Everything works exactly as I need and expected...with one exception. Text alignment.

My table has a few columns with numeric values and I need these right aligned.

I thought it would be as simple as defining a col like this: <col style="text-align:right;" /> But that doesn't work. Oddly, this works: <col style="width:20px;" />

So, I next tried to format the alignment in the <thead> section, but I couldn't find a solution there.

<th data-field="Total" data-type="number" data-template="#= kendo.toString(Total , 'n0')#">Total</th>

 

I know I could write a template that is applied on a row by row basis, but I don't want to do that. We have a large existing website with lot's of tables and would like to use Kendo UI to replace them...but with minimal dev time.

 

Any ideas? Cheers

John
Top achievements
Rank 2
Iron
 answered on 18 Aug 2016
1 answer
1.2K+ views

Hi All,

I'm trying to implement a way to force the user to stay in the current tab if there are still unsumitted changes.

Googling around I've found that I should do something like this:

Add a handler to the "select" event

tabstripControl.kendoTabStrip({
    select: onSelect
});

Define my handler

function onSelect(e) {
    if (pendingChanges) {
        if (!confirm('Discard Pending changes?')) {
            e.preventDefault(); // Expected: stay in tab -> Result: tab changes anyway
        }
    }
}

But for some reason it's not working as expected.

Any ideas?

 

Thank you

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 17 Aug 2016
2 answers
3.1K+ views

Hello

I have a series of Dropdownlists in a mask that all work fine so far. They all have a select event for some background tasks. For programmatically rebuilding these Dropdownlists (in case the user wants to make some changes later on) I rebuild/display first all the Dropdownlists, fill them up by the attached datasources and then set the pre-set value (previously done by user) by triggering the specific select event on the specific Dropdownlist (cascading). But triggering the select event programmatically I got an error: 

TypeError: undefined is not an object (evaluating 'e.item.index')

This error is caused inside the select event (on Dropdownlist) by this line: 

var objectTargetId = this.dataItem(e.item.index()).objectTargetId;

After some investigations I found out that it would be easier to me to switch to change event inside Dropdownlist. The error causing line causes also the same error in change event, so I replaced the line by:

var objectTargetId = this.value();

Works fine so far. 

One of the Dropdownlist has an additional custom field: 

$("#objecttarget"+conditionNumber).kendoDropDownList({
  dataValueField: "objectTargetId",   
  dataTextField: "objectTargetText",
  dataTypeField: "objectTargetType",    
  change: function(e) { ...

I wonder now how I can access the value of "dataTypeField" inside the change event of this Dropdownlist? Previously (select event) it worked that way: 

this.dataItem(e.item.index()).objectTargetType;

My current solution looks like this: 

var selIndex = $("#objecttarget"+conditionNumber).data("kendoDropDownList").selectedIndex;
var objectTargetType = $("#objecttarget"+conditionNumber).data("kendoDropDownList").options.dataSource._view[selIndex].objectTargetType;

That seems to work too but I don't feel well going through the specific structure, that might change in future. Is there an easier, more official way to get the value of a custom field (in my case "objectTargetType"?

Regards

 

Tayger
Top achievements
Rank 1
Iron
Iron
 answered on 17 Aug 2016
1 answer
361 views
Can I refer to Kendo Ui grid , using $root , instead of $("#id").data("kendoGrid");
Alex Hajigeorgieva
Telerik team
 answered on 17 Aug 2016
3 answers
143 views

We have a custom requirement on the top of column chart as shown in the attachment.

Could you please let me know, if this is feasible using Kendo UI chart library.

 

Thanks in advance.

Niko
Telerik team
 answered on 17 Aug 2016
2 answers
214 views

I use Kendo UI Grid configured the scrollable->virtual option.

But, the virtual scrolling don't move smoothly when the pageSize is 400.

If the pageSize is 20, the virtual scrolling moves smoothly.

What relates to the pageSize? (my PC's spec?)

I want to configure the pageSize by large number if possible.

 

Also, the below warning in my browser console displayed when I scrolled.

Does this warning relate to the above problem?

Handling of 'mousewheel' input event was delayed for 239 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responive

Dimo
Telerik team
 answered on 17 Aug 2016
1 answer
366 views

Hello, need help:

I'm getting null in all fields of an incoming parameter (class that has all same fields as the JSON) while passing JSON from toolbar "create" button to C# controller. And If I try to add some additional properties in kendo like: contentType: "application/json; charset=utf-8", I get nothing at all in the controller.  

How can I pass JSON correctly? 

Kendo/Jquery:

$(document).ready(function () {
    //var arrayOfCheckedCheckBoxes = [];
    var crudServiceBaseUrl = "/api/Grid/",
                       dataSource = new kendo.data.DataSource({
                           transport: {
                               read: {
                                   url: crudServiceBaseUrl + "GetContacts",
                                   dataType: "json"
                               },
                               create: {
                                   url: crudServiceBaseUrl + "CreateContacts",
                                   type: "POST",
                                   dataType: "json"
                               }
                           },
                           batch: true,
                           pageSize: 20,
                           schema: {
                               model: {
                                   id: "ID",
                                   fields: {
                                       ID: { editable: true},
                                       Name: { type: "string" },
                                       Number: { type: "number" },
                                       Status: { type: "string" },
                                       Discontinued: {
                                           type: "boolean",
                                          value: false
                                       }
                                   }
                               }
                           }
                       });
 
    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 550,
        toolbar: ["create",
        {
            template: '<a class="k-button k-button-icontext k-grid-delete" href="\\#"><span class="k-icon k-delete"></span>Delete</a>'
              
        }
        ],
        columns: [
            { field: "ID", title: "ID" },
            { field: "Name", title: "Имя"},
            { field: "Number", title: "Номер" },
            { field: "Status", title: "Статус" },
            { template: '<input type="checkbox" class="chkbx" />', width: 40 },
            { command: ["edit"], title: " ", width: "250px" }],
        editable: "popup"
    });
 
 
 
    $(".k-grid-delete").click(function () {
        var grid = $("#grid").data("kendoGrid");
        var arrOfCheckedCheckboxes = new Array();
        
        // put all checked rows ID in to an array
        $("#grid")
            .find("input:checked")
            .each(function () {
                var rowId = grid.dataItem($(this).closest('tr')).ID;  
                arrOfCheckedCheckboxes.push(rowId);
                 
            });
       
         //pass array to controller
        $.ajax({
            type: "POST",
            url: "/api/Grid/DestroyContacts",
            data: JSON.stringify(arrOfCheckedCheckboxes),
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
 
            success: function(result) {
 
           
            var grid = $("#grid").data("kendoGrid");
            grid.dataSource.read();
                 
 
            }
 
        });
        
 
         
    });
 
});

 

C# controller:

namespace taskColoredGrid.Controllers
{
    public class GridController : ApiController
    {
         [HttpPost]
        public HttpResponseMessage CreateContacts([FromBody] Contacts contacts)
        {
 
            return Request.CreateResponse(HttpStatusCode.OK);
        }
  }
}

 

C# model:

namespace taskColoredGrid.Models
{
    public class Contacts
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public int Number { get; set; }
        public string Status { get; set; }
        public string Discontinued { get; set; }
    }
}

PrintScreen of data I'm receiving in controller in attachment:

 

Daniel
Telerik team
 answered on 17 Aug 2016
6 answers
1.2K+ views

When I display a window, the actions are not visible, so I did a simple test.  Same thing - no action buttons.

 

                $("#MyWindow").kendoWindow({
                    actions: ["Minimize", "Close"]
                }).open();

See attached image. 

Kiril Nikolov
Telerik team
 answered on 17 Aug 2016
1 answer
161 views
Hi I just want to hear if it possible to use kendo ui pro with jspm
Dimo
Telerik team
 answered on 17 Aug 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
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
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
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
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?