Questions on Kendo UI for jQuery Forum

1 answer

376 views

Assign values to multiple fields in editor function?

I have editors setup for a few columns in my grid. The editors use a dropdown list and data-bind to a value field, which is an id (integer). This id field is different than the string field used to display the text in that column when it is not in edit mode. My SQL table needs the lookup id, not the text. Because of this, when I add a new record, these columns are blank and if I edit a row, the text on those columns does not change unless I refresh the page. To resolve this, I think I need one of two things to happen, but I'm not sure how to do either.

- The best solution would be to be able to update both fields in the editor function. The only examples that I see use the data-bind in the input dropdown item to update a single field. Is there a way to change the value of other fields in the editor function? Here is one of my editor functions. How can I populate another field called SecondaryVoltage with the selected data-text-field string from the dropdownlist.

function secondaryVoltageEditor(container, options) {

$('<input data-text-field="Voltage" data-value-field="id" data-bind="value:SecondaryVoltageID" />')

.appendTo(container)

.kendoDropDownList({

autoBind: false,

dataSource: voltageDataSource

});

}

- The other less desirable solution would be to refresh the grid after a create or update which will lookup the text value associated with the id, but I'm not sure how to do that either.

Grid

answered on 18 May 2012

1 answer

164 views

parameterMap for objects with multiple Arrays (Composite pattern) for ASP.NET MVC 3

We are using kendoUI - dataSource to hold objects, that are implemented with composite pattern. Those build up a tree-structure using multiple arrays. Our object looks like this:

public class FilterConstraint

{

public Guid Id { get; set; }

public Operator Op { get; set; }

public string Field { get; set; }

public string Value { get; set; }

[XmlArray("FilterConstraints")]

[XmlArrayItem("FilterConstraint")]

public List<FilterConstraint> FilterConstraints { get; set; }

}

Transferring this object from javascript back to MVC3 caused problems on server-side binding.
We found a solution within the kendoUI_TodoList Sample. They used the parameterMap within the transport configuration item on the datasource to map response for MVC3-Databinding:

parameterMap: function (data, type) {

if (type != "read") {

var items = {};

$.each(data.models, function (index, item) {

for (var key in item) {

items["[" + index + "]" + "." + key] = item[key];

}

});

return items;

}

},

Nice solution, but it is just working for the first level of the tree. Therefore we came up with a recursive solution, we want to share with you. Just insert the following code snippet inside the transport configuration item of your datasource:

recursiveParameterMap: function (models, items, parentArray, context) {

$.each(models, function (index, item) {

for (var key in item) {

if (item[key] != null && item[key].push) {

context.options.recursiveParameterMap(item[key], items, parentArray + "[" + index + "]" + "." + key, context);

}

else {

items[parentArray + "[" + index + "]" + "." + key] = item[key];

}

});

},

parameterMap: function (data, type) {

if (type != "read") {

var items = {};

this.options.recursiveParameterMap(data.models, items, "", this);

return items;

}

},

Hopefully this helps someone out there ;-)

best regards,
Reinhard and Stefan

Data Source

answered on 18 May 2012

1 answer

282 views

Style documentation

Hello,

I just took a look at your menu example and for some reason, the menu thiner by about 50% in your example.

I'm a javascript / kendoui newbie and I can't understand how to change the style for my menu. I guess it's in a css file that isn't displayed in the demo source code but I might be wrong.

Is there any documentation about the CSS file and how I can change the height of the menu?

Best regards,

Simon

Menu

answered on 18 May 2012

1 answer

149 views

[Solved] Stack and group chart function request

Good morning,

Is there is any way for a stack chart to let every stacked bar start from 0 in Axis?, and display in front the bar with less value overlapped with the one with greater value on the back?

The default functionality is displayed on kendo2.jpg and the desire graph is displayed on kendo1.jpg.

Thanks for your help.

Charts

answered on 18 May 2012

1 answer

307 views

Error during serialization or deserialization using the JSON JavaScriptSerializer.

hi this is my code:

<WebMethod()>

Public Shared Function Pcpacking() As IEnumerable(Of Packing)

Dim db As New STOREEntities

Return db.PC_PACKING_HISTORIES. _

Where(Function(q) q.PACK_DATE > "1388/11/07"). _

