Questions on Kendo UI for jQuery Forum

1 answer

143 views

I created a kendo dojo snippet to show you. However, there is a difference. In my code I want it to do an ajax read instead of a ds of a local js object. The behavior I'm seeing is happening in this template as well so I think you can understand what I am trying to do. First I pull a list of classes, then when you click one you go to the detail view. If you click the back link to go back to the list, and click another item from the list. You go to the detail page, but the same detail from the previous click is shown. I think I don't understand completely how the model is bound to the view, because I would think it would update the detail.

http://dojo.telerik.com/@bradrice/iTerE

MVVM

answered on 13 Jan 2016

1 answer

211 views

Showing drawer causes javascript error: .transition undefined

Hello,

I want to use the mobile drawer for navigation between views and initialize it from JavaScript and the resulting DOM elements look correct. However, when showing the drawer I get an error in the bold line below due to "transition" being undefined:

if (this.options.swipeToOpen && SWIPE_TO_OPEN) {
userEvents.bind("press", function() { drawer.transition.cancel(); });

How should the drawer be initialized to avoid this error?

Drawer (Mobile)

answered on 13 Jan 2016

1 answer

516 views

kendo Ui grid with angular Js-Changing date format for excel Export column

Hello..

Not able to change the format of date column for the exported excel file using angular js and kendo ui grid.The below code works but date format is not as is in the customized format.could any one Please let me know how to customize the format(MMM d,yyyy) of the date cells while exprting to excel.

Html is defined as <div kendo-grid="statmentsGrid" k-options="gridCapOptions"> and the

Controller code goes as follows

$scope.gridCapOptions = {
dataSource: {
transport: {
read: function (options) {
accountStatementResource.capTrans({
transit: $userService.Transit
}, function (result) {
vm.capTrans = result;
options.success(result);
$scope.height = "auto";
/* next line for on demand loading of kendo grid */
vm.optionCallbackTwo = options;
}, function (err) {
});
}
},
pageSize: 5,
aggregate: [{ field: "EndingBalance", aggregate: "sum" }]
},
toolbar: ["excel"],
excelExport: function (e) {
var sheet = e.workbook.sheets[0];
for (var rowIndex = 1; rowIndex < sheet.rows.length; rowIndex++) {
var row = sheet.rows[rowIndex];
for (var cellIndex = 0; cellIndex <2; cellIndex++) {
row.cells[cellIndex].format = "MMM d, yyyy";
}
}
},
.......................................................

.......................................................

Grid

answered on 13 Jan 2016

1 answer

173 views

Synchronizing multiple dropdownlists that use remote data

I have two dropdown lists. Both are for the same object, but one dropdown is for the ID of the object while the other is for the name (so the user has multiple ways to search for it). It's a large list, so both use serverside filtering.

Is there a way to join them so that when one is selected, the other auto populates? I've tried an event on close, select, and change, and then that javascript event reapplies the datasource so that it can be in the other dropdown of the same object. However, that means it can no longer be used for going to the server and getting the remote data after it's applied the new datasource.

Any ideas?

Template for ID/Number

@(Html.Kendo().DropDownList().Value(Model)

.Filter("startsWith")

.MinLength(3)

.DataValueField("AccountNumber")

.DataTextField("AccountNumber")

.Name("AccountNumber")

.IgnoreCase(true)

.AutoBind(false)

.DataSource(source=>

{

source.Read(read=>

read.Action("GetAccountList", "Account"));

source.ServerFiltering(true);

})

.Events(events =>

{

events.Close("AccountSyncronize");

})

)

Template for Name

@(Html.Kendo().DropDownListFor(m => m)

.Filter("contains")

.MinLength(3)

.Name("accounts")

.AutoBind(false)

.IgnoreCase(true)

.OptionLabel("Select account...")

.DataTextField("Name")

.DataValueField("AccountId")

.DataSource(source =>

{

source.Read(read => read.Action("Editing_Custom", "Contact"))

.ServerFiltering(true);

})

.Events(events =>

{

events.Select("AccountSyncronize");

})

)

Rough Draft of Javascript Function

function _accountSyncronize()

{

var accountSource = new kendo.data.DataSource({ data: [this.dataItem()] });

$("#accounts").data("kendoDropDownList").setDataSource(accountSource);

$("#AccountNumber").data("kendoDropDownList").setDataSource(accountSource);

$("#accounts").getKendoDropDownList().select(1);

$("#AccountNumber").getKendoDropDownList().select(1);

}

DropDownList

answered on 13 Jan 2016

1 answer

79 views

Kendo UI Grid Ajax binding - Grid doesnot show data

$("#grid").kendoGrid({
                toolbar: ["excel"],
                excel: {
                    fileName: "Data_Export.xlsx",
                },

                dataSource: {
                    transport: {

                        read: {
                            //$.ajax({
                                type: "POST",
                                dataType: "json",
                                contentType: "application/json; charset=utf-8",
                                url: "Home.aspx/GetData",

                                data: '{}',
                                success: function (response) {
                                    alert("hi");
                                },
                                error: function (response) {
                                    alert("error");
                                }
                            //})

                        },

                    },
                    schema: {
                        model: {
                            fields: {
                                iID: { type: "string" },
                                szName: { type: "string" }


                            }
                        }
                    },
                    pageSize: 20,

                },
                height: 550,
                groupable: true,
                selectable: true,
                sortable: true,
                filterable: {
                    messages: {
                        clear: "Clear filter",
                    },
                    mode: "row"
                },
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{

                    field: "iID",
                    title: "iID",
                    width: 140,
                    filterable: {
                        cell: {
                            showOperators: true
                        }
                    }
                }, {
                    field: "szName",
                    title: "szName",
                    width: 140,
                    filterable: {
                        cell: {
                            showOperators: true
                        }
                    }
                }]

            });

/////////////////////////////////////////////////////////////////////////////////////

[WebMethod()]
        public static List<Records> GetData()
        {

            SqlDataReader dr;
            List<Records> recordsList = new List<Records>();

            using (SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["test"].ConnectionString))
            {
                using (SqlCommand cmd = new SqlCommand())
                {

                    cmd.CommandText = "select [iID],[szName] from [Sprinter].[tblEmployee] ";
                    cmd.CommandType = CommandType.Text;
                    cmd.Connection = con;
                    con.Open();
                    dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
                    if (dr.HasRows)
                    {
                        while (dr.Read())
                        {
                            string ID = dr["iID"].ToString();
                            string Name = dr["szName"].ToString();

                            recordsList.Add(new Records
                                            {
                                                iID = ID,
                                                szName = Name,

                                            });
                        }
                    }
                }
            }
            return recordsList;
        }

