How to call HierarchicalDataSource.read() from kendoDropDownListchange event? - javascript

I am using the treeview and HierarchicalDataSource of KendoUI. Plus on the top I also had a kendoDropDownList. Basically each time user change the dropdownlist value it trigger change event and HierarchicalDataSource will read again. But seem my dropdown change event not working as i expected? I did not call HierarchicalDataSource.read(). Any idea what I doing wrong?
Dropdownlist
$("#dropdown").kendoDropDownList({
dataTextField: "functionName",
dataValueField: "hrsPositionID",
dataSource: {
transport:{
read: {
url: "./getDropdown.php",
type: "POST",
data: function() {
return {
method: "getDropdown",
}
}
},
},
},
change: function(e){
console.log(this.value());
$('#AccountingTree').data('kendoTreeView').HierarchicalDataSource.read(); //<-- not working
}
}).data('kendoDropDownList');
dropdownlist = $("#dropdown").data("kendoDropDownList");
HierarchicalDataSource & kendoTreeView
var serviceRoot = "./getyzdTreeView.php";
dataSource = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot,
dataType: "json",
type: "POST",
data: function(){
return {
positionID: dropdownlist.value() //read the value from dropdownlist
}
}
}
},
schema: {
model: {
id : "programID",
hasChildren: false,
children : "items"
}
},
filter: { field: "module", operator: "startswith", value: "Accounting" }
});
$("#AccountingTree").kendoTreeView({
check: onCheck,
checkboxes: { checkChildren: true } ,
dataSource: dataSource,
dataBound: function(){
this.expand('.k-item');
},
dataTextField: ["module","groupname","programName","checked"]
});

Found it. Basically I just call
change: function(e){
dataSource.read()
}

Related

How to set cutom template for kendo grid columns

I need to set Kendo grid action button Icon based on value. My code as follows,
function InitProductServicesGrid() {
var prodServiceDataSource = new kendo.data.DataSource({
transport: {
type: "json",
read:
{
url: SERVER_PATH + "/LTSService/ProductsService.asmx/GetProductServiceDetailsList",
type: "POST",
contentType: 'application/json',
data: GetAdditonalData,
datatype: "json"
},
update:
{
url: SERVER_PATH + "/LTSService/ProductsService.asmx/SaveProductService",
type: "POST",
contentType: 'application/json',
datatype: "json"
}
},
schema: {
data: function (result) {
return JSON.parse(result.d);
},
model: {
id: "Id",
fields: {
Id: { type: "int" },
ServiceTime: { type: "string" },
IsActive: { type: "boolean"}
}
}
},
requestEnd: function (e) {
if (e.type === "destroy") {
var grid = $("#productServicesGrid").data("kendoGrid");
grid.dataSource.read();
}
},
error: function (e) {
e.preventDefault();
if (e.xhr !== undefined && e.xhr !== null) {
var messageBody = e.xhr.responseJSON.Message;
ShowGritterMessage("Errors", messageBody, false, '../App_Themes/Default/LtsImages/errorMessageIcon_large.png');
var grid = $("#productServicesGrid").data("kendoGrid");
grid.cancelChanges();
}
},
pageSize: 20,
});
$("#productServicesGrid").kendoGrid({
dataSource: prodServiceDataSource,
sortable: true,
filterable: false,
pageable: true,
dataBound: gridDataBound,
editable: {
mode: "inline",
confirmation: false
},
columns: [
{ field: "Id", title: "", hidden: true },
{
field: "ServiceTime",
title: "Time Standard",
sortable: false,
editor: function (container, options) {
var serviceTimeTxtBox = RenderServiceTime();
$(serviceTimeTxtBox).appendTo(container);
},
headerTemplate: '<a class="k-link" href="#" title="Time Standard">Time Standard</a>'
},
{
title: "Action", command: [
{
name: "hideRow",
click: hideRow,
template: comandTemplate
}
],
width: "150px"
}
]
});
}
I wrote a custom template function as follows,
function comandTemplate(model) {
if (model.IsActive == true) {
return '<a title="Hide" class="k-grid-hideRow k-button"><span class="k-icon k-i-lock"></span></a><a title="Hide"></a>';
}
else {
return '<a title="Show" class="k-grid-hideRow k-button"><span class="k-icon k-i-unlock"></span></a><a title="Show"></a>';
}
}
But when I debug the I saw the following value for model value.
I followed this sample code as well. here you can see, I also set the custom template like the sample code. Please help me to solve this. Why I can't access model IsActive value from comandTemplate function.
Updated
When clicking hideRow action, I access the dataItem as follows.
function hideRow(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
if (dataItem.IsActive == true) {
dataItem.IsActive = false;
}
else {
dataItem.IsActive = true;
}
}
Is there any possible way to access data from template function as above or any other way?
I would suggest a different approach because you can't access grid data while rendering and populating grid.
My suggestion is to use two actions and hide it based on the flag (in your case IsActive).
Something like this: Custom command
NOTE: in visible function you can access item!
EDIT: you can access it and change it on dataBound traversing through all data.
Check this example: Data bound
I don't see the advantage of relying on the grid commands. You can render any button you want yourself and and use the dataBound event to bind a click handler:
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{
template: function(dataItem) {
const isActive = dataItem.isActive;
return `<a title=${isActive ? "Hide": "Show"} class="k-grid-hideRow k-button"><span class="k-icon k-i-${isActive ? 'lock' : 'unlock'}"></span></a>`
}
}
],
dataBound: function(e) {
e.sender.tbody.find(".k-grid-hideRow").click(evt => {
const row = evt.target.closest("tr")
const dataItem = e.sender.dataItem(row)
dataItem.set("isActive", !dataItem.isActive)
})
},
dataSource: [{ name: "Jane Doe", isActive: false }, { name: "Jane Doe", isActive: true }]
});
Runnable Dojo: https://dojo.telerik.com/#GaloisGirl/eTiyeCiJ

