Questions on Kendo UI for jQuery Forum

1 answer

96 views

Chrome Inspector - copy options/dataSource to create DOJO

I'm using the Telerik Kendo UI Chrome Inspector.

I would like to know if there is an option to do the following (and if not, is it something that can be put on the TODO list):

When I have issues with a Kendo UI widget, it would be really nice if there were an option to copy the details of the widget (options, dataSource, etc) so that I can create a DOJO / jsFiddle / jsBin of the issue so I can work with it in isolation and/or use it to ask a question on the Forum.

Even better would be a way to select a widget from the widget list and click a button to have a DOJO / jsFiddle / jsBin created automatically for you. The only issue I have with this is that my company restricts access to the web services used in the Kendo UI DOJO, so allowing auto-creation to jsFiddle / jsBin would be really helpful (or at least allow copying the options/dataSource so I can easily re-create it myself).

Thanks,

--Ed

General Discussions

answered on 21 Apr 2015

1 answer

511 views

Comma seperated list to filter in Kendo grid

Hi Kendo Team,

I have a requirement to filter the items in a grid using comma seperated list of values. Is there a way to do it ?

We are using the .net helper classes to render the kendo grid(Html.Kendo().Grid) .

Any help/suggestion would be appreciated

Thanks

Grid

answered on 21 Apr 2015

1 answer

162 views

Datasource in template not syncing

Hi

I need some assistance with something I'm working on. I have a kendo grid that's populated by a datasource that queries a view in a sqldatabase. (I use a view as it contains a join between 2 tables, getting the latest status of the parent record that was added in a child table). The grid has a custom command column that launches a window that uses a template. That template contains a form that binds to another datasource that's filtered by the id of the selected row in it's parent grid. That form binds ok and the values appear as they should, but the datasource will not sync. I get a 400 bad request error when I click the save button. Could somebody please look at the code below and see if they can figure out why it won't sync. Any help would be greatly
appreciated.

Regards

<body>

<form id="form1" runat="server">

<h2>Incidents</h2>

<div id="grid"></div>

<div id="details"></div>

<script>

var wnd;

var detailsTemplate;

