Telerik Forums
Kendo UI for jQuery Forum
1 answer
1.0K+ views

Hello all,

I would like to append the badge count of number of records (retrieved in the grid that appears when a Kendo TabStrip Item is selected) to the TabStrip Item's Text. So basically this is something like changing the TabStrip Item's Text dynamically. It would be really helpful if someone could suggest any ideas on how to achieve this. Thank you in advance!! 

Dimitar
Telerik team
 answered on 08 Jun 2018
2 answers
356 views

Hi all,

I am implementing the editor with Microsoft Dynamics CRM. The problem I have is that I don't have a specific URL for thumbnails. I can only query the full size images. Is there a way to do either of these things:

- Bypass the url call and provide the base64 as img src directly?

- Reduce the size image after the url call has been made in some callback function?

Thanks a lot,

Nicolas

Veselin Tsvetanov
Telerik team
 answered on 08 Jun 2018
1 answer
1.0K+ views
<input kendo-auto-complete ng-model="filter.FilterValue" k-data-source="filteredData(data)" style="width: 100%;" />

 

is it possible to dynamically change the data source currently , I get errors when trying. Any ideas why. ( I am quite new to angularJs and kendo)

Joana
Telerik team
 answered on 08 Jun 2018
4 answers
745 views

Hello!

I am having the following problem: If at least one simultaneously fired create/update/delete fails, Kendo grid keeps the dirty attribute even for the successfully executed create/update/delete operations. This leads to an inconsistent state between the client and the database on the server.

I am providing an isolated example of the problem. Therefore I have modified an official Kendo example by only setting the URL of the update service to a non-existing one: http://dojo.telerik.com/ohAle

Please do the following steps to reproduce the problem:

1. Click (at least one time) on "Add new record"
2. Edit (at least one) an existing record
3. Click on "Save changes": One create and one update request will be fired (see network tab of browser developer tools)
4. The create request will be successful, but the update request will fail (because of wrong URL)
5. Click again on "Save changes": Update request will be fired again, but create request too although it was successful the last time (because of dirty states)
6. You can repeat step five as often as you like. When you restart the example, you will see that all the before create requests where successful

In our project we also integrated the feature to preserve the dirty indicators, which also makes it possible for the user to see the above described problem visually, but it's not important for the isolated example to reproduce the problem: http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/preserve-the-dirty-indicator-in-incell-editing-and-client-operations

I feel like the Kendo grid should be able to handle the success of simultaneously fired create/update/delete requests independently out of the box because this is a very common scenario. However, I found a possible workaround (http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/sync-grid-changes-with-single-request), but this would require a lot of additional coding on the client and server.

Thank you in advance for your support.

 

Best regards,

Kaan

Pavlina
Telerik team
 answered on 07 Jun 2018
2 answers
757 views

Hello,

Is there a way to create a Line chart that shows a product price variation and calculates min-max values in order to create a range area on the fly? Regarding the min-max values, they are calculated every week as the arithmetic mean of the last 5 weeks. I've attached a example of how I it's supposed to be (the week value can be out of the range area).

I have been trying to merge Line and Range Area charts (on dojo) without success. This is my last try, but with static min-max values, I still have to figure out how to calculate the values dinamically:

<script>
        function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "Product price"
                },
                legend: {
                    position: "bottom"
                },
                chartArea: {
                    background: ""
                },
                series: [{
                    type: "rangeArea",
                    data: [[5, 11], [5, 13], [7, 15], [10, 17]]
                }], series: [{
                    name: "Product A",
                    data: [7, 16, 13, 12, 10]
                },{
                    name: "Product B",
                    data: [6, 9, 13, 14, 12]
                },{
                    name: "Product C",
                    data: [3, 5, 14, 12, 13]
                }], seriesDefaults: {
                    type: "line",
                    style: "smooth"
                },valueAxis: {
                    labels: {
                        format: "${0:n2}"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: -10
                },
                categoryAxis: {
                    categories: ["Week11", "Week12", "Week13", "Week14", "Week15"],
                    majorGridLines: {
                        visible: false
                    },
                    labels: {
                        rotation: "auto"
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>

Regards,

Wellington

Wellington
Top achievements
Rank 1
 answered on 06 Jun 2018
1 answer
277 views

I have a selectable grid (only one row can be selected). When an item is selected, it is bound to a form for editing. Textbox in the form has a custom binding 'valueInput'. If I select a several different items from a grid and then try to edit current selection in the form, all previosuly selected items are modified. If I change binding to built-in 'value' then it works fine (only last selected item gets modified). How to fix it ?

How get the incorrect behavior:

1. Select an element from grid.

2. Select another element from grid.

3. Modify textbox value.

4. All previously selected items will change.

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
 
 
<body>
  <div class='form'>
    <input data-bind="valueInput: text" />
  </div>
  <div class='grid'></div>
  <script>
    kendo.data.binders.valueInput = kendo.data.Binder.extend({
        init: function (element, bindings, options) {
            kendo.data.Binder.fn.init.call(this, element, bindings, options);
            let that = this;
            $(that.element).on("input", function () {
                that.change();
            });
        },
        refresh: function () {
            let that = this;
            let value = that.bindings["valueInput"].get();
            $(that.element).val(value);
        },
        change: function () {
            var value = this.element.value;
            this.bindings["valueInput"].set(value);
        }
    });
     
    function change(e)
    {
      let item = e.sender.dataItem(e.sender.select());
      kendo.bind($(".form"), item);
    }
     
    let data = [{text: "a"},{text: "b"},{text: "c"},{text: "d"}];
    $(".grid").kendoGrid({dataSource: data, selectable: true, change: change});
  </script>
</body>
</html>
Tsvetina
Telerik team
 answered on 06 Jun 2018
3 answers
514 views
Hello, have  grid with popup  In pop-up add/edit  ID column which is hidden in data-column declaration shows up in pop-up Add/Edit Window of grid and ExpiryDate which is type in DataSource schema its editor is coming as Textbox, i want to replace by DateTime picker.

I want to resolve following things.
1) Some fields like "ID"  want to be hidden in Popup Add/Edit mode and set default ID value for item to be 0
2) For should be DatePicker in Popup Add/Edit mode
3) I want to mask in showing "#" in all number only showing last 4 .
4) OriginalCardNumber has credit card is there any way by which we can calculate OriginalCardNumber to Masked CardNumber for value in CardNumber field

here is the code:

<div data-role="window" id="ImportPNRCreditCardPricingSettlementWindow"
         data-animation="false"
         data-title="Card Details" data-modal="true"
         data-visible="false" data-bind="visible: isCreditCardCRUDWindowVisible, events:{open: OnImportPNRCreditCardWindowOpened}">
        <div data-role="grid" id="ImportPNRCreditCardGrid" data-editable='{"mode" : "popup", "confirmation" : "Are you sure you want to delete this Item?"}' data-toolbar="['create']"
             data-columns='[
            { "field": "ID",hidden: true },
            {"field": "lkpTypeName", hidden: true },
            {"field": "CardName", title:"Name"},
            {"field": "CardNumber", title:"CardNumber"},
            {"field": "OriginalCardNumber", hidden: true },
            {"field": "ExpiryDate", title:"Expiry Date"},
            {"field": "IssuingCompany", title:"Issuing Company"},
            {"field": "BillingEmail", title:"Billing Email"},
            {"field": "ValidFrom", title:"Valid From"},
             { command: ["edit", "destroy"], title: " ", width: "250px" }
             ]'
             data-bind="source: UserDefinedCreditCardDS" ></div>


Script:

function ImportPNRCreditcardDS() {
     new kendo.data.DataSource({
        data: [],
        schema: {
            model: {
                id: "ID",
                fields: {
                    ID: { type: "number" },
                    lkpTypeName: { type: "string" },
                    CardName: { type: "string" },
                    CardNumber: { type: "string" },
                    OriginalCardNumber: { type: "number" },
                    ExpiryDate: { type: "date" },
                    IssuingCompany: { type: "string" },
                    BillingEmail: { type: "string" },
                    ValidFrom: { type: "date" },
                    CreditCardType: { type: "string" },
                    CreditCardCategory: { type: "string" }
                }
            }
        }
    });
}

 

Inside ViewModel , a property is declared:

var testVM= kendo.observable({
UserDefinedCreditCardDS: function(e) {
            return ImportPNRCreditcardDS();
        },
});




Georgi
Telerik team
 answered on 06 Jun 2018
1 answer
1.1K+ views

Hi, I have a problem on Kendo Grid with a field that has a lot of text to show in a column only, so I thought to show it as row, as it's displayed in attached image.
The problem, is that when grouping any column, it doesn't work correctly, it's displayed in the following example.
Is there any workaround or feature about that?

  <div id="grid"></div>
