I want to resize my grid that inside another grid. These grids are hierarchical. I wrote something for that but this works for second click. The processes I mentioned are seen in the pictures (firstclick, secondclick). the red circle shows extand button.
The js code block I wrote for solution but it does not work properly:
// The code inside the databound function of master grid
$("#SiparisListeleGrid td a.k-icon").click(function () { // onclick for a element that opens second grid inside the row
if ($(this).hasClass("k-i-expand")) { // if the grid is expand
// uid of tr element
var tr_UID = $(this).parents("tr").data("uid");
// master grid
var ustGrid = $("#SiparisListeleGrid").data("kendoGrid");
$(ustGrid.dataSource.data()).each(function (i, item) {
if (item.uid == tr_UID) {
var altGrid = $("#Grid_SiparisSatir_" + item.SipUstID).data("kendoGrid");
var rowCount = altGrid.dataSource.view().length;
$("#Grid_SiparisSatir_" + item.SipUstID).attr("style", "height:" + (rowCount * 40 + 125) + "px;");
$("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content").css("height", (rowCount * 40));
$("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content-locked").css("height", (rowCount * 40));
}
});
}
});
// This code block only works on second clicking the expan button.
// Does not recognize the second grid when clicked for the firs time
// Should I use databound for second grid? However I do not know how can I do that.
Hi
I am kinda stuck while trying to populate my Kendo Grid using Dynamic data list (List<ExapndoObject>).
I am working on ASP.NET Core MVC project and My Page Model code is successfully creating a list of data with Dynamic columns and values using the following code:
Page Model Code:
public async Task<IActionResult> OnGetGridDataAsync(string startDate, string endDate)
{
//Populating Dynamic List
var dataList = new List<System.Dynamic.ExpandoObject>();
var apiData = API call for data
foreach (var data in apiData)
{
dynamic newObject = new ExpandoObject();
newObject.Student = data.StudentName; //Student Column
var attendanceDays = API call for data
foreach (var attendanceDay in attendanceDays)
{
if (attendanceDay.Date >= DateTime.Parse(startDate) && attendanceDay.Date <= DateTime.Parse(endDate))
{
var attendanceSessionAttend = API call for data
var attendanceSession = API call for data
var SessionName = attendanceSession.Name + " (" + attendanceDay.Date.ToString("dd MMM") + ")";
AttendanceStatusDto attendanceStatus = null;
if (attendanceSessionAttend[0].AttendanceStatusId != null)
{
attendanceStatus = API call for data
AddProperty(newObject, SessionName, attendanceStatus.Code);
}
else
{
AddProperty(newObject, SessionName, "");
}
}
}
dataList.Add(newObject);
}
return new JsonResult(dataList);
}
private static void AddProperty(dynamic attendanceObject, string columnName, string columnValue)
{
var attendanceObjectDict = attendanceObject as IDictionary<string, object>;
if(attendanceObjectDict.ContainsKey(columnName))
{
attendanceObjectDict[columnName] = columnValue;
}
else
{
columnName = columnName.Replace(" ",String.Empty);
attendanceObjectDict.Add(columnName, columnValue);
}
}
JQuery code:
function populateGrid() { $.ajax({ type: "GET", url: '?handler=GridDate', data: { 'startDate': firstday.toDateString(), 'endDate': lastday.toDateString() }, contentType: "application/json; charset=utf-8", success: function (result) { // notify the data source that the request succeeded console.log(result); generateGrid(result); }, error: function (result) { // notify the data source that the request failed options.error(result); } }); } function generateGrid(response) { var gridOptions = { dataSource: response }; $("#AttendanceTable").kendoGrid(gridOptions); var grid = $("#AttendanceTable").data("kendoGrid"); };
when running the project, It is showing only the Student Column but other dynamic columns are showing 'Invalid Template error'
Invalid template:'<tr class="k-master-row" data-uid="#=data.uid#" role='row'><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['Student'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['Student'] ? '<span class="k-dirty"></span>' : '' ##:data.Student==null?'':data.Student#</td><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['MondaySession(28Feb)'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['MondaySession(28Feb)'] ? '<span class="k-dirty"></span>' : '' ##:data.MondaySession(28Feb)==null?'':data.MondaySession(28Feb)#</td></tr>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<tr class="k-master-row" data-uid="'+(data.uid)+'" role=\'row\'><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['Student'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['Student'] ? '<span class="k-dirty"></span>' : '' )+''+$kendoHtmlEncode(data.Student==null?'':data.Student)+'</td><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['MondaySession(28Feb)'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['MondaySession(28Feb)'] ? '<span class="k-dirty"></span>' : '' )+''+$kendoHtmlEncode(data.MondaySession(28Feb)==null?'':data.MondaySession(28Feb))+'</td></tr>';}return $kendoOutput;'
Below is the console view of the page with data:
Please help me out.
Hi,
I have an observable array of observables which is linked to a kendo grid as datainput. I am trying to sort it by clicking on column header. I have made the sortable : true. But the issue is when the array is
self.array = ko.observableArray([{ Cabin: 'eco' }, { Cabin: 'taper' }]); The sorting works
But If the array is
self.AllocArray = ko.observableArray([{ Cabin: ko.observable('eco') }, { Cabin: ko.observable('taper') }]); then the sorting doesn't work.
Is there any possible solution around this?
Many thanks,
Jason
I am working with kendo grids with buttons in each column that display another grid in a modal. The first is using MVC, the modal grid was created dynamically. Each uses kendo dropdownlists to edit cells. The issue occurs like this:
1. A dropdownlist is clicked on in the initial grid,
2. The modal is opened afterward (each row has its own button)
3. A dropdownlist inside the modal's kendo grid is clicked, and nothing happens
Basically, if a dropdown is clicked in grid 1, and then you attempt to click one of the dropdownlists in the modal grid,
this error is thrown:
Uncaught TypeError: m is not a function
at init.editor (kendo.all.min.js:54)
at init.refresh (kendo.all.min.js:54)
at new init (kendo.all.min.js:54)
at HTMLTableCellElement.<anonymous> (kendo.all.min.js:26)
at Function.each (jquery.min.js:2)
at R.fn.init.each (jquery.min.js:2)
at R.fn.init.e.fn.<computed> [as kendoEditable] (kendo.all.min.js:26)
at init.editCell (kendo.all.min.js:59)
at init.tap (kendo.all.min.js:59)
at init.trigger (kendo.all.min.js:25)
This error is vague, and on the surface seems like jQuery scripts may be interfering or out of order. I don't think this is the case
because A) I haven't recieved errors like this before and B) the dropdowns work if the modal is opened without any of the dropdowns in the
other grid being touched. It seems as if when a dropdown is clicked in initial grid, somehow it breaks the dropdown in modal grid. They
do not have the same name.
Any ideas on where this console error comes from?
Here is a snippet of the grid being generated in the modal:
$("#account-tracking-grid").kendoGrid({
columns: [
{
field: "accountName",
title: "Account Name",
editable: function () { return false },
width: "200px",
},
{
field: "accountNumber",
title: "Account Number",
editable: function () { return false },
width: "200px"
},
{
field: "Balance",
title: "Balance",
width: "40px",
template: "<span>#=getIcon(Balance)#</span>",
editor: dropdownlist,
headerTemplate: "<span class='verticalText'>Balance</span>"
}
],
editable: "incell",
edit: function (e) {
var container = e.container;
var dropDownList = container.find("[data-role=dropdownlist]").data("kendoDropDownList");
if (dropDownList) dropDownList.open();
},
dataSource: {
transport: {
read: "/Account/Tracking?uniqueId=" + document.getElementById('unid').value
}
}
});
}
function dropdownlist(container, options) {
$('<input id="account-dropdownlist"/>')
.appendTo(container)
$("#account-dropdownlist").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: items,
change: onChange,
open: onOpen
});
}
We have two grids in our site that have a custom command button declared similarly to this:
columns.Command(cmd => cmd.Custom("Unaudit").Click("unaudit")).Width(60);
unaudit is a javascript function. Works ok but inside unaudit we have to jump through hoops to get the data we want, the id of the record in that grid row.
var id = this.dataItem($(e.currentTarget).closest("tr")).ID;
Is there a way to access the data object and pass just a field to the javascript function?
example (not working)
columns.Command(cmd => cmd.Custom("Unaudit").Click("unaudit(data.ID)")).Width(60);
Help is appreciated. Thanks. Note that if i am required to use a client template column instead, i do know how to do that but was hoping i wouldn't have to do that.