Questions on Kendo UI for jQuery Forum

1 answer

371 views

When I place a TextBox into a panelbar the IE clear button is not visible. It is related with the k-widget class of the ul element.

I can fix it adding:

Is there any good reason for hiding the clear button in a Panelbar or is it just a bug?

You can reproduce it with the Basic panelbar demo in Dojo:

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/panelbar/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" />
    <script src="//kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
</head>
<body>
        <input type="text" value="works" />   
        <div id="example">
                <ul id="panelbar">
                <li class="k-state-active">
                    <span class="k-link k-state-selected">My Teammates</span>
                    <div style="padding: 10px;">
                        <div class="teamMate">
                            <img src="../content/web/panelbar/andrew.jpg" alt="Andrew Fuller">
                            <h2>Andrew Fuller</h2>
                            <p>Team Lead</p>
                            <input type="text" value="works not" />   
                        </div>
                        <div class="teamMate">
                            <img src="../content/web/panelbar/nancy.jpg" alt="Nancy Leverling">
                            <h2>Nancy Leverling</h2>
                            <p>Sales Associate</p>
                        </div>
                        <div class="teamMate">
                            <img src="../content/web/panelbar/robert.jpg" alt="Robert King">
                            <h2>Robert King</h2>
                            <p>Business System Analyst</p>
                        </div>
                    </div>
                </li>
                <li>
                    Projects
                    <ul>
                        <li>New Business Plan</li>
                        <li>
                            Sales Forecasts
                            <ul>
                                <li>Q1 Forecast</li>
                                <li>Q2 Forecast</li>
                                <li>Q3 Forecast</li>
                                <li>Q4 Forecast</li>
                            </ul>
                        </li>
                        <li>Sales Reports</li>
                    </ul>
                </li>
                <li>
                    Programs
                    <ul>
                        <li>Monday</li>
                        <li>Tuesday</li>
                        <li>Wednesday</li>
                        <li>Thursday</li>
                        <li>Friday</li>
                    </ul>
                </li>
                <li disabled="disabled">
                    Communication
                </li>
            </ul>
            <style>
                #panelbar {
                    max-width: 400px;
                    margin: 0 auto;
                }
                .teamMate:after {
                    content: ".";
                    display: block;
                    height: 0;
                    line-height: 0;
                    clear: both;
                    visibility: hidden;
                }
                .teamMate h2 {
                    font-size: 1.4em;
                    font-weight: normal;
                    padding-top: 20px;
                }
                .teamMate p {
                    margin: 0;
                }
                .teamMate img {
                    float: left;
                    margin: 5px 15px 5px 5px;
                    border: 1px solid #ccc;
                    border-radius: 50%;
                }
            </style>
            <script>
                $(document).ready(function() {
                    $("#panelbar").kendoPanelBar({
                        expandMode: "single"
                    });
                });
            </script>
        </div>

</body>
</html>

PanelBar

answered on 31 May 2016

3 answers

435 views

Column Chart is not updating / refresh using AngularJs

HTML

JS:

var self = $scope;

init();

function init() {
            self.ramDashboard = [];
            self.riskScoreDetailsSeries = [];
            self.riskScoreDetailsLabels = [];
            self.paymentYears = [];
            getRamDashboardData();
        }

       function getRamDashboardData() {

self.paymentYear = self.paymentYears[0].key;
self.getChartData();
}

self.getChartData = function () {
            var requestData = { PaymentYear: '' };
            requestData.PaymentYear = self.paymentYear;
            dashboardService.getRamDashboardData.save(requestData,
                function(response) {
                    self.ramDashboard = response;
                    bindRiskScoreChart(response.riskScoreDetails);

                });
        }

Above code is working on with initial Dropdown value selection,but once we change the paymentYear value with Dropdown chart is not getting refreshed.

please help.

Charts

answered on 31 May 2016

1 answer

200 views

Kendo Grid Inline Popup

