Telerik Forums
Kendo UI for jQuery Forum
2 answers
62 views
Hi

Please navigate to any kendoui chart with Windows Phone (IE browser) e.g. 
http://demos.kendoui.com/dataviz/bar-charts/date-axis.html
The browser native zoom that work on any other parts of the page doesn't work on the chart area.

Just checked that it's not caused by combination of wp/svg as here zoom works:
https://developer.mozilla.org/samples/svg/swarm-of-motes.xhtml
Furthermore- other types of dataviz widgets (e.g. radial gauge) don't have this problem.
Thanks.

 Raido
JamesD
Top achievements
Rank 1
 answered on 21 Aug 2013
1 answer
199 views
Hello

I would like to request a plugin that is similar to the one used for tags at stackoverflow.com. The ability in an textbox to enter, for example, a list of emailaddresses, or domainnames, and they create a tag after you press space after it. The multiselect, as I can see, doesnt allow to enter "new items" that doesnt exists in list. 

Or is there some way to modify the multiselect so it can add new tags?
Georgi Krustev
Telerik team
 answered on 21 Aug 2013
1 answer
176 views
I was wondering if it would be possible to use qTip2 to display the tooltips from the validation, instead of the default ones. I have spent several days trying to do this, with little success.

http://qtip2.com/api

With the jQuery Unobtrusive Validation, I can achieve this with the following edits to the code;
function onError(error, inputElement) {  // 'this' is the form element
    var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
        replaceAttrValue = container.attr("data-valmsg-replace"),
        replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;
 
    //replace = $.parseJSON(container.attr("data-valmsg-replace")) !== undefined;
 
    container.removeClass("field-validation-valid").addClass("field-validation-error");
    error.data("unobtrusiveContainer", container);
 
    if (replace) {
        container.empty();
        error.removeClass("input-validation-error").appendTo(container);
    }
    else {
        error.hide();
    }
 
    var element = inputElement;
    // Set positioning based on the elements position in the form
    var elem = $(element),
                        //corners = ['left center', 'right center'],
                        corners = ['bottom left', 'top center'],
                        flipIt = elem.parents('span.right').length > 0;
 
    // Check we have a valid error message
    if (!error.is(':empty')) {
        // Apply the tooltip only if it isn't valid
        elem.filter(':not(.valid)').qtip({
            overwrite: false,
            content: error,
            position: {
                my: corners[flipIt ? 0 : 1],
                at: corners[flipIt ? 1 : 0],
                viewport: $(window)
            },
            show: {
                event: false,
                ready: true
            },
            hide: false,
            style: {
                classes: 'qtip-red' // Make it red... the classic error colour!
            }
        })
 
        // If we have a tooltip on this element already, just update its content
        .qtip('option', 'content.text', error);
    }
 
        // If the error is empty, remove the qTip
    else { elem.qtip('destroy'); }
}
But I am having a difficult time figuring out how to replicate this behavior with Kendo UI.
Daniel
Telerik team
 answered on 21 Aug 2013
1 answer
288 views
I am creating input controls dynamically and using an ASMX web service as its datasource. The example snippets in the doumentation and most forum posts assume that you already know the ID of the <input> when creating the .kendoautocomplete for example:
01.$('#txtReceiptee').kendoAutoComplete({
02.       filter: "startswith",
03.       dataTextField: "Name",
04.       dataSource: new kendo.data.DataSource({
05.           type: "json",
06.           transport: {
07.               read: {
08.                   type: "POST",
09.                   url: "AJAXReceiptee.asmx/GetReceipteeNames",
10.                   contentType: 'application/json; charset=utf-8',
11.                   datatype: "json",
12.                   data: function ()
13.                   {
14.                       return {
15.                           context: $("#txtReceiptee").data("kendoAutoComplete").value().replace(/\ /g, '%')
16.                       }
17.                   }
18. 
19.               },
20.               parameterMap: function (options)
21.               {
22.                   return JSON.stringify(options);
23.               }
24.           },
25.           serverFiltering: true,
26.           serverSorting: true,
27.           pageSize: 10,
28.           schema: {
29.               data: "d"
30.           } // schema
31.       })
32.        
33.   });
This works just fine because on line 15 I can extract the value of the input field from the known id: #txtReceiptee. However if I create an element dynmaically and want to use the same datasource setup as above, I cannot seem to find a way to direct the data function to reference its 'owned' input:
01.$('<input>').kendoAutoComplete({
02.       filter: "startswith",
03.       dataTextField: "Name",
04.       dataSource: new kendo.data.DataSource({
05.           type: "json",
06.           transport: {
07.               read: {
08.                   type: "POST",
09.                   url: "AJAXReceiptee.asmx/GetReceipteeNames",
10.                   contentType: 'application/json; charset=utf-8',
11.                   datatype: "json",
12.                   data: function ()
13.                   {
14.                       return {
15.                           context: $(" ?????? ").data("kendoAutoComplete").value().replace(/\ /g, '%')
16.                       }
17.                   }
18. 
19.               },
20.               parameterMap: function (options)
21.               {
22.                   return JSON.stringify(options);
23.               }
24.           },
25.           serverFiltering: true,
26.           serverSorting: true,
27.           pageSize: 10,
28.           schema: {
29.               data: "d"
30.           } // schema
31.       })
32.        
33.   });
This new <'input'> element is in a grid so I will be having multiples of this created dynamically
Georgi Krustev
Telerik team
 answered on 21 Aug 2013
