Telerik Forums
Kendo UI for jQuery Forum
1 answer
408 views

Hi,

I have created a kendo-drop-down-list in angularjs. I called a web service for records. Suppose i got around 15 array object as in the response but kendo drop down list bind only 10 records. If i search from the filter then i can see respective data. but not visible all records in drop down list.

Please have a look with code as well. Let me know what is the issue.

<select id="CARRIER_NAME" class="form-control" kendo-drop-down-list k-options="carrierOptions" name="carrierName" ng-model="test.carrierName"></select>

 <script id="noDataTemplate" class="noDataTemplate" type="text/x-kendo-tmpl">
        <div> No data found. Do you want to add new item - '#: instance.filterInput.val() #' ? {{someAngularFunction()}}
      </div>
        <br />
        <button class="k-button add-new-item-btn" ng-click="addNew('#: instance.element[0].id #', '#: instance.filterInput.val() #')">Add new item</button>
    </script>

 

CallWebServiceFactory.getDropDownData(reqData).then(function Success(response) {
        if(response.isSuccess){
            $scope.carrierData = response.data;
             $scope.carrierOptions = {
             filter: "startswith",
              dataSource: $scope.carrierData,
              dataTextField: "name",
              dataValueField: "id",
              noDataTemplate: $(".noDataTemplate").html(),
              index: -1
        }; 
        }
     }, function(error) {
      console.log(error);
     });

Thanks,

Lokesh Pareek

Ianko
Telerik team
 answered on 12 Jul 2017
6 answers
703 views
I am not sure if this is specifically related to stored procedure, but at this point it the only thing I can think of.   I am still pretty green when it comes to Kendo, so perhaps I am doing something silly.

The scenario is pretty simple.

I have a stored procedure that retrieves product information.   This result set will never be that big, so I pass the data in the model to load the grid initially.

Once loaded, I want t use Ajax to manage the grid.   I add a read method called "Get" which should return a Json result converted into the form of the original request using the .ToDataSourceResult .  The Get method calls the same stored procedure that my Index method did to retrieve data.

The grid initially loads fine, and when I click on a page number the "Get" method is fired as expected

What happens next is that the grid disappears and is replaced with a text represenation of the Json results from the Get method.

When I trace the code I also note that the request object in the Get method has a count of 0 which makes me suspcious.

Here is my code:

CONTROLLER:

public ActionResult Index()
{
    var results = db.GetLanaugeProductInfo("MX", 11660).ToList();

    return View(results);
}

