
Hello.
I have a grid that contains user information and a few checkbox templates. Whenever I edit set the checkbox to true or vice versa and click save changes the checkbox reverts to its original value.
Here are the main snippets that handle this event:
$("#btnSaveChanges").click(function () { grid = $("#grid").data("kendoGrid"); grid.saveChanges(); });function SetActive(e) { grid = $("#grid").data("kendoGrid"); dataItem = grid.dataItem($(e).closest("tr")); dataItem.set("IsAssigned", e.checked); grid.refresh();}function renderGrid(value) { grid = $("#grid").kendoGrid({ dataSource: { sort: { field: "NameFirst", dir: "asc" }, batch: true, pageSize: 100, error: function (e) { if (typeof e.errors !== 'undefined') { alert(e.errors); } }, requestEnd: function (e) { if (e.type === "update") { $('#grid').data('kendoGrid').dataSource.read(); } }, transport: { read: { url: "GetContacts", dataType: "json", cache: false, data: function () { return { ID: $("#DDLConceptID").val(), isNational: $("#DDLConceptID").find('option:selected').attr("data-isNational") }; } }, update: { url: "UpdateContacts", dataType: "json", type: "POST" }, parameterMap: function (data, type) { if (type === "update") { return { entities: kendo.stringify(data.models) }; } else { return data; } } }, schema: { data: "Data", total: "Total", errors: "Errors", model: { id: "ContactID", fields: { Email: { type: "string" }, IsAssigned: { type: "boolean" }, RoleID: { type: "string" }, ConceptID: { editable: false }, ContactID: { editable: false }, RcvEmail: { type: "boolean" }, RcvQAEmail: { type: "boolean" }, RcvOrderEmail: { type: "boolean" }, Seq: { editable: true }, DistName: { editable: false }, RoleDescription: { type: "string" }, NameFirst: { type: "string" }, NameLast: { type: "string" }, Phone: { type: "string" } } } } }, sortable: true, filterable: { extra: false, operators: { string: { contains: "Contains" } } }, height: 600, pageable: true, scrollable: true, editable: true, autoBind: value, columns: [ { field: "ContactConceptID", title: "Contact ID", hidden: true }, { field: "ConceptID", title: "Concept ID", hidden: true }, { field: "ContactID", title: "Contact ID", hidden: true }, { field: "IsNational", title: "Is National", hidden: true }, { field: "Seq", title: "Seq", width: 100 }, { field: "NameFirst", title: "First Name", width: 150 }, { field: "NameLast", title: "Last Name", width: 150 }, { field: "Phone", title: "Phone", width: 250 }, { field: "RoleDescription", title: "Role", width: 140 }, { field: "RoleID", title: "Type", width: 100, editor: roleIDEditor }, { field: "Email", title: "E-mail", width: 250 }, { title: "Assigned", template: '<input class="btnActive" onchange=\'SetActive(this);\' type="checkbox" #= IsAssigned ? checked="checked" : "" # class="assignChkbx" />', width: 125 }, { title: "Notes E-mail", template: '<input type="checkbox" #= RcvEmail ? checked="checked" : "" # class="rcvEmailChkbx" />', width: 125 }, { title: "QA E-mail", template: '<input type="checkbox" #= RcvQAEmail ? checked="checked" : "" # class="rcvQAEmailChkbx" />', width: 125 }, { title: "Order E-mail", template: '<input type="checkbox" #= RcvOrderEmail ? checked="checked" : "" # class="rcvOrderEmailChkbx" />', width: 125 }, { field: "DistName", title: "Distributor", width: 200 }, { command: { name: "Remove", text: "Remove", click: removeBDCAM }, width: 85 } ],//end of columns }).data('kendoGrid')}
I am trying to define an initial sort.
as far as the request, the sort is working and the data comes sorted.
the problem is that in the header, the visual arrow of sort column and direction is not shown.
only after physical click on the column it shows.
please help, this is the used code:
$scope.mainGridOptions = { dataSource: { sort: { field: "email", dir: "desc"}, serverPaging: true, serverSorting: true, pageSize: 50, transport: { read: { type: "GET", dataType: "json", url: "/p/enduser/licenses/allocation/listWithDevices", headers: { "X-AUTH-TOKEN": authService.getToken() } }, parameterMap: function(data, type) { if (type == "read") { console.log(data); return { pageSize: data.take, page: (data.skip/data.take), sortBy: data.sort?data.sort[0].field:null, sortDir: data.sort?data.sort[0].dir:null } } } }, schema: { data: "items", total: "itemsCount" } }, height: $scope.resize(), scrollable: { virtual: true }, sortable: { allowUnsort: false, mode:'single' } };

Hi Team,
Getting ajax call twice for same input if specifying minLength in multiselect. Could you please suggest why ajax call invoke twice for same input with minLength.
HTML:<div><select id="required" multiple="multiple" style="width: 92.5%; margin-top: 21px; margin-left: 2px;" "></select></div>
JS Code:
var searchuserdataSource = new kendo.data.DataSource({
pageSize: 30,
serverFiltering: true,
transport: {
read: function (options) {
var srctxt = {
//searchText: $('#required').data("kendoMultiSelect").input.val()
searchText:"Test"
};
var params = "{searchText: '" + srctxt.searchText + "'}";
$.ajax({
type:"POST",
url: "./Relationships.aspx/GetUserSearch",
data: params,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
var userslist = [];
if (typeof result.d !== 'undefined' && result.d.Completed)
{
$.each(result.d.Data, function (i, item) {
var map = {};
map["id"] = item.Id;
map["name"] = item.DisplayName;
userslist.push(map);
});
}
options.success(userslist);
},
error: function (result) {
options.error(result);
}
});
}
}
});
$("#required").kendoMultiSelect({
autoBind: false,
minLength: 3,
enforceMinLength: true,
dataSource: searchuserdataSource,
dataTextField: "name",
dataValueField: "id",
//itemTemplate :"<input type='checkbox' id='#:data.id#'/> #:data.name#",
//itemTemplate: " <input type='checkbox' name ='#:data.name #' value ='#:data.id#' class='k-checkbox' /><label class='k-checkbox-label' value='#:data.id#' > #:data.name# </label>",
//itemTemplate:"<input type='checkbox' name='#:data.name # value='#:data.id #' class='k-checkbox' />" +
//"<span class='k-checkbox-label' data-value='#:data.id #'>#:data.name #</span>";
autoClose:false,
tagMode:"single",
//tagTemplate:'<span>#: data.values.length # user(s) selected</span>',
filter: "contains",
//placeholder: "Search..",
delay: 200,
close: function(){
var selectedItems =$("#required").data("kendoMultiSelect").dataItems();
if(selectedItems.length !=0)
{
$.each(selectedItems,function(index,obj){
//alert("Name: "+obj.name+"\n"+"Id:"+obj.id+"\n");
CreateUsersFilter(obj.id,obj.name);
});
if (dummyfiltersource.length >= 14)
$(".selectedusersgrid").width("94%");
}
}
});

hello,
How can I get the Saturday and Sunday columns in the Gantt chart and color them?
Do you provide such an interface?
We look forward to your reply!
thank you!
Referring to the below example:
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/configuration/shapes.editable.tools
I would like to customize the toolbar of shapes when using a datasource.
$("#diagram").kendoDiagram({
dataSource: shapesDataSource,
connectionsDataSource: connectionsDataSource,
layout: {
type: "tree",
subtype: "tipover",
underneathHorizontalOffset: 140
},
shapeDefaults: {
visual: visualTemplate,
content: {
template: "#= dataItem.JobTitle #",
fontSize: 17
}
},
connectionDefaults: {
stroke: {
color: "black",
width: 2
}
},
//editable: {
// tools: [{name: "createShape"}]
//},
dataBound: onDataBound,
toolBarClick: onToolBarClick
});

I am trying to add custom tool in org chart to update a value on node. The value gets updated on the datasource but not on the chart.
Nor does it trigger API hit to update the new value
$("#diagram").kendoDiagram({ dataSource: shapesDataSource, connectionsDataSource: connectionsDataSource, layout: { type: "tree", subtype: "tipover", underneathHorizontalOffset: 140 }, shapeDefaults: { visual: visualTemplate, content: { template: "#= dataItem.JobTitle #", fontSize: 17 } }, connectionDefaults: { stroke: { color: "black", width: 2 } }, //editable: { // tools: [{ name: "createShape" }, { name: "edit" }, // { name: "undo" }, { name: "redo" }], // shapeTemplate: kendo.template($("#popup-editor").html()) //}, editable: { tools: [{ type: "button", text: "Set Selected Content", click: function () { var selected = $("#diagram").getKendoDiagram().select(); var content = $("#content").val(); for (var idx = 0; idx < selected.length; idx++) { selected[idx].dataItem.JobTitle = content; } } }, { template: "<input id='content' class='k-textbox' value='Foo' />" }] }, dataBound: onDataBound, toolBarClick: onToolBarClick });

gridSelector = gridSelector || "#grid";// scoped function that can be assigned to the dataBoundEvent and called directly (below)var doGridDataBound = function (me, gridSelector, grid) { me.InitMenu(gridSelector); setTimeout(function () { grid.autoFitColumn(actionColIndex); }, 500);};var grid = $(gridSelector).data("kendoGrid");// delay "connecting" the dataBound event handler for 250ms to give time for other event handlers to be assigned first (we need this one to "fire" last)// specifically - customKendoButtons_OnDataBound needs to fire earlier than this one to ensure that the buttons are visible/fully defined before "autoFit" is executedgrid.unbind("dataBound").bind("dataBound", function () { doGridDataBound(me, gridSelector, grid);});/* if any data rows already exist, then the dataBound event will not fire again, so fire it now */if ($(gridSelector).find("input.gridPopupHelper").length) doGridDataBound(me, gridSelector, grid);Hi,
We have the Open Street Map example working, but in the documentation, it says...
"Displaying raster maps from popular online providers such as OpenStreetMap, OpenWeatherMap, ArcGIS, and so on."
Does Telerik or anyone else have any working examples of using the Kendo UI Map control with different providers. Either ArcGIS or any other service?
Much appreciated,
George