Telerik Forums
UI for ASP.NET MVC Forum
2 answers
335 views

Hello, I have a Kendo Listview with a template defined as follows: 

 

<script type="text/x-kendo-tmpl" id="template">
    <div class="product">
 
        <div class="product-title">
            <h3>#:Name#</h3>
        </div>
        <div class="product-img" id="area">
            <img src="@Url.Content("~/content/images/#:Image#")"  alt="#:Name# Image" />
                <div id='tile_#:data.Id#' class="white" onclick="favClick('#:Id#')">
                </div>
         </div>
     </div>
</script>

 

The object in the Listview is the following: 

public class TileDto
{
    public string AppId { get; set; }
    public int Id { get; set; }
    public string Name { get; set; }
    public string Url { get; set; }
    public string Image { get; set; }
    public bool IsFavorite { get; set; }
    public string CssClass { get; set; }
}

 

I would like for the "IsFavorite" property of the item to determine the value of the class property for the div (white if false, yellow if true): 

<div id='tile_#:data.Id#' class="white" onclick="favClick('#:Id#')">
</div>

 

Can this be done within the template? Or, is there an event off of the Listview or its datasource where this can be done? 

Thanks for any assistance here. 

--- x

Viktor Tachev
Telerik team
 answered on 10 Oct 2019
2 answers
356 views

I am trying to define a listview containing an element that has an event linked to it (a div or an <a/> tag).  However, whenever I click on the item, the event is not invoked.  

Here is my listview definition 

<div class="demo-section k-content wide">
    @(Html.Kendo().ListView<InsightPortalWeb.Models.RootObject>(Model)
            .Name("listView")
            .TagName("div")
            .ClientTemplateId("template")
            .DataSource(dataSource =>
            {
                dataSource.Read(read => read.Action("Application_Read", "Home"));
                dataSource.PageSize(15);
            })
            .Pageable()
            .Selectable(selectable => selectable.Mode(ListViewSelectionMode.Multiple))
            .Events(events => events.Change("onChange").DataBound("onDataBound"))
    )
</div>

Here is my template: 

<script type="text/x-kendo-tmpl" id="template">
    <div class="product">
 
        <div class="product-title">
            <h3>#:name#</h3>
        </div>
        <div class="product-img" id="area">
            <img src="@Url.Content("~/content/images/")Picture1.png" alt="#:name# image" />
            @*<div class="red" href="#"></div>*@
            <div id="star" class="red"></div>
        </div>
 
    </div>
</script>


I've tried numerous ways to get an event to fire such as the following: 

var reds = document.getElementsByClassName("red");
 
var redfunction = function() {
    alert("in star");
    return true; // Not needed, as long as you don't return false
};
 
for (var i = 0; i, reds.length; i++) {
    reds[i].addEventListener('click', redfunction, false);
};

 

However, none seem to do the trick.  What am I missing. How might I accomplish this? 

Thanks for any help. 


Xavier
Top achievements
Rank 1
 answered on 08 Oct 2019
3 answers
109 views

I just updated the Kendo Spreadsheet components to the latest release and am now having a weird problem when data is posted back to the server, the row order changes.

I have a simple controller method that loads a file and returns data back to the client as a spreadsheet (it's doing some server-side validations but that's irrelevant to the problem).

Then client side I send the data back to the server.  In the past this has worked great.  Now, however, Rows 0 and 1 swap positions.

The only difference between the data coming back with the new component vs. the old is a height attribute.  Aside from that everything else is the same.

Controller Method

public ActionResult LoadFile(HttpPostedFileBase file)
{
    var workbook = Workbook.Load(file.InputStream, Path.GetExtension(file.FileName));
    //workbook = KendoExcelLoader.ProcessWorkbook<MyObject>(workbook, ApplyRules);
    return Content(workbook.ToJson(), MimeTypes.JSON);
}

Client Side (this is where rows 0 and 1 swap positions):

function saveData() {
    kendo.ui.progress($("body"), true);
    var sheetData = $("#spreadsheet").data("kendoSpreadsheet").sheets()[0];
 
    $.ajax({
        type: "POST",
        url: "/import/SaveData",
        data: {records: JSON.stringify(sheetData.toJSON())},
        success: function (data) {
            kendo.ui.progress($("body"), false);
 
        }
    });
}
Martin
Telerik team
 answered on 08 Oct 2019
6 answers
1.2K+ views

Hi,

I have a requirement to bind data to TreeList where Id and ParentId field are of type string but this does not seem to work. Is it possible? 

I have tried making id and parentId field int and then its works.

TreeList:

<div class="demo-section k-header">
    @(Html.Kendo().TreeList<JobErrorLogController.MyClass>()
          .Name("myClassTreelist")
          .Columns(columns =>
          {
              columns.Add().Field(e => e.Item).Width(220);
          })
          .Filterable()
          .Sortable()
          .DataSource(dataSource => dataSource
              .Read(read => read.Action("AllData", "JobErrorLog"))
              .ServerOperation(false)
              .Model(m =>
              {
                  m.Id(f => f.id);
                  m.ParentId(f => f.parentId);
                  //m.Expanded(true);
                  m.Field(f => f.Item);
              })
          )
          .Height(540)
          )
</div>

 Class that is bind to TreeList:

public class MyClass
 {
 public static IList<MyClass> TestData = new List<MyClass>()
 {
 new MyClass() {id = "parent1", Item = "Item0", parentId = null},
 new MyClass() {id = "child1", Item = "Item1", parentId = "parent1"}
 };
 public string id { get; set; }
 public string parentId { get; set; }
 public string Item { get; set; }
 }

Controller's code:  

public JsonResult AllData([DataSourceRequest] DataSourceRequest request)
 
        {
 
            var result = MyClass.TestData.ToTreeDataSourceResult(request,
 
                e => e.id,
 
                e => e.parentId
 
            ); 
            return Json(result, JsonRequestBehavior.AllowGet);

        }

terrysmith
Top achievements
Rank 1
 answered on 04 Oct 2019
1 answer
264 views

Hi,

Are there any upgrade guides that cover upgrading from a 2016 version to a 2019 version? Does the Upgrade API Analyzer cover more recent versions?

Misho
Telerik team
 answered on 04 Oct 2019
7 answers
624 views
Hi,

I would like to set the editable mode to true for a particular Cell in Kendo UI MVC Grid.

I am able to set the editable of the Column. But I wan to set edit mode for a particular cell.

Can any body please help me in getting resolved this issue.

--Satish
Tsvetomir
Telerik team
 answered on 04 Oct 2019
1 answer
439 views

Hi, I've got a problem with clientTemplate on my grid. I'm not fetching data from server. When I try to switch to Template, it throws an exception. This is my code :

 @(Html.Kendo().Grid<PRR405.ViewModels.BatchViewModel>(Model.LotsOuverts)
                .Name("LotsOuvert")
                .Columns(columns =>
                {
                    columns.Bound(p => p.Post_date).Title(PRR405.Resources.OpenLot.OpenLot.DateDOuverture).Format("{0: yyyy/MM/dd}").Width(150).Filterable(f => f.UI("DatePickerFormated"));
                    columns.Bound(p => p.Btch_num).Title(PRR405.Resources.OpenLot.OpenLot.NumLotPRR).ClientTemplate(@"<a href='/ResumeLot/ResumeLot?btchNum=#: Btch_num #'>#: Btch_num #</a>").Width(170);
                    columns.Bound(p => p.Comp_num).Title(PRR405.Resources.OpenLot.OpenLot.Assureur).Width(110);
                    columns.Bound(p => p.Br_cd).Title(PRR405.Resources.OpenLot.OpenLot.SuccursaleLabel).Width(120);
                    columns.Bound(p => p.Batch_cd).Title(PRR405.Resources.OpenLot.OpenLot.CodeDeLot).Width(120);
                    columns.Bound(p => p.Entry_Date_Formated).Title(PRR405.Resources.OpenLot.OpenLot.DateInscription).Width(160);
                    columns.Bound(p => p.Batch_type_Name).Title(PRR405.Resources.OpenLot.OpenLot.TypeDeLot).Width(140);
                    //columns.Bound("").Title(PRR405.Resources.OpenLot.OpenLot.ImprimerResume).ClientTemplate(string.Format(@"<a href='/OpenLot/PrintLot?btchNum=#: Btch_num #'>{0}</a>", PRR405.Resources.OpenLot.OpenLot.Imprimer)).Filterable(false);
                })
                .Scrollable(s => s.Height("100%"))
                .HtmlAttributes(new { style = "max-height: 333px; margin-bottom:20px;" })
                .Sortable()
                .Scrollable()
                .Filterable(f => f.Extra(false).Operators(o => o.ForString(str => str.Clear().IsEqualTo(PRR405.Resources.Shared.Shared.GridFiltre_EstEgaleA).IsNotEqualTo(PRR405.Resources.Shared.Shared.GridFiltre_NestPasEgaleA))))
                .Resizable(resize => resize.Columns(true))

 

Thank you for your help

Georgi
Telerik team
 answered on 03 Oct 2019
2 answers
386 views

I am trying to set up my index page such that it has a splitter with two horizontal panes, left and right.  Each pane gets its contents from a partial view.  The left pane should contain a text box, button and a TreeView.  The right pane is a map.  If I try to load the partial view in the left pane, the page does not display correctly.  If I only have a simple string in the left pane content, the page (and map) work.  Please advise.

Index.cshtml:

@(Html.Kendo().Splitter()
      .Name("splitter")
      .Orientation(SplitterOrientation.Horizontal)
      .Panes(hPanes =>
      {
          hPanes.Add()
              .HtmlAttributes(new { id = "left-pane" })
              .Size("25%")
              .Scrollable(false)
              .Collapsible(true)
          .Content(Html.Partial("_TreeView").ToHtmlString());
          //.Content("<h1>TEST</h1>");
          hPanes.Add()
        .HtmlAttributes(new { id = "right-pane" })
        .Size("75%")
        .Scrollable(false)
        .Collapsible(false)
        .Content(Html.Partial("_MapView").ToHtmlString());
      })
)
<style>
    #splitter {
        height: 100vh;
        /*width: 100vw;*/
        padding: 0;
        margin: 0;
    }
    #left-pane {
        color: #000;
        background-color: #ccc;
    }
    #right-pane {
        color: #000;
        background-color: #aaa;
    }