Select(Function(q) New Packing _

With {.Packdate = q.PACK_DATE,

.Packserialnumber = q.PACK_SERIAL_NUMBER,

.Netweight = q.NET_WEIGHT,

.Packusername = q.PACK_USER_NAME}).ToList()

End Function

$(function () {

$("#grid").kendoGrid({

height: 200,

columns: [

{ field: "Packserialnumber", width: "150px" },

{ field: "Netweight", width: "50px" },

{ field: "Packusername", width: "150px" },

{ field: "Packdate", width: "100px" }

],

editable: false,

dataSource: {

schema: {

data: "d",

model: {

id: "Packserialnumber",

fields: {

Packserialnumber: { editable: false, nullable: true },

Netweight: { type: "number", validation: { required: true, min: 1} },

Packusername: { validation: { required: true} },

Packdate: { validation: { required: true} }

}

},

batch: false,

transport: {

read: {

url: "Default.aspx/Pcpacking",

contentType: "application/json; charset=utf-8",

type: "POST"

}

});

when q.pack_date > "1388/11/07" everything works well and query retrive 366. if i change date(q.pack_date > "1388/11/06" 1219 records) getting error:
{"Message":"Error during serialization or deserialization using the JSON JavaScriptSerializer.
The length of the string exceeds the value set on the maxJsonLength property.
","StackTrace":"   at System.Web.Script.Serialization.JavaScriptSerializer.
Serialize(Object obj, StringBuilder output, SerializationFormat serializationFormat)\r\n
    at System.Web.Script.Serialization.JavaScriptSerializer.Serialize(Object obj,
     SerializationFormat serializationFormat)\r\n
       at System.Web.Script.Services.RestHandler.InvokeMethod(HttpContext context,
        WebServiceMethodData methodData, IDictionary`2 rawParams)\r\n
         at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)",
         "ExceptionType":"System.InvalidOperationException"}

sorry for my bad english

Data Source

answered on 18 May 2012

1 answer

62 views

Kendo UI Mobile and Greek characters

Hi,
I would like to know how could i display greek characters in my applications.

General Discussions

answered on 18 May 2012

0 answers

147 views

Unable to read Remote JSON Data

Hi,
I have a WCF service which returns below JSON data & Below is my JQuery function to read JSON data, bind the same to grid.
Problem is: Unable to bind data to grid. Please suggest what changes required to my below function.

Note: my WCF is a RESTful service & multipleSiteBindingsEnabled="true"

[{"Alerts":0,"Cono":"03","CurrentPageIndex":0,"Locations":"E7B","Name":"Abraham, Bethany(426) ","Notifications":0,"Picture":null,"Resno":426,"Search":null,"Sort":null,"Status":0,"pageSize":0,"rcount":4},{"Alerts":0,"Cono":"03","CurrentPageIndex":0,"Locations":"S26A","Name":"Banks, Rebecca M(301) ","Notifications":0,"Picture":null,"Resno":301,"Search":null,"Sort":null,"Status":0,"pageSize":0,"rcount":4},{"Alerts":0,"Cono":"03","CurrentPageIndex":0,"Locations":"","Name":"Carr, William J(405) ","Notifications":0,"Picture":null,"Resno":405,"Search":null,"Sort":null,"Status":0,"pageSize":0,"rcount":4},{"Alerts":0,"Cono":"03","CurrentPageIndex":0,"Locations":"W15A","Name":"Dickerson, Ann A(434) ","Notifications":0,"Picture":null,"Resno":434,"Search":null,"Sort":null,"Status":0,"pageSize":0,"rcount":4},{"Alerts":0,"Cono":"03","CurrentPageIndex":0,"Locations":"E9A","Name":"Dorsey, Linda M(332) ","Notifications":0,"Picture":null,"Resno":332,"Search":null,"Sort":null,"Status":0,"pageSize":0,"rcount":4},{"Alerts":0,"Cono":"03","CurrentPageIndex":0,"Locations":"E5B","Name":"Downey, Darlene J(407) ","Notifications":0,"Picture":null,"Resno":407,"Search":null,"Sort":null,"Status":0,"pageSize":0,"rcount":4},{"Alerts":0,"Cono":"03","CurrentPageIndex":0,"Locations":"E11B","Name":"Easterling, Denise(443) ","Notifications":0,"Picture":null,"Resno":443,"Search":null,"Sort":null,"Status":0,"pageSize":0,"rcount":4},{"Alerts":0,"Cono":"03","CurrentPageIndex":0,"Locations":"E9B","Name":"Eatherly, Harriet(445) ","Notifications":0,"Picture":null,"Resno":445,"Search":null,"Sort":null,"Status":0,"pageSize":0,"rcount":4},{"Alerts":0,"Cono":"03","CurrentPageIndex":0,"Locations":"E10A","Name":"Edgar, Gloria J(430) ","Notifications":0,"Picture":null,"Resno":430,"Search":null,"Sort":null,"Status":0,"pageSize":0,"rcount":4},{"Alerts":0,"Cono":"03","CurrentPageIndex":0,"Locations":"W20A","Name":"Evans, Kelly(461) ","Notifications":0,"Picture":null,"Resno":461,"Search":null,"Sort":null,"Status":0,"pageSize":0,"rcount":4}]

$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "http://localhost:3472/Service1.svc/json/getresident",
                dataType: "jsonp"
            },
            schema: {
                model: {
                    fields: {
                        Resno: { type: "number" },
                        Alerts: { type: "number" },
                        Notifications: { type: "number" },
                        Locations: { type: "string" },
                        Name: { type: "string" }
                    }
                }
            },
            pageSize: 10,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        },
        height: 250,
        filterable: true,
        sortable: true,
        pageable: true,
        columns: [{
            field: "Resno",
            title: "Res No",
            width: "100px"
        }, {
            field: "Name",
            title: "Res Name",
            width: "200px"
        }, {
            field: "Locations",
            title: "Location"
        }, {
            field: "Notifications",
            title: "Notifications",
            width: "200px"
        }, {
            field: "Alerts",
            title: "Alerts"
        }]
    });
});

Data Source

asked on 18 May 2012

5 answers

220 views

[Solved] Upgrade to 2012 Q1 update breaks tabstrip

What i was wanting to happen is for my aspx page to load a number of user controls and then for the tabstrip control turn each loaded user control into a tabstrip item. I have written some code that will take the contents of a div and set it as the title then another div as the content. The idea was to have more control over the tab titles and for the tabs to be created dynamically. The amount of user controls and the content isnt known till the page is loaded

Basically the exact same code as below works with 2011 Q3 but not with the new update.

Javascript

$(document).ready(function () {

// var ParentID;

$("#tabstrip").kendoTabStrip({

});

var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");

//for each DIV within tab content, move it to a new tab within the tad strip

$('#tabcontent').children().each(function (index) {

//Get HTML from DIV

var title = $(this).find('.tab_title').html();

$(this).find('.tab_title').css('display', 'none');

var innerHTML = $(this).html();

//Append to the TABStrip

tabstrip.append(

[{

text: title,

content: innerHTML

}]

);

//Remove original DIV

$(this).remove();

});

$('#tabstrip .k-tabstrip-items').children().each(function (index) {

var th = $.trim($(this).text());

$(this).html(th);

});

});

aspx page

<div id="tabstrip">

</div>

<div id="tabcontent">

<asp:PlaceHolder ID="PHContent" runat="server"></asp:PlaceHolder>

</div>

N.B. Placeholder is where the user controls is loaded into

User Control

<div class="editDefaultInfo" title="Tab Title">

<div class="tab_title">

<span class="glyph listicon"></span>

<p>Tab Title</p>

</div>

<h1>Tab Title</h1>

<div class="form_content">

Tab Content

</div>

</div>

Has something changed with the tabstrip control that would mean it no longer works?

TabStrip

answered on 18 May 2012

1 answer

264 views

Get value after KeyUp

I looking to find a way to get the value of the textbox onkeyup. The value has not changed for the input until the input loses focus. I am trying to find a why where as the user types a total value can be updated instantly, and not have to wait until a focus change. Is there any way to achieve this?

Thanks,
Joe

NumericTextBox

answered on 18 May 2012

2 answers

238 views

[Solved] Slow Performance on Tablet

Hi there everyone,

I'm having an very strange problem with my project with TabStrips : it goes fast as hell on any desktop but it's really really slow on my tablet...
Have you guys any advice about give it a little burst on performance?

Thanks a lot

TabStrip

answered on 18 May 2012