Telerik Forums
Kendo UI for jQuery Forum
2 answers
170 views
I am implementing a project with a master theme css that is conflicting with the kendo css for Dropdowns. There is gap between the selection field or click and the selection list. Is there a way I can override the master css in the specific page whiles maintaining the master theme. I am using .netcore MVC. Please see the attached pictures...
Gideon
Top achievements
Rank 1
Veteran
 answered on 08 Jul 2020
1 answer
355 views

Hi!

I have a grid setup like below:

<div id="SearchDetail">
    <div id="SearchResult" style="width:850px"></div>
</div>
 
<script>
    function getSearchResult() {
        $("#SearchResult").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: BASE_URL + "SomeApi/GetRequestList",
                        type: "post",
                        dataType: "json",
                        data: {                        
                            CardId: $("#ParkingCardId").val(),
                            StatusId: $("#StatusId").val(),
                            Status: $("#Status").val()
                        }
                    }
                },
                pageSize: 10,
                schema: {
                    data: "result",
                    total: "total"
                }
            },
            groupable: false,
            sortable: true,
            resizable: true,
            pageable: true,
            filterable: false,
            selectable: "single",
            dataBound: function(e) {
                for (var i = 0; i < this.columns.length; i++) {
                    if (i === 2) {
                        continue;
                    }
 
                    this.autoFitColumn(i);
                }
 
                setTimeout(function() {
                        $(".k-pager-wrap ul").css({ "margin-left": "0px" });
                        $(".k-pager-wrap ul li")
                            .css({ "margin-left": "0px", "padding-left": "0px", "list-style-type": "none" });
                    },
                    100);
            },
            columns: [ {
                    field: "ParkingCardId",
                    title: "Card Id",
                    template: '<a href="@Url.Action("NewRequest", "Parking")?cardId=#=ParkingCardId#&cardTypeString=View">#=ParkingCardId#</a>'
                }, {
                    field: "Name",
                    title: "Full Name"
                }, {
                    field: "Status",
                    title: "Status"
                }, {
                    field: "IsExpired",
                    title: "Action",
                    template: '#if (IsExpired) {# <a href="@Url.Action("NewRequest", "Parking")?cardId=#=ParkingCardId#&cardTypeString=Renew Card">Renew</a> #} else {# #}#'
                }, {
                    field: "StatusId",
                    title: "Action",
                    template: '#if (StatusId === 0) {# Show a dialog asking user Y/N. If User press Yes, call Api tp cancel request #} else {# #}#'
                }
            ]
        });
    }
</script>

 

As per the comment on the second column titles Action, I need to show a Dialog with Yes/No option. If user say Yes, then I need to call the request cancel Api and if that returns success, reload the grid.

I need help in this template or a JS function.

Ivan Danchev
Telerik team
 answered on 07 Jul 2020
1 answer
23.0K+ views
I'm trying to put a conditional in a client template and can't figure out where in the docs this is addressed. Could you point me to the correct area? Here's the code that's not working. The conditional is "CanBeOverturned":

columns.Template(@<text></text>).ClientTemplate("<div>Reviewed Date : \\#=SubmissionDateString\\# | \\#=CorrectiveActionName\\# \\# if (CanBeOverturned == true) { <a href='javascript:var t=0;' onclick='javascript:return openOverturn(\"\\#=FeedbackFormId\\#\")' style='float:right;' class='openFeedbackForm')>+ Overturn</a> }</div>");

Thanks in advance for any help you can provide!
Martin
Telerik team
 answered on 07 Jul 2020
1 answer
291 views

Hi all,

I've been trying for hours to dynamically populate a kendo sub-menu with processed database items, and have those menu items call a javascript function on click. I've read all over the internet that with jQuery, I should really be using event listeners, but that's really difficult when the kendo menu populates its menus with identical IDs and classes on all its items, and I'd have to dynamically create different numbers of event listeners based on the quantity of items in the menu, and I don't even know if that's possible. Therefore, I'm trying to populate the menu with custom div elements with ng-click data to call a function. My javascript file is separate from the HTML file, but I know they're connected properly because other places on the page interact with the javascript functions just fine. When I use ng-click in the inner div I'm inserting via json, absolutely nothing happens. The breakpoint in the called function is never hit, but I know the function works because I created a simple test element elsewhere on the page using the exact same ng-click logic, and it called and executed the function just fine. We're using transformative kendo rather than the raw HTML tags. Here's a code snippet:

//Transform the kendo menu
$("#kendoMenu").kendoMenu();
//other code populating $scope.listOfMilestone from the database, we know that works because the vis timeline generates correctly
var milestonesReadable = new Array();
for (var i = 0; i < $scope.listOfMilestones.length; i++) {
    var milestoneDate = new Date($scope.listOfMilestones[i].StartDate);
    var dateString = (milestoneDate.getMonth() + 1) + "/" + milestoneDate.getDate() + "/" + milestoneDate.getFullYear();
    milestonesReadable.push({
        text: "<div ng-click=\"navigate('" + dateString + "')\">" + $scope.listOfMilestones[i].Title + " (" + dateString + ")</div>",
        encoded: false
    });
}
$("#dropdownMilestoneList").kendoMenu({
                    dataSource: milestonesReadable
});