Telerik Kendo UI Menu with Controller and Action

I am trying to implement a Kendo UI Menu bind from JSON data.
For Now I am getting only links with Controller Value based on my JSON Data.
For example i am getting this in the href
href="/MemberManagement"
MemberManagement is the name of Controller
Is there any way i can add Controller with Action also
Here is the view code i am using
<script>
$(document).ready(function () {
$("#menu1").kendoMenu({ dataTextField: "TitleText", dataSource: { transport: { read: { url: "#Url.Action("GetMenuData", "Home")", dataType: "json" } }, schema: { model: { id: "id", hasChildren: "hasChildren", action: "Link" } } } })
$("#menu1").kendoMenu({
dataTextField: "TitleText",
dataSource: {
transport: {
read: {
url: "#Url.Action("GetList", "Test")",
dataType: "json"
}
},
schema: {
model: {
id: "id",
hasChildren: "hasChildren",
ActionName: "ActionName",
ControllerName:"ControllerName"
}
}
}
})
});
$("#menu1").kendoMenu({
select: onSelect
});
function onSelect(e) {
alert("Selected: " + $(e.item).children(".k-link").text());
alert("Selected: " + $(e.item.action).children(".k-link").text());
}
My JsonData
[{"id":"1","ParentID":"0","TitleText":"Web Application","ControllerName":"MemberManagement","ActionName":"Index","hasChildren":true},{"id":"59","ParentID":"0","TitleText":"App Application","ControllerName":"MemberManagement","ActionName":"Index","hasChildren":true},{"id":"62","ParentID":"0","TitleText":"Driving Application","ControllerName":"MemberManagement","ActionName":"Index","hasChildren":true},{"id":"63","ParentID":"0","TitleText":"Test 15Dec","ControllerName":"MemberManagement","ActionName":"Index","hasChildren":true},{"id":"68","ParentID":"0","TitleText":"Driving Licence","ControllerName":"MemberManagement","ActionName":"Index","hasChildren":true},{"id":"69","ParentID":"0","TitleText":"Tariq-Jan-04-2020","ControllerName":"MemberManagement","ActionName":"Index","hasChildren":true},{"id":"71","ParentID":"0","TitleText":"parent Node","ControllerName":"MemberManagement","ActionName":"Index","hasChildren":true},{"id":"75","ParentID":"0","TitleText":"Rheem Doc","ControllerName":"MemberManagement","ActionName":"Index","hasChildren":true},{"id":"80","ParentID":"0","TitleText":"Member Portal","ControllerName":"MemberManagement","ActionName":"Index","hasChildren":true}]

