Telerik Forums
Kendo UI for jQuery Forum
2 answers
282 views
I was trying to find solution on this forum but I could not find it.

My kendo grid is define as followed:
001.var dataSource = new kendo.data.DataSource({
002.    batch: false,
003.    autoSync: true,
004.    transport: {
005.        read: {
006.            url: "/monitoring/matrix/routecontentrules?format=json",
007.            contentType: "application/json; charset=utf-8",
008.            dataType: "json",
009.            type: "POST",
010.            timeout: 30000
011.        },
012.        update: {
013.            url: "/monitoring/matrix/routecontentrules/updateroutecontentrule",
014.            contentType: "application/json; charset=utf-8",
015.            dataType: "json",
016.            type: "PUT"
017.        },
018.        create: {
019.            url: "/monitoring/matrix/routecontentrules/createroutecontentrule",
020.            contentType: "application/json; charset=utf-8",
021.            dataType: "json",
022.            type: "POST"
023.        },
024.        destroy: {
025.            url: "/monitoring/matrix/routecontentrules/deleteroutecontentrule",
026.            contentType: "application/json; charset=utf-8",
027.            dataType: "json",
028.            type: "DELETE"
029.        },
030.        parameterMap: function (data, operation) {
031.            if (operation == "read") {
032.                return kendo.stringify({
033.                    RouteId: routeDataItem.RouteId
034.                });
035.            }
036.            else if (operation == "destroy") {
037.                return kendo.stringify({
038.                    Id: data.Id,
039.                });
040.            }
041.            else {
042.                return kendo.stringify({
043.                    Id: data.Id,
044.                    RouteId: routeDataItem.RouteId,
045.                    OrderId: data.OrderId,
046.                    SenderMatch: data.SenderMatch,
047.                    ContentMatch: data.ContentMatch,
048.                    SenderReplace: data.SenderReplace,
049.                    ContentReplace: data.ContentReplace,
050.                });
051.            }
052.        }
053.    },
054.    schema: {
055.        model: {
056.            id: "Id",
057.            fields: {
058.                Id: { type: "number", defaultValue: 0 },
059.                OrderId: { type: "number", defaultValue: 0 },
060.                SenderMatch: { type: "string", defaultValue: "" },
061.                ContentMatch: { type: "string", defaultValue: "" },
062.                SenderReplace: { type: "string", defaultValue: "" },
063.                ContentReplace: { type: "string", defaultValue: "" }
064.            }
065.        }
066.    }
067.});
068. 
069.$("#Grid").kendoGrid({
070.    dataSource: dataSource,
071.    reorderable: false,
072.    resizable: false,
073.    sortable: false,
074.    groupable: false,
075.    scrollable: true,
076.    navigatable: true,
077.    editable: true,
078.    columns: [
079.        {
080.            width: 150, field: "SenderMatch", title: "Sender match",
081.            template: "<span><label class='SenderMatch'</label></span>",
082.            headerAttributes: { title: "Sender match", style: "text-align: right" }, attributes: { style: "text-align: right" }
083.        },
084.        {
085.            width: 150, field: "ContentMatch", title: "Content match",
086.            template: "<span><label class='SenderMatch'</label></span>",
087.            headerAttributes: { title: "Content match", style: "text-align: right" }, attributes: { style: "text-align: right" }
088.        },
089.        {
090.            width: 150, field: "SenderReplace", title: "Sender replace",
091.            template: "<span><label class='SenderMatch'</label></span>",
092.            headerAttributes: { title: "Sender replace", style: "text-align: right" }, attributes: { style: "text-align: right" }
093.        },
094.        {
095.            width: 150, field: "ContentReplace", title: "Content replace",
096.            template: "<span><label class='SenderMatch'</label></span>",
097.            headerAttributes: { title: "Content replace", style: "text-align: right" }, attributes: { style: "text-align: right" }
098.        },
099.        {
100.            command: [
101.                { name: "destroy", template: "<a class='k-button k-grid-delete delete'><span class='k-sprite px-sprite px-i-sm-trash'></span></a>" }
102.            ],
103.            width: "50px"
104.        }
105.    ],
106.    toolbar: kendo.template('<span class="ReloadManipulationByCustomer" style=""><span class="k-icon k-i-refresh refresh-btn"></span></span><a class="k-button k-grid-add add-btn" href="javascript:void(0)"><span class="k-sprite px-sprite px-i-sm-new new" />Add</a>')
107.});
108. 
109.$(".ReloadManipulationByCustomer").click(function () {
110.    $("#Grid").data("kendoGrid").dataSource.read();
111.});

 

