Questions on Kendo UI for jQuery Forum

0 answers

25 views

Deleting row forces Dirty Cell Marker to disappear

You can reproduce this issue here on the "Batch Editing" demo: http://demos.kendoui.com/web/grid/editing.html

1. Edit any row. Note that the red "dirty cell marker" appears in the upper left corner.
2. Select a different row than the one you edited and Delete it.
3. The dirty cell marker on the first row disappears.

Is there any workaround for this issue?

Thanks!

Grid

asked on 11 Mar 2013

1 answer

106 views

JSON Format

Can anybody tell me if this JSON is formatted incorrectly the dataSource isn't consuming it to create a chartl Thanks.

JSON:

{"customerSatisfactionChart":[{"KPIColumnName":"Time To Reach Qualified Tech","KPIColumnValue":3.579831},{"KPIColumnName":"Completeness Of Solution","KPIColumnValue":3.359243},{"KPIColumnName":"Opinion Of Overall Service","KPIColumnValue":3.720588},{"KPIColumnName":"Tech Ability And Prod Knowledge","KPIColumnValue":3.636554},{"KPIColumnName":"Time To Provide Solution","KPIColumnValue":3.285714},{"KPIColumnName":"Ease Of Requesting Help","KPIColumnValue":3.758403},{"KPIColumnName":"How Well Are You Kept Informed","KPIColumnValue":3.262605}]}

dataSource setup:

        dataSource: {
            transport: {
                read: {
                    url: '../Test/GetData',
                    dataType: "json"
                }
            }
        },
        schema: {
            data: "customerSatisfactionChart"
        },
        series: [{
            field: "KPITestColumnValue"
        }],
        categoryAxis: {
            field: "KPITestColumnName"
        },

Charts

answered on 11 Mar 2013

3 answers

135 views

Remote Data JSON retrieval

Hi,

I'm hoping you can help me I am trying to create a chart pulling data from the Entity Framework and passing it as JSON. My JSON output is as below:

a

[""KPIColumnName":"Time T...ColumnValue":"3.579831""
            , 
            ""KPIColumnName":"Comple...ColumnValue":"3.359243""
            , 
            ""KPIColumnName":"Opinio...ColumnValue":"3.720588""
            , 4 more...]

I have tried to setup my remote data source:

var customerSatisfactionDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: '../Test/GetData',
            dataType: "json"
        }
    }
});

And then setup my chart to use this data source:

function createkpiBreakdownChart(labelPosition) {
    $("#kpiBreakdownChart").kendoChart({
        theme: $(document).data("kendoSkin") || "metro",
        dataSource: customerSatisfactionDataSource,
        schema: {
            a: "a"
        },
        series: [{
            field: "KPIColumnValue"
        }],
        categoryAxis: {
            field: "KPIColumnName"
        },
        title: {
            text: "Customer Satisfaction"
        },
        legend: {
            position: "bottom",
            visible: false,
        },
        chartArea: {
            background: "#ffffff"
        },
        seriesDefaults: {
            type: "bar"
        },
        //series: [{
        //    name: "Performance Metrics",
        //    data: [4.552162849872774, 4.391752577319588, 4.215633423180593, 4.345108695652174, 4.4728682170542635, 4.387005649717514, 4.351351351351352]
        //},],
        valueAxis: {
            minorUnit: .25,
            majorUnit: 1,
            min: 0,
            max: 5,
            plotBands: [{
                from: 4,
                to: 5,
                color: '#000000',
                opacity: .1
            }],
            labels: {
                labels: {
                    format: "N0"
                },
 
            },
            tooltip: {
                visible: true,
                format: "N0"
            }
        },
        //categoryAxis: {
        //    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'],
        //},
        tooltip: {
            visible: true,
            format: "#.##"
        }
    });
}

However currently I get nothing rendered on my chart just an empty outline.

If I do a jquery ajax call in firebug like this:

$.ajax({
type: 'GET',
url: '../Test/GetData',
}).done(function (data) {
var customerSatisfactionChartData = data;
}).fail(function (jqXHR, textStatus) {
})

I get the JSON response from above, so I'm getting the JSON however it's not getting rendered in the chart. My series should be the ColumnValue and my categories the ColumnNames. Can you please help me understand what part I have missed or improperly formatted? Thanks.

Charts

answered on 11 Mar 2013

6 answers

398 views

