Questions on UI for ASP.NET Core Forum

1 answer

275 views

How can I autosize a textarea in .net core depending on the text inside?

I have a textarea that displays a specific column's text depending on which row is selected. How can I have this textarea autosize depending on its contents?

TextArea

answered on 08 Sep 2021

1 answer

232 views

Responsive Panel (Core)

I'm new to telerik and MVC. I come from a webforms background.

I wanted to start out with a website that has a sidebar on the left and a menu across the top. The Responsive Panel seems to fit the bill. I'm accustomed to creating a master page in webforms. How do I create something similar to a master page in a core/MVC website where when I make a selection from the item list in the left side bar, it updates the content on the right (iframe?)

ResponsivePanel

answered on 07 Sep 2021

1 answer

210 views

Skeleton container on hierarchical grid

Hello guys,

I've noticed that when using the Skeleton container on hierarchical grid the last column in the grid doesn't show the loading animation. Is there a way around this problem?

Thanks.

Grid

SkeletonContainer

answered on 06 Sep 2021

1 answer

999 views

How do you make a cell/dataitem fully dirty?

Hello everyone

I have the following bound column set up:

  columns.Bound(site => site.SiteHasBin).ClientTemplate("#=dirtyField(data,'SiteHasBin')# #:SiteHasBin#").ClientHeaderTemplate("<a class='k-link'>Bin Present? - Select all</><input style='margin-left:10px;' id='checkAll' type='checkbox' onclick='checkAll(this)' />").Sortable(false);

With the associated js:

function dirtyField(data, fieldName) {
    if (data.dirty && data.dirtyFields[fieldName]) {
        return "<span class='k-dirty'></span>"
    }
    else {
        return "";
    }
}


function checkAll(input) {
    var grid = $("#gridBins").data("kendoGrid");
    var items = grid.items();
    items.each(function () {
        var dataItem = grid.dataItem(this);
          if (dataItem.SiteHasBin != input.checked) {
              dataItem.SiteHasBin = input.checked;
        }
        dataItem.dirty = true;
    })
    grid.saveChanges();
    grid.dataSource.sync();
}

However, I cannot for the life of me get the cell into it's dirty state properly which would then allow me to use the Save functionality.

As you can see from the above. It updates the values accordingly but unlike single clicking, doesn't dirty the cell / data item.

Could someone point me in the right direction please?

Rich

Grid

updated answer on 02 Sep 2021

0 answers

151 views

What does the Toolbar > Cancel Changes do under the hood?

I have the below example:

As you can see, I check and pre Save Changes, everything works ok. I check, hit Cancel Changes and we get back to its original state.

After I save/commit to the db and then hit cancel changes, the grid updates some check boxes (incorrectly) and also updates the items.

What's going on here?!

Here's my grid code

@(Html.Kendo().Grid<BinWithType>
    ()
    .Name("gridBins")
    .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => {
    model.Id(p => p.Bin_ID);
    model.Field(p => p.SiteHasBin).Editable(true);
    model.Field(p => p.Bin_Type_Name).Editable(false);
    model.Field(p => p.Bin_Type_Group).Editable(false);
    })
    .Batch(true)
    .ServerOperation(false)
    .Read("Bins_Read", "MySites", new { site_Id = Model.Site_Id })
    .Update("Bins_Update", "MySites", new { site_Id = Model.Site_Id })
    )
    .Columns(columns =>
    {
    columns.Bound(site => site.SiteHasBin).Filterable(false);
    columns.Bound(site => site.Bin_Type_Name).Filterable(false);
    columns.Bound(site => site.Bin_Type_Group).Filterable(filterable => filterable.UI("groupFilter"));
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Filterable(filterable => filterable
    .Extra(false)
    .Operators(operators => operators
    .ForString(str => str.Clear()))
    )
    .Sortable()
    .ToolBar(toolbar =>
    {
    toolbar.Save();
    })
    )

Further strange behaviour:

When I do a 'standard' batch update this works as expected see first half of gif above. However, when I do one by one, I appear to just replicate the first.

Here is my my Read & Update code:

   public ActionResult Bins_Read(int site_Id, [DataSourceRequest]DataSourceRequest request)
        {
            return Json(Read(site_Id).ToDataSourceResult(request));
        }


        public IEnumerable<BinWithType> Read(int siteId)
        {
            return GetAllAsync(siteId).Result.ToList();
        }

        public async Task<IList<BinWithType>> GetAllAsync(int siteId)
        {
            if (Session.GetObjectFromJson<IList<BinWithType>>("BinWithType") != null)
            {
                Session.Remove("BinWithType");
                _session.Clear();
            }

            var result = Session.GetObjectFromJson<IList<BinWithType>>("BinWithType");

            var client = new BinsClient(new HttpClient());
            var bins = await client.GetBinsWithTypeBySiteIdAsync(siteId);

            result = bins.ToList();
            Session.SetObjectAsJson("BinWithType", result);
            return result;
        }

        public ActionResult Bins_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<BinWithType> bins)
        {
            var client = new BinsClient(new HttpClient());
            foreach (var bin in bins)
            {
                if (bin.Bin_ID > 300)
                {
                    DeleteBin(bin, client);
                }


                if (bin.Bin_ID < 300)
                {
                    PostNewBin(bin, client);
                }
            }
            return Json(Read(bins.FirstOrDefault().Site_ID).ToDataSourceResult(request));
        }

        private static Task<Bin> DeleteBin(BinWithType bin, BinsClient client)
        {
            return client.DeleteBinByIdAsync(bin.Bin_ID);
        }

        [HttpPost]
        private static Task<Bin> PostNewBin(BinWithType bin, BinsClient client)
        {
            var thisBin = new Bin
            {
                Site_ID = bin.Site_ID,
                Bin_Type_ID = bin.Bin_Type_ID,
                Comments = $"Added { DateTime.Now.ToShortDateString() }"
            };
            return client.PostBinAsync(thisBin);
        }