For backend I am using ServiceStack, requests are define as followed:

01.[Route("/monitoring/matrix/routecontentrules/createroutecontentrule", "POST")]
02.[Route("/monitoring/matrix/routecontentrules/updateroutecontentrule", "PUT")]
03.public sealed class CreateUpdateRouteContentRuleRequest
04.{
05.    public int Id { get; set; }
06. 
07.    public int OrderId { get; set; }
08. 
09.    public int RouteId { get; set; }
10. 
11.    public string SenderMatch { get; set; }
12. 
13.    public string ContentMatch { get; set; }
14. 
15.    public string SenderReplace { get; set; }
16. 
17.    public string ContentReplace { get; set; }
18.}
19. 
20.[Route("/monitoring/matrix/routecontentrules")]
21.public sealed class RouteContentRulesRequest
22.{
23.    public int RouteId { get; set; }
24.}
25. 
26.[Route("/monitoring/matrix/routecontentrules/deleteroutecontentrule")]
27.public sealed class DeleteRouteContentRuleRequest
28.{
29.    public int Id { get; set; }
30.}
31. 
32.public sealed class RouteContentRuleModel
33.{
34.    public int Id { get; set; }
35. 
36.    public int OrderId { get; set; }
37. 
38.    public int RouteId { get; set; }
39. 
40.    public string SenderMatch { get; set; }
41. 
42.    public string ContentMatch { get; set; }
43. 
44.    public string SenderReplace { get; set; }
45. 
46.    public string ContentReplace { get; set; }
47.}

Code for retrieving data is as follows:

01.public object Post(RouteContentRulesRequest request)
02.{
03.    return _dbConnectionFactory
04.        .OpenReadOnlyAndRun(dbConn => dbConn.Select<RouteContentRule>(r => r.RouteId == request.RouteId).OrderBy(r => r.OrderId));
05.}
06. 
07.public object Any(CreateUpdateRouteContentRuleRequest request)
08.{
09.    RouteContentRule entity;
10. 
11.    if (!Db.Exists<Route>(new { Id = request.RouteId }))
12.    {
13.        throw new HttpError(HttpStatusCode.BadRequest, $"Route with id {request.RouteId} does not exist");
14.    }
15.    if (request.Id != 0)
16.    {
17.        var routeContentRule = _dbConnectionFactory.OpenReadOnlyAndRun(dbConn => dbConn.SingleById<RouteContentRule>(request.Id));
18.        entity = request.ToEntity(routeContentRule);
19.        Db.Update(entity, r => r.Id == routeContentRule.Id);
20.        return entity.ToModel();
21.    }
22. 
23.    entity = request.ToEntity();
24.    entity.OrderId = (_dbConnectionFactory.OpenReadOnlyAndRun(dbConn => dbConn.Scalar<RouteContentRule, int?>(x => Sql.Max(x.OrderId), x => x.RouteId == request.RouteId)) ?? 0) + 1;
25.    var id = (int)Db.Insert(entity, true);
26.    entity.Id = id;
27. 
28.    return entity.ToModel();
29.}
30. 
31.public void Delete(DeleteRouteContentRuleRequest request)
32.{
33.    Db.Delete<RouteContentRule>(new {Id = request.Id});
34.}

 

Data during read request is as follows:

01.[
02.   {
03.      "Id":35,
04.      "OrderId":1,
05.      "RouteId":72303,
06.      "SenderMatch":"335",
07.      "ContentMatch":"",
08.      "SenderReplace":"",
09.      "ContentReplace":""
10.   },
11.   {
12.      "Id":36,
13.      "OrderId":2,
14.      "RouteId":72303,
15.      "SenderMatch":"55",
16.      "ContentMatch":"",
17.      "SenderReplace":"",
18.      "ContentReplace":""
19.   }
20.]

 

Problem is that grid is not showing these data. I can see that data is here if I click on grid cell. In that situation that cell become editable and it is showing current value of data. But as soon as I move editing to some new cell previous hide data. I was inspecting cell and I have found out that when cell is not editing it is described as following:

1.<td style="text-align: right" aria-describedby="50349c08-da61-49d2-aa73-9c0823d4a4a4" role="gridcell">
2.    <span><label class="SenderMatch" <="" label=""></label></span>
3.</td>

 

And when cell is in edding mode it is described in html as following:

1.<td style="text-align: right" aria-describedby="ccc2df23-b49a-4b00-820a-02a67c428a52" role="gridcell" id="Grid_active_cell" class="k-edit-cell" data-role="editable">
2.    <input type="text" class="k-input k-textbox" name="SenderMatch" data-bind="value:SenderMatch">
3.</td>

