Telerik Forums
Kendo UI for jQuery Forum
1 answer
272 views
I have a editable grid (inline) that contains a currency field, in pt-BR culture.

When I'm adding a new row, if I put the value 0,23 for example, and click Update, the grid now shows the value R$ 23,00.

How can I correct that bug? I've already checked if the culture script is set properly...

Here is my code (AdditionalPrice is the field)

var dataSource = new kendo.data.DataSource({
            transport: {
                read: "/Product/OptionGridRead",
                update: {
                    url: "/Product/OptionGridUpdate",
                    type: "POST"
                },
                destroy: {
                    url: "/Product/OptionGridDestroy",
                    type: "POST"
                },
                create: {
                    url: "/Product/OptionGridCreate",
                    type: "POST"
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Name: { validation: { required: true } },
                        AdditionalPrice: { type: "number", validation: { required: true } },
                        IsDefault: { type: "boolean" }
                    }
                }
            }
        });

        $("#grid").kendoGrid({
            height: 190,
            width: 200,
            dataSource: dataSource,
            toolbar: ["create"],
            columns: [
                { field: "Name", title: "Nome", editable: true },
                { field: "AdditionalPrice", title: "Valor Adicional", format: "{0:c2}", width: "150px" },
                { field: "IsDefault", title: "PadrĂ£o", width: "100px", template: '<input type="checkbox" name="IsDefault_#= id #" value="#= id #" id="IsDefault_#= id #" disabled="disabled" ${IsDefault==true?"checked":""} />'},
                { command: ["edit", "destroy"], title: " ", width: "210px" }],
            editable: {
                mode: "inline",
                createAt: "bottom"
            },
        });
Alexander Valchev
Telerik team
 answered on 21 Feb 2013
1 answer
123 views
i need to generated a simple line chart using an array generated from form value calculations. What is the best way to accomplish this.  I tried the bind to local data, but I don't know how to update the local data based on the array calculations.
PHP array
Array
(
    [0] => Array
        (
            [name] => 0.1
            [value] => 422.19
        )

    [1] => Array
        (
            [name] => 0.2
            [value] => 256.77
        )

    [2] => Array
        (
            [name] => 0.4
            [value] => 143.96
        )...
bound local data
                var windowSizeMbs = [
                    {
                        "country": "United States",
                        "rtt": "0.1mS",
                        "value": 108.81
                    },
                    {
                        "country": "United States",
                        "rttms": "0.2mS",
                        "value": 100.47
                    },
                    {
                        "country": "United States",
                        "rttms": "0.4mS",
                        "value": 87.11
                    },.....

John
Top achievements
Rank 1
 answered on 21 Feb 2013
1 answer
115 views
I have a treeview that I bind on the server using MVC. The user can add nodes to the tree through the interface. I would like to have a button that sends the resulting tree back to the controller after the user has completed the changes. How do I do this?

Please respond quickly as I have a very short timeline and I have been pushing Kendo on my clients. I don't want to let my clients down.

Thanks,

Mark
Petur Subev
Telerik team
 answered on 21 Feb 2013
1 answer
239 views
Hi I have a project (which we are using Kendo on in evaluation for purchasing dev licensing) that I want my axis values to be 0%-100%. I have tried changing the numeric labels but all I seem to be doing is changing formatting and not the actual range. I have read through the documentation and haven't found a place where the is set except for the stock type charts with the crossover axis information. I also want to make it to where if a bar in a series is above a certain level it is a different color. This forum hinted that the feature was coming http://www.kendoui.com/forums/dataviz/chart/chart-color.aspx but didn't make it clear that it landed for MVC as I don't want separate series. For instance anything above 85% would be green and anything below would be red.

Here is the code for my chart:

<div class="chart-wrapper">
    @(Html.Kendo().Chart()
        .Theme("metro")
        .Name("satisfactionChart")
        .Title("Customer Satisfaction")
         
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
        .Series(series => {
            series.Bar(new double[] { 94, 82, 89, 95, 90, 80, 91 }).Name("Key Performance Metrics").Color("#00CD00");
        })
         
        .CategoryAxis(axis => axis
            .Categories("Ease of requesting help", "Time to reach qualified technician", "Time to provide a solution", "Completeness of solution", "Technical ability & product knowledge", "How well we kept you informed", "Overall opinion of service")
        )
 
        .ValueAxis(axis => axis
            .Numeric().Labels(labels => labels.Format(""))
            .PlotBands(plotBands => plotBands
            .Add().From(86).To(95).Opacity(.3).Color("Grey")
            )
        )  
          
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}%")
        )
    )
</div>

I would really appreciate help with this. Thanks.
Iliana Dyankova
Telerik team
 answered on 21 Feb 2013
3 answers
538 views
I'd like to add in the right center and left center position of the scrollview container two arrows that help the user to navigate to the next or the previous image.
I tried with two <div> element using position:absolute and background image to have the two arrow in the desired position, but as you can see in the attached file, the arrows will disappear after the first scroll to the right. I need a <div> element overlying with the scrollview container.
Is it possibile to get the desired effect?

Thank you
Alexander Valchev
Telerik team
 answered on 21 Feb 2013
1 answer
193 views

Hi,

What I am trying to do :

1)I have a form with Kendo UI controls like DatePicker(s), Dropdownlist(s), NumericTextBox(s) on the first half of the page
2)Second half has a Kendo UI MVC Grid control
  a) This Kendo UI Grid control has 8 columns in which 2 columns has a Kendo dropdownlist(EditorTemplate) and CheckBox(EditorTemplate).
  b) The Kendo UI Grid control is Ajax binding.