Working with the returned Data from "fetch" Method

The documentation for the Datasource http://docs.kendoui.com/api/framework/datasource tells about the returned object of the "at" method.

kendo.data.ObservableObject | kendo.data.Model The type depends on the schema.

Would you please explain that a little bit. When ObservableObject? When Model?

In my sample, there is a model and a datasource (transport and several other parts ommited). Some data is read from a remote server.

var model = kendo.data.Model.define({

id: "ID",

fields: {

ID: { type: "number", editable: false },

Name: { type: "string", validation: { required: true } }

}

});

var datasource = {

schema: {

model: model

}

};

var ds = new kendo.data.DataSource(datasource);

ds.fetch(function () {

var data = ds.at(0);

});

Now, what is given back from the "at" method? Is it an ObservableObject? Does it have a reference to the model?

Looking at "data" when debugging makes me think that it does have a connection to the model, as the "fields" collection is part of the object. However, if "data" is bound to some HTML View, the model seems to be ignored. The "editable" is not regarded on input, the "required" is not regarded on validation.

Michael G. Schneider

Data Source

answered on 11 Mar 2013

4 answers

150 views

Combobox and calculated fields

http://jsfiddle.net/Zakpu/y8nfK/

Hello,
check out my fiddle.

I have a combobox bound to an external json datasource. It has fields for product names and manufacturers. I get the dropdown values that combine Manufacturer + Product name via a template. The problem is the text field which is set to name. I can't search the combobox by the manufactuers - it's not gonna list them, just the names. I tried using a calculated field to achive this but it didnt work.

Thanks in advance.

ComboBox

answered on 11 Mar 2013

1 answer

81 views

MVVM binding for mobile list view using radio inputs

I'm trying to develop a mobile app with a listview allowing selecting of a value using a radio input binding.

I have tried many variations and can't get this to reliably work. On the main project it binds part of the time, not reliably updating the model. If I manually set the value outside, it doesn't always update the list. When separating out just the component into the fiddle I can't even reproduce the intermittent nature of it working on the main project. The binding doesn't appear to be working at all. To be sure I have added two buttons to manually set the values.

http://jsfiddle.net/TVjSe/

If you could tell me where I am going wrong on the fiddle and/or update it, that would be great!

ListView (Mobile)

answered on 11 Mar 2013

8 answers

437 views

Sorting Numeric Column with Null values

I have a grid with 'Age' as one of the columns.

