Kendo şablonunda dinamik olarak sütunlar nasıl ayarlanır

Question

Kendo kılavuzunda kendo şablonunda dinamik olarak sütunlar nasıl ayarlanır. Kendo kılavuzumda, sütunlar, kullanıcı tercihine göre dinamik olarak değişebilir. Dinamik olarak Kendo Şablonu oluşturmak için? Kendo kullanıyorum JavaScript, Kendo MVC'ye geçiş yapabilirim, eğer oraya ulaşabilirimse, bunu başarmak için başka bir yaklaşım var mı?

<script id="rowTemplate" type="text/x-kendo-template"> 
     <tr class="k-master-row"> 

      <td> 

        <div>#=column1#</div> 

      </td> 
      <td><span class="mydesign" title="column2#"</span></td> 
      <td>#column3#</td> 
      <td>#=column4#</td> 

     </tr> 
    </script> 

Düzenleme: Kendo ızgara, biz dinamik sütunları ayarlıyorsunuz. Şimdi sorun, içerik tablosu ve başlık tablosu için dinamik genişliği nasıl ayarlayacağız. Maksimum genişliği aşarsa yatay kaydırma çubuğunu nasıl etkinleştiririz. Bunu başarmak için herhangi bir yaklaşım var mı?

Answer 1

MVC için kendo kullanmıyorum ama yine de düzenli kendo işlevlerini kullanarak bunu nasıl yapacağımı açıklayabiliyorum.

Temel olarak, bir html dizesini kendo.template'a geçirerek yeni bir kendo şablonu örneği oluşturabilirsiniz. Daha sonra yeni şablon örneğini ızgaranın rowTemplate (veya altRowTemplate) atayabilir ve ızgara tazelemesini zorlamak için dataSource.read() numaralı telefonu arayabilirsiniz.

Kendi html dizginizi oluşturabilir veya sayfanızdaki mevcut bir şablonu güncelleyebilir, daha sonra jquery'nin html() kodunu bir dizeye dönüştürmek için kullanabilirsiniz.

Örnek: Aşağıdaki uygun örneklerinden biri kullanabilir koşullu seçilen etkiye sahip Kendo Grid sütun değeri biçimlendirmek için

var htmlTemplate = ''; 
if (userPreferences.likeRed) { 
    htmlTemplate ='<tr class="k-master-row"><td style="background-color:red">#column1#</td></tr>' 
} else { 
    htmlTemplate ='<tr class="k-master-row"><td style="background-color:green">#column1#</td></tr>' 
} 

$("#grid").data("kendoGrid").rowTemplate = kendo.template(htmlTemplate); 
$("#grid").data("kendoGrid").dataSource.read(); 

Answer 2

. Daha fazla bilgi için: How Do I Have Conditional Logic in a Column Client Template?

Aşağıdaki kullanım örneklerinden bazıları aşağıda verilmiştir. Bu yaklaşımın yardımıyla kolayca farklı şablonlar oluşturabilirsiniz. JavaScript için

Arayüzü: MVC

{ 
    field: "EmployeeName", type: "string", width: "55px", title: "Employee Name", 
     template: "#= GetEditTemplate(data) #" 
} 

arayüzü:

... 
columns.Bound(t => t.EmployeeName) 
     .Title("Status Name") 
     .Template(@<text></text>) 
     .ClientTemplate("#= GetEditTemplate(data)#") 
     .Width("55px"); 
... 

Örnek I: Bu örnekte, Modelgeçirilir "veri" özelliğini kullanarakyöntemi ve model özelliği "if" koşulunda kullanılır.

<script> 
//Change the color of the cell value according to the given condition 
function GetEditTemplate(data) { 
    var html;  
    if (data.StatusID == 1) { 
     html = kendo.format(
     //"<a class=\"k-button\" href='" + '@Url.Action("Edit1", "Controller")' + "/{0}" + " '>Edit</a> ", 
     "<span class='text-success'>" + 
     data.EmployeeName 
     + "</span>" 
     ); 
    } 
    else { 
     html = kendo.format(
     //"<a class=\"k-button\" href='" + '@Url.Action("Edit2", "Controller")' + "/{0}" + " '>Edit</a> ", 
     "<span class='text-danger'>Cancel</span>" 
     ); 
    } 
    return html; 
} 
</script> 

Örnek II: Bu yardımcı olur

<script> 
function Getvalue(value) { 
    // console.log(value); 
    if (value && value != null && value.indexOf("A") == 0) 
     return "<b style='color:red'>" + value + "</b>"; 
    else 
     return ""; 
} 

$(document).ready(function() { 
    $("#grid").kendoGrid({ 
     dataSource: localDataSource, 
     columns: [ 
      { 
       field: "FirstName", 
       title: "First Name", template: '#=Getvalue(FirstName)#' 
      } 
     ], 
    }); 
}); 
</script> 

Umut ...

Answer 3

Bir koleksiyonu hazırlamak, bu, ASP.NET MVC/Jilet çalışacak Dinamik sütun tanımları önceden, sonra cshtml için görünüm modeline koyun. Ardından, koleksiyona geçin ve veri kaynağına, başlık başlığına, istenen genişliğe vb. Uyacak alan adını girin.

 $("#grid-quick").kendoGrid({ 
     pageable: { 
      pageSizes: [10, 20, 50, 100] 
     }, 
     sortable: { mode: "multiple" }, 
     columns: [ 
      @{ 
       foreach (var col in Model.Columns) 
       { 
        @:{ field: "@col.Name.Replace(".","_")", width: "@col.Width" + "px" }, 
       } 
      } 
     ], 
     filterable: false, 
     dataSource: { 
      serverPaging: true, 
      serverSorting: true, 
      pageSize: 20, 
      type: 'aspnetmvc-ajax', 
      schema: { 
       data: "Data", 
       total: "Total", 
       model: { 
        fields: { 
         @{ 
          foreach (var col in Model.Columns) 
          { 
           @: "@col.Name.Replace(".","_")" : { type: "string" }, 
          } 
         } 
        } 
       } 
      }, 
      transport: { 
       read: { 
        url: oVariables.baseURL + "Query/DynamicResults", 
        dataType: "json", 
        type: "post" 
       } 
      } 
     } 
    });