Just sharing some suggestions for CSS-related improvements to the Kendo team:

Include bootstrap themes for matching Kendo themes

Currently, us Bootstrap users are limited to using the Kendo Bootstrap theme with Bootstrap. We could create custom Bootstrap themes that matches the Kendo theme, but if Kendo did it, everyone would benefit. This could probably be implemented generically in LESS, so that the bootstrap theme variables are assigned from the Kendo theme variables -- then it could be applied to any Bootstrap theme.

Reorganize CSS files

It is currently quite confusing to determine which set of CSS files should be included for a given scenario. I have to refer to the documentation every time, and then be careful not to mistakenly use a similarly named file. Consider putting theme-specific files inside the associated theme folder.

Thanks,
Gary

I am struggling to get Kendo UI to play nicely in a portlet environment, where multiple portlets can load competing scripts and clobber each other. I am trying to use the 'context' feature of RequireJS to isolate the code for each portlet and I am running into trouble.

In my portlet, I have an inline script that invokes require after the portlet is loaded on the page:

var myRequire = require.config({
            context: 'my/app',
            paths: {
                jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min',
                kendo: 'http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min',
                chatterApp: contextPath + '/js'
            }
        });

        myRequire ([
            'jquery',
            'myApp/main'
        ], function initApp($, app) {
            var appId= '#<portlet:namespace/>App';

            app.create({ ... });
        });

