Questions on Kendo UI for jQuery Forum

2 answers

237 views

Hi guys,

i'm Liuk and i like a lot Kendo's Grid.

But i've a problem with the Hierarchy system, because i can't find a method for open the subgrid only if there is a flag true.

I give an example:

This is th example take from the kendo text

<code>

<!DOCTYPE html><html><head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /><script src="js/jquery.min.js"></script><script src="js/kendo.all.min.js"></script></head><body><div id="example"><div id="grid"></div><script> $(document).ready(function() {var element = $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"}, pageSize: 6, serverPaging: true, serverSorting: true}, height: 600, sortable: true, pageable: true, detailInit: detailInit, dataBound: function() {this.expandRow(this.tbody.find("tr.k-master-row").first());}, columns: [{ field: "FirstName", title: "First Name", width: "110px"},{ field: "LastName", title: "Last Name", width: "110px"},{ field: "Country", width: "110px"},{ field: "City", width: "110px"},{ field: "Title"}]});});function detailInit(e) { $("<div/>").appendTo(e.detailCell).kendoGrid({ dataSource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"}, serverPaging: true, serverSorting: true, serverFiltering: true, pageSize: 10, filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }}, scrollable: false, sortable: true, pageable: true, columns: [{ field: "OrderID", width: "110px" },{ field: "ShipCountry", title:"Ship Country", width: "110px" },{ field: "ShipAddress", title:"Ship Address" },{ field: "ShipName", title: "Ship Name", width: "300px" }]});}</script></div></body></html>

</code>

for my example i wanna see the sub grid only if the city is "Tacoma", but i can't find a solution online.

Ty for the help guys and i'm sorry for the bad English,

BB Liuk

General Discussions

answered on 25 May 2017

6 answers

245 views

multi-select with grouping and virtualization event click and destroy doesn't work

Hello

I'm using kendoUI multiselect, but have some issues with the event click and destroy.

I'm using Kendo UI v2017.1.118, AngularJS v1.6.4 and jquery-2.2.1

Here is my source code using the MultiSelect:

F

app.controller("icpSinglePersonSelectionController",

['$http', '$scope', function
($http, $scope) {
var me = this;

me.uids = [];
me.AllowMultipleSelections= false

me.uid="111111"
me.pname="test"
me.uids = [];
me.value_url ="ContentService/" & uid & "/" & pname
me.possible_value_url = "ContentService/getPossiblePersonValuesForEdit?uid=" &
uid & "&pname=" & pname
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: me.possible_value_url,
}
},
schema: {
data: function (data) {
return angular.fromJson(data);
}
}
});
$http.get(me.value_url).then(function (renspose) {

var jsondata = angular.fromJson(renspose);
var itemData = jsondata[me.pname];
if (angular.isArray(itemData)) {
me.uids = itemData.map(function (item) { return item.uid; });
}
else {
me.uids = [itemData.uid];
}

me.selectOptions = {
dataTextField: "reference_text",
dataValueField: "Id",
footerTemplate: 'Total #: instance.dataSource.total() # items found',
itemTemplate: '<table><tr><td><img class="k-state-default" src="#:data.icon#" height=50px></img></td>' +
'<td><span class="k-state-default"><h3>#: data.reference_text #</h3><p>#: data.department #</p></span></td></tr></table>',
tagTemplate: '<img class="k-state-default" src="#:data.icon#" height=20px></img><span>#:data.reference_text#</span>',
virtual: {
mapValueTo: "dataItem",
valueMapper: function (options) {
$http.post("UserService/getPersons",
{ uids: me.uids }
).then(function (response) {
options.success(response); //return the dataItems that correspond to provided values
});
},
itemHeight: 80
},
dataSource: dataSource,
pageSize: 80,
serverPaging: false,
serverFiltering: true,
height: 520,
value: me.uids,
autoClose: true,
maxSelectedItems: 1,
filter: "contains",
};

});
me.onMultiSelectSelected = function (e) {
var multiselect = e.sender,
amountOfSelectedItems = multiselect.dataItems().length,
maxSelectedItems = multiselect.options.maxSelectedItems;

if (amountOfSelectedItems >= maxSelectedItems) {
$('.k-input').attr('readonly', "readonly");
}
else {
$('.k-input').removeAttr('readonly');
}

};

}]);

Note: When I delete virtualization the events return to work and if I use virtualization without grouping it works.

MultiSelect

answered on 25 May 2017

3 answers

398 views

How to unlock Kendo-UI Grid multi-column header programmatically

I have a grid with multi-column headers and there is a group column A which is locked. Here is the code:

$scope.gridOptions.columns = [

{

title: "A", locked: true, headerAttributes: { "class": "section-border" }, groupId : "A",

columns: [{ field: "ROW_HEADER", filterable: false, width: "20px", title: "   .", sortable: false, locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHeadYellow", "style": "border-right: 0px !important;" }, attributes: { "class": "contert-alpha  rowHeaderCell" } },

{ field: "COLUMN1", title: "COLUMN1", width: "80px", hidden: true, locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHead2" }, attributes: { "class": "" }, template: "#: COLUMN1)#" },

{ field: "COLUMN2", title: "COLUMN2", width: "150px", locked: true, headerAttributes: { "class": "sub-col darkYellow-col rowHeaderHead2" }, attributes: { "class": "" }, template: #:COLUMN2#}

]

},

{

title: "B", headerAttributes: { "class": "section-border" }, groupId: "B",

columns: [{ field: "COLUMN3", title: "COLUMN3", width: "110px", headerAttributes: { "class": "sub-col continuity" }, attributes: { "class": "contert-alpha center-middle" }, template: "#: COLUMN3 #" },

{ field: "COLUMN4", title: "COLUMN4", width: "120px", headerAttributes: { "class": "sub-col no-left-border" }, attributes: { "class": "contert-number " }, format: "{0: MM/dd/yyyy}" },

}]

I want to unlock the group column A programmatically before printing the grid so that it appears as one grid instead of two. I have set locked=false for COLUMN1, COLUMN2 and group column A before printing but it still stays locked. Then I've set only group column A as unlocked before printing and the group still stays locked. I am using recursive method to unlock them but I but in order to show the gist of this functionality I am doing this to unlock:

thisGrid.unlockColumn("A");

thisGrid.unlockColumn("ROW_HEADER");

thisGrid.unlockColumn("COLUMN1");

thisGrid.unlockColumn("COLUMN2");

Where thisGrid is instance of above grid. If anyone has programmatically locked/unlocked multi-column header please help. Thanks

Grid

answered on 25 May 2017

8 answers

566 views

How to drop filters, sort column and paging in grid

Hi!

I want to clear, for example, the filter array in my grid:

$('table#user_org_table').data('kendoGrid').dataSource.filter({});

Filter is cleared, but after this .filter() function, my grid is automatically refreshed.
How to clear filter, sorting and paging with 1 time grid refreshing?

Thanks.

Grid

answered on 25 May 2017

1 answer

301 views

Toolbar template images overlap

Hello,

I am using templates with ahref for Kendo toolbar, but the Images dont Show. Only one Show full rest is cut or overlapped i believe

@(Html.Kendo().ToolBar()
.Name("ToolBar")
.Resizable(true)
.Items(items =>
{
            items.Add().Template("<a href='javascript: void(0)' class='abutton save' onclick='GoBack()' title='Speichern' > </a>");

items.Add().Template("<a href='javascript: void(0)' class='abutton delete' onclick='onDelete()' title='löschen'> </a>");

             items.Add().Template("<a href='javascript: void(0)' class='abutton goback' onclick='GoBack()' title='Zurück zur Liste' > </a>");

})
)

my css

.abutton.save {
background: url('@Url.Content("~/Images/Save_new.png")');
background-repeat: no-repeat;
height:40px;
width:40px;
vertical-align:middle;
}
.abutton.goback {
background: url('@Url.Content("~/Images/arrow_left.png")');
background-repeat: no-repeat;
height:40px;
width:40px;
vertical-align:middle;
}
.abutton.delete {
background: url('@Url.Content("~/Images/delete.png")');
background-repeat: no-repeat;
height:40px;
width:40px;
vertical-align:middle;
}

What am i doing wrong

Thanks

Anamika

Toolbar

answered on 25 May 2017

3 answers

273 views

Kendo Grid Binding With Custom Navigation

We are facing an issue in telerik grid when we bind it using the .BindTo() and set the .ServerOperation(false).

If we sort our grid or select the next page, it appears that the data source for the grid is still associated to the original data source and we lose the indexing in the grid.
As our grid also requires keyboard navigation through the arrow keys (selecting the down arrow should select the next row in the grid and selecting the up arrow should go to the previous row), we wrote some custom JavaScript to achieve that. (We know we can achieve the navigation also through selecting down or up arrow and spacebar, but due to business needs we want it to be a one key operation).However, we cannot accomplish this after a sort or page as the data source still points to original data source before sort and the selection jumps to the next index in the original data source instead of the adjacent row.

So our question is how to set the data source to point to the sorted data source?
We did try re-reading the data source and refreshing it but that points it all back to the original data source and the grid loses all its sorting or paging as well.
dataSource.read();
dataSource.refresh();

Here is the custom code we have in our JavaScript which is executed when a user clicks the arrow key to select the next row in the grid

function nextRow() {
    var gridService = $(gridId).data("kendoGrid");
    if (gridService !== undefined) {
        var rowCount = gridService.dataSource.data().length;
        if (rowCount !== undefined) {
            var rows = gridService.items();
            var currSelRowIndex = rows.index(gridService.select());
            var nextRowIndex = rowCount - 1;
            if (currSelRowIndex < rowCount - 1) {
                nextRowIndex = currSelRowIndex + 1;
                selectServiceLineRow(nextRowIndex, true);
            }
           else {
                nextRowIndex = 0;
                var pageService = gridService.dataSource.page();
                var pageSizeService = gridService.dataSource.pageSize();
                if ((pageService) * pageSizeService < gridService.dataSource.total()) {
                    gridService.dataSource.page(pageService + 1);
                    selectServiceLineRow(nextRowIndex, true);
                }
            }
        }
    }
}

function selectServiceLineRow(serviceLineRowIndex, withFocus) {
    var gridService = $(gridId).data("kendoGrid");
    var rowAt = gridService.dataSource.at(serviceLineRowIndex);
    var rowuid = rowAt.uid;
    var row = gridService.tbody.find("tr[data-uid='" + rowuid + "']");
    gridService.select(row);
    var cell = row.find('td:eq(0)');
    gridService.current(cell);
    if (withFocus) {
        cell.focus();
    }
    serviceLinesGridCalcPrevNextButton(serviceLineRowIndex);
}

The grid’s datasource is bined in cshtml like this.

            .DataSource(d => d
                .Ajax()
              .Events(e => e.Error("onWebApiError").Change("ResetGridScrollbar(\"#ServiceLinesGrid\")"))
                //Remove .ServerOperation when paging is added
                .ServerOperation(false)
                .Model(m => m.Id(e => e.LineNumber)))
            .BindTo(Model.ServiceLines)

Grid

answered on 25 May 2017

3 answers

2.3K+ views

Programmatically setting column to editable

I have a grid data model defined like this:

                var griddatamodel = kendo.data.Model.define({
                    id: "RequestId",
                    fields: {
                        Status: { type: "string", editable: false },
                        Priority: { type: "number", editable: true, validation: { min: 1, max: 9999 } }
                    }
                });

The datasource retrieves the data based on a few drop down lists. I have a function that returns an CanChangePriority Boolean based on the values of the drop down lists. I want to be able to make the Priority field editable depending on the CanChangePriority Boolean, and update the editable flag as the drop down selection is changed. Is there a way to do that?

Doni

Grid

answered on 25 May 2017

2 answers

712 views

Kendo ui grid combox displays undefined when adding custom value

I have a kendo Grid with an editor column that uses a combobox whose datasource is set to an object array. Everything works fine except when a user sets enters a custom value into the combobox (for example:'abc') that doesn't match any of the datasource options. The combobox displays undefined when tabbing off of it or moving focus out of the combobox. I have tried to handle this in the change event of the combox box by adding the custom value to the datasource (using the Telerik online example for adding custom values), but that doesn't appear to work.

Below is my html file code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>

</head>
<body>
<div id="mappingGrid"></div>
<script>

//$(document).ready(function () {

//capture vars

var mGrid = $("#mappingGrid").kendoGrid({

dataSource: {

schema: {
model: {
// id: "Id",
fields: {
// Id: { editable: false, nullable: false },

CustomFunction: { defaultValue: { Value: "0", Name: "" } },

}
}
},

},
// batch:true,

pageSize: 10,
autoBind: false,
height: 300,
width: 300,

scrollable: true,
sortable: true,
filterable: true,
editable: true,
// serverFiltering: true,
toolbar: ["create"],
columns: [
{ field: "CustomFunction", title: "Custom Function", editor: customFunctionEditor, template: "#=CustomFunction.Name#" },

{ command: [{ name: "destroy", text: "" }], title: " ", width: "100px" }],

});

function customFunctionEditor(container, options) {
$('<input id="CustomFunction" name="CustomFunction">')
.appendTo(container)
.kendoComboBox({
dataTextField: "Name",
dataValueField: "Value",
change: onComboBoxChange,
// autoBind: abind,
dataSource: [
{ Name: "Add", Value: "1" },
{ Name: "Subtract", Value: "2" },
{ Name: "Multiply", Value: "3" },
{ Name: "Divide", Value: "4" }
],

}).appendTo(container);

}

function DisplayError(xhr) {
var msg = JSON.parse(xhr.responseText);
errornotification("Error", msg.Message);
// alert(msg.Message);
}

function onComboBoxChange(e) {
var combo = e.sender;

var comboText = combo.text();
// check if new value is a custom one
if (!combo.dataItem()) {

var dataSource = combo.dataSource;
dataSource.add({
Value: combo.text(),
Name: combo.text()
});

dataSource.one("sync", function () {
combo.select(dataSource.view().length - 1);
});

dataSource.sync();

}

}
});

</script>
</body>
</html>

Grid

answered on 24 May 2017

1 answer

286 views

kendo toolbar commandtype button tooltip

Hello,

Can we have tooltip for command Buttons with images

@(Html.Kendo().ToolBar()
.Name("ToolBar")
.Resizable(false)
.Items(items =>
{
items.Add().Type(CommandType.Button).ImageUrl(Url.Content("~/Images/Save_new.png")).Id("saveBtn").Click("SaveEntry");

})

Thanks

Anamika

Toolbar