Telerik Forums
UI for ASP.NET Core Forum
1 answer
125 views

Can you tell me how to auto-size my first "icon-template" column's Width?  I have it set to a hard 125 but if I have a deeper hierarchy I'd like it to accommodate.  Also, I've found when I have no other columns that even the 125 width doesn't seem to stick.

I've posted my TreeList definition many times in this forum but here it is again:

@using GsiPortal.Configuration
@{ Layout = null; }
 
<script id="icon-template" type="text/x-kendo-template">
    <div class='group-icon'
         style='background-image: url(@Url.Content("#: ImageUrl #"));'></div>
    <div class='group-name'>#: Name #</div>
</script>
 
@(Html.Kendo().TreeList<GsiPortal.Models.Group>()
    .Name("treelist")
    .Columns(columns =>
    {
        columns.Add().Field(e => e.Name).TemplateId("icon-template").Width(125);
        columns.Add().Field(e => e.Description).Hidden(Model.GetBoolValue(Glossary.Keys.Group.IsHideMeta));
        columns.Add().Field(p => p.PersonCount).Hidden(Model.GetBoolValue(Glossary.Keys.Group.IsHideMeta));
 
        if (!Model.GetBoolValue(Glossary.Keys.Group.IsHideDetails))
        {
            columns.Add().Command(c => { c.Custom().Text("Details").Name("detailButton").ClassName("detailButton").Click("toDetails"); }).Width(Glossary.ButtonWidth);
        }
 
        if (!Model.GetBoolValue(Glossary.Keys.Group.IsHideCreate))
        {
            columns.Add().Command(c => { c.Custom().Text("Create").Name("createButton").ClassName("createButton").Click("toCreate"); }).Width(Glossary.ButtonWidth);
        }
 
        if (!Model.GetBoolValue(Glossary.Keys.Group.IsHideFilter))
        {
            columns.Add().Command(c => { c.Custom().Text("Filter").Name("filterButton").ClassName("filterButton").Click("toFilter"); }).Width(Glossary.ButtonWidth);
        }
    })
    .DataSource(dataSource => dataSource
    .ServerOperation(false)
    .Read(read => read.Action("IndexJson", "Groups").Data("getData"))
    .Model(m =>
    {
        m.Id(f => f.Id);
        m.ParentId(f => f.ParentId);
        m.Expanded(true);
        m.Field(f => f.Name);
    })
        .Events(events => events.Error("onError"))
    ).Events(evt => evt.DataBound("treeListBound"))
)
 
<script>
    function treeListBound(e) {
        var treeList = e.sender;
        var items = treeList.items();
 
        for (i = 0; i < items.length; i++) {
            var dataItem = treeList.dataItem(items[i]);
 
            if (dataItem.IsHideCreate) {
                $(items[i]).find(".createButton").hide();
            }
 
            if (dataItem.IsHideDetails) {
                $(items[i]).find(".detailButton").hide();
            }
 
            if (dataItem.IsHideFilter) {
                $(items[i]).find(".filterButton").hide();
            }
        }
    }
</script>
 
<style>
    .group-icon {
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-size: 40px 44px;
        background-position: center center;
        vertical-align: middle;
        line-height: 41px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
    }
 
    .group-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 41px;
        padding-left: 10px;
    }
</style>
Boyan Dimitrov
Telerik team
 answered on 17 Apr 2019
1 answer
158 views

Is there a way to add a placeholder for the filter input box?  I have Select Location as my main placeholder but when the user opens the tree I would like the placeholder in the search box to be "Search by city...".

 

Thanks,
Bill

Eyup
Telerik team
 answered on 17 Apr 2019
2 answers
195 views

I get the following error constantly when attempting to use the TreeLIst.  I'm using the Google Chrome browser and hitting the F12 button to expose the errors.  At the very least, please wrap the error so it doesn't go uncaught.  Best case would be to throw a useful error message a developer could work around.

Logging.ts:203 AI: CannotSerializeObjectNonSerializable message:"Attempting to serialize an object which does not implement ISerializable" props:"{name:baseData}"

o.warnToConsole @ Logging.ts:203
kendo.all.js:120332 Uncaught TypeError: (e.name || e).toLowerCase is not a function
    at init._button (kendo.all.js:120332)
    at init._buildCommands (kendo.all.js:120327)
    at init._td (kendo.all.js:120245)
    at d (jquery.min.js:2)
    at init._tds (kendo.all.js:120175)
    at init._trs (kendo.all.js:120093)
    at init._render (kendo.all.js:119638)
    at init.refresh (kendo.all.js:118289)
    at init.d (jquery.min.js:2)
    at init.trigger (kendo.all.js:124)
dc.services.visualstudio.com/v2/track:1 Failed to load resource: the server responded with a status of 400 (Invalid instrumentation key)

 

 