//way further down in the javascript:
$scope.navigate = function (dateString) {
    debugger;
    $scope.timeline.moveTo(dateString);
}

Here's the essential structure of our <ul> structure that the kendo menu uses:

<ul id="kendoMenu>
    <li>
        Customize Timeline
        <ul>
            <!--many layers of menu that we know all work correctly-->
            <li>
                Functions
                <ul>
                    <li>
                        Go to Milestone
                        <ul id="dropdownMilestoneList></ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

When that innermost ul tag is populated (which appears correctly with appropriate data), and is checked using inspect element, you can see inside each <span class="k-link"> tag that indicates a menu item, there is indeed a div element with correct ng-click data, exactly as it was in my test element that worked. However, when you click on any of these menu items, the ng-click just doesn't do anything. No function call, no error, just nothing. When I replace it with the base HTML's onclick, an error is thrown, though:

Uncaught ReferenceError: navigate is not defined
    at HTMLDivElement.onclick

I'm at a total loss. Any advice would be appreciated.

Thanks.

Martin
Telerik team
 answered on 07 Jul 2020
1 answer
457 views

Hello,

          I am using kendo timeline javascript way . initially i bring only content for 1 timeline item . on timeline change i send request to request content for another item. 

     1)     I am able to get the content but on updating the data source using 
             

 $("#SampleTimeline").data('kendoTimeline').dataSource.data()[i].set("Description",response)

          it refresh, the timeline and it moves to initial first item . I also tried 

  $("#SampleTimeline").data('kendoTimeline').refresh() 

                         It does same , moves to first item

   2) How to get index of clicked item in timeline ? so that i can open dynamically item that was clicked.  (After refresh it moves to 1st content, which is not good as UI/UX)

Tsvetomir
Telerik team
 answered on 07 Jul 2020
1 answer
151 views

Hi

Does FileManager support retrieving data in batches ie Endless scrolling. 

We want to use FileManager  but we can have thousands of items in a folder and retrieving it all at one go does not work for us unfortunately

Regards
Kevin

 

Nencho
Telerik team
 answered on 07 Jul 2020
5 answers
192 views
Hi Guys,

Have just upgraded to Kendo UI 2020.2.617 which reports to include the fixed to the missing sort indicator issue which I raised in February, but I afraid to say this is still not working.

To illustrate open my original dojo example

    https://dojo.telerik.com/eMELiMut

and change the library to Kendo UI 2020 R2 SP1 and then run it.

You will see a sort indicator on the 'Ship Country' column.

Now if you uncomment 'autoBind:true' and 'dataSource.read();' and re-run you will see that although the data is being sorted correctly the 'Ship Country' column is missing the indicator.

Regards
Alan

AGB
Top achievements
Rank 1
Iron
 answered on 06 Jul 2020
11 answers
839 views

Hey folks,

i have a websocket delivers updates for my datasource. So if i get an update, i do a pushUpdate on the datasource an it is also displayed in my grid. But when i edit the specific dataItem i get the following error after clicking on "save". How do i fix this error or is there any workaround? 

Thanks so far.

Chris

 

kendo.all.js:4571 Uncaught TypeError: i.wrap is not a function
    at init (kendo.all.js:4571)
    at init._checkValidity (kendo.all.js:22720)
    at init.validateInput (kendo.all.js:22641)
    at init._validate (kendo.all.js:40512)
    at r.proxy (jquery-1.12.4.js:529)
    at r.trigger (kendo.all.js:124)
    at r.set (kendo.all.js:4637)
    at r.set (kendo.all.js:4803)
    at init.set (kendo.all.js:8280)
    at init.change (kendo.all.js:8480)

 

 

var ObservableObject = Observable.extend({
            init: function (value) {
                var that = this, member, field, parent = function () {
                        return that;
                    };
                Observable.fn.init.call(this);
                this._handlers = {};
                for (field in value) {
                    member = value[field];
                    if (typeof member === 'object' && member && !member.getTime && field.charAt(0) != '_') {
                        member = that.wrap(member, field, parent); //error here
                    }
                    that[field] = member;
                }
                that.uid = kendo.guid();
            },

 

 

Martin
Telerik team
 answered on 06 Jul 2020
7 answers
5.7K+ views
Is it possible for the grid toolbar to have a search box on top of each column and to filter the results on the grid as soon as the user starts typing. 

This is something that this grid has http://www.trirand.com/blog/jqgrid/jqgrid.html#

Thank you so much 
Alex Hajigeorgieva
Telerik team
 answered on 06 Jul 2020
1 answer
136 views
Hi Telerik,
Is there any way that we can do to scroll multiselect content horizontally?
Nencho
Telerik team
 answered on 06 Jul 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
Dialog
Chat
DateRangePicker
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
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?