Questions on Kendo UI for jQuery Forum

3 answers

1.5K+ views

[Solved] How to pass grid data from 2 different grids into an ajax post in jquery

Hello all,

I wasn't sure where to put this as my grids are working...the problem is when I'm trying to pass the data from those grids into an ajax post...they keep coming up with an empty collection. When I step through the jquery...the switches grid has 124 records and the goldList grid has over 1000, but when I hit the breakpoint in the controller the collections are empty.

Here's the JQuery

function SwitchesModalCloseEvent(e)

{

var switchesGrid = $("#SwitchModalGrid").data("kendoGrid");

var goldListGrid = $("#ThirdPartyOpticsGoldListGrid").data("kendoGrid");

var switchesGridObjects = switchesGrid._data; //.dataItems(); //.dataSource.data();

var goldListGridObjects = goldListGrid._data;

var goldListAddActionURL = '@Url.Action("AddToThirdPartyOpticsGoldList", "ThirdPartyOpticsGoldList")';

$.ajax(

{

contentType: "application/json",

data: { switchObjects: JSON.stringify(switchesGridObjects), goldListObjects: JSON.stringify(goldListGridObjects) },

dataType: "json",

type: "POST",

url: goldListAddActionURL

})

.done(function () { alert('Website Called') })

.error(function (objAjaxRequest, strError) {

var respText = objAjaxRequest.responseText;

console.log(respText);

});

}

Here's the Controller Action

[HttpPost]

public

ActionResult AddToThirdPartyOpticsGoldList([DataSourceRequest] DataSourceRequest request, IEnumerable<SwitchModel> switchObjects, IEnumerable<ThirdPartyOpticsGoldListModel> goldListObjects)