$(document).ready(function () {

// DECLARING DATASOURCES TO BE USED AS LOOKUPS

// Request Origins

var requestoriginsDataSource = new kendo.data.DataSource({

type: "odata",

transport: {

read: { url: "/DORAModelService.svc/lkupRequestOrigins", async: false }

},

serverSorting: true,

sort: { field: "text", dir: "asc" }

});

requestoriginsDataSource.read();

// Request Types

var requesttypeDataSource = new kendo.data.DataSource({

type: "odata",

transport: {

read: { url: "/DORAModelService.svc/lkupRequestTypes", async: false }

},

serverSorting: true,

sort: { field: "text", dir: "asc" }

});

requesttypeDataSource.read();

// Incident Source Type

var incidentsourceDataSource = new kendo.data.DataSource({

type: "odata",

transport: {

read: { url: "/DORAModelService.svc/lkupSources", async: false }

},

serverSorting: true,

sort: { field: "text", dir: "asc" }

});

incidentsourceDataSource.read();

// Managers

var managersDataSource = new kendo.data.DataSource({

type: "odata",

transport: {

read: { url: "/DORAModelService.svc/lkupUsers", async: false }

},

serverSorting: true,

sort: { field: "text", dir: "asc" }

});

managersDataSource.read();

// Incident DataSource - this uses a view that joins 2 tables.

// It's required to get the latest status of the incidents displayed

var dataSource = new kendo.data.DataSource({

type: "odata",

serverFiltering: true,

serverSorting: true,

sort: { field: "IncidentID", dir: "desc" },

transport: {

read: {

url: "/DORAModelService.svc/Vw_Incidents", async: false

}

},

schema: {

model: {

id: "IncidentID",

fields: {

IncidentID: { type: "number" },

}

});

dataSource.read();

$("#grid").kendoGrid({

dataSource: dataSource,

height: 550,

filterable: true,

sortable: true,

pageable: true,

editable: true,

toolbar: ["create", "save", "cancel"],

columns: [{

field: "IncidentID",

filterable: false,

width: 80

},

"Incident",

"LatestStatus",

{ command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }

]

});

wnd = $("#details")

.kendoWindow({

title: "Incident Details",

modal: true,

visible: false,

resizable: false,

width: "98%",

open: function (e) {

this.wrapper.css({ top: 5 });

}

}).data("kendoWindow");

detailsTemplate = kendo.template($("#detailstemplate").html());

var selectedincidentDataSource

function showDetails(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

wnd.content(detailsTemplate(dataItem));

wnd.center().open();

selectedincidentDataSource = new kendo.data.DataSource({

type: "odata",

serverFiltering: true,

transport: {

read: {

url: "/DORAModelService.svc/TblIncidents", async: false,

data: {

$expand: "TbIncidentStatus"

}

},

update: {

url: function (data) {

return "/DORAModelService.svc/TblIncidents" + "(" + dataItem.IncidentID + ")";

}

},

create: {

url: "/DORAModelService.svc/TblIncidents"

},

destroy: {

url: function (data) {

return "/DORAModelService.svc/TblIncidents" + "(" + dataItem.IncidentID + ")";

}

},

filter: {

logic: "and",

filters: [

{ field: "IncidentID", operator: "eq", value: dataItem.IncidentID }

]

},

batch: true,

schema: {

model: {

id: "IncidentID",

fields: {

IncidentID: { type: "number" },

Incident: { type: "string" },

ManagerID: { type: "number" },

LoggedDate: { type: "date", format: "{0:dd/MM/yyyy}" },

IncidentDate: { type: "date", format: "{0:dd/MM/yyyy}" },

SourceID: { type: "number" },

IncidentsTypeID: { type: "number" },

IncidentOriginID: { type: "number" },

Logger: { type: "string" }

}

})

selectedincidentDataSource.read();

kendo.bind($("#selectedincident"), selectedincidentDataSource.view()[0]);

$("#managers").kendoDropDownList({

dataSource: managersDataSource,

dataTextField: "text",

dataValueField: "value"

}).data("kendoDropDownList")

$("#origin").kendoDropDownList({

dataSource: requestoriginsDataSource,

dataTextField: "text",

dataValueField: "value"

}).data("kendoDropDownList")

$("#type").kendoDropDownList({

dataSource: requesttypeDataSource,

dataTextField: "text",

dataValueField: "value"

}).data("kendoDropDownList")

$("#source").kendoDropDownList({

dataSource: incidentsourceDataSource,

dataTextField: "text",

dataValueField: "value"

}).data("kendoDropDownList")

$("#hSave").click(function () {

selectedincidentDataSource.sync();

});

} // Finish ShowDetails

});

</script>

<script type="text/x-kendo-template" id="detailstemplate">

<div id="selectedincident" class="container">

<div class="container">

<div class="row spacer">

<div class="col-md-5">

<label>ID</label><span data-bind="text: IncidentID"></span><br />

<label>Name</label><input type="text" id="incidents1" class="k-textbox w300" data-bind="value: Incident" /><br />

<label>Incident Date</label><input class="w300" type="text" id="incidentdate" data-bind="value: IncidentDate" data-role="datepicker" data-format="dd/MM/yyyy" /><br />

<label>Logged Date</label><input class="w300" type="text" id="loggeddate" data-role="datepicker" data-bind="value: LoggedDate" data-format="dd/MM/yyyy" /><br />

<label>Manager</label><input class="w300" type="text" id="managers" class="input400" data-bind="value: ManagerID" /><br />

</div>

<div class="col-md-5">

<label>Origin</label><input type="text" id="origin" class="w300" data-bind="value: IncidentOriginID" /><br />

<label>Type</label><input type="text" id="type" class="w300" data-bind="value: IncidentsTypeID" /><br />

<label>Source</label><input type="text" id="source" class="w300" data-bind="value: SourceID" /><br />

<a href="\\#" class="k-button" id="hSave">Save</a>

</div>

</script>

</form>

</body>

Data Source

answered on 21 Apr 2015

13 answers

498 views

Custom data in template

Hi,

Is it possible to use custom data in the upload template?
In the success event i can do something like:

success: function (e) {
e.files[0].DocumentID = e.response;
}

Then i would like to use this DocumentID in a template to render a control and attach this value to it.

Upload

answered on 21 Apr 2015

15 answers

720 views

[Solved] Date format is lost when manually populating datasource in jquery

When i load the data to the grid using the API call to read the viewmodel sets the format as it should (i.e. [DisplayFormat(DataFormatString = "{0:MMM dd, yyyy}", ApplyFormatInEditMode = true)]). When I push the datasource through jquery the formatt is lost. I am assuming it has to do with parsing to sting. Is anyone resolved this issues before?

function FilterGrid() {
window.openWait();
var text = $('#SearchTextBox').val();
$.ajax({
url: '@Url.Action("Search", "Home")',
data: { text: text },
type: 'POST',
success: function (data) {
if (data[0] == "success") {
var grid = $('#Grid').getKendoGrid();
grid.dataSource.data(data[1]);
grid.refresh();
}
else {
alert(data[1]);
}
window.closeWait();
},
});
}

Grid

answered on 21 Apr 2015

1 answer

145 views

Remote data binding in a template Listview Mobile

Hi ,

I am begginer in Kendo UI and I like Kendo. Using this snippet http://dojo.telerik.com/IWAQe .I want to display remote data from Webservice, but remote data are not displayed. Please help me !

Thanks to all

ListView (Mobile)

answered on 21 Apr 2015

2 answers

147 views

Filtering and sorting not working with row template in reorderable grid

Hello,

I used this example: "http://jsbin.com/sibareyonu/1/edit?html,css,js,output" and if I switch the ordering of both columns and perform a filter action, the cell entries change their ordering back to the initial state. The same behaviour applies for sorting.

Is it possible to use column reordering with row templates and sorting/filtering?

Regards,

Sebastian Ziegler

Grid

answered on 21 Apr 2015

4 answers

246 views

Datasource in detailExpand

Hey,

next Question to kendo Grid.

On My last Question we found a Solution to expand the DetailRow on a selected Page.

Now, in the detail row is a KendoGrid and now i ve the same problem.

Have an Item in de detailGrid to identify -> know how

get the Datasource in de detailExpand event -> i dont know

im using the $("#gridMain").data("kendoGrid").expandRow(row); to expand the detailRow

Hope we found a solution again

Thanks

Grid

answered on 21 Apr 2015

7 answers

309 views

Pie chart inside a donut chart

I have a donut chart with 2 series. Is it possible to set the innermost series of the donut chart to be a pie chart instead? As in, I want the middle of the donut chart to be filled in. When I set the first series to have type: 'pie' and the second series to have type: 'donut', only the first series is rendered.

Thanks,

Michelle

Charts

answered on 20 Apr 2015

2 answers

121 views

Button Navigation for DropDownList Bug

This is a possible duplicate of: http://www.telerik.com/forums/conflict-w-bootstrap-js-dropdownlist

Since it is from a year ago, I was wondering if there had been any movement from either side to solve this problem.

I looks like when you try to use keyboard navigation on the drop down lists in our app, the keypress is happening twice for some of the arrow keys, causing odd behavior not represented in the Telerik demos.

The workarounds presented in the linked thread seem to fix our issue, but we are worried about possible side effects of using hacks like this. Is there any other way to go about solving this problem?

DropDownList

answered on 20 Apr 2015