</style>
<script>
</script>

 

_TreeView.cshtml:

@{
    Html.Kendo().TextBox()
       .Name("searchTextBox");
 
    Html.Kendo().Button()
    .Name("SearchTrigger")
    .Content("Search");
}

 

_MapView.cshtml:

@(Html.Kendo().Map()
    .Name("map")
    .Center((double)ViewBag.BicLat, (double)ViewBag.BicLong)
    .Zoom(14)
    .Layers(layers =>
    {
        layers.Add()
        .Type(MapLayerType.Bing)
              .ImagerySet(MapLayersImagerySet.AerialWithLabels)
              .Key("ApiZL7kfQK2OAVUEfEtIUds-61ZYq1QHeX8DF6fm7kKWlLuzreW4anD5v8DeuvEu");
        //.Type(MapLayerType.Tile)
        //.UrlTemplate("http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
        //.Subdomains("a", "b", "c");
    })
    .Markers(markers =>
    {
        markers.Add()
        .HtmlAttributes(new {id = "bicMarker" })
                .Location((double)ViewBag.BicLat, (double)ViewBag.BicLong)
                .Shape(MapMarkersShape.PinTarget)
                .Tooltip(tooltip => tooltip.Content("BIC"));
    })
)
 
<style>
    #map {
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>
Sam
Top achievements
Rank 1
 answered on 02 Oct 2019
3 answers
769 views
Hello guys,

I need this functionality (https://demos.telerik.com/kendo-ui/grid/persist-state) but there are some problems.

I want to clarify one thing:
 - You have a grid (you may check your own link - https://demos.telerik.com/aspnet-mvc/grid/editing-popup)
 - In console I write:
var grid = $(".k-grid").data("kendoGrid");
grid.setOptions(grid.getOptions())"
and suddenly the toolbar breaks down.
  
I've checked a javascript version (https://demos.telerik.com/kendo-ui/grid/editing-popup) and everything is fine over there.

Let's check how "grid.options.toolbar" looks like:
JS:
{name: "create"}{name: "save"}{name: "cancel"}

MVC:

{ command: { { name: null, buttonType: "ImageAndText", text: "create"}, ...
So, it seems as "grid.options.toolbar" is useless when we talk about "MVC Wrappers".

The most important part - https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions
Yes, I see this note "When using the Grid MVC wrapper, any server templates will not be retrieved by the getOptions", but what can be counted as a "server template" talking about "toolbar"? If I use Kendo MVC, then everything or only when I use this one ".ToolBar(s => s.Template("<a random template>"))"?

So should I use what's described in this link?
https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/grid-preserve-server-toolbar-template-after-set-options/GridPerserveToolbarServerTemplate/Views/Home/Index.cshtml

Thank you for your time and sorry, probably I'm not the first who's asked it
Have a nice day
Viktor Tachev
Telerik team
 answered on 01 Oct 2019
8 answers
311 views

Hi,

 

I saw in the documentation:

 If you have customized the colors of Bootstrap before using it, and need Kendo UI to match the newly chosen colors, you will need to customize Kendo UI's bootstrap theme through the Kendo UI ThemeBuilder.

But I wasn't  lucky trying this.

I use Cyborg in my site an I want KendoUI to use the same colors / fonts.

When I copy the ...min.css to the ThemeBuilder nothing happens.

So how can I import such a theme?

Manfred

 

Stefan
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 30 Sep 2019
Narrow your results
Selected tags
Tags
+133 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?