I have a kendo grid with custom control. Kendo Grid Export CSV is not working for me. Source code is given below. Can anyone help me.
Code running without error but CSV is not generating ( chrome).
1. kendo grid.
.Name("PayrollReport")
.ToolBar(toolbar =>
{
toolbar.Excel().HtmlAttributes(new { @class = "toolbar-field" });
toolbar.Custom()
.Text("Export To CSV")
.HtmlAttributes(new { id = "exportCSV" });
jquerry
$("#PayrollReport").on("click", "#exportCSV", function (e) {
var batchid = $("#ddlbatchidamexrpt").data("kendoDropDownList").value();
var status = $("#ddlpayrollstatus").data("kendoDropDownList").value();
//debugger;
$.ajax({
type: "POST",
url: "/Home/ExportServer",
data: JSON.stringify({ 'Batchid': batchid, 'Status': status }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
//alert("Saved Successfully");
},
failure: function (response) {
//alert("Error Occured");
}
});
e.preventDefault();
});
Home controller
[HttpPost]
<div>
@(Html.Kendo().Grid<FourCSQL.ContractorPortal.Model.Custom.WorkRequest.WorkRequestModel>()
.Name("gridTestrequest")
.Columns(columns =>
{
columns.Bound(c => c.TestName).Title(ResourceManagerClass.GetResource("CarTest", languageID)).Width(200);
columns.Bound(c => c.TestDescription).Title(ResourceManagerClass.GetResource("Car Description", languageID)).Width(460);
columns.Bound(c => c.TestToComplete).Title(ResourceManagerClass.GetResource("Car Test to complete", languageID)).Width(150);
columns.Bound(c => c.TestPriority).Title(ResourceManagerClass.GetResource("Carpriority", languageID)).Width(180);
columns.Bound(c => c.TestCode).Title(ResourceManagerClass.GetResource("CarTestCode", languageID)).Width(200);
columns.Bound(c => c.TestDepartment).Title(ResourceManagerClass.GetResource("Cardepartment", languageID)).Width(180);
columns.Bound(c => c.TestLocation).Title(ResourceManagerClass.GetResource("CarLocation Description", languageID)).Width(240);
columns.Bound(c => c.LocationDescription).Title(ResourceManagerClass.GetResource("Asset", languageID)).Width(240);
columns.Bound(c => c.WorkDescription).Title(ResourceManagerClass.GetResource("Work ", languageID)).Width(180);
columns.Bound(c => c.TestStatus).Title(ResourceManagerClass.GetResource("Status", languageID)).Width(180);
columns.Bound(c => c.TestStore).Title(ResourceManagerClass.GetResource("Store", languageID)).Width(180).Hidden(true).Exportable(true);
})
.ToolBar(toolBar =>
toolBar.Template("<a class='k-button k-button-icontext k-grid-excel btn btn-secondary btn-custom' style='float:right;margin- right:12px;color:white;' href='#'><span class='k-icon k-i-excel' style='margin-top:-1px;'></span>Export</a> "))
.Excel(excel => excel
.FileName("workrequest.xlsx")
.Filterable(true).AllPages(true)
.ProxyURL(Url.Action("AdminList", "Admin", new { @requestType = @ViewBag.RequestType }))
)
.Scrollable(scr => scr.Height(230))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.Pageable(pageable => pageable.Refresh(false).PageSizes(true).ButtonCount(1))
.Sortable()
.Filterable(f => f.Extra(false)
.Operators(op => { op.ForString(str => { str.Clear().Contains("Contains"); }); })
.Messages(m => m.Info("Items with value contains:")))
.DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("AdminList", "Admin", new { @requestType = "pending" })))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorderable => reorderable.Columns(true))
.Events(events => events.ColumnReorder("saveColumnReorder").ColumnResize("saveColumnSize"))
.HtmlAttributes(new { @class="KendoGrid"})
)
</div>
1.How We can Export the Hidden columns in Excel...?
2. In the grid has one columns values like this the user is seeing like this (volvo, benz, Audi, BMW, I20, MG,) But When user clicks on the Excel So we want show ('30lakhs', '1crore' , '80lakhs', '30lakhs', '50lakhs')
So How We can do this I have not found any link anyone can you please help me out to find for this solution.
Thanks& Regards
Hello
I am trying to create a kendo multi axis scatter plot in my application. Both Y axis is logarithmic and x axis is numeric.
Chart is displaying fine but x axis display in middle of charts. I want x axis to be display at bottom instead of middle. I trieds setting display X axis crossing values but I could not able to correct this. Please let me know what's wrong in my code.
Code
div.kendoChart({
By default, Timelines are split by years, which means:
I have two events, one on 2010 and another in 2011. My timeline will be split in two parts using a marker containing the year. Something like this:
But what if I have multiple events on the same day with different timestamps? I want to be able to split the timeline by hours or even minutes. I see this is achievable on other widgets like Scheduler.
Dear Kendo UI Team,
I recently encountered a specific issue related to the Kendo Grid component, more precisely, with the column resize cursor. Currently, when hovering over the column line in the Kendo Grid, the resize cursor is not showing as expected. Interestingly, we discovered that if we manually activate the cursor div using developer tools from the browser, the cursor starts working correctly. But this behavior is only temporary, and as soon as we close the developer tools, the issue reoccurs.
Description of the Issue:
When we hover over the column line in the Kendo Grid, the expected resize cursor (e.g., the horizontal double-headed arrow) is not displayed, which makes it difficult for our users to identify that they can resize the columns.
Steps to Reproduce:
1. Open the affected web page containing the Kendo Grid.
2. Hover over the column line in the grid.
Expected Behavior:
The cursor should change to a resize cursor, indicating that the user can adjust the column width.
Actual Behavior:
The cursor remains unchanged, leading to confusion for users trying to resize the columns.
Attempted Solutions:
We attempted to troubleshoot the issue ourselves by inspecting the elements using the browser's developer tools. As mentioned earlier, when we manually activate the cursor div using developer tools, the cursor starts working correctly. However, this solution is not practical for our users as it requires developer tools to be open consistently.
Screenshot attached for your reference.
We would greatly appreciate it if you could investigate this matter further and provide us with a viable solution. As this issue affects the usability of our application, we are eager to resolve it promptly.
Please let us know if there are any additional details or materials you require from our end to assist with troubleshooting.
Thank you for your attention to this matter, and we look forward to hearing from you soon.
Best regards,
Hi, How can I check if an event exists in Kendo Scheduler, including recurring registration?
Please help me, thansk!
Hi
I am trying to set break time like lunch,Tea time to restrict appointment for particular time. All works fine when I Set Major Tick to 60, but its not working properly when Setting Major ticks to 30.
This setting not apply between 3:30PM to 3:45PM when set MajorTick:30 (PFA the same)
My Code for this is as follows:-
function onDataBound(e) {
var scheduler = e.sender;
var slots = $('.k-scheduler-content td[role=gridcell]');
for (var i = 0; i < slots.length; i += 1) {
var currentSlot = $(slots[i]);
var slotData = scheduler.slotByElement(currentSlot);
var items = '';
$.each(BreakTimeList, function (i, item) {
//Trying to set it 3:00PM to 3:30PM and 3:30PM to 4:00 PM
//But this setting not apply between 3:30PM to 3:45PM when MajorTick set to 30
if ((slotData.startDate.getHours() >= 3 && slotData.startDate.getMinutes() >= 00)
&& (slotData.endDate.getHours() <= 3 && slotData.endDate.getMinutes() <= 30)) {
currentSlot.html('<i class="fa fa-stopwatch"></i>');
}
});
}
}
Regards
Pankaj
I am trying to get the bootstrap 5 client side validation (Red/Green borders) to work with the Datepicker.
Currently using Jquery validation rather than Kendo because I am only using the Kendo Datepicker control, the rest are standard inputs.
<partial name="_ValidationScriptsPartial" />
Whilst the validation fires correctly the .is-invalid pseudo class is added to the input only so the border doesn't render: