Questions on UI for ASP.NET MVC Forum

2 answers

447 views

Grid ForeignKey Column Dropdown Filter Style

Hello everybody,

im trying to achieve that the dropdown filter list in my grid takes the size from it's biggest option.

I found other explanations for different situations and none of those worked for me.

I have a MVC Grid with a ForeignKey Column, that is filtered with a dropdown of enum values.

x.ForeignKey(b => b.Status, Model.OrderGapStatus).Filterable(f => f.Cell(c => c.Template("statusFilter"))).Title(Localizer.Lang_Status).ClientTemplate("#: StatusName #");

And a js handler trying to set the width to "auto". But it doesn't work :/

<script type="text/javascript">
    function statusFilter(element) {
       // what do i need to do here?
    }
</script>

Help would be really appreciated 😃

Have a good day & happy coding

Nils

DropDownList

Filter

Grid

Styling

answered on 17 May 2021

1 answer

917 views

Need to apply responsive design to kendo grid MVC

Hi Team,

I have a Kendo MVC Grid. i need to apply responsive design to grid.

am trying to apply but not achieved. please resolve my issue.

here i want to show columns in all widths.

Please apply changes in my solution only. am deleted kendo scripts version 2020.3.1118 in attached rar file.

if you unable to rar my file then please provide me a sample example kendo grid mvc with more than 10 columns.

Grid

ResponsivePanel

answered on 14 May 2021

1 answer

623 views

Displaying a message in the chat as sent or received.

I am loading the chat with a history of the individuals dialog when the person logs into the system using the renderMessage method (see code below).

        function LoadChat(chat) {
            $.ajax({
                url: "/.../Chat/LoadChatBox?studyID=" + @Model.Recipient.StudyID,
                success: function (data) {
                    var chatHistory = JSON.parse(data);
                    if (chatHistory) {
                        $.each(chatHistory.messages, function (n, elem) {
                            chat.renderMessage(elem.message, elem.sender);
                        });
                    }
                }
            });
        }

This works fine but it displays all the messages on the left side of the grid as though they have been received. Instead I would like to show the messages as sent messages and received messages as they originally were. Is there a way to accomplish this?

Chat

answered on 14 May 2021

1 answer

376 views

ListView - call partial view with parameter

I have a ListView control, and I need to call a partial view to render part of the template contents. This can't be passed via the ListView data source, as its a more expensive query, and should only be called for the records shown on the current page.

I have tried the code below, but it only gets called once, passing in an empty parameter.

<script type="text/x-kendo-tmpl" id="template">
    <div>
    <p>#=Name#  <span>@Html.Action("ReportTags", "Search", new { reportKey = "#=ReportKey#" })</span></p>
    </div>
</script>

I need the functionality offered by the LoadContentFrom method in the tabstrip, but as part of the template.

I tried looking at the databound event, but this only gets called once per page, not per record.

Thanks

NB: I have to say the change to the forums makes it harder to browse for solutions by control, which is something I found useful.

ListView

answered on 14 May 2021

3 answers

88 views

Grid does'nt reload when i have 9 thousand line after ajax call

Hello,

my grid reload data after applying a custom filter so when i have 2000 lines to retrieved, the grid show it correctly but when i passed 9000 line in the result i have 500 error and the grid doesn't refresh. this my ajax call:

thanks for your helping.

