Questions on Kendo UI for jQuery Forum

1 answer

587 views

Hi,

I am having issues with loading my treelist. I get "no records to display". What am i doing wrong? Here is my code:

$(function () {
hideProgressIndicator();
$("#treelist").kendoTreeList({
resizable: true,
selectable: true,
columns: [
{ template: "<input type='checkbox' data-bind='checked: checked' />", width: 60 },
{ field: "Id", title: "Id", hidden: true },
{ field: "", title: "", template: "<i class='glyphicon glyphicon-cog' aria-hidden='true'></i> ", hidden: false, width: 60 },
{ field: "Step", title: "Step", hidden: false, width: 60 },
{ field: "AssigneeDisplayName", hidden: false, width: 200 },
{ field: "Description", hidden: false, width: 200 },
{ field: "Status", hidden: false, width: 80 },
{ field: "Instructions", hidden: false }
],

dataSource: {
transport: {
read: {
url: "@Url.Action("GetAndLockAssignmentList", "AssignmentList", new { area = "Activator", workitemId = ViewBag.WorkitemId })",
dataType: "json"
}
},
schema: {
model: {
id: "Id"
}
}
}
});
});

And here is the data being returns for the datasource:

[{"Id":12414,"Step":1,"AssigneeNodeId":1,"Instructions":null,"Deadline":{"Days":1,"Hours":2,"Minutes":3,"TotalMinutes":603},"DueDate":"\/Date(-62135578800000)\/","Status":0,"IsPinRequired":false,"DistributionType":0,"AssigneeDisplayName":"Default Adminab","Description":"Serial 1","NotifyAssignee":true,"CompletionNotify":true,"IsFyi":false,"SendFyiOnRelease":true,"ChildAssignmentListId":0,"ReleasePaths":"Yes; No; Maybe","ReleaseComment":null,"IsCommentRequired":false,"SelectedReleasePath":null,"DateReleased":null,"NotifyAssigneeTemplate":10,"NotifyAssigneeTemplateDescription":"Offline Copy Arrived","CompletionNotifyTemplate":11,"CompletionNotifyTemplateDescription":"Offline Copy Released","IsOverDue":false,"IsParallel":false,"HasChild":false},{"Id":12415,"Step":2,"AssigneeNodeId":1,"Instructions":null,"Deadline":{"Days":0,"Hours":0,"Minutes":0,"TotalMinutes":0},"DueDate":"\/Date(1468468800000)\/","Status":0,"IsPinRequired":false,"DistributionType":0,"AssigneeDisplayName":"Default Adminab","Description":"Serial 2","NotifyAssignee":false,"CompletionNotify":false,"IsFyi":false,"SendFyiOnRelease":true,"ChildAssignmentListId":0,"ReleasePaths":"Yes; No; Maybe","ReleaseComment":null,"IsCommentRequired":false,"SelectedReleasePath":null,"DateReleased":null,"NotifyAssigneeTemplate":0,"NotifyAssigneeTemplateDescription":null,"CompletionNotifyTemplate":0,"CompletionNotifyTemplateDescription":null,"IsOverDue":false,"IsParallel":false,"HasChild":false},{"Id":12418,"Step":3,"AssigneeNodeId":1,"Instructions":null,"Deadline":{"Days":0,"Hours":0,"Minutes":0,"TotalMinutes":0},"DueDate":"\/Date(-62135578800000)\/","Status":0,"IsPinRequired":false,"DistributionType":0,"AssigneeDisplayName":"Default Adminab","Description":"Parallel 1","NotifyAssignee":false,"CompletionNotify":false,"IsFyi":false,"SendFyiOnRelease":true,"ChildAssignmentListId":0,"ReleasePaths":"Yes; No; Maybe","ReleaseComment":null,"IsCommentRequired":false,"SelectedReleasePath":null,"DateReleased":null,"NotifyAssigneeTemplate":0,"NotifyAssigneeTemplateDescription":null,"CompletionNotifyTemplate":0,"CompletionNotifyTemplateDescription":null,"IsOverDue":false,"IsParallel":true,"HasChild":false},{"Id":12419,"Step":3,"AssigneeNodeId":1,"Instructions":null,"Deadline":{"Days":0,"Hours":0,"Minutes":0,"TotalMinutes":0},"DueDate":"\/Date(-62135578800000)\/","Status":0,"IsPinRequired":false,"DistributionType":0,"AssigneeDisplayName":"Default Adminab","Description":"Parallel 2","NotifyAssignee":false,"CompletionNotify":false,"IsFyi":false,"SendFyiOnRelease":true,"ChildAssignmentListId":0,"ReleasePaths":"Yes; No; Maybe","ReleaseComment":null,"IsCommentRequired":false,"SelectedReleasePath":null,"DateReleased":null,"NotifyAssigneeTemplate":0,"NotifyAssigneeTemplateDescription":null,"CompletionNotifyTemplate":0,"CompletionNotifyTemplateDescription":null,"IsOverDue":false,"IsParallel":true,"HasChild":false}]

TreeList

answered on 07 Jul 2016

1 answer

1.3K+ views

Grid refresh on Add or Delete with Angular

I'm using Kendo UI grid with angular and webapi2 backend. If I update a row on the backend and refresh the grid, the changed data is reflected just fine. If I add or delete a row the grid does not reflect this change (unless I do a full page refresh). My refresh function is as follows:

$scope.grid.datasource.transport.read();

$scope.grid.refresh();

Debugging network requests shows the correct JSON data being returned from webapi, the control just does not reflect the updated data set.

Grid

answered on 07 Jul 2016

1 answer

125 views

Custom checkboxes filter with ColumnMenu = true

Hi