Hello,
We are trying to do implement a unique requirement for our customer. For the kendo grid, we have implemented inline editing, but we have a lot of columns and some of the columns has a lot of text inside like the comment type columns. it makes it really hard for the customers to do an inline editing on those columns. For their convenience, we are trying to open up a pop up text editor when they click on certain columns that typically have a lot of texts, they are able to add the comments there, then we send the added comments to the respective cell and be able to save the grid.
Also, we have populating the grid columns dynamically.
The problem here is, after adding the comments and clicking on OK, on the UI the cell has the new comments but it doesn't look like it is being updated. As a result kendo grid doesn't know something has changed, and our save all changes/ cancel buttons are still disabled. I tried enabling them by editing other columns, and I clicked on the save all changes button, and it said saved successfully, but even though the comment cell has new text values, it didn't save them, since I don't see those new comments after the grid refresh.
It looks like the editor text value is not binding to the cell properly. I am attaching a couple of files here, the first one(popup editor.PNG) has the piece of code where it opens the popup if the column type is of comment, the second one(okclick.PNG) has the code which triggers the function on OK click on the editor popup, and the third one is the editor pop up.

I think the value is not binding to the cell properly. Any help is appreciated

Grid

answered on 31 May 2016

3 answers

415 views

[Solved] Include field & command in 1 column of Grid?

Hi

Is it possible to have a command and field in 1 column of a Grid? Something along the lines of::

Where in line number 11 below the 3 column would include the data value for products and a button (in this case just to edit the products for 1 line in grid)

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

02. dataSource: {

03. pageSize: 20,

04. data: createRandomData(50)

05. },

06. pageable: true,

07. height: 550,

08. columns: [

09. { field: "FirstName", title: "First Name", width: "140px" },

10. { field: "LastName", title: "Last Name", width: "140px" },

11. { field: "products", command: { text: "Edit Product List", click: showDetails }, title: " ", width: "180px" } ]

12.}).data("kendoGrid");

Thanks in Advance

Grid

answered on 31 May 2016

1 answer

247 views

Kendo Inline Edit Custom Pop up

Hello,
We are trying to do implement a unique requirement for our customer. For the kendo grid, we have implemented inline editing, but we have a lot of columns and some of the columns has a lot of text inside like the comment type columns. it makes it really hard for the customers to do an inline editing on those columns. For their convenience, we are trying to open up a pop up text editor when they click on certain columns that typically have a lot of texts, they are able to add the comments there, then we send the added comments to the respective cell and be able to save the grid.
Also, we have populating the grid columns dynamically.
The problem here is, after adding the comments and clicking on OK, on the UI the cell has the new comments but it doesn't look like it is being updated. As a result kendo grid doesn't know something has changed, and our save all changes/ cancel buttons are still disabled. I tried enabling them by editing other columns, and I clicked on the save all changes button, and it said saved successfully, but even though the comment cell has new text values, it didn't save them, since I don't see those new comments after the grid refresh.
It looks like the editor text value is not binding to the cell properly. I am attaching a couple of files here, the first one(popup editor.PNG) has the piece of code where it opens the popup if the column type is of comment, the second one(okclick.PNG) has the code which triggers the function on OK click on the editor popup, and the third one(popup.PNG) is the editor pop up.

I think the edited text is not binding properly. Any help is appreciated. Thank you

Grid

answered on 31 May 2016

1 answer

189 views

Display Boolean Field As Checkbox - PHP Wrappers

Hi,

i see there is helpful insight as to how to create boolean checkbox fields using javascript code http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Templates/grid-with-checkbox-column . But I am often unsure how to translate this code to make it work for a grid that uses PHP Wrapper code.

Any insights as to how to adapt the checkbox field code to work for UI Grid PHP Wrapping would be greatly appreciated. Thank you!

Grid

answered on 31 May 2016

3 answers

126 views

Donut chart title and legend texts not visible on IE or Edge using AngularJS

