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, 

Hello, I would like to know if there is any way to extract the graphs from an excel sheet.  I have managed to export the content of the excel sheet but I have not been able to export the graph that is generated there

So far this is the code I handle

 byte[] bytes = System.IO.File.ReadAllBytes(@"path");
                Stream stream2 = new MemoryStream(bytes);

                Workbook workbook = Workbook.Load(stream2, ".xlsx");


                Telerik.Windows.Documents.Spreadsheet.Model.Workbook document = workbook.ToDocument();

                document.ActiveSheet = document.Worksheets.First(sheet => sheet.Name == "Rep.F3");
                foreach (Telerik.Windows.Documents.Spreadsheet.Model.Worksheet sheet in document.Worksheets)
                {

                    if (sheet.Name != "Rep.F3")
                    {
                        sheet.Visibility = Telerik.Windows.Documents.Spreadsheet.Model.SheetVisibility.Hidden;
                        //document.Worksheets.Remove(sheet);
                    }
                    else
                    {
                        var shapes = sheet.Shapes;
                        var img= sheet.Images;
                        sheet.WorksheetPageSetup.PaperType = Telerik.Windows.Documents.Model.PaperTypes.A4;
                        sheet.WorksheetPageSetup.PageOrientation = Telerik.Windows.Documents.Model.PageOrientation.Portrait;
                        sheet.WorksheetPageSetup.CenterHorizontally = true;
                        sheet.WorksheetPageSetup.PrintOptions.PrintGridlines = false;
                        sheet.WorksheetPageSetup.ScaleFactor = new Telerik.Documents.Primitives.Size(0.9, 1);
                        sheet.WorksheetPageSetup.Margins =
                            new Telerik.Windows.Documents.Spreadsheet.Model.Printing.PageMargins(0
                            , 20, 0, 0);
                    }

                }

I have tried to get the list of images and forms but it does not return any result

Hello,

I have followed this help article, how to bind CheckBoxGroup to model on razor page. This article does not show how to get selected values back on post. 

https://docs.telerik.com/aspnet-core/html-helpers/editors/checkboxgroup/razor-page

OnPost CheckBoxGroupModel models that is bind property, it's CheckBoxGroupValue property stays null when posted back. Only way to get values back is to read them from Request.Forms["checkboxgroup"].

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

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.

I am using the below line chart.

Is there a way to have the green series area filled in with green?

I would like the green series fully colored in as green. But leave the red series as a line.

Hello,

I have a Form with an Ajax POST method. One of the fields is a DateTime and when it is being posted, it uses some kind of long format with a mix of culture... It break the ASP Model and marks it as invalid as it's not recognised as a DateTime. 

This is the payload from submiting the form, as you can see, the timezone is in french, while the date is in en-US. The client Kendo culture is also set as  en-US.

DateRequete: Tue+Oct+11+2022+00:00:00+GMT-0400+(heure+d’été+de+l’Est)

This is the form submit function:

function onFormRequeteSubmit(ev) { //Fonction pour FormRequuete
    ev.preventDefault();
    var modelData = ev.model;
    $.ajax({
        type: 'POST',
        url: "/FormHandler/Requete",
        beforeSend: function (xhr) {
            xhr.setRequestHeader('X-XSRF-TOKEN', getCookie('XSRF-TOKEN'));
        },
        data: modelData,
        dataType: 'json',
        success: function (data) {
            //removed for clarity
        },
        error: function (data) {
            //removed for clarity
        }
    })

};

I"ve tried the following before the $.ajax call, and it does post the date in a valid ISO format, but it breaks the post and somehow posts the actual page instead of the ajax url...

modelData.DateRequete.value = modelDate.DateRequete.toJSON();

How can I convert the date to a valid format before posting it and/or why is my client culture not set properly? This is the content of my <head>:

<script src="https://cdn.kendostatic.com/2022.2.510/js/cultures/kendo.culture.en-US.min.js"></script>
<script>
    kendo.culture("en-US");
    var culture = kendo.culture();
    console.log(culture.name); // outputs "en-US"