KendoUI - Multiselect - Cascade - Issue with JSON Filtering

I am facing issue on receiving correct value after filtering on multiselect data.
<script>
$(function () {
var productsDataSource = new kendo.data.DataSource({
type: "json",
serverFiltering: true,
transport: {
read: {
url: "/api/incident/issue",
},
parameterMap: function (data) {
return kendo.data.transports.odata.parameterMap.call(this, data);
}
}
});
$("#products").kendoMultiSelect({
autoBind: false,
dataTextField: "IssueName",
dataValueField: "IssueID",
dataSource: productsDataSource
});
$("#suppliers").kendoMultiSelect({
autoBind: false,
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "json",
serverFiltering: true,
transport: {
read: {
url: "/api/incident/category"
}
}
},
change: function () {
var filters = buildFilters(this.dataItems());
productsDataSource.filter(filters);
}
});
function buildFilters(dataItems) {
var filters = [],
length = dataItems.length,
idx = 0, dataItem;
for (; idx < length; idx++) {
dataItem = dataItems[idx];
filters.push({
field: "CategoryID",
operator: "eq",
value: parseInt(dataItem.CategoryID)
});
}
return {
logic: "or",
filters: filters
};
}
});
</script>
It looks i have an issue on this section
filters.push({
field: "CategoryID",
operator: "eq",
value: parseInt(dataItem.CategoryID)
});
At the operator: "eg",
As i can see the post occurs without an issue like this:
/api/incident/issue?%24inlinecount=allpages&%24format=json&%24filter=CategoryID%20eq%201
Receiving the data but without correct filtering, any help with the JSON operator (equivalent) please?
solved. Changed the value at serverfiltering: from true, to false,.

Kendo Grid multiselect checkboxes