Do you have an example of making custom checkboxes filter (http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/checkbox-filter-menu) when using the option columnMenu as true? It seems the event filterMenuInit does not work in this case. I am using this column menu object :

columnMenu: {
columns: false
}

thanks

Grid

answered on 07 Jul 2016

4 answers

504 views

Possible Bug in DropDownList

Hello,

I have a dropdownlist where I am using the .Select() and .Close() events. What I'm doing is changing the background colors of the dropdownlists when there is something in the list selected. This is so there's a visual indication for the user. If the user clicks off the box, it will remain colorized if there's a selection made. If there isn't, then it will return to the default color. Attached image (ex-01)

For some reason, this doesn't work if I have a different .DataTextField vs. .DataValueField. I have done this because I need to have the list display only a pre-formatted first name for the user. (e.g. John, instead of John Smith or JOHN SMITH). So in the cases where I have pre-formatting, it will colorize the dropdown correctly, but it does not remove it when I return to selectedIndex = 0 like the rest of the dropdowns. Attached image (ex-02).

The only difference in the code is that the .DataTextField("SomeFieldDisplay") and .DataValueField("SomeField") for the items that DO NOT. For the ones that work, it's .DataTextField("SomeField") and .DataValueField("SomeField"). I'm pretty puzzled by this one. My code is below. Thanks!

<script type="text/javascript">

function onSelect(e) {

e.sender.wrapper.children(0).addClass("custom-dropdown");

}

function onClose(e) {

if (e.sender.selectedIndex < 1) {

e.sender.wrapper.children(0).removeClass("custom-dropdown");

}

</script>

<style>

html .k-widget .custom-dropdown {

background-color: #00B312;

}

</style>

@( Html.Kendo().DropDownList()
    .Name("ddlTopics")
    .DataTextField("TopicTitle")
    .DataValueField("TopicTitle")
    .DataSource(ds =>
       {
       ds.Read(read =>
           {
               read.Action("GetAllTopicsByTitle", "Hierarchy");
           });
        })
    .Events(e =>
        {
            e.Select("onSelect").Close("onClose");
        })
    .OptionLabel("--Select Topic--")
)
 
@(Html.Kendo().DropDownList()
    .Name("ddlTopicOwner")
    .DataTextField("TopicOwnerDisplay")
    .DataValueField("TopicOwner")
    .DataSource(ds =>
        {
        ds.Read(read =>
            {
                read.Action("GetAllTopicsByOwner", "Hierarchy");
            });
        })
    .Events(e =>
        {
            e.Select("onSelect").Close("onClose");
        })
    .OptionLabel("--Select Topic Owner--")
)

DropDownList

answered on 07 Jul 2016

1 answer

1.0K+ views

[Solved] Disable only checkbox

Hi,

I need to disable node-checkbox (only the checkbox) and not the whole node.

this should be work by the prop "available".

attached example of my code:

http://dojo.telerik.com/@idoglik6/usIro

Thanks,

Ran

TreeView

answered on 07 Jul 2016

1 answer

216 views

Using Angular directives in external template view

Background: I'm using external templates as described here for different pages in my SPA. Those pages consist of script tags with type "text/x-kendo/template". I load those templates into my index.html file and create Kendo views for each of the pages.

For some reason, I am not able to use the Kendo angular directives (e.g., "<input kendo-date-time-picker/>") inside my template scripts - they don't load properly. Using the same directives in my index.html file works perfectly though, so there shouldn't be a problem with dependencies. I suspect that the problem is either that there's some incompatibility with having the angular directives inside a View or that I'm not calling the right functions on the View. Right now, I'm just doing "layoutName.showIn("#content", viewName);" for the latter.

If anyone knows a fix, that would be super helpful. Otherwise, pointing me to an example of an SPA using external templates and the Kendo Angular directives would be helpful as well.

View

answered on 06 Jul 2016

1 answer

154 views

Column Resizing Handles on IE

We are currently experiencing a bug in the kendo grid control on IE version 11.420.10586.0 and 11.0.9600.18349, have not test all IE versions only these 2. The column resizing handles do not appear when attempting to resize the column. It has been tested in modern versions of Firefox, Chrome, Safari, Opera and IE and IE is the only one experiencing this issue. Is this a known issue and can you recommend a work around? I am experiencing this but on your samples so I have not enclose sample code. Please see http://demos.telerik.com/kendo-ui/grid/column-resizing, I am experiencing the problem in your samples as well as in my own project.

Thanks

Grid

answered on 06 Jul 2016

1 answer

123 views

Unable to resize grid column headers in IE

Hi Team,

We are not able to resize the column headers in Kendo grid on IE. Please use following link to reproduce the issue.

http://demos.telerik.com/kendo-ui/grid/column-resizing

The example works as expected when we open the link in Chrome.

Grid

answered on 06 Jul 2016

4 answers

846 views

"Table head not found in directory" error

I'm getting this error when I try to export to PDF (Scheduler). What I'm missing ?

Thank you

Scheduler

answered on 06 Jul 2016

10 answers

437 views

majorUnit 1 with large number in valueAxis

Hello,

We'd like only show whole numbers in the valueAxis - see example: http://dojo.telerik.com/ElobA/16

So, to solve this we added 'majorUnit: 1', which works fine.

However, we don't always know the data we are going to receive, and sometimes the values can be quite large.

If majorUnit is set to '1' with large values it will crash the browser. See example (uncomment majorUnit for crash): http://dojo.telerik.com/ElobA/13.

Is there a better recommended way of handling this? Or is it possible to set a value that determines the 'minimumMajorUnit' that won't crash the chart with large values?

Thanks for your help.

--Jeff

Charts

answered on 05 Jul 2016