I do not know why data is not showing. From what I can tell it should show data, but it is not showing this data.

Petar
Telerik team
 answered on 14 Aug 2020
1 answer
83 views

Does the kendo grid support multi-header , multi-data low layout?

I attached the table layout that I want.

Ivan Danchev
Telerik team
 answered on 13 Aug 2020
3 answers
105 views

Hello,

I can't seem to find a way to sort my filter values into alpha order when the values are being pulled from JSON. Previously filtername.sort() had worked when I had the JSON data directly on the page but that is not an option with this implementation. 

Live page:

https://www.ccah-alliance.org/Urgent-Visit-Providers.html

 

Code:

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

            <script>



                $(document).ready(function () {

                    var myDataSource =
                        new kendo.data.DataSource({
                            data: JSON,
                            schema: {
                                model: {
                                    fields: {
                                        "ProviderName": { type: "string" },
                                        "OfficeName": { type: "string" },
                                        "OfficeAddress": { type: "string" },
                                        "OfficeCityStateZip": { type: "string" },
                                        "PrimarySpecialty": { type: "string" },
                                        "ProviderLanguages": { type: "string" },
                                        "Hospitals": { type: "string" }
                                    }
                                }
                            },
                            transport: {
                                read: "/aspnetforms/UrgentVisitProviders.ashx"
                            },
                            pageSize: 15,
                            sort: [
                                { field: "OfficeCityStateZip", dir: "asc" },
                            ]
                        });

                    myDataSource.read();


                    $("#grid").kendoGrid({
                        dataSource: myDataSource,
                        dataBound:
                            function (e) {
                                var data = $("#grid").data("kendoGrid").dataSource._data;
                                for (i = 0; i < data.length; i++) {

                                    if (myCities.indexOf(data[i].OfficeCityStateZip) === -1) {
                                        myCities.push(data[i].OfficeCityStateZip);
                                    }

                                    if (mySpecialty.indexOf(data[i].PrimarySpecialty) === -1) {
                                        mySpecialty.push(data[i].PrimarySpecialty);
                                    }

                                    if (myLanguages.indexOf(data[i].ProviderLanguages) === -1) {
                                        myLanguages.push(data[i].ProviderLanguages);
                                    }

                                    if (myHospitals.indexOf(data[i].Hospitals) === -1) {
                                        myHospitals.push(data[i].Hospitals);
                                    }

                                }
                            },
                        columns: [{
                            field: "ProviderName",
                            title: "Provider",
                            width: 80,
                            filterable: false
                        },
                        {
                            field: "OfficeName",
                            title: "Office",
                            width: 110,
                            filterable: false

                        },
                        {
                            field: "OfficeAddress",
                            title: "Address",
                            width: 100,
                            filterable: false
                        },
                        {
                            field: "OfficeCityStateZip",
                            title: "City/State/Zip",
                            width: 105,
                            filterable: {
                                ui: cityFilter
                            }
                        },
                        {
                            field: "PrimarySpecialty",
                            title: "Specialty",
                            width: 80,
                            filterable: {
                                ui: specialtyFilter
                            }
                        },
                        {
                            field: "ProviderLanguages",
                            title: "Languages Spoken",
                            width: 85,
                            filterable: {
                                ui: languagesFilter
                            }
                        },
                        {
                            field: "Hospitals",
                            title: "Hospital",
                            width: 100,
                            filterable: {
                                ui: hospitalFilter
                            }
                        }],

                        sortable: true,
                        height: 900,
                        navigatable: true,
                        filterable: {
                            extra: false,
                            operators: {
                                string: {
                                    eq: "Only show"
                                }
                            }
                        },
                        pageable: {
                            alwaysVisible: true,
                            pageSizes: [5, 10, 20, 100]
                        }
                    });






                    var myCities = [];
                    var mySpecialty = [];
                    var myLanguages = [];
                    var myHospitals = [];




                    myCities.sort();
                    mySpecialty.sort();
                    myLanguages.sort();
                    myHospitals.sort();





                    function languagesFilter(element) {
                        element.kendoDropDownList({
                            dataSource: myLanguages,
                            optionLabel: "--Select Language--"
                        });
                    }


                    function cityFilter(element) {
                        element.kendoDropDownList({
                            dataSource: myCities,
                            optionLabel: "--Select City--"
                        });
                    }

                    function specialtyFilter(element) {
                        element.kendoDropDownList({
                            dataSource: mySpecialty,
                            optionLabel: "--Select Specialty--"
                        });
                    }

                    function hospitalFilter(element) {
                        element.kendoDropDownList({
                            dataSource: myHospitals,
                            optionLabel: "--Select Hospital--"
                        });
                    }






                });


            </script>

