Questions on Kendo UI for jQuery Forum

4 answers

337 views

MVC ToDataSourceResult - query called twice?

Hello,

We have an MVC application using Entity Framework as the interface into our database. We recently added some database logging to our application in order to do some performance analysis. I noticed that in the Read methods for our Kendo grids our SQL seems to be executing twice. Drilling into this a bit more, I found that the Kendo.MVC.Extensions ToDataSourceResult() method against an IQueryable was the place where the double execution was happening. A few of our queries take a fair amount of time to execute, so having them run twice is a performance drag. I was hoping to get some help determining why this might be happening. My best guess is that this is due to paging needing to find out the total row count and then a second execution to get the actual data, but it's only a guess. If your team could help out, I'd really appreciate it. Thanks!

Regards,
Brian

General Discussions

answered on 12 Jun 2014

9 answers

538 views

3 cascade remote dropdownlists

I have 3 cascade dropdownlists (eg. country, state, city) and I use remote datasource. Everything works fine until I want to create an update page using ajax calls. Assuming that I have multiple records and each record contains those data. I would like to have an edit button in each record. When a user clicks the edit button, it pop-ups the form for editing. In this case, there is only one edit form and I used jquery ajax to get the data from server and binding to the form.

The problem is that I cannot make the default value for those dropdownlists because when I perform datasource.read() to get the data from server, I don't know that when the datasource.read() will finish so that I can set the default value in the dropdownlist. If I put some code for setting the default values after the datasouce.read() line, the code will be executed before the datasouce.read() finishes getting data from server. So, that code is worthless.

In addition, I saw you solution about setting the default value in dropdownlist. But the case doesn't work for me. Since, in my case I need to change the default value of dropdownlists dynamically.

Do you have a solution for this kind of problem? or Do you have an event that can capture when the datasource.read() will finish?

Please point me out of this trouble. Thank you.

DropDownList

answered on 12 Jun 2014

1 answer

1.1K+ views

[Solved] Disable Grid Update button on Popup Edit

hi,

I have Grid who's id is "gWriter" with popup box edit.

And on Popup Box we have another grid "gAgent" which is also edited in popup mode.

I am trying to enable/disable the update/Save button when Edit model(e.model.new) is "new " of "gAgent" grid with below statement.

$(".k-edit-form-container .k-state-disabled").addClass("k-grid-update").removeClass("k-state-disabled");

$(".k-edit-form-container .k-grid-update").addClass("k-state-disabled").removeClass("k-grid-update");

But issue is the above statement disable/enabling the buttons on both the grids instead of only "aAgent" Grid.

Thanks,
Chatrapathi Chennam

Grid

answered on 12 Jun 2014

2 answers

175 views

[Solved] Kendo Grid columns revert to evenly spaced when a tooltip is added to content

Greetings,
I have a problem occurring when I add a tooltip to an anchor in a grid cell. The column widths are ignored and rendered spaced evenly when I explicitly set their width in the grid config.

I have a grid defined as follows:

@(Html.Kendo().Grid<SomeCollection>()

.Name("grdTest")

.Columns(columns =>

{

columns.Bound(t => t.Column1).Width(25).Title("Column1"

)

           .ClientTemplate("#if(Param1!=null){# <a class='locationLink' href='javascript:void(0)'data-param1='#=Param1#' data-param2='#=Param2#'>#=Column1#</span> #} else {##}#");

columns.Bound(t => t.Column2).Width(100).Title("Column2");

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(100)

.Read(read => read.Action("MyMethod", "MyController", @Model))

.ServerOperation(true)

)

.Pageable()

.Scrollable(s => s.Height("auto"))

.Reorderable(reorder => reorder.Columns(true))

.Resizable(resize => resize.Columns(true))

.Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn).AllowUnsort(true))

.Navigatable()

.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))

.Sortable()

)

I need to attach a popup to column1's hyperlink. I am doing this in the load function as follows:

<script type="text/javascript">