<script>
$("#grid").kendoGrid({
    groupable: true,
    columns: [
    {
      title: "Name",
      field: "name"
    },
    {
      title: "Birthdate",
      field: "birthdate"
    },
    {
      title: "City",
      field: "city"
    },
    {
      title: "Country",
      field: "country"
    },
    {
        title: "Phone",
        field: "phone"
    },
    {
      hidden: true,
      title: "Descripcion",
      field: "descrip"
    }
  ],
  editable: true,
  dataBound: function (e) {
        dataBoundGridMain(e)
  },
  dataSource: [
    { name: "Jane Doe", birthdate: new Date("1995/05/04"), city: "London", country: "UK", phone: "555-444-333", descrip: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium elit in mauris laoreet molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent et leo tellus." },
    { name: "Jhon Doe", birthdate: new Date("1997/05/04"), city: "Londo", country: "UK", phone: "555-444-356", descrip: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium elit in mauris laoreet molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos." },
    { name: "Jhon Doe", birthdate: new Date("1997/05/04"), city: "New York", country: "USA", phone: "555-444-356", descrip: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium elit in mauris laoreet molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos." }
  ]
});
   
  function dataBoundGridMain(e){
    var kendoGrid = e.sender;
    var rows = kendoGrid.tbody.children();
    var dataItem = null;
    var rowElement = null;
    var dataRowGrid = kendoGrid.dataItems();
    var rowLen = dataRowGrid.length, index = 0;
     
    console.log("test")
     
    for (index; index < rowLen; index++) {
      rowElement = rows[index];
      dataItem = dataRowGrid[index];
        if (dataItem.hasOwnProperty('descrip')) {
        addDescriptionTextNewRow(kendoGrid, dataItem, $(rowElement));
      }
    }   
  }
   
  function addDescriptionTextNewRow(kendoGrid, dataItem, rowElement){
    var rowsElement,
        title,
        value,
        colsNumber,
        rowRender;
 
    if (dataItem.hasOwnProperty('descrip')) {
        title = 'Description';
        value = dataItem.descrip;
    }
    colsNumber = kendoGrid.columns.length
    rowsElement = "<tr><td colspan=" + colsNumber + " style= 'color:#434343; font:12px DroidBold; text-align: left; border-bottom:1px; height: 8px; padding:5px 0 0 5px;' >" + title + "</td></tr>";
    rowsElement += "<tr><td colspan=" + colsNumber + " style= 'color:#434343; font:Arial 10px; text-align: left' >" + value + "</td></tr>";
    rowRender = $(rowsElement);
    rowElement.after(rowRender[1]);
    rowElement.after(rowRender[0]);
  }
   
</script>
Stefan
Telerik team
 answered on 06 Jun 2018
2 answers
234 views

Hi , i am new to KendoGrid and have few questions . could you please provide your valuable input on this as i am not able to find the correct solution for below.

 

#1 - I am aware of custom validation , but is it possible to attach on-fly pattern check while editing  the cell value , if the value doesn't match with pattern the value should be discarded automatically  similar to inbuilt numeric check when we define type=numeric and try to provide character. 

#2 - i need some conversion while editing , such as lowercase to uppercase OR expand abbreviation such as 1k to 1000 ( k stand for 1000) . where i need to place this logic . Editor or Edit event ?

 

 

Eyup
Telerik team
 answered on 05 Jun 2018
3 answers
221 views
Hello,
            I have  inside Promise function that makes the accessibility  I have a grid and column has which is Kendo DropDownList. 
I wanted functionality like in this http://jsbin.com/judagiroyi/edit?html,js,output  but since my is not global cannot directly write editor code as below in grid:


data-columns='[{"field": "SettlementType", template: kendo.template($("\\#ImportPNRSettlementTypeTemplate").html()),
              editor: viewModel.ImportPNRSettlementTypeEditor, title: "Settlement Type"
             }
]'

it shows some error pointing to kendo script which is not correct and which means ImportPNRSettlementTypeEditor is not accessible. if i declare JavaScript with  function ImportPNRSettlementTypeEditor    and make  editor: ImportPNRSettlementTypeEditor  it works. What to do if want editor in my model? 
Tsvetina
Telerik team
 answered on 05 Jun 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?