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

I would like to enable or disable the custom command based on the current line value.

My model, called ItemModel has a property called HasPicture, custom command called "GetPictureCommand" should be disabled when HasPicture returns false.

@(Html.Kendo().Grid<ItemModel>
            ()
            .Name("itemGrid")
            //.ToolBar(t => t.Search())
            .Filterable()
            .AutoBind(true)
            .Columns(columns =>
            {
                columns.Bound(f => f.No);
                columns.Bound(f => f.Description);
                columns.Bound(f => f.Brand);
                columns.Command(c => c.Custom("GetPictureCommand").Text(" ").IconClass("k-icon k-i-image").Click("getImage")).Width(52);
                columns.Bound(f => f.PurchasesQty).Format("{0:N2}").HtmlAttributes(new { style = "text-align: right;" });
                columns.Command(command => command.Custom("ItemLedgerEntryPurchaseCommand").Text(" ").IconClass("k-icon k-i-arrow-drill").Click("showPurchaseDetails")).Width(52);
                columns.Bound(f => f.NetChange).Format("{0:N2}").HtmlAttributes(new { style = "text-align: right;" });
                columns.Command(command => command.Custom("ItemLedgerEntryCommand").Text(" ").IconClass("k-icon k-i-arrow-drill").Click("showDetails")).Width(52);
                columns.Bound(f => f.LastEntryDate).Format("{0:dd/MM/yyyy}");
            })
            .Pageable() // Enable paging
            .Sortable() // Enable sorting
            .Scrollable(scrollable => scrollable.Virtual(true))
            .HtmlAttributes(new { style = "height:430px;" })
            .DataSource(dataSource => dataSource //Configure the Grid data source.
            .Ajax() //Specify that Ajax binding is used.
            .PageSize(10)
            .Read(read => read.Action("Item_ReadData", "Home").Data("additionalData"))
            )
            )

How can I do this?

Anton Mironov
Telerik team
 answered on 30 Apr 2020
4 answers
2.0K+ views

Hi to all,

I would create a colum custom to open a window that contains details (related table about relative row).

I red Loading External Form and I'm thinking to use this approach.

But I would pass a key of my row, so that I could retrieve details rows and show in a modal window.

@(Html.Kendo().Window()
            .Name("ItemLedgerEntries")
            .Title("Movimenti")
            .LoadContentFrom("GetItemLedgerEntries", "Home").Additional("#= ItemNo #") //is my hope......
            .Iframe(true)
            .Resizable()
            .Draggable()
            .Modal(true)
        )

 

How can I pass a key to window?

Petar
Telerik team
 answered on 30 Apr 2020
6 answers
895 views

I need to style the menu and I'm horrible at css.  I have made a .css file from the Template/Style builder.  That was a great experience and is an awesome tool.  But, I'm looking for help doing the following on one menu (don't want it to be the global style):

  • Horizontal Alignment-Right:  Align all the Menu.Items to the right.
  • Reduce the Margin around everything in order to size the menu smaller.
  • Reduce the Font Size
  • Change the Font Color (Black with bright background, White with dark background)
  • Change the background color of the entire menu control to a solid color then a gradient.  (I'll try both)
  • Instead of having a sharp edge on the bottom left of the menu, make it a radius.
  • Limit the width of the menu to 1/2 the width of the page.

Thanks in advance for your help,

Joel

My Menu:

@(Html.Kendo().Menu()
    .Name("menu")
    .Items(items =>
    {
        items.Add().Text(Glossary.Models.Group.Plural)
            .ImageUrl(Url.Content("~/images/32/group.png"))
            .Action("Index", "Groups", routeKeys);
        items.Add().Text(Glossary.Models.User.Plural)
            .ImageUrl(Url.Content("~/images/32/People.png"))
            .Action("Index", "Users", routeKeys);
        items.Add().Text(Glossary.Models.Patient.Plural)
            .ImageUrl(Url.Content("~/images/32/patient.png"))
            .Action("Index", "Patients", routeKeys);
        items.Add().Text(Glossary.Models.Session.Plural)
            .ImageUrl(Url.Content("~/images/32/session.png"))
            .Action("Index", "Sessions", routeKeys);
    }
    )
)
Dimitar
Telerik team
 answered on 30 Apr 2020
3 answers
1.1K+ views

Does the kendo non-stacked or stacked bar chart have the ability to have multple groups displayed like the attached example?

I am looking to replicate the coffee/tea per month part of the picture

Alex Hajigeorgieva
Telerik team
 answered on 28 Apr 2020
1 answer
371 views
I want to convert the file powerpoint to PDF using Telerik.Windows.Documents.Flow.FormatProviders.Pdf
Tanya
Telerik team
 answered on 28 Apr 2020
2 answers
524 views

 

This should be easy, but appears not.

I have a grid with a custom command:

columns.Command(c => c.Custom("Run Report").Click("OnRunReport")).Width(140);

selectable is set as

.Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))

 

My OnRunReport needs to get the selected row index and set it as the selected row. This needs to happen before I call:

// this next line only works if .Selectable() is set.
var idx = $("#grid").data("kendoGrid").select().index()

because otherwise idx is -1. If I click on the desired row before clicking on the Run Report button, idx is correctly set.

How to force the selection of the row in the click event of the custom command (In my case OnRunReport)???

The ultimate goal it to get the value of a particular cell for the selected row to be able to pass it to a report.

Any help would be great!

Thanks ... Ed

 

function OnRunReport(arg)
{
     // this next line only works if .Selectable() is set.
      var idx = $("#grid").data("kendoGrid").select().index();
      var certid = this.dataSource._data[idx].id;
      window.location.replace = "/CertificateReport/" + certid;
}

@(Html.Kendo().Grid<IndexModel.CertificateModel>()
        .Name("grid")
        .ToolBar(t =>
        {
            if (User.IsInRole("Admin"))
            {
                t.Create().Text("Add New"); t.Save().Text("Save Changes");
            }
        })
        .HtmlAttributes(new { style = "height: 650px;" })
        .Editable(e =>
        {
            if (User.IsInRole("Admin"))
            {
                e.Mode(GridEditMode.InCell);
            }
            else
            {
                e.Enabled(false);
            }
        })
        .Columns(columns =>
        {
            columns.Bound(c => c.CertId).Width(100).Visible(false);
            columns.ForeignKey(c => c.Crop.CropId, (System.Collections.IEnumerable)ViewData["crops"], "CropId", "CommonName")
                .Title("Crop").Width(150);
            columns.ForeignKey(c => c.Trait.TraitId, (System.Collections.IEnumerable)ViewData["traits"], "TraitId", "TraitDesc").Title("Trait").Width(150);
            columns.Bound(c => c.UserFullName).ClientTemplate("#=UserFullName#").Width(150);
            columns.ForeignKey(c => c.OriginCountry.CountryId, (System.Collections.IEnumerable)ViewData["originCountries"], "CountryId", "CountryName").Title("Origin Country").Width(150).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;" });
            columns.ForeignKey(c => c.IssuingCountry.CountryId, (System.Collections.IEnumerable)ViewData["issuingCountries"], "CountryId", "CountryName").Title("Issuing Country").Width(150).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;" });
            columns.Bound(c => c.YearIssued).Width(110)
                .HtmlAttributes(new { style = "text-align:right; " })
                .HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
            columns.Bound(c => c.ExpirationDate).Width(175).Format("{0:d}").HtmlAttributes(new { style = "text-align:right; " })
                .HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }); ;
            columns.Command(c =>
                {
            c.Destroy().Text("Delete");
        }).Visible(User.IsInRole("Admin")).Width(100);
            //columns.Command(c => c.Custom("Upload").Click("OnShowUpload")).Visible(User.IsInRole("Admin")).Width(100);
            columns.Command(c => c.Custom("Run Report").Click("OnRunReport")).Width(140);
        }).HtmlAttributes(new { style = "margin-left:3px" })
        .Events(ge => ge.Change("OnChange"))
        .Resizable(resize => resize.Columns(true))
        .Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
        .Scrollable()
        .Groupable()
        .Filterable()
        .Sortable()
        .Pageable() //p => { p.PageSizes(true); })
        .DataSource(ds =>
                            ds.Ajax()
                            .Batch(true)
                            .Events(ev => ev.Error("errorHandler"))
                            .ServerOperation(false)
                            .Read(r => r.Url("/Certificates?handler=CertsRead").Data("forgeryToken"))
                            .Update(u => u.Url("/Certificates?handler=CertsUpdate").Data("forgeryToken"))
                            .Create(c => c.Url("/Certificates?handler=CertsCreate").Data("forgeryToken"))
                            .Destroy(d => d.Url("/Certificates?handler=CertsDestroy").Data("forgeryToken"))
                            .Model(m =>
                            {
                                m.Id(c => c.CertId);
                                m.Field(f => f.CertId).Editable(false);
                                m.Field(f => f.Crop).DefaultValue(ViewData["defaultCrop"] as Crop);
                                m.Field(f => f.Trait).DefaultValue(ViewData["defaultTrait"] as Trait).Editable(User.IsInRole("Admin"));
                                m.Field(f => f.UserFullName).DefaultValue((string)ViewData["defaultUserFullName"]).Editable(false);
                                m.Field(f => f.IssuingCountry).DefaultValue(ViewData["defaultIssuingCountry"] as Country).Editable(User.IsInRole("Admin"));
                                m.Field(f => f.OriginCountry).DefaultValue(ViewData["defaultOriginCountry"] as Country).Editable(User.IsInRole("Admin"));
                                m.Field(f => f.YearIssued).DefaultValue((int)ViewData["defaultYearIssued"]).Editable(User.IsInRole("Admin"));
                                m.Field(f => f.ExpirationDate).DefaultValue((DateTime)ViewData["defaultExpiryDate"]).Editable(User.IsInRole("Admin"));
                            })
        .PageSize(10)
        )
    )
Marianne
Top achievements
Rank 1
Iron
Iron
 answered on 24 Apr 2020
1 answer
162 views

I know understand how to set a node in the TreeList as selected on databound.  However, if this tree data is long how do I get the control to scroll to the selected node?

My Tree:

<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<Group>()
    .Name("treelist")
    .Columns(columns =>
    {
        columns.Add().Field(e => e.Name).TemplateId("icon-template").Width(225);
    })
    .HtmlAttributes(new { style = "height:550px;" })
    .Selectable(s => s.Mode(TreeListSelectionMode.Single))
    .DataSource(dataSource => dataSource
        .ServerOperation(false)
        .Read(read => read.Action("IndexJson", "Groups").Data("treeGetData"))
        .Model(m =>
        {
            m.Id(f => f.Id);
            m.ParentId(f => f.ParentId);
            m.Expanded(true);
            m.Field(f => f.Name);
        })
        .Sort(s => s.Add(f => f.Name)))
    .Events(events =>
    {
        events.DataBound("onDataBound");
    })
)

 

JavaScript:

// show the matching groupId as selected in the treelist
function onDataBound(e) {
    // Handle the dataBound event.
    var treelist = e.sender;
    //alert(treelist == null);
 
    var initiallySelectedID = $("#groupId").val();
    alert(initiallySelectedID);
 
    var dataItem = treelist.dataSource.get(initiallySelectedID);
    //alert(dataItem == null);
 
    var row = $("tr[data-uid='" + dataItem.uid + "']");
    treelist.select(row);
}

 

Peter Milchev
Telerik team
 answered on 24 Apr 2020
1 answer
304 views

I'm trying to add the Kendo UI (v2020.1.406) to my ASP.net Core project through NPM and copy it with Webpack to the lib folder.

Now the problem I'm hitting is the following, If I add the CDN resources to my project, everything works like a charm,... but when I'm adding the same resources with the same version that I installed via NPM to the project, I'm confronted with a wall of error's in the console of my browser. Now I'm not completely sure what is happening, but you can see what happens in the project below

Github Repo KendoNPMResources.

A nudge in the right direction would be awesome !

Petar
Telerik team
 answered on 24 Apr 2020
4 answers
332 views

Hi,

I created a project and i need to put a treelist view to handle parents and child elements of a grid. I created a father and a child, but the page doesn't load any record in my grid. Am i missing something?

The attached files are the grid viewed in my page and the model received from the datasource

Here is the model

public class ProjectTaskViewModel
{
    public string IdTask { get; set; }
    public string FatherId { get; set; }
    public string TaskTitle { get; set; }
}

 

The View:

@(Html.Kendo().TreeList<Models.ProjectTaskViewModel>()
        .Name("treelist")
        .Columns(columns =>
        {
            columns.Add().Field(p => p.IdTask).Title(" ").Filterable(false).Sortable(false).Width("105px").Template("#=customformatter(Id)#");
            columns.Add().Field(p => p.TaskTitle).Title("Nsme");
        })
        .Pageable(p => p.Refresh(true).PageSize(20).PageSizes(new int[] { 20, 50, 100 }))
        .Sortable()
        .Filterable()
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("TreeViewDataSource", "ProjectTask").Data("CustomData")) //Function that contains correctly the IdProject param
            .ServerOperation(false)
            .Model(m => {
                m.Id<string>(p => p.IdTask);               
                m.ParentId<string>(p => p.FatherId);
                m.Field(p => p.TaskTitle);
                m.Field<string>(p => p.FatherId);
            })
        )
    )

 

And finally the TreeViewDataSource:

public JsonResult TreeViewDataSource([DataSourceRequest]DataSourceRequest request, string IdProject)
{
    var temp = _db.ProjectTasks.Where(o => o.IdProject == IdProject).Select(o => new ProjectTaskViewModel
    {
        FatherId = o.ParentId,
        IdTask = o.Id,
        TaskTitle = o.Title
    });
     var result = temp.ToTreeDataSourceResult(request, o => o.IdTask, o => o.FatherId, o => o);
     return Json(result);
}
Alex Hajigeorgieva
Telerik team
 answered on 23 Apr 2020
5 answers
834 views
Hello,
I just start to use Telerik UI for core in razor pages project
I have a grid holding some records. I would like to create a custom popup for new and edit records.
The functionality for the add and edit records exist in a view component.
The booking issues for me are
How to use the view component with a popup window.
After successful saving, how to close the popup window to set the focus to the grid.
Appreciate your help, preferable with sample code.
Ivan Danchev
Telerik team
 answered on 22 Apr 2020
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?