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

Hello,

I would like to ask how I could set different margin top in pages in grid pdf export.

I have a header which I need to be display only in the first page.  But this leaves a lot of big blank in other pages,

this is what I have try so far in the page template script


#if(pageNum > 1)
           {#
                     
                document.getElementByClassName("k-pdf-export k-grid").style.marginTop = "3cm";
                    
           #}#
thank you in advance

 

Aleksandar
Telerik team
 answered on 02 Aug 2022
1 answer
302 views

Hi!

I'm on the Material Main theme. The Kendo controls are already cozy-sized, and the material theme adds too much whitespace everywhere.

I'm struggling with the columns and header text alignment. As per the image, I cannot get either these headers or the cells to align correctly, and there is too much padding margin on the left.


@(Html.Kendo().Grid(Model)
		.Name("gridLetters")
		.Columns(columns =>
		{
			columns.Bound(p => p.Id).Filterable(false).Sortable(false).Width(60)
			       .HeaderHtmlAttributes(new { @style = "k-text-center !k-justify-content-center" })
			       .HtmlAttributes(new { @style = "text-align: right" })
			       .ClientTemplate("<a href='" + Url.Action("View", "Letter", new { letterId = "#:Id#" }) + "'>#=Id#</i></a>");
			columns.Bound(p => p.Subject);
			columns.Bound(p => p.CompanyName).Title("Company");
			columns.Bound(p => p.BrandName).Title("Brand");
			columns.Bound(p => p.Location.Name).Title("Location");
			columns.Bound(p => p.LetterTypeId).Title("RL Type").Width(150)
			       .HtmlAttributes(new { style = "text-align:center" })
			       .HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
				   .ClientTemplate("<span class='#=LetterType.BadgeInfo#' title='#=LetterType.Name#'>#=LetterType.Nickname#</span>");
			columns.Bound(p => p.StatusId).Title("Status").Width(150)
			       .HtmlAttributes(new { style = "text-align:center" })
							.HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
				   .ClientTemplate("<span class='#=Status.BadgeInfo#' title='#=Status.Name#'>#=Status.Nickname#</span>");
			columns.Bound(p => p.Id).Title("Act").Width(90).Filterable(false)
			       .HtmlAttributes(new { style = "text-align:center" })
			       .HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" })
		           .ClientTemplate(
				        "#if(StatusId == 1){#" +
				        "	<a href='" + Url.Action("Create", "Letter", new { letterId = "#=Id#" }) + " ' title='Edit the RL'><i class='fa-duotone fa-pen-to-square'></i></a>" +
						"	&nbsp;&nbsp;<i class='fa-duotone fa-pipe'></i>&nbsp;&nbsp;" +
				        "	<a href='" + Url.Action("ActionQuick", "Letter", new { letterId = "#=Id#" }) + " ' title='Start the RL Approval flow'><i class='fa-duotone fa-play'></i></a>" +
				        "#} else {#" + "" + "# } #"
					);
		})
		.ToolBar(toolbar =>
		{
			toolbar.Excel();
			toolbar.Search();
		})
		.Excel(excel => excel
				.FileName($"DA CRL - My List Export - {DateTime.Now:yyyy-MM-dd}.xlsx")
				.Filterable(true)
				.ProxyURL(Url.Action("GridExcelExportSave", "Helper"))
		)
		.Sortable()
		.Navigatable()
		.Resizable(r => r.Columns(true))
		.Pageable(pageable => pageable
				.Refresh(true)
				.PageSizes(true)
				.ButtonCount(5))
		.Filterable()
		.Scrollable(s => s.Height("auto"))
		.ClientDetailTemplateId("detailTemplate")
		.Events(e => e.DataBound("onDataBound"))
		.DataSource(dataSource => dataSource
						.Ajax()
						.Sort(x => x.Add("Id").Descending())
						.PageSize(20)
						.ServerOperation(false)
		)
)


	<script>
		var gridLetters = $("#gridLetters");

        $(window).resize(function () {
            resizeGrid();
        });

        function onDataBound(e) {
            resizeGrid();
        }

        function resizeGrid() {
	        try {
		        if (gridLetters.options.scrollable !== true) {
			        gridLetters.setOptions({ scrollable: true });
		        }
	        } catch (e) {

	        }
	        $(".k-grid-content").css("height", $(window).height() - 310);
        }
    </script>


	<script>
		var gridLetters = $("#gridLetters");

        $(window).resize(function () {
            resizeGrid();
        });

        function onDataBound(e) {
            resizeGrid();
        }

        function resizeGrid() {
	        try {
		        if (gridLetters.options.scrollable !== true) {
			        gridLetters.setOptions({ scrollable: true });
		        }
	        } catch (e) {

	        }
	        $(".k-grid-content").css("height", $(window).height() - 310);
        }
    </script>




 

Aleksandar
Telerik team
 answered on 01 Aug 2022
2 answers
103 views

Hi there

I'm trying to add column menu to my grid but I need to do the following:

1) Add the three dots to the grid toolbar not to each column