My TreeList:

@using GsiPortal.Configuration
@{ Layout = null; }
 
<script id="icon-template" type="text/x-kendo-template">
    <div class='group-icon'
         style='background-image: url(@Url.Content("#: ImageUrl #"));'></div>
    <div class='group-name'>#: Name #</div>
</script>
 
@(Html.Kendo().TreeList<GsiPortal.Models.Group>()
              .Name("treelist")
              .Columns(columns =>
              {
                  columns.Add().Field(e => e.Name).TemplateId("icon-template");
                  columns.Add().Field(e => e.Description);
                  columns.Add().Field(p => p.PersonCount);
                  columns.Add().Command(c => { c.Custom().Text("Details").Name("detailButton").ClassName("detailButton").Click("toDetails"); }).Width(Glossary.ButtonWidth);
                  columns.Add().Command(c => { c.Custom().Text("Create").Name("createButton").ClassName("createButton").Click("toCreate"); }).Width(Glossary.ButtonWidth);
 
                  if (!Model.GetBoolValue(Glossary.Keys.Group.IsHideFilter))
                  {
                      columns.Add().Command(c => { c.Custom().Text("Filter").ClassName("filterButton").Click("toFilter"); }).Width(Glossary.ButtonWidth);
                  }
              })
              .DataSource(dataSource => dataSource
                  .ServerOperation(false)
                  .Read(read => read.Action("IndexJson", "Groups").Data("getData"))
                  .Model(m =>
                  {
                      m.Id(f => f.Id);
                      m.ParentId(f => f.ParentId);
                      m.Expanded(true);
                      m.Field(f => f.Name);
                  })
                  .Events(events => events.Error("onError"))
             ).Events(evt => evt.DataBound("treeListBound"))
)
 
<script>
    function treeListBound(e) {
        var treeList = e.sender;
        var items = treeList.items();
 
        for (i = 0; i < items.length; i++) {
            var dataItem = treeList.dataItem(items[i]);
 
            if (dataItem.IsHideCreate) {
                $(items[i]).find(".createButton").hide();
            }
 
            if (dataItem.IsHideDetails) {
                $(items[i]).find(".detailButton").hide();
            }
 
            if (dataItem.IsHideFilter) {
                $(items[i]).find(".filterButton").hide();
            }
        }
    }
</script>
 
<style>
    .group-icon {
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-size: 40px 44px;
        background-position: center center;
        vertical-align: middle;
        line-height: 41px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
    }
 
    .group-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 41px;
        padding-left: 10px;
    }
</style>
Alex Hajigeorgieva
Telerik team
 answered on 17 Apr 2019
2 answers
121 views

trying to implement this demo in our .net core project targeting core 2.1. taking one step at a time - 

I have modeled my view models based on your examples and my controller after your datasource controller - i don't use services

At this point I am able to bind and return data from our database. The spreadsheet is fine at this point and all I am trying to do now is get the data into the 

Controller submit method.

i have set up my ajax call as you have in the 2018 R2 release examples - for saving changes

    function onSubmit(e) {

         $.ajax({
             type: "POST",
             url: '@Url.Action("Data_Source_Products_Submit", "Spreadsheet")',
             data: e.data,
             dataType: "json",
             success: function (result) {
                 e.success(result.Updated, "update");
                 e.success(result.Created, "create");
                 e.success(result.Destroyed, "destroy");
             },
             error: function (xhr, httpStatusMessage, customErrorMessage) {
                 alert(xhr.responseText);
             }
         });
     }

When I hit Save and debug , I can see that the data is there in the updated array (the other 2 are empty)

however when i got to the controller - the ModelState was inValid

if I add the contentType: "application/json", then  ModelState will be valid but the input model updated parameter is null

 

just the fact that i need to add the content type to the ajax call tells me there is something fundamentally different between your core project and mine

your project has so many pieces I cannot easily if i am missing something simple or something big

 

Do you have any idea why i am needing to add the content type to get the ModelState valid?

And why the Updated array is null in the controller when I can see the data in the array on the client side?

 

thanks

Jim

James
Top achievements
Rank 1
 answered on 16 Apr 2019
1 answer
1.0K+ views

Hi there,

I have a grid with an Excel Export option. here's how I decorate the Grid component.

                              .Excel(excel => excel
                                    .AllPages()
                                    .FileName(@excelFilename)
                                    .Filterable(true)
                                    .ProxyURL(Url.Action("ExcelExportSave", "Search"))
                                    .ForceProxy()
                                )

And then, in the controller I do this:

        [HttpPost]

        public ActionResult ExcelExportSave(string contentType, string base64, string fileName)
        {
            var fileContents = Convert.FromBase64String(base64);

            return File(fileContents, contentType, fileName);
        }