I'm using donut chart on a page with AngularJS and it works perfectly fine except that on IE and Edge the legend and title texts are not visible at all (see the attachments).

Here is the code for creating the chart options:

01.function createDonutChartOptions() {

02. $scope.donutChartOptions = {

03. title: {

04. visible: true,

05. position: "top",

06. font: constants.font,

07. color: constants.colors.dark,

08. text: $filter('localization')('Report_Donut_Chart_Title')

09. },

10. chartArea: {

11. background: constants.colors.background

12. },

13. tooltip: {

14. visible: true,

15. template: "#= category# #= kendo.toString(value,'n2')#%",

16. font: constants.font

17. }

18. };

19.};

Here is the code for creating the data series:

01.function createDonutChartDataSeries() {

02. $scope.donutChartDataSeries = [

03. {

04. field: 'percentage',

05. categoryField: 'categoryName',

06. visibleInLegendField: 'visibleInLegend',

07. overlay: {

08. gradient: "none"

09. },

10. labels: {

11. visible: true,

12. background: 'transparent',

13. position: 'outsideEnd',

14. template: '#=category#',

15. font: constants.font

16. }

17. }

18. ];

19.};

Here is the code for getting the data for the chart:

01.//Donut data.

02.

03.reportService.getDonutChartDataSource($scope.selectedGroup.key).then(function(donut) {

04. donut.data.forEach(function (item) {

05. if (item.status === constants.donutChartStatuses.finished) {

06. item.color = $("#donut-chart-finished").css("color");

07. } else {

08. item.color = $("#donut-chart-unfinished").css("color");

09. }

10. });

11. createDonutChartDataSeries();

12. createDonutChartOptions();

13. var newHeight = donut.data.length * 100;

14. $scope.donutChartDataSource = new kendo.data.DataSource({

15. data: donut.data,

16. group: {

17. field: "pathId"

18. }

19. });

20. $scope.isDonutChartReady = true;

21. if (newHeight >= 100) $("#donut-chart").css({ "height": newHeight });

22. $timeout(function () {

23. $scope.donutChart.redraw();

24. }, 200);

25. });

Here is the HTML code:

01.<div class="col-md-6" ng-show="isDonutChartReady">

02. <div kendo-chart="donutChart"

03. k-legend="{ position: 'bottom' }"

04. k-series-defaults="{ type: 'donut', startAngle: 270 }"

05. k-options="donutChartOptions"

06. k-series="donutChartDataSeries"

07. k-data-source="donutChartDataSource"

08. class="report-donut-chart" id="donut-chart"></div>

09.</div>

I can't understand what I'm doing wrong.

Could you please help me out?

Charts

answered on 31 May 2016

11 answers

1.1K+ views

Kendo UI Chart does not use the entire width of the div when the div containing the chart is hidden.

I have a number of Kendo UI Chart inside different divs. The divs stay hidden when the charts are rendered. The chart takes default width of 600 px even though the div containing the chart is 800 px. However if I render the chart keeping the div visible the chart takes the whole 800 px.

Any help?

Charts

answered on 31 May 2016

1 answer

548 views

Send AutoComplete text along with Kendo UI Grid information

I have a Kendo UI Grid that sends data to my server through ASP.NET Web API. I have data in an AutoComplete control and a DatePicker control that I want to send as well to the API through the Kendo UI Grid. In the example below I want tot send the ClientID from the AutoComplete as well as the date from the DatePicker to the server. How do I do this?

<script>