public JsonResult Get([DataSourceRequest]DataSourceRequest request)
{
     var results = db.GetLanaugeProductInfo("MX", 11660).ToList();
    
     return this.Json(results.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
}

VIEW

@model IEnumerable<NewGlobalProductCatalogue.Models.usp_IPCGetProductInfo_Result>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
@{string lang = "EN";}
@(Html.Kendo().Grid(Model)
      .Name("ProductInfo_" + lang)
      .Columns(columns =>
       {
            columns.Bound(c => c.ColumnName);
            columns.Bound(c => c.FieldName);
            columns.Bound(c => c.MasterDataValue);
            columns.Command(command => { command.Edit(); });
       })
       .DataSource(d => d
.       Ajax()
       .Read(r => r.Action("Get", "Product"))
       .Model(m =>
       {
             m.Id(p => p.FieldID);
             m.Field(p => p.ColumnName).Editable(false);
             m.Field(p => p.FieldName).Editable(false);
             m.Field(p => p.MasterDataValue).Editable(true);
        })
       .Update(u => u.Action("Update", "Product"))
      )
     .Pageable()
     .Editable(e => e.Mode(GridEditMode.InLine))
)


I've attached a couple of screen shots.   The first shows the grid after it is first loaded.  The second shows the raw data I get back when I click on page 2.

Hopefully someone will be able to tell me what is going on here, and point me in the right direction.

Many thanks.
Stefan
Telerik team
 answered on 12 Jul 2017
4 answers
786 views
How to filter the rows of hyperlink column.
Stefan
Telerik team
 answered on 12 Jul 2017
5 answers
5.3K+ views

Hello

I've got a treeview on a dark barkground. That way I can't see the expand/close arrow on each node tough its still there. So I wondered how I can change their colors. They are probably icons so changing color by CSS is not possible.I've found some examples many years ago that don't seem to work anymore. I've tried to affect the expand/collapse area in any way, but no changes will show up:

.k-icon .k-i-collapse .k-i-expand {
    background-color: #8ea03a !important;
    background: url("../image/arrowclose.svg") center center;
}
 
.k-treeview .k-plus {
    background-color:yellow !important;;
    color:yellow !important;;
}

 

So I wonder how can I change the color and/or expand/collapse icons of a treeview?

Regards

 

 

Tayger
Top achievements
Rank 1
Iron
Iron
 answered on 11 Jul 2017
1 answer
469 views
I am using jquery with kendoui grid, I found the table grid gone after I initialize it twice. Why the grid is gone?
Georgi
Telerik team
 answered on 11 Jul 2017
19 answers
2.6K+ views
I have a grid with expandable detail rows.  I only want to allow one row to be open at once, so when a user clicks the arrow to expand one row, it automatically closes all others.

I tried to adapt this code used with some previous Telerik libraries...

function toggleClick(expand) {
            var grid = $("#Orders").data("tGrid");
            grid.$rows().each(function () {
                if (expand) {
                    grid.expandRow(this);
                }else{
                    grid.collapseRow(this);
                }
            });
        }
        function expandDetails() {
            toggleClick(true);
        }
        function collapseDetails() {   
            toggleClick(false);
        }

...but Kendo doesn't like the '$rows().each'.  Can someone point me in the right direction?
Gilbert van Veen
Top achievements
Rank 1
 answered on 11 Jul 2017
3 answers
869 views

Hi folks,

 I am having the following column template :

<script id="gridTemplate" type="text/x-kendo-template">
    <tr data-uid="#= uid #">
        <td>
            <input type="color" kendo-color-picker="colorPicker" k-palette="trend.colors" value="#= color #" on-change="trend.changeColor(colorPicker.value(), this)" />
            <button type="button" style="background-color:black; float:right;" class="btn btn-default btn-xs white" ng-click="trend.deleteSeries('#= tag#');"><span class="glyphicon glyphicon-remove"></span></button>
        </td>
        <td>
            #= tag#
        </td>
        <td>
            #= description#
        </td>
        <td>
            #= unit#
        </td>
    </tr>
</script>

The problem is with setting the color of the color picker (via the value attribute) in the first column.Initially in the dataItem, the value of color was in the form of #rrggbb, but this was resulting in an error (because of the "#" symbol). I changed it in rgba() and it was working fine with 2014 kendo release. Today I update to 2015 and now it does not work. Any suggestion how to fix it?

Ianko
Telerik team
 answered on 11 Jul 2017
4 answers
746 views

Hi,

 

We have an issue in our application where the validation tooltip does not hide even after the data is corrected.

 

Following are the controls involved and the flow that causes the issue to be shown:

1. We had a kendo grid on our page that we created using the MVC HTML helpers

2. The grid has a editor template ( which is another view ) and the edit mode is pop-up.

3. On the editor pop-up, we have a textbox whose max string length is 50 characters.

4. The application is running on Chrome.

5. When I edit a row the editor pop-up opens with the values populated in the respective fields.

6. I add 51 characters in the field with max length of 50 characters. This causes the kendo validator to show the tooltip with the validation message for maximum allowed length.

7. I delete a character from the textbox such that the resultant length of the string is 50 characters, which is the max allowed number of characters, and so I expect that when I lose focus (tab out or click on some other location in the page), the tooltip will dissapear. However, the tooltip is still open even after the focus has been moved out of the textbox.

8. I again set focus in the textbox and delete another character such that the resultant length of the string is now 49 characters. I lose focus from the text box (tab out or click on some other location in the web page) and I the tooltip is now removed (hidden).

 

Unfortunately, this is not an issue that I could reproduce (since it's inconsistent) and hence I could not create a dojo.

Could you please look into this and let me know if this is a known issue and the solution to this problem,

 

This behaviour, as I've said, is inconsistent and is occurring across multiple locations in the application.

I was trying to find a link that would explain how kendo initializes it's validators on it's editor templates so that I could debug the locations to understand the flow of code or the conditions that trigger the validations.

 

Any help would be appreciated.

Thanks.

Preslav
Telerik team
 answered on 11 Jul 2017
1 answer
229 views

When server paging is enabled, there is no easy way to find out when request ended after changing page from code. by dataSource.page(2). the page method does not return promise.

 

Best Regards

Marcin

Stefan
Telerik team
 answered on 11 Jul 2017
4 answers
547 views

I have a reasonably complicated grid working really well with multiple level grouping on the latest version v2017.2.504. Within my grid I have 3 text columns and a number of numeric columns. The first 2 text columns are group levels and are hidden in the grid. The third text column is used to display the row details and also has a groupfootertemplate which displays the appropriate grouping total text as below: 

groupFooterTemplate: function (e) {
    if (e.PaidToDate.group === undefined) {
    }
    else {
        if (e.PaidToDate.group.field == "Category") {
            return "<span class='boldFont'>Total for " + e.PaidToDate.group.value + "</span>"
        }
        else {
            return "<span class='boldFont'>TOTAL " + e.PaidToDate.group.value + "</span>"
        }
    }
},

 

This works perfectly so when displaying the group footer at the category level it correct displays the "Total for ...." text and when displaying the group footer for the higher level heading field it displays the text "TOTAL ...". The problem comes when I attempt to export the grid to Excel. If I don't do the "e.PaidToDate.group === undefined" check the export fails and using developer tools to check the error it reports that it couldn't access the field property of undefined. Clkearly I've got round that error by doing the undefined check as above but this means that the Excel export gets the total rows but without the text description of what the total is. It looks like this must be a bug as it's clearly doing something different with the group footer when exporting to Excel - the symptoms are actually the same as what the grid did initially before I updated to the latest Kendo UI so is it possible that the handling of the grid footer template in the Excel export has not been updated in line with the grid itself? I made sure I updated all relevant Kendo scripts etc and the list included in the page are below:

<script language="javascript" type="text/javascript" src="/JSLibs/js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="/JSLibs/js/kendo.all.min.js"></script>
<script language="javascript" type="text/javascript" src="/JSLibs/js/jszip.min.js"></script>
<link href="/JSLibs/css/kendo/kendo.common.min.css" rel="stylesheet"/>
<link href="/JSLibs/css/kendo/kendo.silver.min.css" rel="stylesheet"/>

 

Any suggestions?

Stefan
Telerik team
 answered on 11 Jul 2017
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
Licensing
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?