In my app code, I have a structure like this:
define('myApp/main', ['jquery', 'kendo'], function($, kendo) {
    ui.plugin(kendo.ui.Widget.extend({
       ... //widget code
    });
    
    return {
        create: function create(id, options) {
            $(id).kendoChatterLens(options);
        }
    };
});

This *works* if I only have one portlet on the page. As soon as I add a second portlet with a different context, it breaks down. The 'kendoChatterLens' property on $ is undefined.

I have tried creating a requireJS shim for Kendo in the config to make it use the correct jQuery version:
           shim: {
                "kendo": {
                    export:"kendo" ,
                    deps: ['jquery']
                }
            }
This doesn't seem to have any effect.

Note that because of the way the portlet loads JS files, I can't set a 'data-main' attribute on the requireJS script. In any case it's not clear to me whether requireJS allows multiple 'data-main' attributes.

How can I fix this issue?

I am having an issue using the Drawer widget with Kendu UI Web.

The problem is that my content at the top of the page is disappearing when the drawer is opened.

I have created the following snippet to demonstrate this.

http://dojo.telerik.com/@gxclarke/AnuK

The snippet is a copy from your "Drawer outside of a mobile application" example with the following changes made to achieve web compatibility:

• Comment out kendo.mobile.all.min.css
• Add kendo.silver.min.css
• Add kendo.silver.mobile.min.css

Per your instructions, these are the correct changes for using Kendo UI Mobile widgets with Kendu UI Web.

Notice that the "Show drawer" link disappears when it is clicked on. If you revert the three changes listed above, then the link remains visible.

Please help.

Gary

Is there a for the grid to swap columns and rows?  Normally, your grid has a fixed number of columns, repeating for each row of data; the "next" row of data is immediately below the "current" row; and the user scrolls down to see more info.

I need to create a grid with a fixed number of rows, including a row "header" as the left-most column.  As data is populated, news columns will be added to the grid; each new tuple is added as a column to the right of the proceeding column.  The user also scrolls horizontally through the results.

Row/Column sizing will be fixed and I don't need to dynamically add/remove data, so it might be possible to create a single non-scrolling left column and massage the data.

What is the best approach?

Hi Guys, anyone have a simple pie chart example (Razor wrapper and c# model classes) that uses a Datasource (Calls a Controller - read action) ?

I managed to create a simple local data driven pie chart but I cannot get the Pie chart to works with remote, the model I am populating has two fields, Name and Amount (int) but it just doesnt work.

Thanks.

Hi guys,

I need to customise the editable fields of my events, which I note I can do by defining a template for the editor using this 


configuration parameter. However, looking at example code like this:


I note there are custom attributes here. Where are they documented?

Cheers, Paul.

Hi,

i have used same demo from your kendo grid demos and just added one property
pageable: true,

this grid have signalR datasource same as your demo code. now when i add pagination it is having NaN in pagination. so please help me to fix this.

Demo:
http://dojo.telerik.com/oLoR

Hi,

Last week, we have performed Kendo UI upgrade but after that we encountered some errors but manage to made some code adjustments.

Now my main concern is that before the update the below grid is working as you see on the image below (or screenshot 0002.png)



I am doing some test on my existing codes as shown below but it is really weird that after the update I am getting the above error.

This is the code said code.

@{

    ViewBag.Controller = "POs";

    ViewBag.TemplateController = "POLines";

    ViewBag.Area = "KOKO";

}

@(Html.Kendo().Grid<PO>()

    .Name("PurchaseOrderList")

    .HtmlAttributes(new { @class = "grid nowrap" })

    .ToolBar(commands =>

    {

        commands.Create()

            .Text(Html.ButtonsResource("AddPurchaseOrder"))

            .HtmlAttributes(new { @class = "t-add" });

 

    })

    .Columns(columns =>

    {

        columns

            .Bound(x => x.OriginPortId)

            .Hidden();

        columns

            .Bound(x => x.PONumber)

            .Title(Html.PropertiesResource("PO.PONumber"));

        columns

            .Bound(x => x.OriginPortName)

            .EditorViewData(new { Action = "GetFilteredPortByVendorOrFactory", Controller = "DataSource", onData = "onInlinePortOfOrigin", onSelect = "onInlinePortSelectById" })

            .EditorTemplateName("InlineAutoComplete")

            .Title(Html.PropertiesResource("PO.OriginPortId"));

        columns

            .Bound(x => x.TotalPOQuantity)

            .Title(Html.PropertiesResource("PO.TotalPOQuantity"));

        columns

            .Bound(x => x.TotalASNQuantity)

            .Title(Html.PropertiesResource("PO.TotalASNQuantity"));

        columns

            .Bound(x => x.TotalGRNQuantity)

            .Title(Html.PropertiesResource("PO.TotalGRNQuantity"));

        columns

            .Bound(x => x.Variance)

            .Title(Html.PropertiesResource("PO.Variance"));

        columns.Command(commands =>

            {

                commands

                    .Edit()

                    .HtmlAttributes((new { title = Html.ButtonsResource("Edit") }));

                commands

                    .Destroy()

                    .HtmlAttributes((new { title = Html.ButtonsResource("Delete") }));

            }

           )

           .Width("5%")

           .HtmlAttributes(new { @class = "nowrap" })

           .Title(Html.StringsResource("Commands"));

    })

    .PrefixUrlParameters(false)

    .ClientDetailTemplateId("asnPurchaseOrderLineTemplate")

    .EnableCustomBinding(true)

    .Sortable(x => x.SortMode(GridSortMode.SingleColumn))

    .Filterable()

    .Events(events => events

        .Save("SaveASNPurchaseOrder")

        .DataBound("KendoGrid.DataBound")

        .Edit("KendoGrid.Edit"))

    .DataSource(dataSource => dataSource

        .Ajax()

        .Model(model =>

        {

            model

                .Id(x => x.Id);

            model

                .Field(x => x.TotalPOQuantity)

                .Editable(false);

            model

                .Field(x => x.TotalASNQuantity)

                .Editable(false);

            model

                .Field(x => x.TotalGRNQuantity)

                .Editable(false);

            model

                .Field(x => x.Variance)

                .Editable(false);

        })

        .Events(e => e

            .Error("KendoGrid.Error")

            .RequestEnd("KendoGrid.RequestEnd"))

        .Create(create => create.Action("Add", (String)ViewBag.Controller, new { area = (String)(ViewBag.Area ?? String.Empty) }))

        .Read(read => read.Action("Index", (String)ViewBag.Controller, new { area = (String)(ViewBag.Area ?? String.Empty), ASNId = Request[Constants.ASNId] }))

        .Update(create => create.Action("Update", (String)ViewBag.Controller, new { area = (String)(ViewBag.Area ?? String.Empty) }))

        .Destroy(create => create.Action("Remove", (String)ViewBag.Controller, new { area = (String)(ViewBag.Area ?? String.Empty) }))

        .PageSize(((DataSourceRequest)ViewData[Constants.Request]).PageSize)

    )

    .Pageable(pager => pager

        .Input(true)

        .Refresh(true)

    )

)

<script>

    function SaveASNPurchaseOrder(e) {

        e.model.UrlMask = GetUrlMask();

        e.model.ASNId = '@ViewContext.RouteData.Values[Constants.ASNId]';

    }

</script>

<script id="asnPurchaseOrderLineTemplate" type="text/kendo-tmpl">

    @(Html.Kendo().Grid<POLines>()

    .Name("productLines_#=Id#")

    .HtmlAttributes(new { @class = "grid nowrap" })

    .ToolBar(commands =>

    {

        commands.Create()

            .Text(Html.ButtonsResource("AddItem"))

            .HtmlAttributes(new { @class = "t-add" });

 

    })

    .Columns(columns =>

    {

        columns

            .Bound(x => x.ProductMasterGTINId)

            .Hidden();

        columns

            .Bound(x => x.Code)

            .EditorViewData(new { Action = "GetCompleteProduct", Controller = "DataSource", onSelect = "onProductDetailSelectById", onData = "onProductDataById" })

            .EditorTemplateName("InlineAutoCompleteProductAndGTIN")

            .Width(300);

        columns

            .Bound(x => x.Description)

            .EditorTemplateName("InlineString")

            .EditorViewData(new { disabled = "disabled" })

            .Title(Html.PropertiesResource("POLines.Description"));

        columns

            .Bound(x => x.HTSCode)

            .EditorTemplateName("InlineString")

            .EditorViewData(new { disabled = "disabled" })

            .Title(Html.PropertiesResource("POLines.HTSCode"));

        columns

            .Bound(x => x.GTIN)

            .EditorTemplateName("InlineString")

            .EditorViewData(new { disabled = "disabled" })

            .Title(Html.PropertiesResource("POLines.GTIN"));

        columns

            .Bound(x => x.SKU)

            .EditorTemplateName("InlineString")

            .EditorViewData(new { disabled = "disabled" })

            .Title(Html.PropertiesResource("POLines.SKU"));

        columns

            .Bound(x => x.Attributes)

            .EditorTemplateName("InlineString")

            .EditorViewData(new { disabled = "disabled" })

            .ClientTemplate("\\#= Attributes \\#")

            .Title(Html.PropertiesResource("ProductMasterGTINViewModel.AttributeString"));

        columns

            .Bound(x => x.POQuantity)

            .Title(Html.PropertiesResource("POLines.POQuantity"));

        columns

            .Bound(x => x.ASNQuantity)

            .Title(Html.PropertiesResource("POLines.ASNQuantity"));

        columns

            .Bound(x => x.GRNQuantity)

            .Title(Html.PropertiesResource("POLines.GRNQuantity"));

        columns

            .Bound(x => x.Variance)

            .Title(Html.PropertiesResource("POLines.Variance"));

        columns.Command(commands =>

            {

                commands

                    .Edit()

                    .HtmlAttributes((new { title = Html.ButtonsResource("Edit") }));

                commands

                    .Destroy()

                    .HtmlAttributes((new { title = Html.ButtonsResource("Delete") }));

            }

            )

            .Width("5%")

            .HtmlAttributes(new { @class = "nowrap" })

            .Title(Html.StringsResource("Commands"));

    })

    .PrefixUrlParameters(false)

    .Events(events => events

        .Save("SavePurchaseOrderProductLine")

        .DataBound("KendoGrid.DataBound")

        .Edit("KendoGrid.Edit"))

    .Sortable(x => x.SortMode(GridSortMode.SingleColumn))

    .Editable(x => x.Mode(GridEditMode.InLine))

    .Filterable()

    .DataSource(dataSource => dataSource

        .Ajax()

        .Model(model =>

            {

                model.Id(x => x.Id);

                model.Field(x => x.GRNQuantity).Editable(false);

                model.Field(x => x.Variance).Editable(false);

 

            })

        .Events(e => e

            .Error("KendoGrid.Error")

            .RequestEnd("KendoGrid.RequestEnd"))

        .Create(create => create.Action("Add", (String)ViewBag.TemplateController, new { area = (String)(ViewBag.Area ?? String.Empty), PurchaseOrderId = "#=Id#" }))

        .Read(read => read.Action("Index", (String)ViewBag.TemplateController, new { area = (String)(ViewBag.Area ?? String.Empty), PurchaseOrderId = "#=Id#" }))

        .Update(create => create.Action("Update", (String)ViewBag.TemplateController, new { area = (String)(ViewBag.Area ?? String.Empty) }))

        .Destroy(create => create.Action("Remove", (String)ViewBag.TemplateController, new { area = (String)(ViewBag.Area ?? String.Empty) }))

        .PageSize(((DataSourceRequest)ViewData[Constants.Request]).PageSize)

    )

    .Pageable(pager => pager

    .Input(true)

    .Refresh(true)

    )

    .ToClientTemplate()

    )

</script>

 

<script>

    function SavePurchaseOrderProductLine(e) {

        e.model.UrlMask = GetUrlMask();

    }

</script>

When I tried to partially try to figure out the issue this line is cause the problem as it seemed that the code cannot find the said templateId.

.ClientDetailTemplateId("asnPurchaseOrderLineTemplate")

But when I commented the above code it shows the grid (see attached Screenshots 0001.png).



As far as our Foundation Server is concern we didn't see any changes on the said file but now we encountered this after the update.

I hope you can advise us on this as we will be doing system release pretty soon.

Thanks,


Rhan Tepe Takamiya
on Behalf of Steve

Is there a JS workaround to have Tooltips on for a Series, but then suppress the tooltip for selected values in the series?  I have some wedges in my donut that I am hiding (by making them white) and I don't want the Tooltip to pop-up for them.

Thanks!

@using (Html.BeginForm("Update", "MyUsers", FormMethod.Post))
{

@(Html.Kendo().Grid(Model).Name("Usersgrid").Columns(col =>
{
col.Bound(i => i.Id).Hidden();
col.Bound(b => b.Email);

col.Bound(p => p.UserActive).ClientTemplate("<input type='checkbox'
name='checkedvalues' class='chkbx'
value='#= Id #' " + "# if (UserActive)
{ #" + "checked='checked'" + "# } #" + "/>" +

" <input type=\"hidden\" name=\"checkedvals\"
value=\"#=Id#\"/>")
.HeaderTemplate("<input type='checkbox' id='checkAll' /><label
for='checkAll'>Select </label>").Width(120);

col.Command(c => c.Custom("Remove").Click("remove")).Width(120);

}).DataSource(d => d.Ajax()
.Model(m => m.Id("Id"))
.Read(p => p.Url("/Customers/GetCustomerIndex").Type(HttpVerbs.Get)))

)
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save Users" class="btn btn-default" id="btnGroupInv2" style="color: rgb(8, 4, 36)" />
</div>
</div>
}
 I have "SelectAll" header template for checking and unchecking for all check boxes.I am unable to post the unchecked values with id's on clicking submit button ?I spent many hours on this. Any Suggestions  or any other methods would be grateful thanks