Questions on Kendo UI for jQuery Forum

8 answers

2.2K+ views

html decode issue with strings in a grid cell

I am using html.Encode when saving the data in the db. So in the db I have <> but when I show the data in the grid to the users I want them to see <>. How can I accomplish decoding the string?

Grid

answered on 09 Mar 2017

2 answers

168 views

k-spreadsheet-formula-bar Expanding to show content

Hi, When I click on a cell, which has multi line text, the k-spreadsheet-formula-bar area expands to show the content, however, this forces the spreadsheet to render incorrectly. Please see screenshot.

Thanks

Marc

Spreadsheet

answered on 09 Mar 2017

1 answer

131 views

MultiSelect does not submit

I am trying to get a MultiSelect to submit but it just refuse.

I am trying to debug the incoming request from the page and it contains no selectlist value in any way, shape or form.

                <div class="demo-section k-content">
                    @(Html.Kendo().MultiSelectFor(x => x.CMC)
                          .ValuePrimitive(true)
                          .BindTo(ViewBag.CMC)
                          .DataTextField("Name")
                          .DataValueField("UnitId")
                          .Filter(FilterType.Contains)
                          .Placeholder("Välj ett eller flera CMC...")
                    )
                </div>

This is inside a using block that looks like this:

@using (Html.BeginForm("Search", "Search"))
{

}

The model (SearchABR) is fetched from the viewbag as you can see above, and looks like this:

    public class SearchABR
    {
        public string Abonnentnummer { get; set; }
        public string Firstname { get; set; }
        public string Lastname { get; set; }
        public List<CMCEntity> CMC { get; set; }
    }

And in this function in the controller:

        [Authorize(Roles = "ABR_LOGIN")]
        [HttpPost]
        public ActionResult Search(SearchABR search)
        {
            RetreiveInformation ri = new RetreiveInformation();
            if (ModelState.IsValid)
            {
                // Everything is valid. Return the search parameters.
                // Fix CMC information.
            }

            ViewBag.CMC = FetchCMC();
            return View(search);
        }

And I put a breakpoint at "Fix CMC Information" and cannot find CMC in the Request at all. It's not there. The other fields are there, but not CMC.

Help!

MultiSelect

answered on 09 Mar 2017

3 answers

431 views

Kendo UI Grid - popup edit - dropDownList

Hi all,

I have a kendo UI grid, then I set it as edit. In Grid row, when I click the "Edit", it will have a . In this popup editor, I have the dropDownList to select the value.

Now my problem is, my value and dropDownList is separate, which is supposed to together.

I attach my code for view.

<div style="margin-left:20px; margin-bottom: 20px">
<div>
@Html.LabelFor(model => model.Name)
</div>
<div>
@Html.EditorFor(model => model.Name)
@Html.ValidationMessageFor(model => model.Name)
@(Html.Kendo().DropDownList()
.Name("Name2")
.DataTextField("Name")
.DataValueField("ComputerID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("SelectAll", "Computer"); //Set the Action and Controller names.
})

.ServerFiltering(true); //If true, the DataSource will not filter the data on the client.
})
)
</div>
</div>

Grid

answered on 09 Mar 2017

2 answers

387 views

Cannot access grid dataSource for filtering

Hello,

I trying to programatically filter my data in my grid. Here's my code:

[code]
var ds = {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20,
group: {
field: "ContactTitle",
dir: "asc",
template: "Yo, I'm a template"
}
};

var g = $("#grid").kendoGrid({

dataSource: ds,
height: 550,
scrollable: true,
resizable: true,
groupable: true,
sortable: true,
groupable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title",
groupHeaderTemplate: "Yo, I'm a group for #= value #"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});

g.data().dataSource.filter({
"field" : "ContactName",
"operator" : "contains",
"value" : "Bernardo Batista"
});
[/code]

But this is giving me an error on the line:

g.data().dataSource.filter({...

The error message is: Uncaught TypeError: Cannot read property 'filter' of undefined.

How can I get my datasource from my grid? And then, how do I apply a filter to it?

Thank you.

Grid

answered on 08 Mar 2017

2 answers

115 views

customizing data source for grid

Hello,

I'll experimenting with the Kendo grid. I am able to get this working:

[code]
<html>
<head>
<link href="kendo/examples-offline.css" rel="stylesheet">

<link href="kendo/kendo.common.min.css" rel="stylesheet">

<link href="kendo/kendo.rtl.min.css" rel="stylesheet">

<link href="kendo/kendo.default.min.css" rel="stylesheet">

<link href="kendo/kendo.default.mobile.min.css" rel="stylesheet">

<script src="kendo/jquery.min.js"></script>

<script src="kendo/jszip.min.js"></script>

<script src="kendo/kendo.all.min.js"></script>

<script src="kendo/console.js"></script>
</head>

<body>

<div id="grid"></div>

<script>
$(document).ready(function () {
$("#grid").kendoGrid({

dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>

</body>
</html>
[/code]

But now I'd like to play with the data. For that, I need a data source I can access and manipulate.

So I put this into a json file:

[code]
[{
"Contact Name": "Gibran shah",
"Contact Title": "Software Developer",
"Company Name": "ACM",
"Country": "Canada"
}]
[/code]

...and I tried to bind to it using this:

[code]
$("#grid").kendoGrid({

dataSource: {
type: "odata",
transport: {
read: {
url: "kendo_data.json",
dataType: "json"
}
},

...
[/code]

That didn't work because the Chrome console threw an error: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

So I tried prefixing the url with http: like this: "http://kendo_data.json"

That got rid of the error but the data still failed to load.

I also tried this:

[code]
$("#grid").kendoGrid({

...

data: [{"Contact Name": "Gibran shah","Contact Title": "Software Developer","Company Name": "ACM","Country": "Canada"}]

...

});
[/code]

...but again the data failed to load.

My question: how to load from a data source I have access to and control? Please keep in mind I'm just working in Notepad++, not a fancy IDE in which I can run an ajax call and get the data.

Thanks

Grid

answered on 08 Mar 2017

2 answers

125 views

js/css references cause Visual Studio to abort

Hello,

I'm trying to create a kendo grid and the js and css references are breaking my application.

Here are my references:

[code]
<link href="Kendo/examples-offline.css" rel="stylesheet">
<link href="Kendo/Kendo.common.min.css" rel="stylesheet">
<link href="Kendo/Kendo.rtl.min.css" rel="stylesheet">
<link href="Kendo/Kendo.default.min.css" rel="stylesheet">
<link href="Kendo/Kendo.default.mobile.min.css" rel="stylesheet">
<script type="text/javascript" src="Kendo/jquery.min.js"></script>
<script type="text/javascript" src="Kendo/jszip.min.js"></script>
<script type="text/javascript" src="Kendo/Kendo.all.min.js"></script>
<script type="text/javascript" src="Kendo/console.js"></script>
[/code]

When I try to start my application in Visual Studio 2015, Task Runner Explorer reports these errors:

[code]
Web\Features\Shared\Kendo\console.js
line 1 col 23 Missing space before opening curly brace
line 1 col 23 One (or more) spaces required before opening brace for block expressions
line 4 col 34 Invalid quote mark found
line 4 col 12 Multiple var declaration
line 5 col 45 Invalid quote mark found
line 12 col 18 Invalid quote mark found
line 12 col 38 Invalid quote mark found
line 12 col 57 Invalid quote mark found
line 12 col 63 Invalid quote mark found
line 15 col 51 Invalid quote mark found
line 15 col 63 Invalid quote mark found
line 18 col 33 Invalid quote mark found
line 20 col 58 Invalid quote mark found
line 20 col 70 Invalid quote mark found
line 28 col 32 Invalid quote mark found
line 28 col 65 Invalid quote mark found
line 48 col 17 Invalid quote mark found
line 48 col 36 Invalid quote mark found
line 48 col 57 Invalid quote mark found
line 48 col 76 Invalid quote mark found
line 48 col 96 Invalid quote mark found
line 48 col 114 Invalid quote mark found
line 48 col 123 Invalid quote mark found
line 48 col 159 Line must be at most 150 characters
line 50 col 53 Invalid quote mark found
line 55 col 35 Invalid quote mark found
line 59 col 19 Invalid quote mark found
line 59 col 25 Invalid quote mark found
line 59 col 35 Invalid quote mark found
line 99 col 34 Invalid quote mark found
line 99 col 73 Invalid quote mark found
line 103 col 19 Invalid quote mark found
line 112 col 21 Invalid quote mark found
line 113 col 10 Invalid quote mark found
line 113 col 62 Invalid quote mark found
line 119 col 25 Invalid quote mark found
line 120 col 51 Invalid quote mark found
line 122 col 33 Invalid quote mark found
line 122 col 45 Invalid quote mark found
line 122 col 67 Invalid quote mark found
line 127 col 6 Invalid quote mark found
‼ 41 warnings
Web\Features\Shared\Kendo\jquery.min.js
line 2 col 2497 Use '===' to compare with 'null'.
line 2 col 205 Missing semicolon.
line 2 col 211 Missing semicolon.
line 2 col 424 Missing semicolon.
line 2 col 530 Missing semicolon.
line 2 col 632 Missing semicolon.
line 2 col 661 Use '!==' to compare with 'null'.
line 2 col 709 Missing semicolon.
line 2 col 818 Missing semicolon.
line 2 col 858 Missing semicolon.
line 2 col 943 Missing semicolon.
line 2 col 946 Missing semicolon.
line 2 col 1011 Missing semicolon.
line 2 col 1047 Missing semicolon.
line 2 col 1083 Missing semicolon.
line 2 col 1178 Missing semicolon.
line 2 col 1237 Missing semicolon.
line 2 col 1503 Use '!==' to compare with 'null'.
line 2 col 1704 Expected an assignment or function call and instead saw an expression.
line 2 col 1714 Missing semicolon.
line 2 col 1826 Missing semicolon.
line 2 col 1897 Missing semicolon.
line 2 col 1959 Missing semicolon.
line 2 col 1993 Use '!==' to compare with 'null'.
line 2 col 2009 Missing semicolon.
line 2 col 2096 Missing semicolon.
line 2 col 2158 Missing semicolon.
line 2 col 2361 Missing semicolon.
line 2 col 2379 Missing semicolon.
line 2 col 2467 Missing semicolon.
line 2 col 210 Expected an assignment or function call and instead saw an expression.
line 2 col 2578 Missing semicolon.
line 2 col 2660 Missing semicolon.
line 2 col 2664 Expected an assignment or function call and instead saw an expression.
line 2 col 2665 Missing semicolon.
line 2 col 2727 Missing semicolon.
line 2 col 2813 Missing semicolon.
line 2 col 2901 Confusing use of '!'.
line 2 col 2909 Missing semicolon.
line 2 col 2951 Confusing use of '!'.
line 2 col 2968 Missing semicolon.
line 2 col 2998 Use '===' to compare with 'null'.
line 2 col 3025 Missing semicolon.
line 2 col 3074 Use '!==' to compare with 'null'.
line 2 col 3143 Missing semicolon.
line 2 col 3286 Missing semicolon.
line 2 col 3295 Missing semicolon.
line 2 col 3434 Missing semicolon.
line 2 col 3531 Expected an assignment or function call and instead saw an expression.
line 2 col 3541 Missing semicolon.
line 2 col 3541 Too many errors. (33% scanned).
line 2 col 12 One space required before function parameter 'b'
line 2 col 14 One (or more) spaces required before opening brace for block expressions
line 2 col 14 Missing space before opening curly brace
line 2 col 15 Invalid quote mark found
line 2 col 23 Operator == should not stick to preceding expression
line 2 col 25 Operator == should not stick to following expression
line 2 col 38 Operator && should not stick to preceding expression
line 2 col 40 Invalid quote mark found
line 2 col 40 Operator && should not stick to following expression
× 1 error
‼ 59 warnings
Web\Features\Shared\Kendo\jszip.min.js
line 12 col 17569 This character may get silently deleted by one or more browsers.
line 12 col 274 Expected an assignment or function call and instead saw an expression.
line 12 col 275 Missing semicolon.
line 12 col 494 Missing semicolon.
line 12 col 494 Expected an identifier and instead saw '='.
line 12 col 494 Expected an assignment or function call and instead saw an expression.
line 12 col 495 Missing semicolon.
line 12 col 514 Expected an assignment or function call and instead saw an expression.
line 12 col 515 Missing semicolon.
line 12 col 607 Missing semicolon.
line 12 col 629 Missing semicolon.
line 12 col 649 Missing semicolon.
line 12 col 731 Missing semicolon.
line 12 col 17570 Control character in string: <non-printable>.
line 12 col 17571 Control character in string: <non-printable>.
line 12 col 17599 Control character in string: <non-printable>.
line 12 col 17600 Control character in string: <non-printable>.
line 12 col 17630 Control character in string: <non-printable>.
line 12 col 17631 Control character in string: <non-printable>.
line 12 col 17671 Control character in string: <non-printable>.
line 12 col 17672 Control character in string: <non-printable>.
line 12 col 17708 Control character in string: <non-printable>.
line 12 col 17709 Control character in string: <non-printable>.
line 12 col 17733 Control character in string: <non-printable>.
line 12 col 786 Possible strict violation.
line 12 col 798 Possible strict violation.
line 12 col 810 Possible strict violation.
line 12 col 827 Possible strict violation.
line 12 col 840 Possible strict violation.
line 12 col 850 Expected an assignment or function call and instead saw an expression.
line 12 col 866 Possible strict violation.
line 12 col 900 Missing semicolon.
line 12 col 942 Missing '()' invoking a constructor.
line 12 col 1004 Missing semicolon.
line 12 col 1263 Missing semicolon.
line 12 col 1425 Missing semicolon.
line 12 col 1437 Expected an assignment or function call and instead saw an expression.
line 12 col 1438 Missing semicolon.
line 12 col 1822 Expected an assignment or function call and instead saw an expression.
line 12 col 1832 Missing semicolon.
line 12 col 2182 Expected an assignment or function call and instead saw an expression.
line 12 col 2192 Missing semicolon.
line 12 col 2192 Expected an assignment or function call and instead saw an expression.
line 12 col 2193 Missing semicolon.
line 12 col 2244 Possible strict violation.
line 12 col 2266 Possible strict violation.
line 12 col 2290 Possible strict violation.
line 12 col 2303 Possible strict violation.
line 12 col 2331 Possible strict violation.
line 12 col 2354 Expected an assignment or function call and instead saw an expression.
line 12 col 2354 Too many errors. (85% scanned).
× 4 errors
‼ 47 warnings
[/code]

...and Visual Studio just quits. The application doesn't start.

Notice the last message reads: Too many errors. (85% scanned).

I'm using the basic example that comes with the free Kendo package. I ported all the references into my solution.

Has anyone else experienced this before? How can it be overcome?

I'm also open to referencing online resources. Does Telerik make the js and css reference files available online?

Thanks.

General Discussions

answered on 08 Mar 2017

1 answer

472 views

How to use different tooltips for different series types

Hello,

I am using different series types in my chart, like column, line and rangeColumn. I have a problem with the settings for my tooltip, because I don't know how to use different tooltips for different types of series.

While for the types column and line my used template "#= series.name #: #= value #" works perfectly fine, for my rangeColumns I'd need "#= series.name #: #= value.from #" , because otherwise I just see nonsense as pointed out in the attached picture.

Is there any possibility to customize the tooltips for each series type?

Thank you and best regards,

Harald

Charts

answered on 08 Mar 2017

3 answers

271 views

Copy & Paste multiple column at once, Change event only trigger the first column

Hi,

My spreadsheet might have hundred of records, but I'm intend to detect the changes row each time user click on save button.

I found that when user copy from external excel and paste to kendo spreadsheet, change event only trigger the first value changed.

Below are the code that I tried:

change: function (e) {
var row = e.range._ref.topLeft.row - 1;
if (rowIndexChanged.indexOf(row + "|") >= 0)
return;

rowIndexChanged += row.toString() + "|";
}

Is there any other simpler way to get the changes of row's index from spreadsheet?

Thank you!

Regards,

Su Pei

Spreadsheet

answered on 08 Mar 2017

5 answers

1.5K+ views

Iterate through Kendo adatasource

I am trying to iterate through a Kendo datasource using the $.map function to inspect the values.

How do I do this?

So far I have this... but I cant seem to get to the actual value...

$.map(ds.data(), function (value, index) {

var $row = $(this);

$.each($row, function (index, value) {

alert(value.toString());

});

Data Source

answered on 08 Mar 2017