Questions on Kendo UI for jQuery Forum

1 answer

248 views

odata v4 function

Does the Kendo Datasource and Grid support OData v4 functions? If so, I'm looking for an example of a kendo grid/datasource that's connected to an OData v4 function, particularly an unbound function with two or more parameters. I'm curious to know if I could map the row filter values to the parameters in the URL that OData functions require.

The term function is generic so just for clarity, the function I mean are the ones described here: http://www.asp.net/web-api/overview/odata-support-in-aspnet-web-api/odata-v4/odata-actions-and-functions

My use case is simple. I have an OData function that calls a stored procedure for the purpose of ad-hoc reporting. It works when I call it directly from the browser with http://localhost:333/odata/GetMyReport(parameter1='something', parameter2='something'). The problem I'd like to solve, is to get the grid with a row filter, i.e., "filterable: { mode: 'row' }", to generate the correct URL by preventing it from generating "?filter=..." and instead modifying the URL path by replacing the parameter values with what was entered in the filters.

Any ideas?

Data Source

answered on 21 Apr 2015

6 answers

1.0K+ views

[Solved] Filter grid based on controls outside of grid

I am using the Kendo Grid and ajax bindings. However I would like to be able to filter the results based on values of controls set outside of the grid? I know I could use the built in filters but I don't want the grid to fetch the data before filtering it. I want my controller to filter the data before the grid is bound to it. How do I accomplish this?

The following is a simple example of what my page might look like.

Start Date ------------------- End Date ------------------- FilterButton

Grid
------------------------------------------------------------------------
Name | Birth Date | .....
________________________________________________________

When I click the Filter button I want to rebind the grid based on values of my Model, which would be updated from the StartDate value and EndDate value selected prior to clicking the Filter Button. I have tried using javascript where I first set the values on the Model based on the selected values of the controls and then calling rebind on the grid. For this I also my model type as a parameter to the select query but that does not work. It always calls the constructor on the Model parameter that is passed into the select query when I do this. This seems like such a simple thing.

Thanks,

Billy Jacobs

Grid

answered on 21 Apr 2015

1 answer

100 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

512 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

169 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

507 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

739 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

149 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

150 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