Telerik Forums
Kendo UI for jQuery Forum
2 answers
524 views

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]
        public FileContentResult ExportServer(string Batchid,string Status)
        {
            var payrollrpt = svc.GetPayrollReport(Batchid, Status);
            StringBuilder sw = new StringBuilder();          

            sw.AppendLine("\"CompanyID\",\"BatchID\",\"Earning5Code\",\"Earning5Amount\"\"Earning5Code\",\"Earning5Amount\"\"Earning5Code\",\"Earning5Amount\"\"Earning5Code\",\"Earning5Amount\"\"Earning5Code\",\"Earning5Amount\"");
           
            sw.Append("\n");
            foreach (var line in payrollrpt)
            {
                sw.AppendLine(string.Format("\"{0}\",\"{1}\",\"{2}\",\"{3}\",\"{4}\",\"{5}\",\"{6}\",\"{7}\",\"{8}\",\"{9}\",\"{10}\",\"{11}\"",
                                           line.CompanyID,
                                           line.BatchID,
                                           line.Earning5CodeTERTaxable,
                                           line.TaxableExpense,
                                           line.Earning5CodeHotel,
                                           line.HOTELTAX,
                                           line.Earning5CodeAir,
                                           line.AIRTAXB,
                                           line.Earning5CodeOther,
                                           line.TRNSRTAX,
                                           line.Earning5CodeMeals,
                                           line.Meals ));
              
                sw.Append("\n");
            }          
           
            return File(new System.Text.UTF8Encoding().GetBytes(sw.ToString()), "text/csv", "PayrollReport.csv");          

        }

 

            
Mani
Top achievements
Rank 1
Iron
 answered on 21 Jul 2023
0 answers
157 views

<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

Mani
Top achievements
Rank 1
Iron
 updated question on 21 Jul 2023
0 answers
137 views
Hi,

I am using Treelist as a new component in my project. we have a requirement where we need to change icon of row reorder column. Could you suggest what would be the best way to do that. Please refer to the screenshot attached; circled icon needs to be replaced.
ankit
Top achievements
Rank 1
 asked on 21 Jul 2023
