Telerik Forums
Kendo UI for jQuery Forum
5 answers
267 views

Hi

Is it possible to use templates in a databound panelbar?

Pseudo:

<ul kendo-panel-bar k-data-source="files.panelData.data()" k-rebind="files.panelData.data()">
    <span k-template>
        <i class="fa fa-folder-open" ng-hide="{{!dataItem.expanded}}"></i>
        <i class="fa fa-folder" ng-hide="{{dataItem.expanded}}"></i>
        {{dataItem.text}} <span ng-show="dataItem.count!= 0">({{dataItem.count}})</span>
    </span>
</ul>

(gives --> k-template without a matching parent widget found. It can be one of the following: ?^^kendoTreeMap, ?^^kendoMobileListView, ?^^kendoMobileScrollView, ?^^kendoListView, ?^^kendoTreeView )

 

 

 

 

Nencho
Telerik team
 answered on 12 Jul 2017
3 answers
389 views

<script type="text/javascript">
function ImgTemplate(data) {
var html = "<img src='" + data + "' />";
return html;
}
</script>
@(Html.Kendo().Grid(Model)
.Name("ObjGrid")
.Mobile(MobileMode.Tablet)
.HtmlAttributes(new { style = "height: 300px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
if (Model != null)
{
foreach (System.Data.DataColumn column in Model.Columns)
{
model.Field(column.ColumnName, column.DataType);
}
}
})
.ServerOperation(false)
)
.Columns(columns =>
{
for (int i = 0; i < ViewBag.ListHeader.GetLength(0); i++)
{
if(ViewBag.ListHeader[i, 0] != null){
if (ViewBag.ListHeader[i, 1] == "imagePath")
{
columns.Bound(ViewBag.ListHeader[i, 0]).Title("Typ").ClientTemplate("#= ImgTemplate(imagePath) #").Width(12);
}

               
else
{
columns.Bound(ViewBag.ListHeader[i, 0]).Title(ViewBag.ListHeader[i, 1]).Width(150);
}
}
}
})
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single))
.ToClientTemplate()
)

 

This code Displays Image properly when run on Desktop Browsers. But the view for tablet with same code does not diosplay Image but Displays the path. This partial view gets embeded in a tab using LoadContentFrom

 

What can cause this

 

Thanks

Anamika

Preslav
Telerik team
 answered on 12 Jul 2017
11 answers
2.9K+ views
Hi
I created a grid using this code
$("#grid").kendoGrid({
          dataSource: {
              transport: {
                   read: { url: "@Url.Action("GridDataSource")", contentType:"application/json; charset=utf-8" }
          }
          },
          columns:[{field:"Name",title:"Name"}]
      });
as You can see data for grid are downloaded from server using function GridDataSource. This function return JSon object.
public JsonResult GridDataSource()
       {
           return Json(ProductsList, JsonRequestBehavior.AllowGet);
       }

For time to time I have to refresh grid however it seems that refresh function doesnt affect grid. So far I've tried
$("#grid").data("kendoGrid").dataSource.read();
 $("#grid").data("kendoGrid").refresh();
$("#grid").data("kendoGrid").dataSource.sync();

Unfortunatelly non of methods presented above is working. Is there any way to force grid to refresh ?
Stefan
Telerik team
 answered on 12 Jul 2017
1 answer
371 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
631 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
755 views
How to filter the rows of hyperlink column.
Stefan
Telerik team
 answered on 12 Jul 2017
5 answers
5.0K+ 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
 answered on 11 Jul 2017
1 answer
406 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.1K+ 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
817 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
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?