Telerik Forums
Kendo UI for jQuery Forum
1 answer
53 views

I would like to upgrade but at this point it is not possible. What I want to do is have a grid show up as initially collapsed so I have

       static onDataGridBound(e) {
            var grid = e.sender;
            $(".k-grouping-row").each(function (e) {
                grid.collapseGroup(this);
            });
      }

This works just fine.

 Then I want to be notified when one of the groupings are expanded so some of the column text is not duplicated so I changed it to

       static onDataGridBound(e) {

            var grid = e.sender;
            $(".k-grouping-row").each(function (e) {
                grid.collapseGroup(this);
                // While waiting for groupExpand
                $("a:first",this).on("mousedown", Gartner.GlobalAgendaTabGrid.grid_detailExpand);
            });
      }

This works partially in that the function grid_detailExpand gets called when I expand but the group doesn't get expanded. What am I doing wrong?

Thank you.

Kevin

 

Tsvetina
Telerik team
 answered on 12 Feb 2019
6 answers
1.6K+ views

Hello,
I'm new to this, so this might be a simple answer, but I could for the life of me not locate it.

The page I am working on has a kendoDropDownList that work fine

       kendo.syncReady(function () { jQuery("#type").kendoDropDownList({ "dataSource": { "transport": { "read": { "url": "https://my-URL.COM", "data": getID }, "prefix": "" }, "schema": { "errors": "Errors" } }, "dataTextField": "tcode", "height": 300, "dataValueField": "tid" }); });

I then have some javascript that displays the data

        var getType = $("#type").val();
        console.log(getType);

What I now need is this to return 2x dataValueField . I've tried

        <script>
        kendo.syncReady(function () { jQuery("#type").kendoDropDownList({ "dataSource": { "transpormet": { "read": { "url": "https://my-URL.COM", "data": getID }, "prefix": "" }, "schema": { "errors": "Errors" } }, "dataTextField": "tcode", "height": 300, "dataValueField": "tid" }); });
        kendo.syncReady(function () { jQuery("#name").kendoDropDownList({ "dataSource": { "transport": { "read": { "url": "https://my-URL.COM", "data": getID }, "prefix": "" }, "schema": { "errors": "Errors" } }, "dataTextField": "tcode", "height": 300, "dataValueField": "ta" }); });
        </script>

with the javascript reading

        var getType = $("#type").val();
        console.log(getType);
        var getName= $("#name").val();
        console.log(e);

But getName is "undefined", so, I assume, the second JQuery is not being run.
What's the best way to a second value using the same dropdownlist selection?
ThanK you


Gerald
Top achievements
Rank 1
Iron
Iron
 answered on 12 Feb 2019
2 answers
271 views

Hello,

I apologize if this isn't the correct place for this question, but wasn't sure how else to get help with it.

We are using Kendo.Mvc.Dll with our web page and we are running into some issue.  We are receiving errors on two of our pages and can't figure out why it is failing.  The following is the situation:

Web page deployed to machine -> Can't access the two pages, get the attached two errors (1 for each page) on any machine that access the website.
We have two developer computers that can get the error when debugging the solution.
We have two other developer computers that can NOT get the error when debugging the solution and the pages work fine with the grid.

Could anyone provide any direction/support on what may be the cause?  I've check to make sure all the relevant stuff is installed on the machine and it appears that there isn't anything missing that I can tell between a working and non-working computer.

We are using Kendo.Mvc.dll - 2014.2.903.340 -> Kendo Web Extensions for ASP.NET MVC

Thank you!

Justin
Top achievements
Rank 1
 answered on 11 Feb 2019
10 answers
2.6K+ views
Hello, I am using the Kendo MVC Grid and would like to know how to refresh the grid server-side after one of the AJAX row operations such as Destroy, Update, or Create. The reason for this is I have my columns "ranked" let's say from 0 to 100. A user can update the row that is ranked 100 to 3 and all items in between must be re-ranked to account for the update. This works fine server-side, but the client does not actually rebind. Is there a javascript method that I can run after the AJAX operation succeeds similar to the "Error" method used to trap and show AJAX errors?

Thank you as always,

Scott
Alex Hajigeorgieva
Telerik team
 answered on 11 Feb 2019
6 answers
168 views
Presently, the draggable zone is on the entire node. It would be nice to have the possibility to specify a dragging element in the node instead. You can see the dragging icon on my screenshot.

The initialization of the control could be something like that with the dragFilter option:

$("#categories-treeview").kendoTreeView({
    dragAndDrop: true,
    dragFilter: ".drag-handler"
});


This feature would answer some requested feature here:

I already have the solution working on my side and I can give it to Telerik anytime. This is as simple as 3-4 lines of code added to the TreeView control. I think it could be a great addition to the control.

Dimitar
Telerik team
 answered on 11 Feb 2019
2 answers
369 views

I have a grid that displays steps in a process.  The users are allowed to move rows up or down, reordering the steps.  If that happens a jquery method is called that updated the sequence numbers on each row.  The sequence numbers are stored with the data in the database so at the end of this process, the sync() method is called.  All works as expected except that as the Update method is called for each of the rows that was updated, the Destroy method will be called for one of the rows and the row is deleted from the database:

function resequence(grid) {
    for (var i = 0; i < grid.dataSource.data().length; i++) {
            grid.dataSource.data()[i].ActionSequenceNum = i + 1;
            grid.dataSource.data()[i].dirty = true;
        }
        grid.dataSource.sync();
}

 

I can't seem to figure out why one row is also triggering the Destroy method.

Charlie
Top achievements
Rank 1
 answered on 11 Feb 2019
5 answers
112 views

I have a spreadsheet with the first 2 columns frozen.

 

I want to hide the non-frozen columns but when I do this the first column A is repeated in the non-frozen column section.

See the example dojo and image attached - click the "Hide non frozen columns" button to see the problem

 

Thanks

Tony

Veselin Tsvetanov
Telerik team
 answered on 11 Feb 2019
5 answers
1.0K+ views

Hi team,

 

The noDataTemplate configuration option defaults to string "NO DATA FOUND."

It seems this is not localized in kendo.message.xx-XX.js

 

Please advise.

 

Best regards.

Alex Hajigeorgieva
Telerik team
 answered on 11 Feb 2019
7 answers
662 views

Hello, have Multiple DropDownList MVVM with same/shared DataSource. The problem is when selected a value from the earlier selected values get reset. 
        I tried having multiple  as that even  works. I also tried in this https://docs.telerik.com/kendo-ui/controls/editors/multiselect/troubleshoot/troubleshooting#selected-item-is-lost-when-bound-to-shared-datasource 
         That also   Here is my code.

Inside Template:

<script id="SegmentSelectionGridRowTemplate" type="text/x-kendo-template" class="AirPricingDivScript">
    <tr>
        <td>
            <label>#= data.SegmentDetailsToDisplay #</label>
 
        </td>
        <td>
            <input  data-role="dropdownlist" data-value-primitive="true" data-text-field="AirRequestToDisplay" data-value-field="ReservationRequestItemId"
                   data-bind="value: ReservationRequestItemID, source: SegList"  />
        </td>
    </tr>
</script>

 

<div data-role="grid" id="SegmentSelectionGrid" class="margin-top" style="margin-left: 0px;" data-bind="source: AirPNRViewModel.Segments" data-toolbar="<div><i class='fa fa-plane' aria-hidden='true'></i> <b>Flight Segment(s)</b> </div>"
             data-columns='[
                         { "field": "PNRSegment", "title": "PNR Segment","width":"220"},
                     {"field": "RequestRoute","title":"Request Route","width":"80"}]'
             data-row-template="SegmentSelectionGridRowTemplate"></div>

 

Script:

var viewModel = kendo.observable({
SegList :[{"ReservationRequestItemId":1716,"AirRequestToDisplay":"SIN-LAD 03-06-2018"},{"ReservationRequestItemId":1716,"AirRequestToDisplay":"LAD-SIN 13-06-2018"},{"ReservationRequestItemId":1716,"AirRequestToDisplay":"SIN-BKK 02-06-2018"}],
AirPNRViewModel:{
 Segments: [
{"ReservationRequestItemID":0,"SegmentDetailsToDisplay":"TG  410"},
{"ReservationRequestItemID":0,"SegmentDetailsToDisplay":"ET  619"}
 
 ]

 

Luciano Kaesemodel
Top achievements
Rank 1
 answered on 11 Feb 2019
6 answers
447 views

Hello,
        A sample would be hard to show because of complexity. 

Scenario: I have a kendo-template which has Grid in MVVM . When i pass small array/dataSource it is ok but when array / dataSource size grows it slows down in operation. I have 28 array length object which is creating issue of slowness. 

Grid data is set using below code:

var tstDataSource = new kendo.data.DataSource({
                    data: TstData1,
                    group: [{ field: "OptionFilters.PricingPccInformation.PCCCode", dir: "asc" }]
                });
                tstDataSource.read();
                tstGrid.Items.set("Tsts", tstDataSource);

Below code is Grid template Code: 

<script id="ImportPNRPricingFareFamilyRowTemplate" type="text/x-kendo-template">
    <tr data-bind="attr: { class: savedtst }">
        #= new Array($("\#ImportPnrPricingTSTGrid").data('kendoGrid').dataSource.group().length + 1).join('<td class="k-group-cell"></td>') #
        <td>
            #if(data.Segments!=null){#
 
            #for(var x=0; x < data.Segments.length; x++){#
            #if(data.Segments[x].FareBasis!=null){#
            <div> #=data.Segments[x].FareBasis#</div>
            #}else {#
            <div></div>
            #}#
            #}#
 
            #}#
        </td>
        <td>
            <div>
                #if(data.ReservationSystemInternalID>0){#
                <div>#=data.ReservationSystemInternalID#</div>
                #}else {#
                <div></div>
                #}#
            </div>
        </td>
        <td>
            #if(data.OptionFilters.Customer.Name!=null){#
            <div>
                #= data.OptionFilters.ValidatingCarrier.airline_value #
            </div>
            #}else {#
            <div></div>
            #}#
        </td>
        <td>
            #if(data.OptionFilters.Customer!=null){#
            <div id="customer_list">
                #if(data.OptionFilters.Customer.Name!=null){#
                #if(data.OptionFilters.Customer.ShortName!=null){#
 
                <div class="customer-ellipsis" title="#: data.OptionFilters.Customer.Name #"> #=data.OptionFilters.Customer.ShortName# </div>
                #}else {#
                <div class="customer-ellipsis" title="#: data.OptionFilters.Customer.Name #"> #=data.OptionFilters.Customer.Name# </div>
                #}#
                #}else {#
                <div></div>
                #}#
            </div>
            #}else {#
            <div></div>
            #}#
        </td>
        <td>
            <div id="supplier_list">
 
                <input data-role="dropdownlist" data-text-field="ShortName" data-template="SupplierItemTemplate" style="width:280px"
                       required="required" data-supplier-msg="Supplier is invalid" data-value-field="SupplierID"
                       data-value-primitive="false" validationMessage="Supplier is Invalid/Required" data-auto-bind="true"
                       data-bind="value: OptionFilters.SupplierInfo,source: OptionFilters.SupplierSource" />
 
            </div>
        </td>
        <td>
            #if(data.OptionFilters.PricingPccInformation!=null){#
            <div id="supplier_list">
                #if(data.OptionFilters.PricingPccInformation.PCCCode!=null){#
 
                <div title="#: data.OptionFilters.PricingPccInformation.PCCCode #"> #=data.OptionFilters.PricingPccInformation.PCCCode# </div>
                #}else {#
                <div></div>
                #}#
            </div>
            #}else {#
            <div></div>
            #}#
        </td>
        <td>
            #if(data.Segments!=null){#
            #for(var x=0; x < data.Segments.length; x++){#
            <div> #=data.Segments[x].CabinClass#</div>
            #}#
            #}#
        </td>
        <td>
            <input data-role="dropdownlist" class="fare-template" data-option-label=" "
                   data-text-field="Name" data-template="FareItemTemplate" style="width:350px"
                   data-value-field="Id" required="required" data-auto-bind="true"
                   data-value-primitive="true" validationMessage="Fare Template is Invalid/Required"
                   data-bind="value: FareTemplateID,source: FareTypeCodeSource, events: {change : PricingTemplateOnChange,dataBound: OnDataBoundPricingTemplate}" />
        </td>
        <td>
            #if(data.Segments!=null){#
            #for(var x=0; x < data.Segments.length; x++){#
            <div><span> #=data.Segments[x].SegmentDetailsToDisplayPricing#</span></div>
            #}#
            #}#
 
        </td>
        <td>
            #if(data.Segments!=null){#
            #for(var x=0; x < data.Segments.length; x++){#
            #if(data.Segments[x].Baggage.Unit!=null){#
            <div> <span> #=data.Segments[x].Baggage.Quantity#</span> <span> #=data.Segments[x].Baggage.Unit#</span></div>
            #}#
            #}#
            #}#
 
        </td>
        <td>
            #var parentvm=data #
            #if(data.UnitQualifier=='SC'){#
            # var ptc = data.QueryPTC #
            # var paxhtml = "<div style='text-align:left;width:max-content;' class='courierfont'>" #
                # var number= parseInt(1);#
                #for(var x=0; x < data.PNRPassengerInfos.length; x++){#
                #if(ptc.search("CH")>-1) { #
                # if(parentvm.PNRPassengerInfos[x].lkpPassengerType.search("CH") > -1){ #
                # paxhtml = paxhtml + " "+number+". " +parentvm.PNRPassengerInfos[x].PersonName +"<br\>" #
                    # number++ #
                    #}#
                    #}#
                    # if(ptc==parentvm.PNRPassengerInfos[x].lkpPassengerType){ #
                    # paxhtml = paxhtml + " "+number+". " +parentvm.PNRPassengerInfos[x].PersonName +"<br\>" #
                        # number++ #
                        #}#
 
                        #}#
                        #  paxhtml = paxhtml+ "</div>" #
            #=data.UnitQualifier# -> #=data.QueryPTC# <span style="text-align:left;" data-role="tooltip" title="#: paxhtml#"><i class="fa fa-info-circle info-icon" aria-hidden="true"></i> </span>
            #}else {#
            # var ptc = data.QueryPTC#
            # var paxhtml = "<div style='text-align:left;width:max-content;' class='courierfont'>" #
                # var number= parseInt(1)#
 
                #for(var x=0; x < parentvm.PNRPassengerInfos.length; x++){#
                #if(ptc.search("CH")>-1) { #
                # if(parentvm.PNRPassengerInfos[x].lkpPassengerType.search("CH") > -1){ #
                # paxhtml = paxhtml + " "+number+". " +parentvm.PNRPassengerInfos[x].PersonName +"<br\>" #
                    # number++; #
                    #}#
                    #}else {#
                    # paxhtml = paxhtml + " "+number+". " +parentvm.PNRPassengerInfos[x].PersonName +"<br\>" #
                        # number=number+1; #
                        #}#
                        #}#
                        #  paxhtml = paxhtml +"</div>" #
            #=data.QueryPTC# <span style="text-align:left;" data-role="tooltip" title="#: paxhtml#"><i class="fa fa-info-circle info-icon" aria-hidden="true"></i></span>
            #}#
        </td>
        <td>
            <div data-bind="text: Quantity"></div>
        </td>
        <td>
            <div>#= data.PricingCommercialSkeleton.SupplierCommercials.SupplierHeads.CurrencyCode # #= data.PricingCommercialSkeleton.SupplierCommercials.SupplierHeads.NetFareInclTax # </div>
        </td>
        <td>
            <i class="fa fa-check hand text-primary pricing-window-buttons select" title="Select" data-bind="click: SelectFareFamily" aria-hidden="true"></i>
            <i class="fa fa-list-alt hand text-primary pricing-window-buttons minirule" title="Mini Rule" style="display:none;" data-bind="click: SelectMiniRule" aria-hidden="true"></i>
            <i class="fa fa-file-text hand text-primary pricing-window-buttons fullrule" title="Full Rule" data-bind="click: SelectFullRule" aria-hidden="true"></i>
            # if((data.lkpStatus!="D")){ #
            <i class="fa fa-trash text-danger hand pricing-window-buttons deletetst" data-bind="click: DeleteTst"></i>
            #}#
 
            <i class="fa fa-pencil-square-o hand text-primary pricing-window-buttons" style="display:none;" title="Edit" data-bind="click: EditFareFamily" aria-hidden="true"></i>
        </td>
    </tr>
</script>
 
<script id="TstGridTemplate" type="text/x-kendo-template">
 
    <div data-role="grid" id="ImportPnrPricingTSTGrid" style="margin-left: 0px;margin-top: 4px;" data-bind="source: Tsts, events: {dataBound: TSTGridonDataBound}"
         data-columns='[
                 { "field": "FareBasis", "title": "FareBasis"},
                 {"field": "ReservationSystemInternalID","title":"TST/TSM Ref"},
                 {"field": "ReservationSystemInternalID","title":"VC"},
                 {"field": "OptionFilters.Customer.PCCCode", "title": "Customer"},
                 {"field": "OptionFilters.SupplierInfo.DisplayName", "title": "Supplier","width":290},
                 {"field": "OptionFilters.PricingPccInformation.PCCCode", "title": "PricingPCC"},
                 {"field": "CabinClass","title":"Cabin"},
                 {"field": "OptionFilters.FareTypeCode","title":"PricingTemplate","width":360},
                 {"field": "Segments","title":"Segment" ,"width":300,"id":"grid-segment"},
                 {"field": "Baggage","title":"Baggage" },
                 {"field": "UnitQualifier","title":"PTC"},
                 {"field": "Quantity","title":"Qty"},
                 {"field": "SupplierCommercials.SupplierHeads.NetFareInclTax","title":"Total"},
                  {"title":"Action","width":145,command: [
                { text: "Select",  title: "Action"}
 
             ]}
             ]' data-row-template="ImportPNRPricingFareFamilyRowTemplate" data-groupable="false" data-selectable="row"></div>
</script>

    The 'Select' in Action, also renders a template which shows details of row (template code not shared).  please find attached file for dataSource attached to grid . 

Alex Hajigeorgieva
Telerik team
 answered on 11 Feb 2019
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?