Ajax call does not execute success or error functions. The grid is empty. Can you please help what I am doing wrong.

Grid

answered on 13 Jan 2016

1 answer

231 views

Editor Bindings for angular's default sanitizer

When using the default sanitizer (ngSanitize), certain controls in the Editor do not get echoed back in Angular. See the attached screenshot from the demos page, there is no indication of text align right or of underline.

Is there a way to map custom classes onto the buttons? E.g. underline decorates a span with ".myUnderlineClass" or whatever was configured?

Editor

answered on 13 Jan 2016

4 answers

303 views

EditorFor is read only

Hi, I work for PeakRC and we have a contract but I don't have the time to look up our account info.

I am using Telerik controls in a new MVC app that we are writing.

I have tried many variations and now I have very simple view:
@using (Html.BeginForm("_CreateMessage", "Message", FormMethod.Post, new { id = "_CreateMessage" }))
{
<fieldset>
<div class="editor-field">
@(Html.Kendo().EditorFor(item => item.Body).Encode(false))
@Html.ValidationMessageFor(item => item.Body)
</div>
</fieldset>
}

and model:
[DataType(DataType.Html)]
[AllowHtml]
public string Body{ get; set; }

the editor displays but is read only.

Help,

kwilson@peakrc.com

Editor

answered on 13 Jan 2016

1 answer

190 views

How do I rename the tabs in the spreadsheet example?

In the spreadsheet example, we see tab labels which are Home, Insert, Data. However, they don't appear in the code for the example. How can I change the those labels? Thanks.

Spreadsheet

answered on 13 Jan 2016

1 answer

190 views

Stock Charts / Stock History

"Stock Charts / Stock History" ( http://demos.telerik.com/kendo-ui/financial/stock-history )

In the following example $("#company-filtering-tabs").kendoTabStrip was populated by local array (dataSource: ["Google", "Apple", "Amazon"]). I wonder how can I populate it from stocksDataSource and it's distinct field symbol.

stocksDataSource is retrieve from: http://demos.telerik.com/kendo-ui/content/dataviz/dashboards/stock-data-2011.json

and it's structure goes like:

[ { "date": "3/31/2011", "close": 586.76, "volume": 2028228, "open": 583, "high": 588.1612, "low": 581.74, "symbol": "1. GOOG" },

{ "date": "3/31/2011", "close": 586.76, "volume": 2028228, "open": 583, "high": 588.1612, "low": 581.74, "symbol": "1. GOOG" }, ....

{ "date": "3/31/2011", "close": 405, "volume": 6414369, "open": 403.51, "high": 406.28, "low": 403.49, "symbol": "2. AAPL" }, ....

{ "date": "13/31/2011", "close": 382.2, "volume": 14464710, "open": 381.29, "high": 382.276, "low": 378.3, "symbol": "3. AMZN" }, ....

]

Thank you for your answers!

Charts

answered on 13 Jan 2016

1 answer

642 views

Manually handle grid paging on asp.net mvc controller

I have a kendo grid that uses paging on the ajax read. The dataset is too large for me to realistically load completely into memory, but my view model has a couple of intensive calculated fields.

Ideally, I would like the ToDataSourceResult KendoUI extension to work on the IQueryable so the filters and paging from the grid don't work on the entire dataset, but so I can populate the intensive calculated fields on the results that need to be returned.

Alternatively, if I could continue to use kendoui's paging ui, but handle it manually on the controller I could turn off the kendui filtering. It seems that the ToDataSourceResult would either duplicate any paging I did, or it would remove the paging from the UI.

What is the suggested way to handle this?

Grid

answered on 13 Jan 2016