2) I need once I click on the apply button to extend the functionality and run some js code, but I can't find any documentation for init, columnMenuOpen or any other event for ColumnMenu for .net core library.

 

Thanks

Asad
Top achievements
Rank 1
Iron
 answered on 28 Jul 2022
1 answer
219 views

Hello,

is it possible to play a sound / beep / whatever when showing a notification box?

I haven't found anything in the API for ASP.NET Core.

Thanks,

Christine

Alexander
Telerik team
 answered on 28 Jul 2022
1 answer
244 views

Hello!  I have been troubleshooting an issue with the way that the treeview places elements.  It appears to only be happening with items that contain children (and thus have an expand arrow). 

I am unsure what could be causing this, but the library seems to be putting a span with the k-icon and k-i-expand classes (which will show the expand arrow) and then nesting the rest of the treeview row inside of that span.  When I look at the demos of the same version on your site, the spans are not nested.  Also I noticed that the css class names are different, but that might be on purpose (or perhaps I am confused about something).

<!--  HTML OF TREEVIEW ROW WITH CHILDREN  -->
<li role="treeitem" class="k-item" data-uid="900b9f8a-e745-4d2f-9177-36f8f029d19a" aria-selected="false">
    <div class="k-mid">
        <span class="k-icon k-i-expand">
            <span class="k-checkbox-wrapper" role="presentation">...</span>
            <span class="k-in">...</span>
        </span>
    </div>
</li>

<!--  VERSUS HTML OF TREEVIEW ROW WITHOUT CHILDREN  -->
<li role="treeitem" class="k-item" data-uid="dfd4e997-b440-42dc-8780-061f00ed16d6" aria-selected="false">
    <div class="k-mid">
        <span class="k-checkbox-wrapper" role="presentation">...</span>
        <span class="k-in">...</span>
    </div>
</li>

Honestly, I am pretty stumped on this one.. as far as what could be causing this.  I looked through the css classes in inspector and nothing stood out to me...  I *AM* using a template though, but I don't see how it could be the issue.  Here is the treeview definition as well as the template I am using:


<!-- GRID DEFINITION  -->
<div class="d-flex flex-row">
            @(Html.Kendo().TreeView()
                          .Name("TreeView")
                          .DataTextField("Name")
                          .Checkboxes(true)
                          .DragAndDrop(true)
                          .Events(events => events
                              .Select("treeview_OnSelect")
                              .Check("treeview_OnCheck")
                              .Drag("treeview_OnDrag")
                              .Drop("treeview_OnDrop"))
                          .TemplateId("treeview-template")
                          .DataSource(dataSource =>
                              dataSource.Read(read =>
                                  read.Action(Model.ReadAction, Model.Controller)))
            )
</div>

<!--  TEMPLATE  -->
<script id="treeview-template" type="text/kendo-ui-template">
    # var id = item.id; #
    # if (id.includes("group")) { #
    <i class="far fa-fw fa-folder"></i>
    # } else if (id.includes("category")) { #
    <i class="far fa-fw fa-sitemap"></i>
    # } else { #
    <i class="@Model.IconClass fa-fw"></i>
    # } #
    &nbsp;
    #: item.Name #
