Hi team,

I often use the kendo custom download facility, works good usualy.

Now I have a problem with grid column grouping that seems broken due to the missing of chiplist component. (R2023.1.425).

But when you select all grid options in custom download, it does not select automatically the ChipList component. Please advise...

Another question please: what is the "DateInputCommon" entry. Should it be selected when taking any other date thing like "DatePicker" ?

Best regards,

Laurent.

<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

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,

¿Alguien ha trabajado con esto? Tengo configurado el web service y me esta retornando el json que debe leerme y mostrarme en el grid, pero no consigo realizar que se visualicen los datos 

<body>
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            const dataSource = new kendo.data.DataSource({


                dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://localhost:53072/Service.svc/ObtenerDatos"
                    },
                    pageSize: 20
                },
                schema: {
                    model: {
                        fields: {
                            Id: { type: "number" },
                            Nombre: { type: "string" },
                            Precio: { type: "number" }
                        }
                    }
                },
                pageSize: 10
            });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                height: 400,
                sortable: true,
                pageable: true,
                columns: [
                    { field: "Id", title: "ID" },
                    { field: "Nombre", title: "Nombre" },
                    { field: "Precio", title: "Precio" }
                ],

            });
        });
    </script>
</body>

I have kendo grid that consumes data from a service.I checked from the server side no doubles.

when i show all the records in the kendo grid no doubles.

The problem is when i paginate from page 1 to page 2 there is a record that i find in both pages.

I have this field in my kendo grid column :

field: "tauxAcquisEntree",
template: '#if (tauxAcquisEntree === 0){#'
                    + '<div class="text-right">#= tauxAcquisEntree #</div>'
                    + '# }else if (tauxAcquisEntree > 1 ){#'
                    + '<div class="d-flex justify-content-end"><div class="input-group d-flex flex-nowrap percent-input"> <input id="fraisent" name="fraisent" value="#= tauxAcquisEntree #" max="4"   class="form-control text-center"  min="1" type="number" step=1 pattern="[0-9]$" autocomplete="off"   /> </div></div>'
                    + '# }else{#'
                    + '<div id="fraisOne" name="fraisOne" class="d-flex justify-content-end"><div class="input-group d-flex flex-nowrap percent-input"> <input value="#= tauxAcquisEntree #" class="form-control text-center" max="1" min="1"  type ="number" pattern="[0-1]$" autocomplete="off" readonly  /> </div></div>'
                    + '# }#'
                ,

I have a condition when i get the field "tauxAcquisEntree" from the "database"  if it's equal to "1" the input type number becomes readonly.

The problem is when the user changes the value of the input type number in the front and it's equal to "1" the template condition gets triggered which is a behavior that i don't want to happen.

To summarize how can i get the if condition in the template to be applied only if the value if from backend or the database (and not what the user typed) ?

I don't know what is the cause of the error. Maybe someone might have a solution with my issue.

Here is my sample data

Here is my code

function mapDataSource2(model, records) {
        let dataSource = new kendo.data.DataSource({
            transport: {
                read: function (options) {
                    options.success(records); <------ IF I REMOVE THIS, THE ERROR WILL NOT SHOW
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models) };
                    }
                }
            },
            autoSync: true,
            schema: {
                model: model,
                total: function (data) {
                    return $(data).length;
                }
            },
            pageSize: 50
        });

        return dataSource;
    }

thanks in advance

Hi,

We're trying to use the inline edit functionality of the Grid using the code below. But receiving an error 400 when trying to post using the "create" function of the Kendo DataSource.

JS

const dataSourceMeetingTypes = new kendo.data.DataSource({
	transport: {
		read: endpoint + "/read",
		create: {
			url: endpoint + "/create",
			type: "POST",
			data: function (e) {
				return kendo.stringify(e);
			},
			contentType: "application/json; charset=utf-8"
		}
	},
	error: function (e) {
		//console.log(e);
	},
	schema: {
		model: {
			fields: {
				meetingType: { type: "string" },
				meetingValue: { type: "string" }
			}
		}
	},
	pageSize: 5
});

Controller

[ApiController]
[Route("create")]
public class CreateController : ControllerBase
{
	[HttpPost]
	public ActionResult Create([FromBody] MeetingTypes meetingTypes)
	{
	}
}

public class MeetingTypes
{
	public string MeetingType { get; set; }
	public string MeetingValue { get; set; }
}

But the below code works outside the Grid. The data from the javascript above - kendo.stringify(e) matches the data below. Using Postman with the below data also works with no issue.

$.ajax({
	type: "POST",
	url: endpoint + "/create",
	data: "{\"meetingType\":\"test123\",\"meetingValue\":\"test123\"}",
	contentType: "application/json; charset=utf-8"
}).done(function (response) {
});

Any help is much appreciated.

Thanks

I have a jQuery UI Grid with a .Net MVC Core backend. 
The record data has a nullable date in it and everything is displaying fine ( ive added abrdiged working code below)
I use the popup edit to edit the record which contains a nullable date Kendo sends the date as :

Sun May 28 2023 00:00:00 GMT+0100 (British Summer Time)

The Model Binder in  MVC does not recognise this as a date and reports a model binding error:
"The value 'Sun May 28 2023 00:00:00 GMT+0100 (British Summer Time)' is not valid for MortgageExpiry."

Theres alot of talk about dates, formats and parsing etc.. in documentation but I'm confused as to what Im actually meant to do.
I know C# dosnt see this as a date when trying to bind it to Model , I understand that but what am I meant to do to fix it.
Can I modify the outgoing format of the date before its sent to server or is there something else I should be doing?

function populateProductsTable() {
        var applicationId = $("#MortgageApplicationId").val();
        var gridDataSource = new kendo.data.DataSource({
            type: "json",
            transport: {
                read: {
                    url: "/api/ApplicationProductsApi/Read/" + applicationId,
                    dataType: "json"
                },
                create: {
                    url: "/api/ApplicationProductsApi/Create",
                    dataType: "json",
                    type: "POST"
                },
                update: {
                    url: "/api/ApplicationProductsApi/Update",
                    dataType: "json",
                    type: "POST"
                },
                destroy: {
                    url: "/api/ApplicationProductsApi/Delete",
                    dataType: "json",
                    type: "POST"
                },
            },
            schema: {
                data: "data",
                total: "total",
                errors: "errors",
                model: {
                    id: "id",
                    fields: {
                        id: { type: "number", editable: false },
                        productProvider: { type: "string", validation: { required: true } },
                        productTypeId: {type: "number", validation: { required: true } },
                        productName: { type: "string" },
                        mortgageExpiry: { type: "date" },
                    }
                }
            }
        });
        /* eslint-enable */

        $("#productGrid").kendoGrid({
            toolbar: ["create"],
            editable: "popup",
            dataSource: gridDataSource,
            filterable: true,
            sortable: true,
            pageable: false,
            columns: [{
                command: ["edit"], title: " ",
            }, {
                field: "id",
                filterable: false,
                hidden: true,
            }, {
                field: "productProvider",
                title: "Provider"
            }, {
                field: "productTypeId",
                title: "Type",
                editor: dropDownProductType, template: "#=productTypeIdName#"
            }, {
                field: "productName",
                title: "Name"
            },{
                field: "mortgageExpiry",
                title: "Expiry",
                format: "{0:dd/MMM/yyyy}"
            }, 
            ]
        });
    }

Sat May 27 2023 00:00:00 GMT+0100 (British Summer Time)
Sat May 27 2023 00:00:00 GMT+0100 (British Summer Time)