Best regards.

 @(Html.Kendo().Grid<DigitConvForm.Web.Models.DossierViewModel>()
            .Name("Dossiers")
            .Columns(columns =>
            {
                columns.Bound(c => c.Id_Inscription     );
                columns.Bound("Nom").ClientTemplate("#=Civilite# #=Nom# #=Prenom#");
                columns.Bound(c => c.Libelle            );
                columns.Bound(c => c.DateDebut          ).Format("{0:dd/MM/yyyy}");
                columns.Bound(c => c.DateFin            ).Format("{0:dd/MM/yyyy}");
                columns.Bound(c => c.CDV  ).ClientTemplate("<span id = 'badge_#=CDV#' class='badgeTemplate'></span>").Width(80);
                columns.Bound(c => c.LibelleEntreprise  );
                columns.Bound(c => c.Code_Financement   );
                columns.Bound(c => c.CodeDepartement    );
                columns.Bound(c => c.ContactEcole       );
                columns.Bound(c => c.Gestionnaire);
                columns.Bound(c => c.GestDosAdmin       );
                columns.Bound(c => c.StatutDosAdmin     );
            })
            .ToolBar(toolbar =>
            {
                toolbar.Excel();
                toolbar.Pdf();
                toolbar.Search();
            }).Excel(excel => excel.AllPages(true))
            .Height(700)
            .Pageable(pageable => pageable
               .Input(true)
               .Numeric(false)
             )
            .Navigatable().Mobile()
            .Sortable()
            .Scrollable()
            .Resizable(r => r.Columns(true))
            .Reorderable(r => r.Columns(true))
            //.Filterable()
            .Events(e => e.DataBound("onDataBound"))
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(false)
                .PageSize(500)
                .AutoSync(false)
                .ServerOperation(true)
                .Events(events => events.Error("error_handler"))
                .Model(model =>
                {
                    model.Id(p => p.Id_Inscription);
                    model.Field(p => p.Civilite         ).Editable(false);
                    model.Field(p => p.Nom              ).Editable(false);
                    model.Field(p => p.Prenom           ).Editable(false);
                    model.Field(p => p.Libelle          ).Editable(false);
                    model.Field(p => p.DateDebut        ).Editable(false);
                    model.Field(p => p.DateFin          ).Editable(false);
                    model.Field(p => p.LibelleEntreprise).Editable(false);
                    model.Field(p => p.Code_Financement ).Editable(false);
                    model.Field(p => p.CodeDepartement  ).Editable(false);
                    model.Field(p => p.ContactEcole     ).Editable(false);
                    model.Field(p => p.GestDosAdmin     ).Editable(false);
                    model.Field(p => p.StatutDosAdmin   ).Editable(false);
                    model.Field(p => p.Gestionnaire     ).Editable(false);
                })
                .Read("GetAllFolders", "RechercheDossiers")

$.ajax({
            url: '@Url.Action("GetFiltredFolders", "RechercheDossiers")',
            type: "Post",
            data: { nom, prenom, dateDebut: dateD, dateFin: dateF, sAnticipee, pFormations, financements, gestionnaires },
            traditional: true,
            dataType: 'json',
            async: true,
            success: function (result) {
                searchResults = result;
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert('failed')
            },
            timeout: 30000,
            cache: false
            
        }).done(function () {
            var dataSource = new kendo.data.DataSource({ data: searchResults });
            var grid = $('#Dossiers').data("kendoGrid");
            dataSource.read().then(function () {
                $('#Dossiers').data('kendoGrid').refresh();
            });
            var pageSi = grid.dataSource._pageSize
            grid.setDataSource(dataSource);
            grid.dataSource.query({ page: 1, pageSize: pageSi });
            //grid.refresh();
        });

[HttpPost]
        public async Task<JsonResult> GetFiltredFolders(DateTime? dateDebut, DateTime? dateFin,
            bool sAnticipee, string nom, string prenom, string financements, string pFormations, string gestionnaires)
        {
            string departments = Session["department"].ToString();

            List<Dossier> dossiers = await _conventionDeFormationService.LoadFoldersByAccess(departments, dateDebut, dateFin,
             sAnticipee, nom, prenom, financements, pFormations, gestionnaires);

            return Json(dossiers, JsonRequestBehavior.AllowGet);

        }

Grid

answered on 12 May 2021

1 answer

129 views

The height of grid gets shorter when initially render

Hi Team,

I am using the kendo grid of the UI for ASP.NET MVC, and the height of the grid gets shorter on initial render of the grid. Once I click on anyone of the columns of the grid, it gets to its actual height assigned in the grid.

Please find the attached screenshot and let me know if I am doing anything wrong.

As you can see, in the first screen shot, the grid is shorter, and in the second screenshot, the grid has its actual height.

Please get back to me team as soon as you can. I really appreciate your help.

Grid

answered on 11 May 2021

1 answer

276 views

Export to PDF onPDFExport unknown paperSize.

How to define the paperSize in the onPDFExport function? Currently getting the error unknown paperSize. Variable width is the total width of all of the columns in the grid, and it is not undefined.

Current code:

    function onPDFExport(e) {
        var grid = $("#CustomerOrderYearlyAllGrid").data("kendoGrid");
        var width = 0;
        for (var i = 0; i < this.columns.length; i++) {
            this.autoFitColumn(i);
            width = width + this.columns[i].width;
        }

        debugger;
        var CustomerID = $("#CustomerID").data('kendoDropDownList');
        var selectedCustomerName = CustomerID.text();
        grid.options.pdf.fileName = selectedCustomerName + " Summary (Yearly).pdf";
        grid.options.pdf.paperSize = (width + "px","500px");


    }

PDFViewer

answered on 11 May 2021

1 answer

137 views

Telerik Export to PDF paperSize auto with template?

I'm using .paperSize("auto") for my Export to PDF, and I want using the .TemplateId("templateName") so that I could include a header when I export to PDF. Using paperSize("auto") will not apply the template. How do I use paperSize("auto") and also include a header? Any help with be appreciated

<script type="x/kendo-template" id="page-template">

        <div class="page-template">
            <div class="header">
                #=getDllValueForPrint()#
            </div>
            <div class="footer">
                @*<div style="float: right">Page #: pageNum # of #: totalPages #</div>*@
            </div>
        </div>
    </script>

                                                    .Pdf(pdf => pdf
                                                    .FileName("Customer Orders Summary (Yearly).pdf")
                                                    .AllPages()
                                                    .PaperSize("auto")
                                                    .Margin("2cm", "1cm", "1cm", "1cm")
                                                    .Landscape()
                                                    .TemplateId("page-template")

    function getDllValueForPrint() {
        var CustomerID = $("#CustomerID").data('kendoDropDownList');
        var selectedCustomerName = CustomerID.text();
        return selectedCustomerName;
    }

PDFViewer

answered on 11 May 2021

1 answer

513 views

SetOptions clearing the toolbar

This is a follow up question of this question:

https://www.telerik.com/forums/cannot-read-property-'removeclass'-error-after-calling-setoptions

I made that work, and I'm calling the setOptions method and it is setting the Height, PageSize and PageSizes properties.

But now, I'm having a different issue. I'm working on a grid that has a button on the toolbar. This is the code for the toolbar.

                            .ToolBar(t =>
                            {
                            t.Template(@<text>
                                    <div class="grid-toolbar-primary">
                                        @(Html.Kendo().Button()
                                                .Name("appSettingItemAddButton")
                                                .Content(HtmlLocaleHelper.GetLabelText(CoreConstants.Localization.Labels.Grid.CreateNew).ToString())
                                                .HtmlAttributes(new { @type = "button" })
                                                .Events(e => e.Click("onAppSettingGridOnAdd")))
                                    </div>
                                </text>);
                            })

This code is working fine, and the toolbar and the button are being displayed. But with my new code, that call the setOptions method, the toolbar and the button are not being displayed anymore.

I found this post on the forum Save/Load - Custom Toolbar Disappears in UI for ASP.NET MVC | Telerik Forums, and it looks like it is a known issue. According to what I found, the workaround is to get the options and save them somehow, and then use that value to set the options again.

In my case, I will need to also change the Height, PageSize and PageSizes, so I started by trying to just get the toolbar and set it, but is not working:

            //Get the settings to set the toolbar
            var options = kendo.stringify(grid.getOptions());
            console.log("options = " + options);
            if (options) {
                var parsedOptions = JSON.parse(options);
                console.log("parsedOptions: ");
                console.log(parsedOptions);
                console.log("#grid-toolbar-primary: ");
                console.log($("#grid-toolbar-primary").html());
                parsedOptions.toolbar = [
                    { template: $("#grid-toolbar-primary").html() }
                ];
                var optToolbar = parsedOptions.toolbar;
                console.log("optToolbar: ");
                console.log(optToolbar);
            }

            grid.setOptions({
                groupable: true
                , pageable: {
                    pageSizes: selPageSizes,
                    pageSize: selDefaultPageSize
                }
                , dataSource: { pageSize: selDefaultPageSize }
                , height: selGridHeight
                , toolbar: optToolbar
            });

Just to test it, I also tried to just get the options and then set them again (no changes at all), but I still can't see the toolbar after setting the options:

            //Get the settings to set the toolbar
            var options = kendo.stringify(grid.getOptions());
            console.log("options = " + options);
            if (options) {
                var parsedOptions = JSON.parse(options);
                console.log("parsedOptions: ");
                console.log(parsedOptions);
                console.log("#grid-toolbar-primary: ");
                console.log($("#grid-toolbar-primary").html());
                parsedOptions.toolbar = [
                    { template: $("#grid-toolbar-primary").html() }
                ];
                var optToolbar = parsedOptions.toolbar;
                console.log("optToolbar: ");
                console.log(optToolbar);

                grid.setOptions(parsedOptions);
            }

If I look at the console, the parsedOptions object has a toolbar object, but it looks empty:

toolbar: Array(1)

0:

template: undefined
__proto__:

constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

length: 1
__proto__: Array(0)

In summary, what I need to do is to modify a grid for the three properties (Height, PageSize, PageSizes) and make sure that the grid will still work as it was designed originally.

Is there a way to do this?

Thanks.

Grid

answered on 07 May 2021

1 answer

177 views

ClientGroupHeaderColumnTemplate prefers "data.FIELDNAME.sum" to "aggregates.FIELDNAME.sum" when using more than 7 aggregates. < 7 aggregates, either one works. Adding an 8th aggregate = no bueno

ClientGroupHeaderColumnTemplate prefers "data.FIELDNAME.sum" to "aggregates.FIELDNAME.sum" when using more than 7 aggregates. < 7 aggregates, either one works. Adding an 8th aggregate = "no bueno".

I kept getting an error on grouping if I added an 8th aggregate. With 7 or less aggregates, there didn't seem to be a problem.

I changed my ClientGroupHeaderColumnTemplate to use "data.FIELD.sum" instead of "aggregates.FIELD.sum" and the problem went away, but the problem seems to only exist after the 7th aggregate.

I'm not using all of the aggregates in the same ClientGroupHeaderColumnTemplate. Just adding a new line in the datasource to enable an aggregate on another column (> 7) triggered the fail.

If someone can advise what I might be doing wrong (other than using excessive aggregates), please advise.

Grid

answered on 07 May 2021