</script>
Any help or direction on this would be greatly appreciated.
JohnD
Top achievements
Rank 1
Iron
 answered on 27 Jul 2022
1 answer
104 views
I'm running into a new issue with the UI for ASP.NET Core's Wizard in that if I add a code block, e.g., a @if statement or a @Localizer within a <wizard-step-content> tags, it will cause the stepper along the top not display. What are my options - I'll need the @if statements work in order to have certain information appear depending on what issue the user is submitting.
Stoyan
Telerik team
 answered on 27 Jul 2022
1 answer
140 views

I'm working in a migration to MVC .NET6 from .NET Framework, so in the Layout we use the following

@Html.Kendo().Splitter().Name("Splitter").Panes(p => {
p.Add().Content(RenderSection("Header", true).ToHtmlString());
p.Add().Content(RenderSection("Content", true).ToHtmlString());
});

As you can see we are using RenderSection() to take the HTML defined in other view. For each page we have the following code

But in .NET6 the same RenderSection() renders the content of the section. (has other behaviour)

There is other way to get the HTML from the sections?

 

Version: Telerik.UI.for.AspNet.Core.2020.2.513

MVC

Alexander
Telerik team
 answered on 26 Jul 2022
1 answer
239 views

Using Telerik UI for ASP.NET Core version 2021.2.511,

Some of the TagHelpers for the Wizard isn't working so I suspect I've set this project up incorrectly somehow. For what it's worth, the kendo-datepicker TagHelper works and renders correctly in the UI. However, the Wizard will not show up at all.

Here's what I've used, basically grabbed the code from the docs. The issue starts at the <wizard-step-form> tag, shows the following error: The wizard-step-form is not allowed by the parent <wizard-step> ... etc. 

The HTML Helper variation does work, however, but I'd prefer to use the TagHelper.


<div class="demo-section wide" style="width: 700px">
    <kendo-wizard name="wizard" on-done="onDone">
        <wizard-steps>
            <wizard-step title="Start">
                <wizard-step-buttons>
                    <wizard-step-button name="next" text="Next"></wizard-step-button>
                </wizard-step-buttons>
                <wizard-step-content>
                    <div class="wizardContainer">
                        <div style="text-align:center">
                            <h2>Welcome to the Registration Form</h2>
                            <h2>for the monthly Telerik seminar</h2>
                        </div>
                    </div>
                </wizard-step-content>
            </wizard-step>
            <wizard-step title="User details">
                <wizard-step-buttons>
                    <wizard-step-button name="previous" text="Previous"></wizard-step-button>
                    <wizard-step-button name="done" text="Register"></wizard-step-button>
                </wizard-step-buttons>
                <wizard-step-form name="registrationForm" orientation="vertical">
                    <validatable validate-on-blur="true" />
                    <form-items>
                        <form-item field="FirstName" html-attributes='new Dictionary<string, object> { { "required", "required" } }'>
                            <item-label text="First Name:" />
                        </form-item>
                        <form-item field="LastName" html-attributes='new Dictionary<string, object> { { "required", "required" } }'>
                            <item-label text="Last Name:"  />
                        </form-item>
                        <form-item field="Email" html-attributes='new Dictionary<string, object> { { "required", "required" } }'>
                            <item-label text="Email:" />
                        </form-item>
                    </form-items>
                </wizard-step-form>
            </wizard-step>
        </wizard-steps>
    </kendo-wizard>
</div>

 

Mihaela
Telerik team
 answered on 26 Jul 2022
1 answer
1.0K+ views

Hi All,

Is there any way to bind data from server using paging and do filtering on client side?

I have kendo  Grid and am binding  6000+ records using paging. For every page I am loading 20 records using post method but want do that filtering on client side without making any posts. Is there any way to stop serverfiltering. Do you have any suggestions?

Thanks!

 


 

 

 

Alexander
Telerik team
 answered on 26 Jul 2022
1 answer
118 views

Hi!

I have the following setup:

CsHtml:

	<div class="row mt-3">
		<div class="col-lg-4">
			@(Html.Kendo().DropDownListFor(m => m.CategoryHeadId)
			      .Size(ComponentSize.Medium)
				  .Rounded(Rounded.Medium)
				  .FillMode(FillMode.Solid)
				  .OptionLabel("Select head category...")
				  .HtmlAttributes(new { style = "width: 100%" })
				  .DataTextField("Name")
				  .DataValueField("Id")
				  .DataSource(source =>
				  {
					  source.Read(read =>
					  {
						  read.Action("GetLookupCategoriesHead", "Api");
					  });
				  })
				)
		</div>
		<div class="col-lg-4">
			@(Html.Kendo().DropDownListFor(m => m.CategoryMainId)
			      .Size(ComponentSize.Medium)
				.Rounded(Rounded.Medium)
				.FillMode(FillMode.Solid)
				.OptionLabel("Select main category...")
				.HtmlAttributes(new { style = "width: 100%" })
				.DataTextField("Name")
				.DataValueField("Id")
				.DataSource(source =>
				{
					source.Read(read =>
					{
						read.Action("GetLookupCategoriesMain", "Api")
						    .Data("filterMainCategories");
					})
					.ServerFiltering(true);
				})
				.Enable(false)
				.AutoBind(false)
				.CascadeFrom("CategoryHeadId")
				)
		</div>
		<div class="col-lg-4">
			@(Html.Kendo().DropDownListFor(m => m.CategorySubId)
				.Size(ComponentSize.Medium)
				.Rounded(Rounded.Medium)
				.FillMode(FillMode.Solid)
				.OptionLabel("Select sub-category...")
				.HtmlAttributes(new { style = "width: 100%" })
				.DataTextField("Name")
				.DataValueField("Id")
				.DataSource(source =>
				{
					source.Read(read =>
					{
						read.Action("GetLookupCategoriesSub", "Api")
						    .Data("filterSubCategories");
					})
					.ServerFiltering(true);
				})
				.Enable(false)
				.AutoBind(false)
				.CascadeFrom("CategoryMainId")
				)
		</div>
	</div>

Script:

@section Scripts {
	<script>
		function filterMainCategories() {
			return {
				headId: $("#CategoryHeadId").val()
			};
		}

		function filterSubCategories() {
			return {
				headId: $("#CategoryHeadId").val(),
				mainId: $("#CategoryMainId").val()
			};
		}
	</script>
}

Originally, this was a View on its own but later got refactored into an EditorTemplate. Since then, the second and third DropDowns are always disabled even if a parent makes a valid selection.

Console windows don't log any errors. I'm thinking it's an issue with the placement of the JS block. I tried placing it within a @Script section and directly. The thing that is really frustrating is that there are two views now using this EditorTemplate and one is working fine but the other has issues:

Create (Working):

	@using (Html.BeginForm("", "Letter", FormMethod.Post))
	{
		@Html.AntiForgeryToken()

		@Html.EditorFor(m => m, "Letter")

		<div class="row mt-3">
			<div class="col-md-1">
				<button type="submit" class="btn btn-primary w-100 me-5px" formaction="CreateSave" title="@(Model.IsUpdateCase ? "Update letter" : "Save letter")">@(Model.IsUpdateCase ? "Update" : "Save")</button>
			</div>
			<div class="col-md-1">
				<button type="submit" class="btn btn-default w-100" formaction="CreateSubmit" title="@(Model.IsUpdateCase ? "Update letter & submit" : "Save letter & submit")">Submit</button>
			</div>
		</div>
	}

ViewInfo (Not working):

	@using (Html.BeginForm("ViewInfo", "Letter", FormMethod.Post))
	{
		@Html.AntiForgeryToken()

		@Html.EditorFor(m => m.Letter, "Letter")

		<div class="row mt-3">
			<div class="col-md-1">
				<button type="submit" class="btn btn-primary w-100 me-5px" title="Submit">Submit</button>
			</div>
		</div>
	}

I have verified that the APIs are up and running and also the model for the template(s) is valid.

How do troubleshoot this behavior? And where should the script block files go per best practice? I think it should be in the template within the section.

DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 25 Jul 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?