or
1 answer
39 views
I'm upgrading to Kendo 2024.1.130 and I've been able to get svg icons on a button or other places using this construct.
<div class="ara-footer">
<button class="k-button k-button-icontext" onclick="cancelEdit(id)">
<span id="ericIcon"></span>
Back
</button>
</div>
<script>
kendo.ui.icon($("#ericIcon"), { icon: 'camera' });
</script>That worked flawlessly. Thank you for the great example.
Now I'm trying to add svg icons to a Custom command in a grid. This is the code I have previously when using font-icons.
Html.Kendo()
.Grid<TemplateModel>()
.Name("GridApprovedTemplates")
.Columns(columns =>
{ columns.Command(command =>
{
command.Edit().Text(" ").UpdateText(" ").CancelText(" ");
command.Custom(" ").Text("<span class='k-icon k-i-info'></span> ").Click("refreshApprovedTemplateDetail");
}).Width(150);
1 answer
39 views
Hello,
after upgrading the versions buttons will not shown correctly
- Edit Button is disabled
- Delete Button will not shown anymore
We using dotnet core version 7 and Telerik version 2023.2.606:
Here is the code of the columns.
<column html-attributes="@(new Dictionary<string, object>{{"class", "ActionEdit"}})" header-html-attributes="@(new Dictionary<string, object> { { "class", "ActionEdit" } })" title=@Model._htmlLocalizer.GetHtmlTextForKey(" ", @Model.UserNumber)>
<commands>
<column-command template="<a class='k-grid-edit k-icon k-i-edit button_icon' href='\#'> </a>" text="\{Edit\}" icon-class="k-icon k-i-edit button_icon" name="edit"></column-command>
</commands>
</column>
<column html-attributes="@(new Dictionary<string, object>{{"class", "ActionDelete"}})" header-html-attributes="@(new Dictionary<string, object> { { "class", "ActionDelete" } })" title=@Model._htmlLocalizer.GetHtmlTextForKey(" ", @Model.UserNumber)>
<commands>
<column-command text=" " icon-class="k-icon k-i-delete button_icon" name="custom" click="deleteContractCondition"></column-command>
</commands>
</column>
Have you any idea to fix the problems? I think the icon class is changed with the update.
Second problem is to disable the buttons via javascript:
$(".k-grid-edit").addClass("k-state-disabled")
$(".k-grid-custom").addClass("k-state-disabled")
Before the update this commands works well after not. Have you any idea to find the icon via javascript.
Best regards
Jens
1 answer
94 views
I tried to add a badge to a button after successfull retrieving data by an ajax call:
@(Html.Kendo().Button()
.Name("postbox")
.ImageUrl("../../images/mail-black.svg")
.Content("Postfach")
.Events(e => e.Click("onClickPostbox"))
.HtmlAttributes(new { @class = "button-box", style = style }))When document is loaded i use ajax to retriev data:
$(document).ready(function () {
$.ajax({
contentType: 'application/json; charset=utf-8',
url: '/Dks/GetPostboxData',
type: 'GET',
cache: false,
data: null,
success: function (data) {
console.log(data);
if (typeof data !== 'undefined' && data.length > 0) {
var unreadDocuments = data.filter(doc => doc.Read == false);
console.log(unreadDocuments);
//Here I want to do something like this:
$("#postbox").data('kendoButton').Badge({
text: unreadDocuments.length,
shape: "circle",
themeColor: "error",
align: "top end",
visible: unreadDocuments.length > 0
});
}
},
error: function (error) {
console.log(JSON.stringify(error));
}
});
});I didn't find a way to do this. Did I miss something?
Kind regards
Timo
1 answer
42 views
Hi,
I want to close the dropdown list as soon as the event (it creates the confirmation pop-up) is triggered from selecting an option from the list.
How this can be achieved.
Thanks,
Aleksandar
Telerik team
answered
on
24 Oct 2022
1 answer
479 views
Hi,
I need to add a trash can against each option of the dynamic dropdown list.
example:
How can this be achieved?
What I have achieved so far:
Dynamically populating the list.
Thanks,
VM
Alexander
Telerik team
answered
on
20 Oct 2022
1 answer
106 views
The three dots buttons that open column menu settings work in the last three column but no in the others. On the other hand we use kendo windows, when we change the width of window; the column menu opener buttons work properly.
Aleksandar
Telerik team
answered
on
20 Oct 2022
1 answer
205 views
Scenario:
I've used grid component before,
and I'm aware that it has excel export function,
but what it exports is all the data from the grid.
However, in my scenario,
data in each row of my grid is only the maximum value of a list of data,
and I would like to press the button and export the list of data,
where the button is at the last column of the row.
Its hard to describe with words,
So I'll leave a picture hoping it will clarify my question
1 answer
64 views
Dear all,
i'm try to set the position of the DropDownButton Popup, but seams this option is not available?
In the Documentation it says "See Popup Documentation", where you have the Option "Position"
https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownbutton/configuration/popup
Thanks, best regards
Patrick
PS: DropDownButton is missing as Tags here ;)
Aleksandar
Telerik team
answered
on
10 Aug 2022
2 answers
433 views
I posted this query as a support ticket but I'm hoping to get an answer before the weekend is over.
I have a Grid with batch editing enabled. It also features a custom toolbar with an additional button: 'Archive'.
Users will be able to check multiple rows and click the 'Archive' button in the toolbar.
The button should submit all the selected rows (models) and POST them to a server side method for processing.
I have used this post as a basis for my work:
https://www.telerik.com/forums/how-to-pass-a-grid%27s-selected-row-values-to-controller
In the post, the custom button simply gets the selected items and posts them to the appropriate Controller method.
I need to POST an IEnumerable<T> to the Controller. Not just properties of an object.
I keep getting this error message:
"Javascript error: 'Uncaught TypeError: Cannot read properties of undefined (reading 'field')'
or the Controller gets NULL.
markup:
<div class="container-fluid"><div class="fc-day-grid-container">
@(Html.Kendo().Grid<Core.Resources.EmPowerReconciliationDto>
()
.Name("EmpFSRollGrid")
.Columns(columns =>
{
columns.Select().Width(50)
.ClientHeaderTemplate("<input type='checkbox' id='selectAll' class='k-checkbox' onClick='selectAll(this)'/>" +
"<label for='selectAll'> All</label>").HeaderHtmlAttributes(new { @class = "k-header" });
columns.Bound(c => c.ProjMessage).Width(100);
columns.Bound(c => c.ProjectId).Width(150);
columns.Bound(c => c.ElectricUtilityUtilityName).Width(150);
columns.Bound(c => c.GasUtilityUtilityName).Width(150);
columns.Bound(c => c.PrimaryHeatingFuel).Width(100);
columns.Bound(c => c.ReferralSF).Width(100);
columns.Bound(c => c.MeasureType).Width(100);
columns.Bound(c => c.ProgramName).Width(100);
columns.Bound(c => c.MeasureId).Width(100);
columns.Bound(c => c.FundedAmount).Width(100).Format("{0:n}").HtmlAttributes(new { @class = "k-text-right" });
columns.Bound(c => c.Adj).Width(100).Format("{0:n}").HtmlAttributes(new { @class = "k-text-right" });
columns.ForeignKey(c => c.XFundingSourceId, (System.Collections.IEnumerable)ViewData["fundingsource"], "FundingSourceId", "FundingSourceDesc").Width(160).Title("Funding Source");
columns.Bound(c => c.MeasureCategoryMeasureCategoryDesc).Width(100);
columns.Bound(c => c.ProjectStage).Width(100);
})
.ToolBar(toolbar =>
{
toolbar.ClientTemplateId("GridToolbarTemplate");
})
.Excel(excel => excel
.FileName($"EmPowerReconciliationReport{System.DateTime.Now.ToString("yyyyMMMMdd")}.xlsx")
.Filterable(true)
.AllPages(true)
)
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable(pageable =>
{
pageable.Refresh(true);
pageable.PageSizes(new[] { 10, 20, 50 });
})
.Sortable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Scrollable(s => s.Enabled(true))
.Resizable(resize => resize.Columns(true))
.PersistSelection()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(emp => emp.MeasureId);
model.Field(emp => emp.ProjMessage).Editable(false);
model.Field(emp => emp.ProjectId).Editable(false);
model.Field(emp => emp.ElectricUtilityUtilityName).Editable(false);
model.Field(emp => emp.GasUtilityUtilityName).Editable(false);
model.Field(emp => emp.PrimaryHeatingFuel).Editable(false);
model.Field(emp => emp.ReferralSF).Editable(false);
model.Field(emp => emp.MeasureType).Editable(false);
model.Field(emp => emp.ProgramName).Editable(false);
model.Field(emp => emp.MeasureId).Editable(false);
model.Field(emp => emp.FundedAmount).Editable(false);
model.Field(emp => emp.Adj).Editable(true);
model.Field(emp => emp.XFundingSourceId).Editable(true);
model.Field(emp => emp.MeasureCategoryMeasureCategoryDesc).Editable(false);
model.Field(emp => emp.ProjectStage).Editable(false);
})
.ServerOperation(false)
.Batch(true)
.Events(events => events.Error("error_handler"))
.Events(events => events.RequestEnd("request_end"))
.Read(read => read.Action("GetAllFsRollup", "EmPowerReconciliation"))
.Update(update => update.Action("UpdateCompositeInvoice", "EmPowerReconciliation"))
//.Create(create => create.Action("AddInvoice", "EmPowerInvoiceReport"))
//.Destroy(destroy => destroy.Action("DeleteInvoice", "EmPowerInvoiceReport"))
)
)
</div></div><script id="GridToolbarTemplate" type="text/x-kendo-template">
<div class="toolbar">
<a role="button" class="k-button k-button-icontext k-grid-excel" href="\\#"><span class="k-icon k-i-file-excel"></span>Export to Excel</a>
<a role="button" class="k-button k-button-icontext k-grid-save-changes" href="\\#"><span class="k-icon k-i-check"></span>Save changes</a>
<a role="button" id="cancelmeasureChanges" class="k-button k-button-icontext k-grid-cancel-changes" href="\\#"><span class="k-icon k-i-cancel"></span>Cancel changes</a>
<a role="button" id="ArchiveChanges" class="k-button" href="\\#" onClick="Archive()"><span class="k-icon"></span>Archive</a>
@*@(Html.Kendo().DropDownList()
.Name("InvoicedList")
.OptionLabel("All")
.DataTextField("InvoiceSatusName")
.DataValueField("InvoiceStatusId")
.AutoBind(true)
.Events(e => e.Change("invoicedStatusChange"))
.DataSource(ds =>
{
ds.Read("InvoiceStatuses", "EmPowerInvoiceReport");
})
.ToClientTemplate()
)*@
</div>
</script><script type="text/javascript">
function Archive() {
var items = {};
//var items = [];
var grid = $('#EmpFSRollGrid').data('kendoGrid');
var selectedElements = grid.select();
for (var j = 0; j < selectedElements.length; j++) {
var item = grid.dataItem(selectedElements[j]);
//items.push(item);
items['archiveItems[' + j + ']'] = item;
//items[j] = item;
}
$.ajax({
type: "POST",
data: items,
url: '@Url.Action("Archive", "EmPowerReconciliation")',
success: function (result) {
console.log(result);
}
})
}
// ******* Select/deSelect All
function selectAll(mainCheck) {
var grid = $("#EmpFSRollGrid").data("kendoGrid");
var items = grid.items();
items.each(function (index, td) {
var chckbx = $(td).find("input").get(0);
$(chckbx).prop("checked", mainCheck.checked);
var dataItem = grid.dataItem(this);
dataItem.IsSubmitted = mainCheck.checked;
if (mainCheck.checked) {
//$(chckbx).closest("td").addClass("k-dirty-cell").prepend("<span class='k-dirty'></span>");
$(chckbx).closest("tr").addClass("k-state-selected");
dataItem.dirty = true;
dataItem.dirtyFields = { IsSubmitted: true }
}
else {
//$(chckbx).closest("td").removeClass("k-dirty-cell").remove("span.k-dirty");
$(chckbx).closest("tr").removeClass("k-state-selected");
dataItem.dirty = false;
dataItem.dirtyFields = { IsSubmitted: false }
}
})
if (mainCheck.checked == false) {
dataSource = $("#EmpFSRollGrid").data("kendoGrid").dataSource
grid._selectedIds = {};
grid.clearSelection();
}
}
// ***************** Grid Textbox edited
$("#EmpFSRollGrid").on("change", "input.text-box.single-line.k-valid", function (e) {
var grid = $("#EmpFSRollGrid").data("kendoGrid"),
dataItem = grid.dataItem($(e.target).closest("tr"));
if (dataItem.dirty) {
grid.dataItem($(e.target).closest("tr").addClass("k-state-selected"));
var chk = $(e.target).closest("tr").find(".k-checkbox");
chk.prop("checked", true);
}
});
// *************** Grid checkbox checked/unchecked
$("#EmpFSRollGrid").on("change", "input.k-checkbox", function (e) {
var grid = $("#EmpFSRollGrid").data("kendoGrid"),
dataItem = grid.dataItem($(e.target).closest("tr"));
dataItem.IsSubmitted = this.checked;
if (this.checked) {
//$(e.target).closest("td").addClass("k-dirty-cell").prepend("<span class='k-dirty'></span>");
dataItem.dirty = true;
dataItem.dirtyFields = { IsSubmitted: true }
}
else {
// $(e.target).closest("td").removeClass("k-dirty-cell").remove("span.k-dirty");
dataItem.dirty = false;
dataItem.dirtyFields = { IsSubmitted: false }
var row = e.target.closest('tr')
var uid = $(row).data(uid)
dataSource = $("#EmpFSRollGrid").data("kendoGrid").dataSource
var item = dataSource.getByUid(uid.uid);
dataSource.cancelChanges(item);
grid.refresh();
}
if (!this.checked) {
$("#selectAll").prop('checked', false);
}
});
// ************** Clear the grid after an Update
function request_end(e) {
var grid = $("#EmpFSRollGrid").data("kendoGrid");
var items = grid.items();
items.each(function (index, td) {
var chckbx = $(td).find("input").get(0);
$(chckbx).prop("checked", false);
$(chckbx).closest("tr").removeClass("k-state-selected");
});
grid._selectedIds = {};
grid.clearSelection();
}
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
</script>
The important part is here.
<a role="button" id="ArchiveChanges" class="k-button" href="\\#" onClick="Archive()"><span class="k-icon"></span>Archive</a>
Here:
function Archive() {
var items = {};
//var items = [];
var grid = $('#EmpFSRollGrid').data('kendoGrid');
var selectedElements = grid.select();
for (var j = 0; j < selectedElements.length; j++) {
var item = grid.dataItem(selectedElements[j]);
//items.push(item);
items['archiveItems[' + j + ']'] = item;
//items[j] = item;
}
$.ajax({
type: "POST",
data: items,
url: '@Url.Action("Archive", "EmPowerReconciliation")',
success: function (result) {
console.log(result);
}
})
}Controller
[AcceptVerbs("Post")]
public async Task<ActionResult> Archive([DataSourceRequest] DataSourceRequest request
,IEnumerable<EmPowerReconciliationDto> archiveItems)
{
return Json(archiveItems);
}1 answer
559 views
Hey guys,
I know that your intention with the kendo button was always to render a button of type "button". Also I know you're providing a kendo form widget to render a full form with a submit button.
But isn't there any solution to achive a basic html form and then render a kendo button of type "submit"? I know I can change it with jquery manually afterwords or by registrating an function which will fire the submit again, but i would only use this when there isn't any built in solution to force it as type submit.
My intention was to render the kendo button with the tag helper and then manually set the type but it will be always overridden back to type "button" instead of keeping it as "submit".
<kendo-button name="btnSubmit" theme-color="ThemeColor.Primary" class="float-right" type="submit">
Speichern
@(Html.Kendo().Loader()
.Name("loader")
.HtmlAttributes(new { aria_busy = "false", aria_description = InfoMessages.LoadingOperation, aria_live = "polite" })
.Size(LoaderSize.Small)
.ThemeColor(LoaderThemeColor.Light)
.Type(LoaderType.InfiniteSpinner)
.Visible(false)
)
</kendo-button>
Stoyan
Telerik team
updated answer
on
02 Feb 2022
