Telerik网格控件ClientTemplate

Question

Telerik网格控件ClientTemplate

4

我正在尝试使用C#在我的MVC应用程序中的Telerik网格中显示DateTime时应用一些逻辑，但是在实现时遇到了一些问题。我的第一个问题是我不太明白ClientTemplate调用的确切工作原理。我也无法找到解释它如何工作的文档。因此，解释一下它的工作原理会很有帮助，然后可能具体说明我的示例有什么问题：

columns.Bound(p => p.SetupDate).ClientTemplate("<#= SetupDate == DateTime.Min || SetupDate == null ? string.empty : SetupDate #>")

更新：

我采用了Daniel的建议。我只需从ClientTemplate()中调用此函数即可。以下是最终代码：

// Setup a minDate to mimic C#'s Date.MinDate constant.
var minDate = new Date();
minDate.setFullYear(1, 0, 1);
minDate.setHours(0, 0, 0, 0);

function checkDateWithFormat(d, f)
{
    if (d.getTime() == minDate.getTime())
    {
        return "";
    }
    else
    {
        return d.toString(f);
    }
}

- birdus

我认为你不能在客户端模板中添加那样的逻辑。你应该把逻辑放在你的模型中。 - Forty-Two

据我理解，如果我将那个逻辑放在模型中（即在某些情况下返回空字符串，在这种情况下我将在网格中使用字符串类型而不是DateTime类型），那么排序将无法正常工作。这真的是我在这里尝试解决的整个问题。欢迎任何建议。 - birdus

如果排序是真正的问题，我可能会在模型中创建另一个属性进行排序，可能是一个整数，并使用 SetUpDate 来填充它。然后，您可以将日期格式化为字符串以实现所需的显示效果，而不会失去保持列表正确排序的能力。 - Forty-Two

4个回答

4

客户端模板在javascript中执行，因此您无法使用C＃。任何被“<# #>”包围的内容都对应于您的模型属性。我发现最好的方法是查看Telerik的演示页面，点击这里。

- NullReference

这难道不意味着任何被"<# #>"包围的内容都在服务器上执行吗？否则，它就不知道我的模型，对吧？ - birdus

@birdus "<# #>"并不意味着它在服务器上执行。这是ASP.NET的方式，但这是纯客户端绑定。 - NullReference

0

客户端模板是在客户端上执行的JavaScript代码，其结果将被转换为字符串并用于此处。因此，您不能在ClientTemplate中使用string.Empty，而应该使用''代替。

columns.Bound(p => p.SetupDate)
       .ClientTemplate("<#= (SetupDate == DateTime.Min) || (SetupDate == null) ? '' : SetupDate #>")

- Kirill Bestemyanov

0

我会在模型上定义另外几个属性，以使ClientTemplate更加简洁。

public bool HasSetupDate {
  get {
    return this.SetupDate != DateTime.Min && this.SetupDate != null;
  }
}

public string SetupDate_Str {
  get{
    return this.SetupDate.ToString("MM/dd/yyyy");
  }
}

然后ClientTemplate看起来像这样： .ClientTemplate("<#=HasSetupDate ? SetupDate_Str : '' #>")

- Rustam

我也考虑过这样做，但如果你返回一个字符串（而不是DateTime），那么表格在该列上的排序就会出现问题。 - birdus

我认为您对排序问题有所误解。ClientTemplate仅用于显示数据。在列定义中，您将其绑定到某个属性（这里是.BindTo(m => m.SetupDate)），并且该属性用于对表进行排序。此外，排序发生在服务器端（发出Ajax请求，并使用新数据刷新表）。 - Rustam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel · Accepted Answer

首先，您可能希望确保SetupDate本身可以正常工作。如果可以，请尝试添加括号。

columns.Bound(p => p.SetupDate).ClientTemplate("<#= ((SetupDate == DateTime.Min) || (SetupDate == null)) ? string.Empty : SetupDate #>")

或者您可以尝试使用if语句。

columns.Bound(p => p.SetupDate).ClientTemplate("<# if ((SetupDate != DateTime.Min) && (SetupDate != null)) { #><#= SetupDate #><# } #>")

更新 NullReference所提供的答案是正确的，其中指出您不能在ClientTemplate中使用c#。因此，您不能使用DateTime.Min或string.Empty。

实现相同效果的一种方法是使用javascript函数。将列定义为：

columns.Bound(p => p.SetupDate).ClientTemplate("<#= checkDate(SetupDate) #>")

然后添加javascript函数checkDate()。（可能有更好的查找最小值的方法，但如果它是最小值，则getMilliseconds应该为0。）

<script>
  function checkDate(setupDate) {
    if ((setupDate.getMilliseconds() === 0) || (setupDate === null))
      return '';
    else
      return setupDate;
  }
</script>