Alex Hajigeorgieva
Telerik team
 answered on 13 Aug 2020
3 answers
484 views

Hello, I am referring to the Filters section of https://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/end-user/user-guide

that describes the Sort fields spreadsheet function ("Sort range A to Z" and "Sort range Z to A" options appears when you click the filter button on the top of a column.

I would like to know how to change the javascript sorting function used for each of these options (it seems to be described on page https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.sortable in the "EXAMPLE - DEFINE CUSTOM COMPARE FUNCTION" section, but I am having difficulty getting this to work).

Thank you!

Aleksandar
Telerik team
 answered on 13 Aug 2020
2 answers
182 views

I have a grid populating local data with endless scrolling. I have a custom column with ng-repeat in template. Here the grid is duplicating values for that custom column against each data item whenever the loading of new items happens.  

Please refer attached files. 

Please check below link. In that there is Order Detail Grid and then look for custom column.

https://dojo.telerik.com/EWisALuH

rajesh
Top achievements
Rank 1
 answered on 13 Aug 2020
2 answers
106 views
I want to add language support to my Kendo UI Menu widget. There is no culture specific to it, how can I do it?
Furkan
Top achievements
Rank 2
 answered on 12 Aug 2020
1 answer
521 views

Hi, is it possible to do this? It is easy to import the data from one excel workbook (using the fromFile method), but then I would like to allow the user to load in data from additional excel workbooks and have the data display on new tabs of the kendo workbook. At the moment, each additional import overwrites the previous one.

 

Thanks for any help :)

Martin
Telerik team
 answered on 12 Aug 2020
1 answer
245 views

Just a quick request to modify one of the examples in the angular js demo of the drop down list to include basic ng-model code.

https://demos.telerik.com/kendo-ui/dropdownlist/angular

I know it's well documented in the API but I think it would be a minimum requirement for a demo.

 

Cheers

 

Aleksandar
Telerik team
 answered on 11 Aug 2020
6 answers
1.3K+ views

Ok so!

 

I am following a tutorial and the tutorial show how you can take an existing visual studio program and add Telerik to it.

 

Under the telerik menu option in visual studio I select Telerik UI for asp.net mvc then I select upgrade wizard.

Well silly me thought that the wizard after all its wizarding would add what I needed to my visual studio mvc project.

well well... I guess not. Gullible me thought something that we paid alot of money for would do what it claimed it would do.

NOPE!

Can some one tell when what is going wrong here...

I am adding a date time picker to a page. It does not work.

 

I did notice that the location that the wizard added was not in my actual file directory 

where it is looking... so do I have to manually copy those files there??

 

 

 

Here is the source code:

 

The Razor index.cshtml page

@{
    ViewBag.Title = "My Kiosk";
}


@(Html.Kendo().DatePicker().Name("Date").Value(DateTime.Today))

 

The Layout page for the mvc application there the link to the kendo stuff is:

<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="X-UA-Compatible" content="IE=11,chrome=1">

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@ViewBag.Title - XXXXX</title>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")


    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2020.2.617/jszip.min.js")"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
</head>
<body>

 

 

Here are the errors I get on the the web browser 

GET http://localhost:50296/Scripts/kendo/2020.2.617/jszip.min.js net::ERR_ABORTED 404 (Not Found)

bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
(index): 71

Uncaught ReferenceError: kendo is not defined at (index):71 (anonymous) @ (index):71

Aleksandar
Telerik team
 answered on 11 Aug 2020
1 answer
312 views

Hi Everyone,

The company I work for use KendoUI through JQuery and MVC.

We are doing Ajax calls via KendoGrid using Razor Pages. We have been getting a few status code 0 Ajax errors and are unsure how to proceed.
We log all of our errors into Raygun but once logged these Ajax errors do not have a stacktrace other than the message.

    I.E: "AJAX ERROR: error POST /File/Controller/Method/Parameters".

 

Theses errors do not always occur to every customer, and often happen sporadically.

We have ruled out the possibility of firewall/timeouts due to other calls becoming success seconds before and after these calls.
What else could be the reason for these status code 0 ajax calls?
What is the most efficient way log an error stacktrace through these KendoGrid Ajax calls?
Or better how can we avoid status code 0?

Thanks in advance.

Angel Petrov
Telerik team
 answered on 11 Aug 2020
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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?