{

TransceiverToSwitchReporting transceiverToSwitchReporting = new TransceiverToSwitchReporting(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

var thirdPartyOpticsGoldListResult = transceiverToSwitchReporting.AddToThirdPartyOpticsGoldList(switchObjects, goldListObjects);

if (!thirdPartyOpticsGoldListResult.Result)

{

ModelState.AddModelError("AddToThirdPartyOpticsGoldList", thirdPartyOpticsGoldListResult.Message);

}

return Json(new[] { thirdPartyOpticsGoldListResult.Payload }.ToDataSourceResult(request, ModelState));

}

Any thoughts?

General Discussions

answered on 20 Nov 2015

1 answer

119 views

[Solved] showWorkHours in scheduler

Hello,

There are any methods in your API to get the status of "Business hours/Full day" button?

Thank you

Scheduler

answered on 20 Nov 2015

3 answers

308 views

Custom Toolbar Command and setting the DataSource

I have a custom tool bar command that inserts HTML Snippets....

How do I programmatically load these elements (I have 100)... It is the insertHTML command that I want to load from my database Table.

$("#editor").kendoEditor({
tools: [
"insertHtml",
"bold",
"italic",
"underline"
],
insertHtml: [
{ text: "Client First Name(s)", value: " [FIRSTNAME] " },
{ text: "Client FullName", value: " [FULLNAME] " },
{ text: "Client Since", value: " [CLIENTSINCE] " }
],
messages: {
insertHtml: "Insert Tags"
}
});

Editor

answered on 20 Nov 2015

1 answer

398 views

Underline function

Is there any way to get the Kendo editor to use "U" tags instead of <style='text-decoration:underline">..." for the underline function. I'm fine with retaining styles for the other functions.

Thanks!

Editor

answered on 20 Nov 2015

7 answers

3.8K+ views

NumericTextBox min value behavior

When I set min value for a KendoNumericTextBox, it automatically changes to the minimum value, instead of showing error saying that need to have minimum value. How do I change the behavior.

var numericBox = $("#numeric_" + attrObj.AttributeId).data("kendoNumericTextBox");
numericBox.min(5);
numericBox.validationMessage = "Please enter value 5 and above";

So when I enter 3 for example in the above numberBox, it is supposed to give an error saying "Please enter value 5 and above". Instead the value of the box changes to 5 and no error is shown. This behavior is not acceptable. Is there anyway I can change this?

Thanks,
Suresh

NumericTextBox

answered on 19 Nov 2015

1 answer

261 views

Kendo Autocomplete Authorization Headers

I can't figure out why my Kendo Autocomplete widget is not sending the authorization headers in the request to the server:

var dataSource = new kendo.data.DataSource({

type: 'odata',

serverFiltering: true,

transport: {

read: {

url: myApiUrl,

type: 'GET',

beforeSend: function (xhr) {

xhr.setRequestHeader('Authorization', myAuthorizationValue);

}

});

$('#myAutocompleteField').kendoAutoComplete({

dataTextField: 'fieldName',

filter: 'contains',

minLength: 3,

dataSource: dataSource

});

When I check the server response in dev tools, I am getting a 401 Unauthorized error from the server. Looking at the Request Headers, I don't see the Authorization property at all.

What do I need to do to get the Authorization header to be included with the request?

If I just do a typical $.ajax request with the same object as transport.read in the Kendo DataSource parameter, it sends the headers and I get a successful response.

$.ajax({

url: myApiUrl,

type: 'GET',

beforeSend: function (xhr) {

xhr.setRequestHeader('Authorization', myAuthorizationValue);

},

success: function(res) {

console.log('success!');

console.log(res);

}

});

Data Source

answered on 19 Nov 2015

1 answer

129 views

dataSource error on SQL View through BackEndServices

I have a View in my SQL database defined in BackEndServices for my project.

When the following view runs, I get an "Uncaught TypeError: undefined is not a function" with my datasource.

Any thoughts?

<div data-role="view" data-title="TheTest" data-layout="main" data-show="onShow">

<div data-bind="html: title" class="pagetitle">INSPECTIONS</div>

<div>

<table>

<tr>

<td style="width: 50%">

NAME

</td>

<td style="width: 50%">

DATE UPLOADED

</td>

</tr>

</table>

</div>

<div><ul id="attachmentList"></ul></div>

</div>

<script>

// attachments DataSource

var attachments = new kendo.data.dataSource({

type: 'everlive',

transport: {

typeName: 'dbo_View_InspectionAttachments'

},

schema: {

model: {

fields: {

'Id': { type: 'number' },

'fileName': { type: 'string' },

'dateuploaded': { type: 'date' }

}

},

serverFiltering: true,

filter: {

logic: "and",

filters: [

{ field: 'inspectionid', operator: 'eq', value: 8385 },

{ field: 'confidential', operator: 'eq', value: false }

]

},

serverSorting: true,

sort: { field: 'fileName', dir: 'asc' }

});

</script>

<script>

function onShow(e) {

//Find the attachment listview

var attachList = e.view.content.find("#attachmentList");

// Passing template, datasource, and style to Attachment listview

attachList.kendoListView({

template: "<div><table><tr><td style='width: 50%'><label>#: fileName #</label></td>" +

"<td style='width: 50%'><label>#: dateuploaded #</label></td></tr></table></div>",

style: "inset",

dataSource: attachments

});

}

</script>

Data Source

answered on 19 Nov 2015

3 answers

156 views

[Solved] Manipulating dataSource with nested templates

Hi, I've recently started working with Kendo UI. I have been reading this forum to find answers usually very good. However I am struggling to replicate inline json data in to remote one. Please see below. This works fine creating me the Title for the radio group just as expected however the minute I try using the remote JSON.

http://jsbin.com/sanixi/edit?html,js,output

This is the code should be replacing " var tileDataSource " array with it's remote counterpart below:

What am I missing here? what am I doing wrong? trying to achieve an all remote JSON code here. I have used this code for to remote load JSON for kendoComboBox and kendoDropDownList etc. All worked fine.

Please have a look any ideas how I can achieve this.

Thanks.

Data Source

answered on 19 Nov 2015

1 answer

301 views

[Solved] How To Set OData-V4 xhrFields When Using Server Wrapper Fluent Syntax?

How can one set xhrFields {withcredentials: true} when using an OData-V4 data source in an MVC Server Wrapper?

I've gotten this far in the data source using the Fluent API:

.DataSource(dataSource => dataSource

.Custom()

.Type("odata-v4")

.Transport(transport =>

{

transport.Read(read => read.Url("https://xxx/OData/Employee/FindEmployees"));

})

.ServerFiltering(true)

)

But I need to be able to include credentials like am doing here:

$("#EmpID").kendoComboBox({

placeholder: "Select employee",

dataTextField: "FullName",

dataValueField: "EmpID",

filter: "startswith",

autoBind: false,

minLength: 3,

dataSource: {

type: "odata-v4",

serverFiltering: true,

transport: {

read: {

url: "https://xxx.com/OData/Employee/FindEmployees",

xhrFields: {

withCredentials: true}

}

});

Data Source

answered on 19 Nov 2015

1 answer

528 views

Column resize causing grid to scoll in from left

Hello,

I have a grid with about 15 columns. When my page displays, I have a horizontal scroll bar at the bottom. I drag the scroll bar all the way to the right so I can see my right most columns. So far no issues.

If I then pick any visible column and resize it by dragging its right border to the left a bit, instead of the columns to the right moving closer, the columns to the right stay stationary and the columns to the left of the one I am resizing scroll in from the left side.

I am looking to simply resize a column by moving its right border closer to its left border and having the columns to the right move in closer. I don't want the fields to the left to start moving in from the left side.

I have looked through the documentation and have not seen a way to do this. Is the behavior described here the way the grid was designed to work, or is there a way I can achieve my desired functionality. The issue seems to be related to the horizontal scrollbar and how it comes into play with column resizing.

Please provide a link to a code snippet if possible, or an explanation if this is not possible.

Thank you very much!

Dave

Grid

answered on 19 Nov 2015