1 answer
102 views
The previous telerik mvc extensions has the ability for custom commands and an OnCommand event to perform custom logic.

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api-and-events.html#OnCommand

With the new version how can i accomplish similar functionality?

Today i tried to attach to OnEdit,k-on-edit, but since it's late in the pipeline i end up with flicker (pop up editor with grid) or a javascript error when using ( mode: inline).

Alexander Valchev
Telerik team
 answered on 21 Aug 2013
1 answer
71 views
I have a  json data {(sample1:3,5,6)},{sample2:4,7,8}},that means column A,B,C. I   can easily draw that in  this sameple like this:
.Series(series => {
series.Column(new double[] { 3 ,4}).Name("column A");
series.Column(new double[] { 5 ,7}).Name("column B");
series.Column(new double[] {6,8}).Name("column C");

})
.CategoryAxis(axis => axis
.Categories("Sample1", "Sample2")
.Line(line => line.Visible(false))
.Labels(labels => labels.Padding(145,0,0,0))
),How to  write them in js code?
Hristo Germanov
Telerik team
 answered on 21 Aug 2013
4 answers
274 views
I have a kendoui grid setup and doing inCell edits. I have a button at the top to 'Add a new item'.  If I edit a couple of items they little red corners appear so I know they are dirty. If I then click the 'Add new item' button at the top of the grid, it removes the red flags from the edited items.  This is misleading and causes the user to think the only record that is dirty is the record they inserted to the grid. 


To reproduce:
Run the page attached.
Edit an item or 2 in the grid, but don't save.
They have little red flags in corners to show they are dirty.
Click Add new record button at top of grid.
The red flags disappeared from the dirty items.

How do I fix this?


I'm attaching files for the view and controller (using ASP.net MVC4).

Thank you in advance
Vladimir Iliev
Telerik team
 answered on 21 Aug 2013
5 answers
126 views
Hi

I'm using the image browser for the kendo ui web editor. It works fine but it pops up so far down the screen that you have to scroll to see the buttons. Screenshots are attached.

I'm guessing the cause is that the window is centered before it has the full height.

Best regards,
Martin
Northstar
Top achievements
Rank 1
 answered on 20 Aug 2013
1 answer
369 views

I have a Kendo grid that has a requirement for using a conditional dropdown in combination with batch editing. 

For instance I need to allow an order enterer set the color of a product from a dropdown, but each product has a potentially different set of available colors.

I have done something similar with InLine editing without a problem and the ajax call to populate the dropdown is getting called correctly in batch mode.  The problem appears to be that the #=productId# is not getting correctly parsed by Kendo.

View:

@( Html.Kendo().Grid<Web.Models.StudentGradeView>()
    .Name("Students")
    .Columns(columns =>
        {
            columns.Bound(c => c.Id);
            columns.Bound(c => c.Price);
            columns.Bound(c => c.Color);        })
        .ToolBar(toolbar =>
        {
            toolbar.Template( @"
                <span class=""pull-left"">
                        <a class=""btn k-grid-save-changes"" href=""javascript:void(0)""><span class=""k-icon k-update""></span> Save</a>
                        <a class=""btn k-grid-cancel-changes"" href=""javascript:void(0)""><span class=""k-icon k-cancel""></span> Cancel</a>
                </span>"
        })
        .Events(e => e.Edit("onEdit"))        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .Events(events =>
                {
                    events.Error("error_handler");
                })
            .Model(model =>
                {
                    model.Id(m => m.Id);
                })
            .Read(read => read.Action("Product_Read", "Home", new { id = orderId }))
            .Update(update => update.Action("Product_Update", "Home"))
        )
    )

EditorTemplate

@model string

@(
 Html.Kendo().DropDownListFor(m => m)
    .OptionLabel("Select Color")
    .DataTextField("Color")
    .DataValueField("Color")
    .DataSource(dataSource =>
    {
        dataSource.Read("ColorsDropDown_Read", "DropDowns", new { Area = "", id = "#=ProductId#" });
    })
)


Controller

        public ActionResult ColorsDropDown_Read([DataSourceRequest] DataSourceRequest request, string id)
        {
            List<Grade> rVal = new List<Color>();
            rVal = _SystemSettings.AllColors.Where(w => w.ProductId == id)..ToList();         
            return Json(rVal, JsonRequestBehavior.AllowGet);
        }

Thanks!

 

Logan
Top achievements
Rank 1
Veteran
 answered on 20 Aug 2013
1 answer
67 views
Hi,
is there somewhere an example of the ServerSide part of the Imagebrowser using NodeJS(ExpressJS) ?

~Marc
Petur Subev
Telerik team
 answered on 20 Aug 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?