schema: {

model: {

fields: {

Age: {

type: "number"

}

By default the null values showed as 'null' so I modified the template use a non-breaking space instead.

if (field == "Age")

columns[currentCol].template = "#= (Age == null) ? ' ' : Age #";

The problem is, no matter if there is no template, or I use a template with ' ' (single space) or nbsp, sorting treats null and 0 the same so the resulting sorted column can display as [null, null, 0, null, 0, 0, 1, 2, 3, 4...]. I would think null should appear before 0.

Is there a way to enforce a sort order of [null/undefined, 0, 1, 2, 3...] ?

Possible Bug: Internet Explorer and Chrome sort the values differently. Being an age colum, the numbers are grouped correctly but withing the 'Age = 15 rows' the order is not the same. The orders are reversed from each other as far as I can tell with my limited testing.

Grid

answered on 11 Mar 2013

1 answer

117 views

Creating Heirarchy Grid with no Master/Detail

I have an array of JSON objects being returned from a server that looks something like the following:

[{State: Finished, ID: 1234, Owner: John}, {State: Finished, ID: 5678, Owner: Joe}, {State: Active, ID: 8765, Owner: Jane}, {State: Active, ID: 4321, Owner: Jill}]

I would like to put this in a hierarchy Kendo UI grid (NOT groupable but rather as shown at http://demos.kendoui.com/web/grid/hierarchy.html) with the master record being State (Finished, Active) and the detail records being the rest of the JSON object each "state" is associated with. Since there are no master/detail relationships, per se, I don't think the grid detailInit function can work here (unless I create my own pseudo master/detail relationship for this purpose?), but please correct me if I'm wrong. In any event, let me know if what I'm is even possible without jumping through too many hoops to get to the end to get there. Having a small working example here or in JSFiddle would be phenomenal too. :) Thanks.

Grid

answered on 11 Mar 2013

2 answers

234 views

Update item Id after create

I have a grid with enabled autoSync: true in the data source. I need to update the item Id after create otherwise I can't delete the item without refreshing the grid. Is there any solution for this ?

Grid

answered on 11 Mar 2013

4 answers

466 views

Get the selected index when clicking Remove button

Hi,

I am using Kendo UI async upload for uploading files to our storage.

I am retrieving the Modified file name after each upload and return to the UI. (for unique identification)

Since I am having multiple upload I need a facility to delete any row after uploading it. (which will delete from the storage using the controller method)

but when I try to delete the second row onwards I am getting the concatenated file names in the controller instead of the selected file name.

So I tried different things. but no luck. (including the onComplete(e) function given below)

So all I need is find the index of the Remove button clicked. Then I can find the actual <li> element and set its value as the corresponding file name.

Please help.. Please let me know if you need any more information. Thanks.

This is my code :

View

<section>
<script>
function onSuccess(e) {
if (e.operation == 'upload') {
if (e.response.data != '') {
$('.k-upload-files.k-reset').each(function () {
$(this).find('span.k-filename').each(function (index) {
var current = $(this);
if (current.children().size() > 0) {
var fileName = e.response.data[0].FileName;
if (current.children().size() == 1 && index == 0) {
$(this).text('');
$(this).text(fileName);
}
else if (current.children().size() <= index) {
$(this).text('');
$(this).text(fileName);
}
}
});
});
}
}
}

function onComplete(e) {
$('.k-upload-files.k-reset').each(function () {
$(this).find('span.k-filename').each(function (index) {
var current = $(this);
var fileName = current.text();
if (fileName != '') {
if (e.files != undefined) {
if (e.files[index] != undefined) {
e.files[index].name = fileName;
}
}
}
});
});
}

function onFileRemove(e) {
// Here I need to find the index of the Remove button clicked <li>.
var fileName = $("span.k-filename").text();
if (fileName != '') {
e.files[0].name = fileName;
}
}
</script>

<div>
@(Html.Kendo().Upload()
.Name("files")
.Messages(msg => msg
.DropFilesHere("Please drop the files here to upload..")
.Select("Please select the file to upload by clicking the Select File button..<br /><br />")
.StatusUploaded("File Successfully Uploaded to Azure Storage.. File Name : ")
.StatusFailed("File Uploading Failed..")
.StatusUploading("Uploading the file now....."))
.ShowFileList(true)
.Multiple(true)
.Async(a => a
.Save("Save", "Upload")
.AutoUpload(true)
.Remove("Remove", "Upload"))
.Events(events => events
.Success("onSuccess")
.Complete("onComplete")
.Remove("onFileRemove")
)
)
</div>
</section>

Controller

=======

public ActionResult Save(IEnumerable<HttpPostedFileBase> files)
{
// getting the filename after uploading and send back to the client.
return Json(
new
{
status = 1,
data = new[] {
new { FileName = fileName }
}
}, "text/plain");
}

public ActionResult Remove(string[] fileNames)
{
var errors = new List<string>();
if (fileNames != null)
{
foreach (var fileName in fileNames)
{
errors = DeleteFroStorage(filename); //here I am getting myfile4V_6.txtmyfile4V_7.txt” when I upload 2 txt files instead of the selected file name
}
}

return Json(
new
{
status = 1,
data = new[] {
new { Error = errors }
}
}, "text/plain");
}

My rendered html looks like this.

<div class="k-widget k-upload">
<div class="k-dropzone">
<div class="k-button k-upload-button">
<input id="files" name="files" type="file" data-role="upload" multiple="multiple" autocomplete="off" />
</div>
<em>Please drop the files here to upload..</em>
</div>
<ul class="k-upload-files k-reset">
<li class="k-file">
<span class="k-icon k-success">File Successfully Uploaded to Azure Storage.. File Name : </span>
<span class="k-filename" title="myfile4.txt">myfile4V_6.txt</span>
<button type="button" class="k-button k-button-icontext k-upload-action">
<span class="k-icon k-delete"></span>Remove
</button>
</li>
<li class="k-file">
<span class="k-icon k-success">File Successfully Uploaded to Azure Storage.. File Name : </span>
<span class="k-filename" title="myfile4.txt">myfile4V_7.txt</span>
<button type="button" class="k-button k-button-icontext k-upload-action">
<span class="k-icon k-delete"></span>Remove
</button>
</li>
</ul>
</div>

Upload

answered on 10 Mar 2013