0 answers
143 views

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({
                    title: {
                        text: "J & L vs Voltage",
                        font: "bold 18px arial",
                        visible: false
                    },
                    legend: {
                        visible: false,
                        position: "custom",
                        offsetX: (500 * 0.66),
                        offsetY: (400 * 0.19),
                        item: {
                            visual: function (e) {
                                let optionfont = '7pt "Open Sans", sans-serif';
                                let color = e.options.markers.background;
                                let labelColor = e.options.markers.border.color;
                                let rect = new kendo.geometry.Rect([0, 0], [450, 50]);
                                let layout = new kendo.drawing.Layout(rect, {
                                    spacing: 5,
                                    alignItems: "left"
                                });
                                let name = e.series.dashType === "longDash" ? e.series.name + ' (R)' : e.series.name;
                                let label = new kendo.drawing.Text(name, [0, 0], {
                                    fill: {
                                        color: labelColor
                                    },
                                    font: optionfont

                                });
                                const lineWidth = 6;
                                const halfLineWidth = lineWidth / 2;
                                let grpList = [];
                                let grp = new kendo.drawing.Group();
                                const size = 6;
                                markerRect = new kendo.geometry.Rect([0, 0], [size + lineWidth, size]);
                                const geometry = new kendo.geometry.Circle([size / 2 + halfLineWidth, size / 2], size / 2);
                                marker = new kendo.drawing.Circle(geometry, {
                                    fill: {
                                        color: e.options.markers.border.color
                                    },
                                    stroke: {
                                        color: e.options.markers.border.color,
                                        width: 1
                                    }
                                });
                                grpList.push(marker);

                                let lineMarker = new kendo.drawing.Path({
                                    fill: {
                                        color: e.options.markers.border.color
                                    },
                                    stroke: {
                                        color: e.options.markers.border.color,
                                        width: e.series.dashType === "longDash" ? 2 : 1,
                                        dashType: e.series.dashType === "longDash" ? "longDash" : "solid"
                                    }
                                })
                                    .moveTo(0, markerRect.size.height / 2)
                                    .lineTo(markerRect.size.width, markerRect.size.height / 2);
                                //.moveTo(markerRect.origin.x, markerRect.origin.y + markerRect.size.height / 2)
                                //.lineTo(markerRect.origin.x + markerRect.size.width, markerRect.origin.y + markerRect.size.height / 2);

                                grp.append(lineMarker);
                                for (var item of grpList) {
                                    grp.append(item);
                                }

                                layout.append(grp, label);
                                layout.reflow();

                                return layout;

                            }
                        }
                    },
                    seriesColors: ["green", "red", "blue", "maroon", "pink", "olivegreen"],
                    seriesDefaults: {
                        type: "scatterLine"
                    },
                    dataSource: {
                        data: jvlDataForChartPreview,
                        group: "sampleId"
                      
                    },
                    seriesDefaults: {
                        type: "scatterLine"
                    },
                    series: [{
                        xField: xFieldName,
                        yField: yFieldName,
                        yAxis: yFieldName,
                        categoryField: "sampleId",
                        highlight: {
                            visual: seriesHoverCircleMarker
                        },
                        markers: {
                            border: {
                                width:1,
                                color: "green"
                            },
                            type: "circle",
                            visual: seriesCircleMarker
                        },
                        tooltip: {
                            format: "X:{0} Y:{1}"
                        }
                    }, {
                        xField: xFieldName,
                        yField: rightyFieldName,
                        yAxis: rightyFieldName,
                        width: 2,
                        dashType: "longDash",
                        categoryField: "sampleId",
                        highlight: {
                            visual: seriesHoverTriangleMarker
                        },
                        markers: {
                            border: {
                                width: 2,
                                color: "red"
                            },
                            type: "circle",
                            visual: seriesTriangleMarker
                        },
                        tooltip: {
                            format: "X:{0} Y:{1}"
                        }
                    }],
                    xAxis: {
                        name:"voltage",
                        min: xScaleMin,
                        max: xScaleMax,
                        axisCrossingValues: [0.001, 10000], 
                        type: "numeric",
                        labels: {
                            font: "12px Arial,Helvetica,sans-serif",
                            format: "{0}"
                            
                        },
                        title: {
                            text: "Voltage [V]",
                            font: "16px Arial,Helvetica,sans-serif"
                        }
                       
                    },
                    yAxes: [{
                        name: yFieldName,
                        min: yScaleMin,
                        type: "log",
                        max: yScaleMax,
                        labels: {
                            font: "12px Arial,Helvetica,sans-serif",
                            format: "{0}",
                            color: "green"
                        },
                        title: {
                            text: "Current Density [mA/cm²]",
                            font: "16px Arial,Helvetica,sans-serif"
                        }
                        
                    }, {
                        name: rightyFieldName,
                        min: rightyScaleMin,
                        type: "log",
                        max: rightyScaleMax,
                        
                        labels: {
                            font: "12px Arial,Helvetica,sans-serif",
                            format: "{0}",
                            color: "red"
                        },
                        title: {
                            text: "Luminance [cd/m²]",
                        }
                       

                    }],
                    tooltip: {
                        visible: true
                    },
                    chartArea: {
                        height: 400
                    },
                    renderAs: "canvas",
                    transitions: false
                });
Brijesh
Top achievements
Rank 1
 asked on 20 Jul 2023
1 answer
164 views

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.

Martin
Telerik team
 answered on 20 Jul 2023
0 answers
308 views

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,

Mohan
Top achievements
Rank 1
 asked on 19 Jul 2023
1 answer
157 views

Hi, How can I check if an event exists in Kendo Scheduler, including recurring registration?

Please help me, thansk!

 

Nikolay
Telerik team
 answered on 19 Jul 2023
0 answers
143 views

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

Pankaj
Top achievements
Rank 1
Iron
Iron
 updated question on 18 Jul 2023
1 answer
435 views

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:

 

 

 

Georgi Denchev
Telerik team
 updated answer on 18 Jul 2023
1 answer
88 views
How can I replicate a kendo template, for example a card. Filling it with information from a database or with a service consumed by ajax?
Nikolay
Telerik team
 answered on 18 Jul 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?