Questions on Kendo UI for jQuery Forum

1 answer

5.0K+ views

[Solved] Grid with a custom DropDownList as an editor not showing selected values

Hello,

First let me start by saying thanks for your previous help on these forums...they got me past a blocking issue and everything is working now...so there's the good news.

The bad news is that even though everything is working...there are some visual glitches that I can't figure out. The worst of those being whenever I add a new row into my grid...on this particular example I have 2 DropDownLists for selecting the values to add in for the new row. They function perfectly, but once I select a value and move onto the next column...the DropDownList and the selected value for it disappears...the value is still there in the new row, because when I click Save and look at the Controller Action, everything is coming across perfectly and the data is added into the database with no problems...also after I click save...the columns show the values as they should...the DropDownLists are disappearing only when adding a new row. I've attached some pictures for reference and I'll include code snippets for my grid and dropdownlist.

In the attached pictures...notice that the columns have the little red triangle in the upper left to note that there's a new value contained...but how when I move onto the next column the DropDownList and it's selected value are hidden...

Grid View:

@using TPOReporting

@{

ViewBag.Title = "Server Switch Feature Defect Maintenance";

Layout = null;

}

<script>

function grid_error(e)

{

if (e.errors)

{

var message = "There are some errors:\n";

// Create a message containing all errors.

$.each(e.errors, function (key, value)

{

if ('errors' in value)

{

$.each(value.errors, function ()

{

message += this + "\n";

});

}

});

// Display the message

alert(message);

// Cancel the changes

var grid = $("#ServerSwitchFeatureDefectGrid").data("kendoGrid");

grid.cancelChanges();

}

</script>

<div>

<h2>Server Switch Feature Defects</h2>

<hr size="3" />

</div>

<div>

@(Html.Kendo().Grid<ServerSwitchFeatureDefectModel>()

.Columns(c =>

{

c.Bound(ssfd => ssfd.FeatureDefectID)

.ClientTemplate("#:FeatureDefectName#")

.EditorTemplateName("FeatureDefectDropDownListTemplate")

.Title("Feature Defect");

c.Bound(ssfd => ssfd.ServerSwitchTestStatusID)

.ClientTemplate("#:ServerSwitchTestStatusName#")

.EditorTemplateName("ServerSwitchTestStatusDropDownListTemplate")

.Title("Server Switch Test Status");

c.Bound(ssfd => ssfd.BugID)

.Title("Bug ID");

c.Bound(ssfd => ssfd.LastUpdate)

.Title("Last Update");

c.Command(cmd =>

{

cmd.Destroy();

});

})

.DataSource(ds => ds

.Ajax()

.Create(c => c.Action("AddServerSwitchFeatureDefect", "ServerSwitchFeatureDefect"))

.Destroy(d => d.Action("RemoveServerSwitchFeatureDefect", "ServerSwitchFeatureDefect"))

.Events(e => e.Error("grid_error"))

.Model(m =>

{

m.Id(s => s.ID);

m.Field(s => s.ID).Editable(false);

})

.Read(r => r.Action("GetServerSwitchFeatureDefects", "ServerSwitchFeatureDefect"))

.Update(u => u.Action("UpdateServerSwitchFeatureDefect", "ServerSwitchFeatureDefect")))

.Editable(e => e.Mode(GridEditMode.InCell))

.HtmlAttributes(new { style = "height:300px;" })

.Name("ServerSwitchFeatureDefectGrid")

.Scrollable()

.Selectable()

.Sortable()

.ToolBar(t =>

{

t.Create();

t.Save();

}))

</div>

FeatureDefectDropDownListTemplate:

@using TPOReporting

@(Html.Kendo().DropDownListFor(m => m)

.DataSource(ds =>

{

ds.Custom()

.Type("aspnetmvc-ajax")

.Transport(t =>

{

t.Read("GetFeatureDefects", "FeatureDefect");

})

.Schema(s =>

{

s.Data("Data")

.Total("Total");

});

})

.DataTextField("Name")

.DataValueField("ID")

.Name("FeatureDefectID")

.OptionLabel("Select Feature Defect..."))

ServerSwitchTestStatusDropDownListTemplate:

@using TPOReporting

@(Html.Kendo().DropDownListFor(m => m)

.DataSource(ds =>

{

ds.Custom()

.Type("aspnetmvc-ajax")

.Transport(t =>

{

t.Read("GetServerSwitchTestStatus", "ServerSwitchTestStatus");

})

.Schema(s =>

{

s.Data("Data")

.Total("Total");

});

})

.DataTextField("DisplayName")

.DataValueField("ID")

.Name("ServerSwitchTestStatusID")

.OptionLabel("Select Server Switch Test Status..."))

The controllers are all working perfectly so I don't think I need to include those source files, but I will gladly do it if requested. They all pass back Model objects as Json via ActionResults. Pretty standard stuff.

Grid

answered on 30 Mar 2020

1 answer

348 views

autoFitColumns being minimized when exported as PDF?

I have a grid with 5 columns, 4 of which are set to autoFitColumn. When in the normal view, they are behaving as expected - resizing to fit the needs of the text contained in them.

When I export the view to a PDF though, it is completely minimizing the autofit columns down to a tiny size. When I apply the autoFitColumn to the grid as a whole, the columns are not necessarily auto-fitting, instead having parts of text cut off on the longer columns, while leaving the other smaller columns with a bunch of white space.

Attached image shows what I'm trying to say here. What I'm trying to get is those 4 columns to be autoFit and still show up properly when exported to PDF. OR for the "all columns autofit" to stop giving all the whitespace to the small columns so that it isn't cutting off the text of the larger ones.

Thanks

Grid

answered on 30 Mar 2020

3 answers

152 views

Localization for functions

Hello there,

is it possible to translate the functions of the spreadsheet? E.g. =SUM( ), =SUMPRODUCT( ), etc...

Thank you!

Spreadsheet

answered on 30 Mar 2020

8 answers

1.7K+ views

how to show/hide editor/textarea based on dropdown box selection using jQuery and PHP

Hi!
I want to show and hide the editor based on the dropdown selection or selected option in a select box using the jQuery and PHP.

Also when I select the "text/plain" from dropdown list I want to hide the editor and show the textarea and for "text/plain" I want to show the editor and hide the textarea.

$editor = new \Kendo\UI\Editor('content');

$editor->resizable(true);

$deserialization = new \Kendo\UI\EditorDeserialization();

$custom = new \Kendo\JavaScriptFunction($(function() { $(\"#content\").data(\"kendoEditor\").wrapper.hide(); }););

$deserialization->custom($custom);

$editor->deserialization($deserialization);

if ($mimeTag == 'text/html') {

print_r('show editor');

} elseif ($mimeTag == 'text/plain') {

print_r('show textarea');

} else {

//hide the textarea or editor

$editor->deserialization($deserialization);

print_r('hide');

}

$dropDownList = new \Kendo\UI\DropDownList('dropdownlist');

$dropDownList->dataTextField('mimeTag')

->dataValueField('value')

->dataSource(array(

array('text' => 'text/html', 'value' => 'Html'),

array('text' => 'text/plain', 'value' => 'Text')

))

->select('onTADropDownSelect');

function onTADropDownSelect(e) {

var value = e.sender.dataSource.options.data;

var content = $('#content').data('kendoEditor');

for (var i=0; i < value.length; i++) {

if (value[i].value != 'Text'){

$(function() { $('#content').data('kendoEditor').wrapper.hide(); });

}

else

{

$(function() { $('#content').data('kendoEditor').wrapper.show(); });

}

if (value[i].value != 'Html'){

$(function() { $('#content').data('kendoEditor').wrapper.hide(); });

}

else

{

$(function() { $('#content').data('kendoEditor').wrapper.show(); });

}

};

echo $dropDownList->render();

echo $editor->render();

General Discussions

answered on 30 Mar 2020

2 answers

196 views

Problems with remote binding a datasource to a stacked bar chart

Hello,

I have a problem when I'm trying to bind my data to a datasource with remote. If I bind it inline everything is fine and my chart looks like the first attached file. But with remote I get something like the second attached file.

The data I'm using for inline binding is this: var data = [{"Draft": 100, "Published": 200,"Deactivated": 50,"ChangeByVendor": 20}];

And the Data I receive from my endpoint with remote binding is following: "{\"Draft\": 100, \"Published\": 200,\"Deactivated\": 50,\"ChangeByVendor\": 20}"

The series field in my chart looks like this:

series: [{

name: "@T("Pim.Product.Enum.Published")",

field: "Published",

color: "#48b159",

labels: {

visible: true,

background: "",

position: "center",

template: '#if (value > 0) {# #=kendo.format("{0:p}", percentage)# #}#'

}

}, {

name: "@T("Pim.Product.Enum.Draft")",

field: "Draft",

color: "#f4a623",

labels: {

visible: true,

background: "",

position: "center",

template: '#if (value > 0) {# #=kendo.format("{0:p}", percentage)# #}#'

}

}, {

name: "@T("Pim.Product.Enum.Deactivated")",

field: "Deactivated",

color: "#f42323",

labels: {

visible: true,

background: "",

position: "center",

template: '#if (value > 0) {# #=kendo.format("{0:p}", percentage)# #}#'

}

}, {

name: "@T("Pim.Product.Enum.ChangeByVendor")",

field: "ChangeByVendor",

color: "#f42323",

labels: {

visible: true,

background: "",

position: "center",

template: '#if (value > 0) {# #=kendo.format("{0:p}", percentage)# #}#'

}

}],

For me, I don't understand why i get two so different result with inline and remote. What am I missing here? I would love to get the chart to look like the inline result but with a remote binding. I hope you can help me with that.

Best regards,

Dominik

Charts

answered on 30 Mar 2020

1 answer

443 views

How to lazy load the spredsheets for large excel files?

Dear Support,

Is there are any options to lazy load the sheets as my excel sheet is large enough and browser gets hanged. Do i missing something or any workaround for that.Thanks in advance.

Spreadsheet

answered on 30 Mar 2020

1 answer

5.3K+ views

Kendo Grid showing Yes or No instead of True or False

On the kendo grid is it possible to substitute True/False for Yes/No?

My Json returns true or false but I would like the grid to show Yes or No.

Is this possible or should I return the data from the server as Y/N?

Grid

answered on 26 Mar 2020

11 answers

1.6K+ views

Empty the grid and clear column filtering/sorting without calling service layer?

I have a grid where the display criteria is set by another control on the page, therefore sometimes I need to present an empty grid with all column filtering and sorting cleared. The only way I have been able to do this is with the following code:

grid.dataSource.query({
filter: {},
sort: {},
take: grid.dataSource.take(),
page: grid.dataSource.page(),
pageSize: grid.dataSource.pageSize(),
skip: grid.dataSource.skip()
}).then(function (e) {
grid.dataSource.data([]);
});

The problem with this code is the grid.dataSource.query causes a call to the service layer, which is extra traffic in the network, and seems unecessary since I am not presenting any data in the grid. Is there any other way of presenting an empty grid with column filtering/sorting cleared, that would not involve a call to the service layer?

Grid

answered on 26 Mar 2020

3 answers

1.5K+ views

How to prevent firing custom validation function multiple times

Hi,

I have use custom validation function to my grid, it's fired twice every time. How to prevent this?

Grid

answered on 26 Mar 2020

1 answer

2.0K+ views

How to avoid kendo grid refreshing after cell edit

How to avoid kendo grid refresh after cell editing , when i edit a cell value that time databound event called it self ,so issue is when databound event called it self my kendo grid expanded row collapse automaticly so i need to re-expand again this row that not well taking lot time to expand again

here is Snapshot

$("#planViewDataGrid").kendoGrid({
columns: ParentGridJSON,
noRecords: true,
dataSource: sharedDataSource,
excel: {
allPages: true
},
//cancel: function (e) {
// lstGridDataSet = [];
//},
saveChanges: function (e) {
if (IsInlineEdit === "True") {
//dialog.data("kendoDialog").open().element.closest(".k-window").css({
// top: 100
//});
showInlineConfirmDialog();
//bindReasonCodeDropDown();
IsInlineEditDataBindReq = 0;
}
else {
showConfirmBox("Confirm Overrides", "Are you sure you want to override all changes?");
var kendoWindow = $("#confirmPopUpWindow");
kendoWindow
.find("#confirmYes")
.unbind("click").click(function () {
// showInProgress();
$("#confirmYes").off();
hideKendoConfirmWindow();
kendo.ui.progress($(bodyTag), true);
$(".k-grid-save-changes").addClass('disabled_button');
$(".k-grid-save-changes").css("pointer-events", "none");
$(".k-grid-button").addClass('disabled_button');
$(".k-grid-button").css("pointer-events", "none");

saveTimeSeriesData($("#planViewDataGrid"));

});
}
},
pageable: {
pageSizes: [10, 20, 30, 40, 50],
change: function () {
if (leavepage) {
expandedItems = [];
}
renderChart();
},
messages: {
display: Resources.resPagerDisplayMessage + footerLabel,
itemsPerPage: footerLabel + Resources.resPagerItemsPerPageMessage
}
},
requestStart: function () {

kendo.ui.progress($(bodyTag), true);
},
requestEnd: function () {
// kendo.ui.progress($(bodyTag), false);
},
editable: true,
toolbar: [{ template: '<Label ID="m_lblUpdateStatus" CssClass="updatestatus" class="text-right"/>' },
{ name: "save", text: "Save Overrides" }, { name: "button", text: "Cancel Overrides" },
{ template: '<img id="expandGrid" style="width:20px;margin-top:2px;margin-right:5px;cursor:pointer;" class="float-left" title="Maximize Grid" onclick="expandCollapseGrid()" src="../CollaborativePlanning/Images/maximize.png" />' },
{ template: '<a class="k-button float-left" id="btnExpandAll" onclick="return expandAll()">Expand All</a>' },
{ template: '<a class="k-button float-left" id="btnCollapseAll" onclick="return collapseAll()">Collapse All</a>' },
{ template: '<Input type="search" ID="m_txtProductSearch" placeholder="Product Hierarchy" class="mleft mright float-left"/>' },
{ template: '<Input type="search" ID="m_txtLocationSearch" placeholder="Location Hierarchy" class="mright float-left"/>' },
{ template: '<Input type="search" ID="m_txtChannelSearch" placeholder="Customer Hierarchy" class="float-left"/>' },
{ template: '<img class="findIcon float-left" title="Search" onclick="searchPlanView()" src="../Images/find.gif" />' },
{ template: '<img style="width:20px;margin-top:2px;" class="findIcon float-left" title="Remove Search" onclick="removeSearchPlanView()" src="../Images/delete.png" />' }
],
detailTemplate: '<div class="planViewDataGrid"></div>',
detailExpand: function (e) {
var grid = $("#planViewDataGrid").data("kendoGrid");
var expanded = $.map(grid.tbody.children(":has(> .k-hierarchy-cell .k-i-collapse)"), function (row) {
var index = $(row).data("uid");
var list = $("#planViewDataGrid").data("kendoGrid").tbody.find("tr.k-master-row");
if (list != undefined && list.length > 0) {
for (var i = 0; i < list.length; i++) {
if (list[i].getAttribute('data-uid') == index) {
if ($.inArray(i, expandedItems) == -1) {
expandedItems.push(i);
}
}
}
}

});

if (IsInlineEdit === "True") {
//disable non editable cells
$('.nonEditable').css({ pointerEvents: "none" });
if (IsInlineEditDataBindReq === 0) {
totalRenderChartRequest = totalRenderChartRequest + 1;
renderChart();
}
IsInlineEditDataBindReq = 0;
}
else {
totalRenderChartRequest = totalRenderChartRequest + 1;
renderChart();
}

},
detailCollapse: function (e) {
expandedItems = [];
var grid = $("#planViewDataGrid").data("kendoGrid");
var expanded = $.map(grid.tbody.children(":has(> .k-hierarchy-cell .k-i-collapse)"), function (row) {
var index = $(row).data("uid");
var list = $("#planViewDataGrid").data("kendoGrid").tbody.find("tr.k-master-row");
if (list != undefined && list.length > 0) {
for (var i = 0; i < list.length; i++) {
if (list[i].getAttribute('data-uid') == index) {
if ($.inArray(i, expandedItems) == -1) {
expandedItems.push(i);
}
}
}
}

});
totalRenderChartRequest = totalRenderChartRequest + 1;
renderChart();
},
dataBound: function () {
var grid = $("#planViewDataGrid").data("kendoGrid");
for (var i = 0; i < expandedItems.length; i++) {
//var rowToExpand = ">tr.k-master-row:nth-child(" + expandedItems[i] + ")";
if (IsInlineEdit === "True") {
IsInlineEditDataBindReq = 1;
}
// grid.expandRow(grid.tbody.find("tr.k-master-row")[expandedItems[i]]);

var rowToExpand = $("#planViewDataGrid").data("kendoGrid").tbody.find("tr.k-master-row")[expandedItems[i]];
if (rowToExpand != undefined) {
grid.expandRow(rowToExpand);
//grid.expandRow(grid.tbody.find("tr[data-uid='" + expandedItems[i] + "']"));
}
}

$("div.k-grid-content .k-auto-scrollable").scrollLeft(leftValue);
$('div#planViewDataGrid div.k-grid-content.k-auto-scrollable').scrollTop(gridScrollTop);
// renderChart();
kendo.ui.progress($(bodyTag), false);
},
detailInit: function (e) {
//Model values to be used when saving forecast changes
e.data.Timeseries.forEach(function (item, index) {
if (item.UpdateSummaryTimeSeries != null) {
if (lstTsIds.indexOf(item.UpdateSummaryTimeSeries) < 0) {
lstTsIds.push(item.UpdateSummaryTimeSeries);
}
}
});

e.detailRow.find(".planViewDataGrid").kendoGrid({
resizable: true,
columns: dynamicColumns,
dataSource: e.data.Timeseries,
editable: true,
edit: function (e) {
var gridDataSet = {
LocationHierarchyField: '',
LocationHierarchy: '',
ProductHierarchy: '',
ProductHierarchyField: '',
ChannelHierarchyField: '',
ChannelHierarchy: '',
Period: '',
Value: '',
TemplateId: templateId,
TimeseriesId: '',
ReasonCode: '',
Comments: '',
Id: ''
};
var input = e.container.find(".k-input");
var oldValue = input.val().replace(/,/g, '');
var value = input.val();
var name = input[0].nextElementSibling.name;
var parent = $("#planViewDataGrid").data("kendoGrid").dataItem(e.sender.element.closest("tr").prev());
gridDataSet.LocationHierarchy = parent.LocationHierarchy;
gridDataSet.LocationHierarchyField = parent.LocationHierarchyField;
gridDataSet.ChannelHierarchy = parent.ChannelHierarchy;
gridDataSet.ChannelHierarchyField = parent.ChannelHierarchyField;
gridDataSet.ProductHierarchyField = parent.ProductHierarchyField;
//gridDataSet.ProductHierarchy = parent.HasChild ? parent.ProductHierarchy : parent.ProductHierarchy.split(":")[0];
gridDataSet.ProductHierarchy = parent.HasChild ? parent.ProductHierarchy : parent.ProductId;
gridDataSet.Period = name;
gridDataSet.TimeseriesId = e.model.TimeSeriesId;
gridDataSet.Id = input.context.id;
//gridDataSet.ReasonCode = reasonCode;
//gridDataSet.Comments = comments;
if (IsInlineEdit === "True") {
IsInlineEditDataBindReq = 1;
}
//GET SCROLLBAR POSITION
var oBody = document.body;
var oDoc = document.documentElement;
topValue = oBody.scrollTop > oDoc.scrollTop ? oBody.scrollTop : oDoc.scrollTop;
leftValue = $("div.k-grid-content .k-auto-scrollable").scrollLeft();

gridScrollTop = $('div#planViewDataGrid div.k-grid-content.k-auto-scrollable').scrollTop();
input.focusout(function () {
value = input.val().replace(/,/g, '');
gridDataSet.Value = value;
if (IsInlineEdit === "True") {
IsInlineEditDataBindReq = 1;
}
if (oldValue != value) {
//if (IsInlineEdit === "False") {
$(".k-grid-save-changes").removeClass('disabled_button');
$(".k-grid-save-changes").css("pointer-events", "visible");

$(".k-grid-button").removeClass('disabled_button');
$(".k-grid-button").css("pointer-events", "visible");
//}

for (var i = 0; i < lstGridDataSet.length; i++) {
if (lstGridDataSet[i].Id == gridDataSet.Id && oldValue != value) {
lstGridDataSet.splice(i, 1);
}
}

lstGridDataSet.push(gridDataSet);
//Adding overriden cells ids to list, as we have to show them in different color
if (lstOverriddenIds.indexOf('#' + gridDataSet.Id) == -1) {
lstOverriddenIds.push('#' + gridDataSet.Id);
}

UpdateSummaryTimeSeries(gridDataSet, lstTsIds);

//if (IsInlineEdit === "True") {
// saveTimeSeriesDataInline($("#planViewDataGrid"));
//}

// SCROLLBAR RESTORE POSITION
try {
oBody.scrollTop = topValue;
oDoc.scrollTop = topValue;
$("div.k-grid-content .k-auto-scrollable").scrollLeft(leftValue);
$('div#planViewDataGrid div.k-grid-content.k-auto-scrollable').scrollTop(gridScrollTop);
}
catch (e) {
console.log(e);
}

}
});
},
dataBound: function (e) {

}
});
$("#planViewDataGrid").resize();
if (lstGridDataSet.length == 0) {
$(".k-grid-save-changes").addClass('disabled_button');
$(".k-grid-save-changes").css("pointer-events", "none");

$(".k-grid-button").addClass('disabled_button');
$(".k-grid-button").css("pointer-events", "none");
}
//renderChart();
}
});

Grid

answered on 25 Mar 2020