Telerik Forums
Kendo UI for jQuery Forum
1 answer
405 views

Hi,

Is there a way to avoid the overlapping of content of two connectors from each other. After going through the connection defaults I don't see any property which can avoid this overlapping. connections.content has only font related properties. Please see attached screenshot for the overlapping content.

Below is the connection deafults which I have configured.

connectionDefaults: {
                        endCap: "ArrowEnd",
                        startCap: "FilledCircle",
                        content: {
                            template: "# if (dataItem.percentage) {# #= dataItem.percentage #% #} #"
                        },
                        stroke: {
                            color: "#000000",
                            width: 2
                        },
                        editable: {
                            connect: true,
                            remove: true,
                            tools: [{ name: "edit" }]
                        },
                        type: "polyline"
                    },

Vessy
Telerik team
 answered on 10 Jul 2020
3 answers
167 views

I have a grid which has three columns:

  • The first one is just text, not editable.
  • The second one is an <input>, should be editable.
  • The third one is a kendoDropDownList, should be editable.

My dataSource, with the two fields I want to be editable marked as such:

var dataSource = new kendo.data.DataSource({
  // Omitted for brevity
  schema: {
    model: {
      id: 'row',
      fields: {
        row: { type: 'number', editable: false },
        type: { type: 'number', editable: false },
        description: { type: 'string', editable: false }, // First column
        quantity: { type: 'number', editable: true }, // Second column
        reason: { type: 'number', editable: true } // Third column
      }
    }
  }
});

My kendoGrid, with editable: 'incell':

$('#grid').kendoGrid({
  dataSource: dataSource,
  editable: 'incell',
  columns: [
    {
      title: 'Description',
      field: 'description'
    },
    {
      title: 'Quantity',
      field: 'quantity',
      editable: function (e) { return false; },
      template: '<input type="text" id="quantity_#= row #" class="k-textbox" value="#= quantity #" />'
    },
    {
      title: 'Reason',
      field: 'reason',
      editable: function (e) { return false; },
      template: '<select id="reason_#= row #" name="reason_#= row #" class="reasoncombo" />'
    }
  ]
  // Omitted for brevity
});

I set editable: function (e) { return false; } to both columns I want to edit so it doesn't use the native editor. 

The documentation reads The JavaScript function executed when the cell/row is about to be opened for edit. The result returned will determine whether an editor for the column will be created.

Now my issue is whenever I change the value of an <input> or select another value from a kendoDropDownList, those fields are not updated and marked as dirty in the dataSource.

I even tried to add `data-bind:"value:quantity"` to the template of my <input>, no luck.

Here is a working fiddle for test purposes.

Is there a way to edit fields without the native editor?

PS: I should add that if I change editable: function (e) { return false; } to return true instead, my <input> and kendoDropDownList get changed to the native editor when clicked and changing values in the editor works just fine, though this is not what I want.

Tsvetomir
Telerik team
 answered on 10 Jul 2020
1 answer
111 views

I have this grid:

01.<div id="SearchDetail">
02.    <div id="SearchResult" style="width:850px"></div>
03.</div>
04.  
05.<script>
06.    function getSearchResult() {
07.        $("#SearchResult").kendoGrid({
08.            dataSource: {
09.                transport: {
10.                    read: {
11.                        url: BASE_URL + "SomeApi/GetRequestList",
12.                        type: "post",
13.                        dataType: "json",
14.                        data: {                       
15.                            CardId: $("#ParkingCardId").val(),
16.                            StatusId: $("#StatusId").val(),
17.                            Status: $("#Status").val()
18.                        }
19.                    }
20.                },
21.                pageSize: 10,
22.                schema: {
23.                    data: "result",
24.                    total: "total"
25.                }
26.            },
27.            groupable: false,
28.            sortable: true,
29.            resizable: true,
30.            pageable: true,
31.            filterable: false,
32.            selectable: "single",
33.            dataBound: function(e) {
34.                for (var i = 0; i < this.columns.length; i++) {
35.                    if (i === 2) {
36.                        continue;
37.                    }
38.  
39.                    this.autoFitColumn(i);
40.                }
41.  
42.                setTimeout(function() {
43.                        $(".k-pager-wrap ul").css({ "margin-left": "0px" });
44.                        $(".k-pager-wrap ul li")
45.                            .css({ "margin-left": "0px", "padding-left": "0px", "list-style-type": "none" });
46.                    },
47.                    100);
48.            },
49.            columns: [ {
50.                    field: "ParkingCardId",
51.                    title: "Card Id",
52.                    template: '<a href="@Url.Action("NewRequest", "Parking")?cardId=#=ParkingCardId#&cardTypeString=View">#=ParkingCardId#</a>'
53.                }, {
54.                    field: "Name",
55.                    title: "Full Name"
56.                }, {
57.                    field: "Status",
58.                    title: "Status"
59.                }, {
60.                    field: "IsExpired",
61.                    title: "Action",
62.                    template: '#if (IsExpired) {# <a href="@Url.Action("NewRequest", "Parking")?cardId=#=ParkingCardId#&cardTypeString=Renew Card">Renew</a> #} else {# #}#'
63.                }, {
64.                    field: "StatusId",
65.                    title: "Action",
66.                    template: '#if (StatusId === 0) {# <input type="button" class="k-button" value="Cancel" onclick="openDialog(#=ParkingCardId#)" #} else {# #}#'
67.                }
68.            ]
69.        });
70.    }
71.</script>

 

How do I get a single Action column with the two conditional actions? The button can be replaced with link.

Ivan Danchev
Telerik team
 answered on 09 Jul 2020
3 answers
663 views

 

I have a page where I am adding multiple treeviews dynamically, using a kendo template.

They are created in a loop from a javascript object.

I build the structure (ul, li, etc.), then after creating the multiple tress, run the $(...).kendoTreeView() with checkbox options.

The treeviews are formatted but as single select and not with checkboxes.

I have created an example (https://dojo.telerik.com/otelaBEL/2).

What is going wrong?

Aleksandar
Telerik team
 answered on 09 Jul 2020
2 answers
150 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
293 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
22.6K+ 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
271 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
434 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
139 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?