$(document).ready(function () {

$("#client").kendoAutoComplete({

template:

"<span class='client-id'>#= AccountNumber #</span> <span class='branch-id'>#= (Branch == null) ? ' ' : Branch #</span> <span class='department-id'>#= (Department == null) ? ' ' : Department #</span> #= Name # <span style='visibility: hidden'>^#=ClientID#</span>"

,

dataTextField: "Name",

height: 520,

dataSource: {

transport: {

read: "http://localhost:53786/api/client",

type: "json"

},

schema: {

model: {

fields: {

ClientID: { type: "number" },

AccountNumber: { type: "number" },

Branch: { type: "string" },

Department: { type: "string" },

Name: { type: "string" }

}

},

pageSize: 80,

serverPaging: true,

serverFiltering: false

},

select: function(e) {

var item = e.item.text().split("^");

var ClientID = item[1];

}

});

// create DatePicker from input HTML element

$("#datepicker").kendoDatePicker({

format: "dddd, MMMM d, yyyy"

});

$("#grid").kendoGrid({

dataSource: {

transport: {

create: {

url: "http://localhost:53786/api/workorder/0/workorderdetails",

contentType: "application/json",

type: "POST"

},

read: {

url: "http://localhost:53786/api/workorder/0/workorderdetails",

dataType: "json"

},

update: {

url: "http://localhost:53786/api/workorder/0/workorderdetails",

dataType: "json",

type: "PUT"

},

destroy: {

url: function (workorderdetail) {

return "http://localhost:53786/api/workorder/1/workorderdetails" + workorderdetail.WorkOrderDetailID;

},

contentType: "application/json",

type: "DELETE"

},

parameterMap: function (data, operation) {

return JSON.stringify(data);

}

},

schema: {

data: "Data",

total: "Total",

model: {

fields: {

WorkOrderID: { type: "number" },

PriceCodeID: { type: "number" },

WorkOrderDetailID: { type: "number" },

ShortCode: { defaultValue: { PriceCodeID: 1436, ShortCode: "REF3" } },

Description: { type: "string" },

Quantity: { type: "number" }

}

},

pageable: true,

height: 550,

toolbar: ["create", "save", "cancel"],

columns: [

{ field: "ShortCode", title: "Price Code", editor: shortcodeDropDownEditor, width: "150px", template: "#=ShortCode.ShortCode#" },

{ field: "Description", title: "Description", editable: "false" },

{ field: "Quantity", title: "Quantity", width: "100px" },

{ command: ["edit", "destroy"], width: "300px" }],

editable: true,

save: function(e) {

if (e.values.hasOwnProperty('ShortCode')) {

var test = e.model.set("Description", e.values.ShortCode.Description);

var test = e.model.set("PriceCodeID", e.values.ShortCode.PriceCodeID);

}

},

saveChanges: function (e) {

var client = $("#client")

if (client.text === "") {

e.preventDefault();

alert("Please select a Client before saving the Work Order.");

}

});

$("#warehouse").kendoDropDownList({

dataTextField: "Name",

dataValueField: "WarehouseID",

dataSource: {

valueTemplate: "#= Name#",

template: '#= Name# <h3>#= Address1#, #= City #, #= Province#, #= Country#</h3>',

transport: {

read: {

url: "http://localhost:53786/api/warehouse",

dataType: "json"

}

},

schema: {

model: {

fields: {

WarehouseID: { type: "number" },

Name: { type: "string" },

Address1: { type: "string" },

City: { type: "string" },

Province: { type: "string" },

Country: { type: "string" }

}

});

function shortcodeDropDownEditor(container, options) {

$('<input required data-text-field="ShortCode" data-value-field="PriceCodeID" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList({

valuePrimitive: false,

dataTextField: "ShortCode",

dataSource: {

transport: {

read: {

url: "http://localhost:53786/api/pricecodes/unique",

dataType: "json"

}

});

}

</script>

One idea that I had is to send the ClientID from the AutoComplete and the date to hidden DIVs but then how do I retrieve the data into the Grid and send it to the server?

Grid

answered on 30 May 2016

5 answers

1.0K+ views

k-ng-model required w/Angular Validation

I have a date picker using k-ng-model with the required attribute and am using Angular validation. Unfortunately, it is not being marked as invalid with a required error. How do I make this happen?

DatePicker

answered on 30 May 2016