</script>

When I click my (test) button to select a row (with Id = 2) in my grid, I get the error:

"Uncaught TypeError: Cannot read properties of undefined (reading 'get') at selectRowById".

Here is my function:

  function selectRowById(id) {
        var grid = $("#grid").data("kendoGrid")
        var dataItem = grid.dataSource.get(id);
        var dataItemUID = dataItem.get("uid"); 
        var tableRow = $("[data-uid='" + dataItemUID + "']");
        grid.select(tableRow);
    }

Here is my grid:

@(Html.Kendo().Grid<Document>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.DocumentId).Title("Doc Id").Filterable(false).Width(90);
        columns.Bound(p => p.StorageContainer).Title("Container").Width(100);
        columns.Bound(p => p.FileName).Width(350);
        columns.Bound(p => p.DocStatus).Width(125);
        columns.Bound(p => p.FileSize).Width(125).HtmlAttributes(new { @style = "text-align: right" });
        columns.Bound(p => p.ClientDocumentId).Title("Client Doc Id").Width(200);
        columns.Bound(p => p.CreateDate).Format("{0:MM/dd/yyyy}").Width(130);
        columns.Command(command => { command.Edit().Text(" "); command.Destroy().Text(" "); }).Width(150);
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Selectable(selectable => selectable
        .Mode(GridSelectionMode.Multiple)
        .Type(GridSelectionType.Row))
    .Pageable()
    .Resizable(resize => resize.Columns(true))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Reorderable(reorder => reorder.Columns(true))
    .Filterable()
    //.Groupable()
    .HtmlAttributes(new { style = "height:650px;" })
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Model(model =>
    {
        model.Id(p => p.DocumentId);
        model.Field(p => p.DocumentId).Editable(false);
        model.Field(p => p.CreateDate).Editable(false);
    })

    .Read(read => read.Action("Read", "Document").Data("getApplicationId"))
    .Create(update => update.Action("Create", "Document"))
    .Update(update => update.Action("Update", "Document"))
    .Destroy(update => update.Action("Delete", "Document"))
    )
)

Any help would be greatly appreciated. Thanks.

Mark

I have grid below. I did not like the way buttons are displayed. so would like to do 1 of these: 

1) move buttons to the bottom of the row to eliminate 2 column, mainly for mobile friendly

2) or at very least get rid of "Edit" & "Delete" label on these buttons to reduce space. When I removed button text,  buttons  no longer response to events. Why?

I have attached a screenshot. Could someone suggest a solution please!

 @(Html.Kendo().Grid(Model)
        .Name("grid")
        .ToolBar(toolbar => {
            toolbar.Search(); 
            toolbar.Custom().Text("Add").IconClass("bi bi-plus-circle").HtmlAttributes(new { id = "AddButton", @class="floatRight" });
            toolbar.Pdf().Text("PDF");
            toolbar.Excel().Text("Excel");})
        .Search(search=> search.Field(c=>c.Caption))
        .Selectable(select => select.Mode(GridSelectionMode.Single))
        .Events(ev => ev.Change("onChange"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(false)
         )
 
        .Pageable()
        .Sortable()
        .Columns(columns =>
        {
            columns.Bound(f => f.Id).Visible(false);  
            columns.Bound(f => f.Odometer).Title("Equipment List").ClientTemplate("<p><strong>#=Caption#</strong></p> <ul><li>Odometer: #=Odometer #</li><li>Engine Hour: #=EngineHour #</li><li>Created date: #= CreateDateString #</li><li>Last maintenance: #= LastMaintenance?.Description # on #= LastMaintenance?.CreateDateString #</li></ul>");
            columns.Command(command => { 
                command.Custom("Edit").IconClass("bi bi-pencil-square").Click("Update");
                command.Custom("Del").IconClass("bi bi-trash").Click("Archive");
            }).Title("Actions").Width(80);
        
        })
    )