I have a Treeview. On selecting the edit of the treenode a kendo grid for Roles will be displayed and few textboxes (where is edit other properties for roles). The kendo grid for roles have checkboxes and Rolenames. My current code is working if I select one checkbox.
What I need is how I get the array of the ids of the roles if I check multiple checkboxes. Tried multiple ways but I am not getting the list of ids when multiple checkboxes are selected. On click edit of the node EditNode is triggered and on click of save the 'click' is trigerred.
Below is my code:
function editNode(itemid) {
var editTemplate = kendo.template($("#editTemplate").html());
var treeview = $("#treeview").data("kendoTreeView");
var selectedNode = treeview.select();
var node = treeview.dataItem(selectedNode);
$("<div/>")
.html(editTemplate({ node: node }))
.appendTo("body")
.kendoWindow({
title: "Node Details",
modal: true,
open: function () {
console.log('window opened..');
editDS = new kendo.data.DataSource({
schema: {
data: function (response) {
return JSON.parse(response.d); // ASMX services return JSON in the following format { "d": <result> }.
},
model: {// define the model of the data source. Required for validation and property types.
id: "Id",
fields: {
Id: { editable: false, nullable: false, type: "string" },
name: { editable: true, nullable: true, type: "string" },
NodeId: { editable: false, nullable: false, type: "string" },
}
},
},
transport: {
read: {
url: "/Services/MenuServices.asmx/getroles",
contentType: "application/json; charset=utf-8", // tells the web service to serialize JSON
type: "POST", //use HTTP POST request as the default GET is not allowed for ASMX
datatype: "json",
},
}
});
rolesGrid = $("#kgrid").kendoGrid({
dataSource: editDS,
height: 150,
pageable: false,
sortable: true,
binding: true,
columns: [
{
field: "name",
title: "Rolename",
headerTemplate: '<span class="tbl-hdr">Rolename</span>',
attributes: {
style: "vertical-align: top; text-align: left; font-weight:bold; font-size: 12px"
}
},
{
template: kendo.template("<input type='checkbox' class = 'checkbox' id='chkbx' data-id='#:Id #' />"),
attributes: {
style: "vertical-align: top; text-align: center;"
}
},
],
}).data('KendoGrid');
},
})
.on("click", ".k-primary", function (e) {
var dialog = $(e.currentTarget).closest("[data-role=window]").getKendoWindow();
var textbox = dialog.element.find(".k-textbox");
var LinKLabel = $('#LL').val();
var roles = $(chkbx).data('roleid');
console.log(PageLocation);
node.text = undefined;
node.set("LINK_LABEL", LinKLabel);
node.set("Roles", roles);
dialog.close();
var treenode = treeview.dataSource.get(itemid);
treenode.set("LINK_LABEL", LinKLabel);
treenode.set("id", Id);
treenode.set("roles", roles);
treenode.LINK_LABEL = LinKLabel;
treenode.ID = Id;
treenode.roles = roles;
var rid = $(chkbx).data('roleid');
$.ajax({
url: "/Services/MenuServices.asmx/UpdateTreeDetails",
contentType: "application/json; charset=utf-8",
type: "POST",
datatype: "json",
data: JSON.stringify({ "Json": treenode })
});
console.log(JSON.stringify(treenode));
})
}
I'm assuming you want to get those ids in this line:
var roles = $(chkbx).data('roleid');
Right? What I don't know is the format you want to get that data. With the following code you can get the roles data in an array objects like this { id: 1, value: true }, check it out:
var grid = $("#grid").data("kendoGrid"),
ids = [];
$(grid.tbody).find('input.checkbox').each(function() {
ids.push({
id: $(this).data("id"),
value: $(this).is(":checked")
});
});
Demo. Anyway you want it, you can change it inside the each loop.
Update:
To get only the checked checkboxes, change the selector to this:
$(grid.tbody).find('input.checkbox:checked')
Demo

Kendoui Grid send dynamic variable in data source

I am trying to "filter" a grid based on an option selected from a select drop down.
How do I send the selected option value to the grid when the change event on the select dropdown fires?
My grid datasource is:
dataSourceParts = new kendo.data.DataSource({
serverPaging: false,
serverFiltering: false,
serverSorting: false,
transport: {
read: {
url: ROOT + 'shipment/partsSerialGrid',
dataType: 'json',
type: 'POST',
data: {
enquiryId: enquiryId
}
}
},
pageSize: 25,
error: function(e) {
alert(e.errorThrown + "\n" + e.status + "\n" + e.xhr.responseText);
},
schema: {
data: "data",
total: "rowcount",
model: {
id: 'id',
fields: {
quantity: {
type: 'number',
editable: false
},
idealForm: {
type: 'string',
editable: false
},
serial: {
type: 'string',
editable: true
}
}
}
}
})
My select event:
$('#fromNameSelect').change(function() {
var fromMode = $('#fromSelect').val();
if (fromMode == 2)
{
supplierId = $(this).val();
dataSourceParts.filter({
field: 'test', operator: 'eq', value: 'test' // THIS DOES NOTHING.
});
$('#shippingPartsGrid').data('kendoGrid').dataSource.read();
}
})
I cant confirm this. But since you set filter in dataSourceParts. Shouldn't you be using dataSourceParts.read() instead of $('#shippingPartsGrid').data('kendoGrid').dataSource.read();?
$('#fromNameSelect').change(function() {
var fromMode = $('#fromSelect').val();
if (fromMode == 2)
{
supplierId = $(this).val();
$('#shippingPartsGrid').data('kendoGrid').dataSource.filter({
field: 'test', operator: 'eq', value: 'test' // DO IT LIKE THIS
});
}
})

Categories