$(document).ready(function () {

var grid = $("#grdTest").kendoGrid().data("kendoGrid");

grid.table.kendoTooltip({

filter: "a.locationLink",

position: "top",

width: 500,

height: 250,

content: {

url: '@Url.Action("PopupViewContentMethod","Controller")'

},

requestStart: function (e) {

e.options.data = {

parameter1: $(e.target[0]).attr("data-parameter1"),

paremeter2: $(e.target[0]).attr("data-parameter2")

}

});

</script>

I narrowed down a problem to the code I added for the tooltip above. When I remove it my columns are rendered with the with I set in the configuration. When I add the popup code then the columns become evenly spaced with a ellipse on column overflows.

Any Ideas?

Grid

answered on 12 Jun 2014

1 answer

338 views

Datasource and complex JSON

Hi!
I want to fill a grid with a complex json returned from a webservice.
My json contains two things:
> "data": array with the records that will fill the grid
> "columns": array with the config(layout) of the grid

I have successfully filled the grid with the "data" by specifying the model data.
My problem is that i cannot get the "columns" from the datasource. Is there a way to do it?

Here is my JSON

001.{

002. "data": [

003. {

004. "id": 0,

005. "firstname": "Hudson",

006. "lastname": "Lynn",

007. "gender": "male",

008. "email": "hudsonlynn@emtrak.com",

009. "phone": "699-434-2739",

010. "address": "70 Delmonico Place, Roberts, New York",

011. "birthday": "03/07/1968",

012. "currency": "CHF"

013. },

014. {

015. "id": 1,

016. "firstname": "Michelle",

017. "lastname": "Stanton",

018. "gender": "female",

019. "email": "michellestanton@emtrak.com",

020. "phone": "699-374-6225",

021. "address": "55 Gotham Avenue, Makena, Maryland",

022. "birthday": "14/03/1965",

023. "currency": "CHF"

024. },

025. {

026. "id": 2,

027. "firstname": "Marsh",

028. "lastname": "Reilly",

029. "gender": "male",

030. "email": "marshreilly@emtrak.com",

031. "phone": "699-546-0025",

032. "address": "22 Mayfair Drive, Westmoreland, Nevada",

033. "birthday": "17/07/1988",

034. "currency": "CAD"

035. }

036. ],

037. "columns": [

038. {

039. "field": "firstname",

040. "title": "Frist Name",

041. "width": 200,

042. "attributes": {

043. "class": "",

044. "style": "text-align: left;"

045. },

046. "headerAttributes": {

047. "class": "table-header-cell",

048. "style": "text-align: left;"

049. }

050. },

051. {

052. "field": "lastname",

053. "title": "Last Name",

054. "attributes": {

055. "class": "",

056. "style": "text-align: left;"

057. },

058. "headerAttributes": {

059. "class": "table-header-cell",

060. "style": "text-align: left;"

061. }

062. },

063. {

064. "field": "gender",

065. "title": "Gender",

066. "attributes": {

067. "class": "",

068. "style": "text-align: left;"

069. },

070. "headerAttributes": {

071. "class": "table-header-cell",

072. "style": "text-align: left;"

073. }

074. },

075. {

076. "field": "email",

077. "title": "e-mail",

078. "attributes": {

079. "class": "",

080. "style": "text-align: left;"

081. },

082. "headerAttributes": {

083. "class": "table-header-cell",

084. "style": "text-align: left;"

085. }

086. },

087. {

088. "field": "phone",

089. "title": "Phone Number",

090. "attributes": {

091. "class": "",

092. "style": "text-align: right;"

093. },

094. "headerAttributes": {

095. "class": "table-header-cell",

096. "style": "text-align: right;"

097. }

098. },

099. {

100. "field": "address",

101. "title": "Address",

102. "attributes": {

103. "class": "",

104. "style": "text-align: left;"

105. },

106. "headerAttributes": {

107. "class": "table-header-cell",

108. "style": "text-align: left;"

109. }

110. },

111. {

112. "field": "birthday",

113. "title": "Birthday",

114. "attributes": {

115. "class": "",

116. "style": "text-align: center;"

117. },

118. "headerAttributes": {

119. "class": "table-header-cell",

120. "style": "text-align: center;"

121. }

122. },

123. {

124. "field": "currency",

125. "title": "Currency",

126. "attributes": {

127. "class": "",

128. "style": "text-align: center;"

129. },

130. "headerAttributes": {

131. "class": "table-header-cell",

132. "style": "text-align: center;"

133. }

134. }

135. ]

136.}

Here is how i fill the datasource

01.var customersSource = new kendo.data.DataSource({

02. transport: {

03. read: {

04. url: crudServiceBaseUrl + "/customers.json",

05. dataType: "json"

06. }

07. },

08. schema: {

09. data: "data"

10. }

11. });

Here is my gridOptions

1.$scope.mainGridOptions = {

2. dataSource: customersSource,

3. //columns: customersSource.columns???,

4. height: 500,

5. scrollable: true,

6. selectable: true

7. };

Data Source

answered on 12 Jun 2014

5 answers

369 views

Remember splitter position

Some of the open source splitter plugins have a rememberme option that remembers the position of the splitters between page refreshes. Normally they store this information in a cookie, but sometimes you can override and use localStorage instead. Does the kendoSplitter have a similiar rememberme function? Would it be difficult t write one?

Splitter

answered on 12 Jun 2014

1 answer

526 views

Code39/Code93 do not render using Rotativa

I am using the NuGet package Rotativa which in trun uses wkhtmltopdf.exe in a MVC 4 web application to generate PDF barcode documents from a standard MVC view. While QRcode and Code128 barcodes work fine, Code39 and Code93 do not.

The code to invoke the view is:

return (new Rotativa.ActionAsPdf("PrintTrailerPage", new { id = id, barcodeType = Request.Params["barcodeType"] ?? "qrcode" }) { FileName = String.Format("Trailer Page for {0}.pdf"

, model.DocumentName, model.BarcodeValue, model.ID), PageSize = Rotativa.Options.Size.Letter, PageOrientation = Rotativa.Options.Orientation.Portrait, PageMargins = { Left = 0, Right = 0, Top = 0, Bottom = 0 } });

Curiously, PrintTrailerPage, which Rotativa invokes, always renders properly when displayed directly in the browser. Do you have any ideas or insight that might help remedy this issue?

Barcode

answered on 12 Jun 2014

1 answer

217 views

Horizontal swipe for Tabstrip(mobile)

Is there a way in kendo tabstrip(mobile) for horizontal swipe in latest version.

I am looking for similar feature as mentioned in post @http://www.telerik.com/forums/swipe-scrolling-tabstrip

TabStrip

answered on 12 Jun 2014

1 answer

3.0K+ views

Any way to right-align value in field for input?

Hi there,

I'm using a masked text box as an incell editor for a grid. I want to right-align the value in the editor field. Please see the attached PNG file for how it looks currently. I tried adding a class to the input field that right-aligned the value, but this right aligned the value+spaces to the right. I'd like the last digit in the value to be over to the right edge of the input.

Pertinent code is:

columns: [

{

field: "accounting_category",

title: "CATEGORY"

},

{

field: "gl_code",

title: "GL CODE",

editor: glCodeMaskedTextEditor

}

]

and

function glCodeMaskedTextEditor(container, options) {

$(

'<input class="gl-code-edit" data-text-field="gl_code" 

               data-value-field="gl_code_id" data-bind="value:'

+ options.field + '"/>')

.appendTo(container)

.kendoMaskedTextBox({

mask: "99999999999999999999",

promptChar: " "

});

}

Any way to do this? Thanks! :)

MaskedTextBox

answered on 12 Jun 2014

3 answers

213 views

Problem with dropdown menu with link on the parent (ipad)

Hi,

we've been using the MVC wrapper for Kendo UI Menu widget.

Otherwise it's working fine, but when testing with iPad, the dropdown menu won't show up if the parent menu item is a link. When clicking the parent item, instead of showing the dropdown, it simply opens the link and effectively refreshes the page.

I tried removing the link, and then the dropdown shows up without problems.

The link is created with the .Action() call on the helper. Should the Menu widget support dropdowns on touch screens in this scenario?

Menu

answered on 12 Jun 2014