However, some of the queries return over a million rows. This causes the download to stall.Is there any way to export CSV or maybe just stream the contents down in chunks?

Tsvetina
Telerik team
 answered on 16 Apr 2019
6 answers
700 views

Hello,

I have been trying to figure out how to implement the "validation bubble" (see attached) like the one that is displayed in the following example: Custom validator editing

My validation messages appear either on the side of the input field, or they push everything down and display below the input field, or they show up on top of the input field where the input field is no longer visible.  I'd really like to know how to show a bubble with the small arrow above it just like in the attached picture.  I'm not sure if this is done via a theme, but the theme I'm working with doesn't seem to have this functionality.  An example would be very much appreciated.  Thanks.

Regards,

Shawn A.

Shawn
Top achievements
Rank 1
 answered on 15 Apr 2019
2 answers
131 views

Hi,

I'm trying to test out the Grid control and it will not display on my page. If I do view/source, I can see it actually.

Steps I took:

1. Installed NuGet package: Telerik.UI.forAspNet.Core.Trial

2. Updated Startup.cs with entries for json, AddKeno()

3. Updated Views/_ViewImports to include Kendo.Mvc.UI and the tag Helper

4. Added the div below to my page (I have a controller named LineItemsController with a JsonResult function named GetLineItems)
<div class="col-md-12">
        @(Html.Kendo().Grid<LineItem>()
                                .Name("BidGrid")
                                .Columns(columns =>
                                {
                                    columns.Bound(li => li.AvailableQty).Filterable(false);
                                    columns.Bound(li => li.Category);
                                    columns.Bound(li => li.Description);
                                    columns.Bound(li => li.InstalledUnitCost);
                                    columns.Bound(li => li.MaterialCost);
                                })
                                .Pageable()
                                .Sortable()
                                .Scrollable()
                                .Filterable()                               
                                .HtmlAttributes(new { style = "height:550px;" })
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .PageSize(20)
                                    .Read(read => read.Action("GetLineItems","LineItems"))
                                )
        )
    </div>

Viktor Tachev
Telerik team
 answered on 15 Apr 2019
1 answer
167 views

Is there anyway to use Kendo for asp.net core with Bootstrap 4 without polluting the default Bootstrap 4 styling? Is it possible to prefix all Kendo styles to not interfere with Bootstrap?

Lack of customization within the SAAS builder is making it very hard to implement Kendo UI.  At this point if we could just get Charts that would be a start.

Is there a list of styles overridden by Kendo?

Teya
Telerik team
 answered on 12 Apr 2019
4 answers
569 views

I've got a grid with column group headers that display the day of week and under each column group are the actual value columns. I want the column group to display the preset value of "Mon", "Tue", etc. but also after show the date. So the final column group header would read "Mon MM/dd/yyyy". I have the date I need to rename the column group header at run-time. How do I go about coding this?

I tried the below but it only renames the value column header and not the group.

$("#timecard th[data-field=MonST]").html("New");

 

This is my code for the group "Mon".

columns.Group(g => g.Title("Mon")
    .Columns(monday =>
    {
        monday.Bound(p => p.MonST).Filterable(false).Sortable(false).ClientTemplate("#if(MonST == 0 || MonST == null || isNaN(MonST)){MonST=null} else {##=parseFloat(MonST).toFixed(1)##}#").Width(40).Title("ST");
        monday.Bound(p => p.MonOT).Filterable(false).Sortable(false).ClientTemplate("#if(MonOT == 0 || MonOT == null || isNaN(MonOT)){MonOT=null} else {##=parseFloat(MonOT).toFixed(1)##}#").Width(40).Title("OT");
        monday.Bound(p => p.MonDT).Filterable(false).Sortable(false).ClientTemplate("#if(MonDT == 0 || MonDT == null || isNaN(MonDT)){MonDT=null} else {##=parseFloat(MonDT).toFixed(1)##}#").Width(40).Title("DT");
    })
);

 

 

 

Tsvetina
Telerik team
 answered on 12 Apr 2019
1 answer
350 views

Hi,

Sorry for a daft question. I am using VS2019, ASP.net Core 2.2, UI for ASP.net Core 2019.1.220. I am trying to bind a site map to the menu as I need security trimming, either using the Html helper or the tag helper. The issue is I am trying to follow  this page: https://docs.telerik.com/aspnet-core/html-helpers/navigation/menu/binding/sitemap-binding 

For the life of me I cannot find a reference SiteMapManager (Step 3) anywhere, have been Googling my fingers to the bone and still can't find anything! Also The example shows the call to populate in a controller, seems an odd place to put it or is the idea that the menu is only populated for example on the first call to the Home Index ?

 

Thanks

 

Chris

 

Veselin Tsvetanov
Telerik team
 answered on 12 Apr 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?