Grid

Toolbar

updated question on 02 Sep 2021

1 answer

1.0K+ views

Form-Label always property name instead display name

Hey everybody,

I'm experimenting with the Kendo Forms and I recognized that building/rendering the form with razor all labels showing the property name itself instead the display name I set in the model.

@(Html.Kendo().Form<Provider>()
            .Name("form")
            .Validatable(v =>
            {
                v.ValidateOnBlur(true);
                v.ValidationSummary(vs => vs.Enable(false));
            })
            .Items(items =>
            {
                items.Add().Field(x => x.Description).Editor(x => x.Editor());
                items.Add().Field(x => x.Url);
            })
        )

My model has set a display name for the properties.

    public class Provider
    {
        [Display(Name = "Kurzbeschreibung")]
        public string Description { get; set; }

        [Display(Name = "Link zur Website")]
        public string Url { get; set; }
    }

The view is showing the property name "Description" als label text instead the display name "Kurzbeschreibung". Is this behavior expected? If not I have to set for all fields I'm gonna use a title text for the frondend. It would be easier und beautiful when the form could automatically use the display name.

Form

answered on 02 Sep 2021

1 answer

649 views

Unexpected Token "<" in grid template

I am using a nested grid. The nested grid is inside of script tags and looks like this. For some reason when rendering it throws "Unexpected Token '<'. Im unsure why. It renders fine if I pull it out and remove .ToClientTemplate()

<script id="template">
           @(Html.Kendo().Grid<Student>()
               .Name("Student#=Student_ID#")
                 .Width(1500)
                 .HtmlAttributes(new { style="margin-right:20px;height: fit-content;font-size:small" })
                 .Columns(columns =>
                 {
                   columns.Bound(o => o.StudentName).Width(300)
                   columns.Bound(o => o.TimeStamp).Width(300).Title("Date").Format("{0:G}");
                     columns.Bound(o => o.Details).Width(900);

                 })
                 .DataSource(dataSource => dataSource
                    .Ajax()
                    .ServerOperation(false)
                    .PageSize(10)
                    .Read(read => read.Action("GetDetails", "Grid", new{ studentName= "#=StudentName#" }))
                    )
                .Pageable(x => x.Refresh(true))
                .Sortable()
                .ToClientTemplate()
           )

</script>

Grid

answered on 30 Aug 2021

1 answer

128 views

How to create custom Combobox in PanelBar Header

Is there a way to create an Combobox in the PanelBar header? We want to reload content of the PanelBar after changing the Combobox value.

I haven't found a function or Property like HeaderTemplate() or something similar.

PanelBar

answered on 30 Aug 2021

1 answer

1.1K+ views

Does anyone have an example of using File Manager with a download function when using Razor pages?

I have a web application that I am adding additional functions to. The File Manager has just about everything I need (except to hide create folders). But users have to have the ability to download files. (I kind of don't get how you can have a file manager without the ability to download files.)

Users will upload some CSV files, start a process & at end of process download log files created by the process.

I see an example of how to extend File Manger but it just doesn't seem to fit the razor page model. Can anyone point me towards some good examples of how to add that in?

FileManager

General Discussions