3) When the save button is clicked, all the values from the Kendo UI controls(first half) and Kendo UI grid control(second half) together
   are posted as a Json object via "Ajax Post" to the controller.
4) I am using Model binding for the above process

Issues or the problem I am facing :
1) The first half of the form with other Kendo UI controls are posting their values properly to the controller, but where as
   the Kendo UI Grid is having some problems posting some column values
  
   a) The columns in the Kendo UI Grid with the datatype decimal is not posting the values
   b) The EditorTemplate controls like the CheckBox and the kendo dropdown when selected shows the values "[Object Object]" for dropdownlist
      and the actual value of the boolean rather than the checkbox control.
  
Here is the project and attaching the same.
Please refer the /Views/Index view page for the above mentioned.

Daniel
Telerik team
 answered on 21 Feb 2013
1 answer
183 views
Hi,

I have a requirement where shortYearCutOff has to be 29, but its hardcoded as 30 in Kendo UI.

 $("#sampleDate").kendoDatePicker({
    format: "MM/dd/yyyy",
    parseFormats: ["MMddyy"]
});

Here is the condition how it works:
If yy <= zz, then automatically substituted by year 20YY
If yy > zz, then automatically substituted by year 19YY
Where zz – shortYearCutOff (it’s a local variable which is used in function parseExact())

Input

Output

Expected Output where shortYearCutOff=29

031329
031330
031331
031332

03/13/2029
03/13/2030
03/13/1931
03/13/1932

03/13/2029
03/13/1930
03/13/1931
03/13/1932


Thanks
Nishad.
Georgi Krustev
Telerik team
 answered on 21 Feb 2013
1 answer
184 views
I have a kendo grid implemented with popup editing. I wired up a function to the save event so that when the user clicks 'Update' an ajax request is made. I'm trying to find a way to cancel the update and not add the new or updated data if the request returns an error.

options.save = function (e) {
    widget.save.call(viewModel, e.model.toJSON(), function () {
        e.preventDefault();
    });
};

The save function being called makes a $.post() request and if the response comes  back with an error it will fire the callback passed to save.
I have noticed that as soon as an ajax call is made the edit popup is closed and the data appears in the grid even though the ajax call hasn't been returned yet.  This led me to return a jquery deferred in my function,  but regardless of the deferred the changes are still saved to the grid before the deferred is returned.

How can I cancel the save event so that all changes that I've made to the data are reversed?

widget.options.save = function (e) {
    $.when(widget.save.call(viewModel, e.model.toJSON())).then().fail(function () {
        kendoGrid.cancelChanges();
    });
};
function save (item) {
var url = constants.handlerUrl + 'action=save';
var data = JSON.stringify(item);
var deferred = $.Deferred();

return $.post(url, data).pipe(function(data, textStatus, jqXHR) {
var deferred = $.Deferred();
data = ko.utils.parseJson(data);

if (data.error) {
return deferred.reject();

var location = ko.utils.arrayFirst(self.locations, function (item) {
return item.id == data.id;
});
location.zipCodes(data.zipCodes);

return deferred.resolve();
});
};
Vladimir Iliev
Telerik team
 answered on 21 Feb 2013
1 answer
438 views
I am creating a Listview control in markup, and on a button click event am initializing and loading data into a datasource for display as result of a user initiated search.  When the user performs a new search, I call the datasource.reload() to retrieve data for the updated search criteria.  The spinner doesn't show up when I do so.  What can I do to get the spinner to show during the reload operation?  Here is the code that handles the 'click' event of the search.  Everything works fine except there is no spinner during read()
//Handle the search 'GO' button click event
this.doItemSearch =
function () {
//this selector grabs the search criteria
    if ($('#searchCriteria').val() != '') {
        if (dataSource)
            dataSource.read();
        else
            initdataSource();
         
        if (listView) {
            //Do nothing
        }
        else {
            listView = $("#myListView").kendoMobileListView({
                dataSource: dataSource,
                template: $("#myTemplate").text(),
                endlessScroll: true,
                scrollTreshold: 30 //treshold in pixels
            });
        }
    }
}
Alexander Valchev
Telerik team
 answered on 21 Feb 2013
2 answers
230 views
I tried to bind a grid from the corresponding to the data entered in a textbox, but the grid is not populated
Also there is no error displayed
 This is the code i used

$("#txtSearchCaller").keyup(function () { SearchCaller($(this)); });

function SearchCaller(txtSearchCaller) {
            SearchRequestProcess = $.ajax({
            type: "GET",
            url: baseURL + "Call/SearchCaller",
            data: "term=" + $(txtSearchCaller).val(),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnGetCallerSuccess,
            error: function (request, status, error) { if (request.statusText != "abort") { alert("SearchCaller:: " + request.statusText); } }
                });
    }
}
function OnGetCallerSuccess(Jsondata, status) {
    $("#Grid").kendoGrid({ // create Grid from div HTML element Kendo
        dataSource: Jsondata,
        selectable: "row",
        scrollable: true,
        navigatable: true,
        resizable: true,
        groupable: false,
        columns: [
                    {
                        field: "category1",
                        title: "category1",
                        width: 80
                    },
                    {
                        field: "category2",
                        title: "Customer Name",
                        width: 80
                    },
                ]
    });
}
Mathew
Top achievements
Rank 1
 answered on 21 Feb 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?